684f929f28
- Add project configuration and git ignore rules - Implement App router with protected routes - Develop course player, grid, and card components - Add state management for course progress and navigation - Initialize database services for course and comment data
85 lines
1.6 KiB
CSS
85 lines
1.6 KiB
CSS
:root {
|
|
/* Typography Tokens */
|
|
--font-display: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
--font-body: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
|
|
/* Border Radii */
|
|
--radius-tag: 980px;
|
|
--radius-button: 980px;
|
|
--radius-card: 8px;
|
|
--radius-image: 8px;
|
|
--radius-input: 8px;
|
|
|
|
/* Shadows */
|
|
--shadow-xl: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
|
|
|
|
/* Layout */
|
|
--page-max-width: 1440px;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
background-color: #000000;
|
|
color: #f4f4f5;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6, .font-display, .font-heading {
|
|
font-family: var(--font-display);
|
|
}
|
|
|
|
/* Hide scrollbar for Chrome, Safari and Opera */
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide scrollbar for IE, Edge and Firefox */
|
|
.hide-scrollbar {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
/* Custom scrollbar for modals & panels */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #09090b;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #27272a;
|
|
border-radius: 980px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #3f3f46;
|
|
}
|
|
|
|
/* Smooth drag cursor */
|
|
.cursor-grab {
|
|
cursor: grab;
|
|
}
|
|
.cursor-grabbing {
|
|
cursor: grabbing;
|
|
user-select: none;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-fade-in-up {
|
|
animation: fadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
}
|