/* StudyBuddy premium AI SaaS theme — foundation tokens, base styles, primitives. Loaded as a global stylesheet alongside Tailwind utility classes. */ :root { /* Brand */ --sb-primary: #1D4ED8; --sb-primary-hover: #2563EB; --sb-primary-soft: rgba(29, 78, 216, 0.15); --sb-primary-glow: rgba(29, 78, 216, 0.35); /* Backgrounds */ --sb-bg: #020817; --sb-bg-2: #071226; --sb-surface: #0F172A; --sb-surface-2: #131E36; --sb-surface-3: #1A2742; /* Borders */ --sb-border: rgba(255, 255, 255, 0.06); --sb-border-strong: rgba(255, 255, 255, 0.10); --sb-border-focus: rgba(29, 78, 216, 0.55); /* Text */ --sb-text: #F8FAFC; --sb-text-muted: #94A3B8; --sb-text-dim: #64748B; /* Accents */ --sb-cyan: #38BDF8; --sb-purple: #7C3AED; --sb-success: #22C55E; --sb-error: #EF4444; --sb-warning: #F59E0B; /* Motion */ --sb-ease: cubic-bezier(0.16, 1, 0.3, 1); --sb-ease-quart: cubic-bezier(0.25, 1, 0.5, 1); --sb-dur-fast: 150ms; --sb-dur-mid: 250ms; --sb-dur-slow: 400ms; } html { background: var(--sb-bg); color: var(--sb-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; } body { background: var(--sb-bg); color: var(--sb-text); } /* Subtle navy grid background with two radial glows. Apply to or any full-bleed container. The grid lines are barely visible (4% white). The glows give a premium AI-product feel without feeling like a gradient banner. */ .bg-grid { background-color: var(--sb-bg); background-image: radial-gradient(ellipse 1100px 600px at 50% -8%, rgba(56, 189, 248, 0.08), transparent 60%), radial-gradient(ellipse 800px 500px at 92% 105%, rgba(29, 78, 216, 0.12), transparent 60%), linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 64px 64px, 64px 64px; background-attachment: fixed; } /* Softer grid for in-app surfaces where the chat needs to dominate. */ .bg-grid-subtle { background-color: var(--sb-bg); background-image: radial-gradient(ellipse 900px 500px at 50% -10%, rgba(56, 189, 248, 0.05), transparent 60%), linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 100% 100%, 64px 64px, 64px 64px; background-attachment: fixed; } /* Premium scrollbar — thin, almost invisible until hovered. */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.18); } /* Selection color */ ::selection { background: rgba(29, 78, 216, 0.40); color: var(--sb-text); } /* ── Component primitives ───────────────────────────────────────── */ /* Card surface with soft elevation and hover lift. */ .sb-card { background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 16px; transition: transform var(--sb-dur-mid) var(--sb-ease), border-color var(--sb-dur-mid) var(--sb-ease), box-shadow var(--sb-dur-mid) var(--sb-ease); } .sb-card-hover:hover { transform: translateY(-2px); border-color: var(--sb-border-strong); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(56, 189, 248, 0.06); } /* Premium primary CTA button — gradient blue with soft glow. */ .sb-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.5rem; border-radius: 12px; background: linear-gradient(180deg, var(--sb-primary-hover) 0%, var(--sb-primary) 100%); color: var(--sb-text); font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.005em; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, 0 8px 24px rgba(29, 78, 216, 0.28), 0 0 0 1px rgba(56, 189, 248, 0.12); transition: transform var(--sb-dur-fast) var(--sb-ease-quart), box-shadow var(--sb-dur-mid) var(--sb-ease-quart); } .sb-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 14px 36px rgba(29, 78, 216, 0.42), 0 0 0 1px rgba(56, 189, 248, 0.20); } .sb-btn-primary:active { transform: translateY(0); } /* Ensure utility .hidden wins over button class display. */ .sb-btn-primary.hidden, .sb-btn-secondary.hidden { display: none; } /* Secondary button — surface with subtle border. */ .sb-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.5rem; border-radius: 12px; background: var(--sb-surface); color: var(--sb-text); border: 1px solid var(--sb-border-strong); font-weight: 500; font-size: 0.9375rem; transition: border-color var(--sb-dur-fast) var(--sb-ease-quart), background var(--sb-dur-fast) var(--sb-ease-quart), transform var(--sb-dur-fast) var(--sb-ease-quart); } .sb-btn-secondary:hover { background: var(--sb-surface-2); border-color: rgba(255, 255, 255, 0.20); transform: translateY(-1px); } /* Floating navy pill badge — used for "AI platform for students" etc. */ .sb-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.22); color: var(--sb-cyan); } .sb-pill-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--sb-success); box-shadow: 0 0 8px var(--sb-success); animation: sb-pulse 2s var(--sb-ease) infinite; } @keyframes sb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* Inputs — dark surface with blue focus glow. */ .sb-input { width: 100%; background: var(--sb-surface); border: 1px solid var(--sb-border-strong); color: var(--sb-text); padding: 0.75rem 1rem; border-radius: 12px; font-size: 0.9375rem; transition: border-color var(--sb-dur-fast) var(--sb-ease-quart), box-shadow var(--sb-dur-fast) var(--sb-ease-quart), background var(--sb-dur-fast) var(--sb-ease-quart); } .sb-input::placeholder { color: var(--sb-text-dim); } .sb-input:focus { outline: none; border-color: var(--sb-border-focus); box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.18); background: var(--sb-surface-2); } /* Visible keyboard focus ring on interactive elements. Mouse clicks don't trigger :focus-visible, so this is invisible to mouse users but lights up for Tab navigation and screen-reader users. */ button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--sb-cyan); outline-offset: 2px; border-radius: 6px; } /* Soft fade-in on load for hero sections. */ @keyframes sb-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .sb-fade-up { animation: sb-fade-up 600ms var(--sb-ease) both; } .sb-fade-up-delay-1 { animation-delay: 80ms; } .sb-fade-up-delay-2 { animation-delay: 160ms; } .sb-fade-up-delay-3 { animation-delay: 240ms; } /* Auth-card glow — used behind centered login/register cards. */ .sb-card-glow::before { content: ''; position: absolute; inset: -40px; z-index: -1; background: radial-gradient(ellipse at center, rgba(29, 78, 216, 0.22), transparent 65%); filter: blur(20px); pointer-events: none; } /* ── Premium motion ──────────────────────────────────────────────── Subtle, never showy. Ease-out curves only (no bounce). Most things are <250ms so the UI never feels heavy. */ /* Modals: scale + fade in. Add `data-sb-modal` to modal panels or rely on the generic match below for known modal IDs. */ @keyframes sb-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } [id$="-modal"]:not(.hidden) > div:not(.hidden):not(#avatar-dropdown), [id$="-modal"]:not(.hidden) > div[class*="modal-content"] { animation: sb-modal-in 220ms var(--sb-ease) both; } /* Modal backdrops: fade in. */ @keyframes sb-backdrop-in { from { opacity: 0; } to { opacity: 1; } } [id$="-modal"]:not(.hidden) { animation: sb-backdrop-in 180ms ease-out both; } /* Buttons: barely-there press feedback on click. */ button:not(:disabled):active, .sb-btn-primary:not(:disabled):active, .sb-btn-secondary:not(:disabled):active { transform: translateY(0.5px); transition-duration: 80ms; } /* Anchor + link transitions in legal/static pages — color only, never layout. */ .legal-prose a { transition: color var(--sb-dur-fast) var(--sb-ease); } /* Empty-state greeting fade-in on the chat dashboard. */ @keyframes sb-empty-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } #empty-state:not(.hidden) > div { animation: sb-empty-fade-in 380ms var(--sb-ease) both; } #empty-state:not(.hidden) > div:nth-child(1) { animation-delay: 0ms; } #empty-state:not(.hidden) > div:nth-child(2) { animation-delay: 80ms; } #empty-state:not(.hidden) > div:nth-child(3) { animation-delay: 160ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ── All modals: safe-area + reachable close button ───────────────── Applies to every