diff --git a/app/globals.css b/app/globals.css index a2dc41e..a7a53db 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,26 +1,1601 @@ -@import "tailwindcss"; - :root { - --background: #ffffff; - --foreground: #171717; + /* Primitive Color Tokens */ + --color-white: rgba(255, 255, 255, 1); + --color-black: rgba(0, 0, 0, 1); + --color-cream-50: rgba(252, 252, 249, 1); + --color-cream-100: rgba(255, 255, 253, 1); + --color-gray-200: rgba(245, 245, 245, 1); + --color-gray-300: rgba(167, 169, 169, 1); + --color-gray-400: rgba(119, 124, 124, 1); + --color-slate-500: rgba(98, 108, 113, 1); + --color-brown-600: rgba(94, 82, 64, 1); + --color-charcoal-700: rgba(31, 33, 33, 1); + --color-charcoal-800: rgba(38, 40, 40, 1); + --color-slate-900: rgba(19, 52, 59, 1); + --color-teal-300: rgba(50, 184, 198, 1); + --color-teal-400: rgba(45, 166, 178, 1); + --color-teal-500: rgba(33, 128, 141, 1); + --color-teal-600: rgba(29, 116, 128, 1); + --color-teal-700: rgba(26, 104, 115, 1); + --color-teal-800: rgba(41, 150, 161, 1); + --color-red-400: rgba(255, 84, 89, 1); + --color-red-500: rgba(192, 21, 47, 1); + --color-orange-400: rgba(230, 129, 97, 1); + --color-orange-500: rgba(168, 75, 47, 1); + + /* RGB versions for opacity control */ + --color-brown-600-rgb: 94, 82, 64; + --color-teal-500-rgb: 33, 128, 141; + --color-slate-900-rgb: 19, 52, 59; + --color-slate-500-rgb: 98, 108, 113; + --color-red-500-rgb: 192, 21, 47; + --color-red-400-rgb: 255, 84, 89; + --color-orange-500-rgb: 168, 75, 47; + --color-orange-400-rgb: 230, 129, 97; + + /* Background color tokens (Light Mode) */ + --color-bg-1: rgb(105, 163, 255); /* Light blue */ + --color-bg-2: rgba(162, 255, 96, 0.08); /* Light yellow */ + --color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */ + --color-bg-4: rgba(255, 122, 122, 0.08); /* Light red */ + --color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */ + --color-bg-6: rgba(252, 173, 117, 0.08); /* Light orange */ + --color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */ + --color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */ + + /* Semantic Color Tokens (Light Mode) */ + --color-background: var(--color-cream-50); + --color-surface: var(--color-cream-100); + --color-text: var(--color-slate-900); + --color-text-secondary: var(--color-slate-500); + --color-primary: var(--color-teal-500); + --color-primary-hover: var(--color-teal-600); + --color-primary-active: var(--color-teal-700); + --color-secondary: rgba(var(--color-brown-600-rgb), 0.12); + --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2); + --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25); + --color-border: rgba(var(--color-brown-600-rgb), 0.2); + --color-btn-primary-text: var(--color-cream-50); + --color-card-border: rgba(var(--color-brown-600-rgb), 0.12); + --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12); + --color-error: var(--color-red-500); + --color-success: var(--color-teal-500); + --color-warning: var(--color-orange-500); + --color-info: var(--color-slate-500); + --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4); + --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8); + + /* Common style patterns */ + --focus-ring: 0 0 0 3px var(--color-focus-ring); + --focus-outline: 2px solid var(--color-primary); + --status-bg-opacity: 0.15; + --status-border-opacity: 0.25; + --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + + /* RGB versions for opacity control */ + --color-success-rgb: 33, 128, 141; + --color-error-rgb: 192, 21, 47; + --color-warning-rgb: 168, 75, 47; + --color-info-rgb: 98, 108, 113; + + /* Typography */ + --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, + Monaco, Consolas, monospace; + --font-size-xs: 11px; + --font-size-sm: 12px; + --font-size-base: 14px; + --font-size-md: 14px; + --font-size-lg: 16px; + --font-size-xl: 18px; + --font-size-2xl: 20px; + --font-size-3xl: 24px; + --font-size-4xl: 30px; + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 550; + --font-weight-bold: 600; + --line-height-tight: 1.2; + --line-height-normal: 1.5; + --letter-spacing-tight: -0.01em; + + /* Spacing */ + --space-0: 0; + --space-1: 1px; + --space-2: 2px; + --space-4: 4px; + --space-6: 6px; + --space-8: 8px; + --space-10: 10px; + --space-12: 12px; + --space-16: 16px; + --space-20: 20px; + --space-24: 24px; + --space-32: 32px; + + /* Border Radius */ + --radius-sm: 6px; + --radius-base: 8px; + --radius-md: 10px; + --radius-lg: 12px; + --radius-full: 9999px; + + /* Shadows */ + --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02); + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), + 0 2px 4px -1px rgba(0, 0, 0, 0.02); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), + 0 4px 6px -2px rgba(0, 0, 0, 0.02); + --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15), + inset 0 -1px 0 rgba(0, 0, 0, 0.03); + + /* Animation */ + --duration-fast: 150ms; + --duration-normal: 250ms; + --ease-standard: cubic-bezier(0.16, 1, 0.3, 1); + + /* Layout */ + --container-sm: 640px; + --container-md: 768px; + --container-lg: 1024px; + --container-xl: 1280px; + } + + /* Dark mode colors */ + /* ========================================= + LIGHT MODE — SECTION DEPTH & PARTITIONS + ========================================= */ + +[data-color-scheme="light"] section { + position: relative; + background: var(--color-background); +} + +[data-color-scheme="light"] section::before { + content: ""; + position: absolute; + inset: 0; + pointer-events: none; + + background: linear-gradient( + to bottom, + rgba(0, 0, 0, 0.04), + transparent 18%, + transparent 82%, + rgba(0, 0, 0, 0.04) + ); +} +[data-color-scheme="light"] section + section { + border-top: 1px solid rgba(0, 0, 0, 0.08); } +[data-color-scheme="light"] .card, +[data-color-scheme="light"] .panel, +[data-color-scheme="light"] .feature { + background: #ffffff; + border: 1px solid rgba(0, 0, 0, 0.08); + box-shadow: + 0 1px 0 rgba(0, 0, 0, 0.04), + 0 12px 30px rgba(0, 0, 0, 0.08); +} +[data-color-scheme="light"] #hero + section { + border-top: none; +} + + /* Data attribute for manual theme switching */ + [data-color-scheme="dark"] { + /* RGB versions for opacity control (dark mode) */ + --color-gray-400-rgb: 119, 124, 124; + --color-teal-300-rgb: 50, 184, 198; + --color-gray-300-rgb: 167, 169, 169; + --color-gray-200-rgb: 245, 245, 245; + + /* Colorful background palette - Dark Mode */ + --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */ + --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */ + --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */ + --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */ + --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */ + --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */ + --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */ + --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */ + + /* Semantic Color Tokens (Dark Mode) */ + --color-background: var(--color-charcoal-700); + --color-surface: var(--color-charcoal-800); + --color-text: var(--color-gray-200); + --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7); + --color-primary: var(--color-teal-300); + --color-primary-hover: var(--color-teal-400); + --color-primary-active: var(--color-teal-800); + --color-secondary: rgba(var(--color-gray-400-rgb), 0.15); + --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25); + --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3); + --color-border: rgba(var(--color-gray-400-rgb), 0.3); + --color-error: var(--color-red-400); + --color-success: var(--color-teal-300); + --color-warning: var(--color-orange-400); + --color-info: var(--color-gray-300); + --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4); + --color-btn-primary-text: var(--color-slate-900); + --color-card-border: rgba(var(--color-gray-400-rgb), 0.15); + --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15); + --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), + inset 0 -1px 0 rgba(0, 0, 0, 0.15); + --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2); + --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8); + + /* Common style patterns - updated for dark mode */ + --focus-ring: 0 0 0 3px var(--color-focus-ring); + --focus-outline: 2px solid var(--color-primary); + --status-bg-opacity: 0.15; + --status-border-opacity: 0.25; + --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + + /* RGB versions for dark mode */ + --color-success-rgb: var(--color-teal-300-rgb); + --color-error-rgb: var(--color-red-400-rgb); + --color-warning-rgb: var(--color-orange-400-rgb); + --color-info-rgb: var(--color-gray-300-rgb); + } + /* ===================================================== + LIGHT MODE — Elegant Sky Blue (Student Friendly) + ===================================================== */ + +[data-color-scheme="light"] { + /* RGB helpers */ + --color-primary-rgb: 244, 114, 182; + --color-slate-900-rgb: 15, 23, 42; + + /* Core surfaces */ + --color-background: #fdf2f8; /* very light pink */ + --color-surface: #ffffff; /* pure white cards */ -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); + /* Text */ + --color-text: #0f172a; /* slate-900 */ + --color-text-secondary: #475569; + + /* Primary (Pink) */ + --color-primary: #f472b6; + --color-primary-hover: #ec4899; + --color-primary-active: #db2777; + + /* Secondary (White-based UI) */ + --color-secondary: #ffffff; + --color-secondary-hover: rgba(15, 23, 42, 0.04); + --color-secondary-active: rgba(15, 23, 42, 0.08); + + /* Borders */ + --color-border: rgba(15, 23, 42, 0.12); + --color-card-border: rgba(15, 23, 42, 0.08); + --color-card-border-inner: rgba(15, 23, 42, 0.05); + + /* Buttons */ + --color-btn-primary-text: #ffffff; /* white text works better on dark pink */ + + /* Status colors (kept calm) */ + --color-success: #14b8a6; + --color-warning: #f59e0b; + --color-error: #ef4444; + --color-info: #f472b6; + + /* Status RGB */ + --color-success-rgb: 20, 184, 166; + --color-warning-rgb: 245, 158, 11; + --color-error-rgb: 239, 68, 68; + --color-info-rgb: 244, 114, 182; + + /* Focus */ + --color-focus-ring: rgba(244, 114, 182, 0.6); + + /* Select caret */ + --color-select-caret: rgba(15, 23, 42, 0.8); } -@media (prefers-color-scheme: dark) { + + + /* Base styles */ + html { + font-size: var(--font-size-base); + font-family: var(--font-family-base); + line-height: var(--line-height-normal); + color: var(--color-text); + background-color: var(--color-background); + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + } + + body { + margin: 0; + padding: 0; + } + + *, + *::before, + *::after { + box-sizing: inherit; + } + + /* Typography */ + h1, + h2, + h3, + h4, + h5, + h6 { + margin: 0; + font-weight: var(--font-weight-semibold); + line-height: var(--line-height-tight); + color: var(--color-text); + letter-spacing: var(--letter-spacing-tight); + } + + h1 { + font-size: var(--font-size-4xl); + } + h2 { + font-size: var(--font-size-3xl); + } + h3 { + font-size: var(--font-size-2xl); + } + h4 { + font-size: var(--font-size-xl); + } + h5 { + font-size: var(--font-size-lg); + } + h6 { + font-size: var(--font-size-md); + } + + p { + margin: 0 0 var(--space-16) 0; + } + + a { + color: var(--color-primary); + text-decoration: none; + transition: color var(--duration-fast) var(--ease-standard); + } + + a:hover { + color: var(--color-primary-hover); + } + + code, + pre { + font-family: var(--font-family-mono); + font-size: calc(var(--font-size-base) * 0.95); + background-color: var(--color-secondary); + border-radius: var(--radius-sm); + } + + code { + padding: var(--space-1) var(--space-4); + } + + pre { + padding: var(--space-16); + margin: var(--space-16) 0; + overflow: auto; + border: 1px solid var(--color-border); + } + + pre code { + background: none; + padding: 0; + } + + /* Buttons */ + .btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: var(--space-8) var(--space-16); + border-radius: var(--radius-base); + font-size: var(--font-size-base); + font-weight: 500; + line-height: 1.5; + cursor: pointer; + transition: all var(--duration-normal) var(--ease-standard); + border: none; + text-decoration: none; + position: relative; + } + + .btn:focus-visible { + outline: none; + box-shadow: var(--focus-ring); + } + + .btn--primary { + background: var(--color-primary); + color: var(--color-btn-primary-text); + } + + .btn--primary:hover { + background: var(--color-primary-hover); + } + + .btn--primary:active { + background: var(--color-primary-active); + } + + .btn--secondary { + background: var(--color-secondary); + color: var(--color-text); + } + + .btn--secondary:hover { + background: var(--color-secondary-hover); + } + + .btn--secondary:active { + background: var(--color-secondary-active); + } + + .btn--outline { + background: transparent; + border: 1px solid var(--color-border); + color: var(--color-text); + } + + .btn--outline:hover { + background: var(--color-secondary); + } + + .btn--sm { + padding: var(--space-4) var(--space-12); + font-size: var(--font-size-sm); + border-radius: var(--radius-sm); + } + + .btn--lg { + padding: var(--space-10) var(--space-20); + font-size: var(--font-size-lg); + border-radius: var(--radius-md); + } + + .btn--full-width { + width: 100%; + } + + .btn:disabled { + opacity: 0.5; + cursor: not-allowed; + } + + /* Form elements */ + .form-control { + display: block; + width: 100%; + padding: var(--space-8) var(--space-12); + font-size: var(--font-size-md); + line-height: 1.5; + color: var(--color-text); + background-color: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius-base); + transition: border-color var(--duration-fast) var(--ease-standard), + box-shadow var(--duration-fast) var(--ease-standard); + } + + textarea.form-control { + font-family: var(--font-family-base); + font-size: var(--font-size-base); + } + + select.form-control { + padding: var(--space-8) var(--space-12); + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-image: var(--select-caret-light); + background-repeat: no-repeat; + background-position: right var(--space-12) center; + background-size: 16px; + padding-right: var(--space-32); + } + + /* ===================================================== + DARK MODE — SUPER AMOLED (True Black) + ===================================================== */ + +[data-color-scheme="dark"] { + /* Core surfaces */ + --color-background: #000000; + --color-surface: #050505; + + /* Text */ + --color-text: #ffe5f0; + --color-text-secondary: rgba(255, 229, 240, 0.65); + + /* Primary (Neon Pink) */ + --color-primary: #ff7eb3; + --color-primary-hover: #ff99c2; + --color-primary-active: #ffb8d1; + + /* Secondary (Dark glass) */ + --color-secondary: rgba(255, 255, 255, 0.04); + --color-secondary-hover: rgba(255, 255, 255, 0.08); + --color-secondary-active: rgba(255, 255, 255, 0.12); + + /* Borders */ + --color-border: rgba(255, 126, 179, 0.18); + --color-card-border: rgba(255, 126, 179, 0.12); + --color-card-border-inner: rgba(255, 255, 255, 0.06); + + /* Buttons */ + --color-btn-primary-text: #1a000d; + + /* Status */ + --color-success: #2ef2c4; + --color-warning: #ffb020; + --color-error: #ff4d5a; + --color-info: #ff7eb3; + + /* RGB helpers */ + --color-success-rgb: 46, 242, 196; + --color-warning-rgb: 255, 176, 32; + --color-error-rgb: 255, 77, 90; + --color-info-rgb: 255, 126, 179; + + /* Focus */ + --color-focus-ring: rgba(255, 126, 179, 0.55); + + /* Caret */ + --color-select-caret: rgba(255, 229, 240, 0.9); +} + + + [data-color-scheme="light"] select.form-control { + background-image: var(--select-caret-light); + } + + .form-control:focus { + border-color: var(--color-primary); + outline: var(--focus-outline); + } + + .form-label { + display: block; + margin-bottom: var(--space-8); + font-weight: var(--font-weight-medium); + font-size: var(--font-size-sm); + } + + .form-group { + margin-bottom: var(--space-16); + } + + /* Card component */ + .card { + background-color: var(--color-surface); + border-radius: var(--radius-lg); + border: 1px solid var(--color-card-border); + box-shadow: var(--shadow-sm); + overflow: hidden; + transition: box-shadow var(--duration-normal) var(--ease-standard); + } + + .card:hover { + box-shadow: var(--shadow-md); + } + + .card__body { + padding: var(--space-16); + } + + .card__header, + .card__footer { + padding: var(--space-16); + border-bottom: 1px solid var(--color-card-border-inner); + } + + /* Status indicators - simplified with CSS variables */ + .status { + display: inline-flex; + align-items: center; + padding: var(--space-6) var(--space-12); + border-radius: var(--radius-full); + font-weight: var(--font-weight-medium); + font-size: var(--font-size-sm); + } + + .status--success { + background-color: rgba( + var(--color-success-rgb, 33, 128, 141), + var(--status-bg-opacity) + ); + color: var(--color-success); + border: 1px solid + rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity)); + } + + .status--error { + background-color: rgba( + var(--color-error-rgb, 192, 21, 47), + var(--status-bg-opacity) + ); + color: var(--color-error); + border: 1px solid + rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity)); + } + + .status--warning { + background-color: rgba( + var(--color-warning-rgb, 168, 75, 47), + var(--status-bg-opacity) + ); + color: var(--color-warning); + border: 1px solid + rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity)); + } + + .status--info { + background-color: rgba( + var(--color-info-rgb, 98, 108, 113), + var(--status-bg-opacity) + ); + color: var(--color-info); + border: 1px solid + rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity)); + } + + /* Container layout */ + .container { + width: 100%; + margin-right: auto; + margin-left: auto; + padding-right: var(--space-16); + padding-left: var(--space-16); + } + + @media (min-width: 640px) { + .container { + max-width: var(--container-sm); + } + } + @media (min-width: 768px) { + .container { + max-width: var(--container-md); + } + } + @media (min-width: 1024px) { + .container { + max-width: var(--container-lg); + } + } + @media (min-width: 1280px) { + .container { + max-width: var(--container-xl); + } + } + + /* Utility classes */ + .flex { + display: flex; + } + .flex-col { + flex-direction: column; + } + .items-center { + align-items: center; + } + .justify-center { + justify-content: center; + } + .justify-between { + justify-content: space-between; + } + .gap-4 { + gap: var(--space-4); + } + .gap-8 { + gap: var(--space-8); + } + .gap-16 { + gap: var(--space-16); + } + + .m-0 { + margin: 0; + } + .mt-8 { + margin-top: var(--space-8); + } + .mb-8 { + margin-bottom: var(--space-8); + } + .mx-8 { + margin-left: var(--space-8); + margin-right: var(--space-8); + } + .my-8 { + margin-top: var(--space-8); + margin-bottom: var(--space-8); + } + + .p-0 { + padding: 0; + } + .py-8 { + padding-top: var(--space-8); + padding-bottom: var(--space-8); + } + .px-8 { + padding-left: var(--space-8); + padding-right: var(--space-8); + } + .py-16 { + padding-top: var(--space-16); + padding-bottom: var(--space-16); + } + .px-16 { + padding-left: var(--space-16); + padding-right: var(--space-16); + } + + .block { + display: block; + } + .hidden { + display: none; + } + + /* Accessibility */ + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } + + :focus-visible { + outline: var(--focus-outline); + outline-offset: 2px; + } + + /* Dark mode specifics */ + [data-color-scheme="dark"] .btn--outline { + border: 1px solid var(--color-border-secondary); + } + + @font-face { + font-family: 'FKGroteskNeue'; + src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2') + format('woff2'); + } + + /* END PERPLEXITY DESIGN SYSTEM */ + css :root { - --background: #0a0a0a; - --foreground: #ededed; + /* Legacy variable mappings for compatibility */ + --primary: var(--color-primary); + --primary-dark: var(--color-primary-hover); + --primary-light: var(--color-secondary); + --text-primary: var(--color-text); + --text-secondary: var(--color-text-secondary); + --text-light: var(--color-text-secondary); + --border: var(--color-border); + --bg-light: var(--color-background); + --bg-lighter: var(--color-background); + --white: var(--color-white); + --black: var(--color-black); + } + + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + html { + scroll-behavior: smooth; + } + + body { + font-family: var(--font-family-base); + color: var(--color-text); + background: var(--color-surface); + line-height: var(--line-height-normal); + } + + .container { + max-width: var(--container-xl); + margin: 0 auto; + padding: 0 var(--space-20); + } + + /* Navigation */ + .navbar { + position: fixed; + top: 0; + width: 100%; + height: 70px; + background: rgba(var(--color-surface), 0.98); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--color-border); + z-index: 1000; + box-shadow: var(--shadow-sm); + } + + .nav-container { + max-width: 1400px; + height: 100%; + margin: 0 auto; + padding: 0 var(--space-32); + display: flex; + justify-content: space-between; + align-items: center; + } + + .nav-logo { + display: flex; + align-items: center; + gap: var(--space-8); + font-weight: var(--font-weight-bold); + font-size: var(--font-size-xl); + color: var(--color-primary); + text-decoration: none; + transition: color var(--duration-fast) var(--ease-standard); + } + + .nav-logo:hover { + color: var(--color-primary-hover); + } + + .logo-icon { + font-size: var(--font-size-3xl); + } + + .nav-links { + display: flex; + list-style: none; + gap: 40px; + position: absolute; + left: 50%; + transform: translateX(-50%); + } + + .nav-link { + text-decoration: none; + color: var(--color-text-secondary); + font-weight: var(--font-weight-medium); + font-size: var(--font-size-base); + cursor: pointer; + transition: color var(--duration-fast) var(--ease-standard); + } + + .nav-link:hover { + color: var(--color-primary); + } + + .nav-link:focus-visible { + outline: var(--focus-outline); + outline-offset: 2px; + } + + .nav-actions { + display: flex; + gap: var(--space-12); + align-items: center; + } + + .btn-text { + color: var(--color-text-secondary); + text-decoration: none; + font-weight: var(--font-weight-semibold); + font-size: var(--font-size-base); + cursor: pointer; + background: none; + border: none; + transition: color var(--duration-fast) var(--ease-standard); + } + + .btn-text:hover { + color: var(--color-primary); + } + + .btn-text:focus-visible { + outline: var(--focus-outline); + outline-offset: 2px; + } + + .btn-primary { + background: var(--color-primary); + color: var(--color-btn-primary-text); + padding: var(--space-8) var(--space-20); + border-radius: var(--radius-base); + font-weight: var(--font-weight-semibold); + font-size: var(--font-size-base); + text-decoration: none; + cursor: pointer; + border: none; + box-shadow: var(--shadow-md); + transition: all var(--duration-normal) var(--ease-standard); + } + + + .btn-primary:hover { + background: var(--color-primary-hover); + box-shadow: var(--shadow-lg); + transform: translateY(-1px); + } + + .btn-primary:active { + background: var(--color-primary-active); + transform: translateY(0); + } + + .btn-primary:focus-visible { + outline: none; + box-shadow: var(--focus-ring), var(--shadow-lg); + } + + .btn-secondary { + background: var(--color-surface); + color: var(--color-text); + padding: var(--space-8) var(--space-20); + border: 1px solid var(--color-border); + border-radius: var(--radius-base); + font-weight: var(--font-weight-semibold); + font-size: var(--font-size-base); + text-decoration: none; + cursor: pointer; + transition: all var(--duration-normal) var(--ease-standard); + } + + .btn-secondary:hover { + border-color: var(--color-primary); + color: var(--color-primary); + background: var(--color-secondary); + } + + .btn-secondary:active { + background: var(--color-secondary-active); + } + + .btn-secondary:focus-visible { + outline: none; + box-shadow: var(--focus-ring); + } + + .btn-lg { + padding: var(--space-12) var(--space-32); + font-size: var(--font-size-lg); + } + + .btn-full { + width: 100%; + } + + .burger { + display: none; + flex-direction: column; + gap: 5px; + cursor: pointer; + background: none; + border: none; + padding: var(--space-4); + } + + .burger:focus-visible { + outline: var(--focus-outline); + outline-offset: 2px; + } + + .burger span { + width: 20px; + height: 2px; + background: var(--color-primary); + transition: all var(--duration-normal) var(--ease-standard); + } + + /* Hero Section */ + .hero { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 70px var(--space-20) 80px; + position: relative; + overflow: hidden; + background: var(--color-background); + } + + .hero-content { + position: relative; + z-index: 10; + max-width: 1000px; + text-align: center; + } + + .hero-title { + font-size: clamp(var(--font-size-3xl), 8vw, 56px); + font-weight: 800; + line-height: var(--line-height-tight); + margin-bottom: var(--space-20); + color: var(--color-text); + letter-spacing: var(--letter-spacing-tight); + } + + .gradient-text { + color: var(--color-primary); + } + + .hero-subtitle { + font-size: var(--font-size-xl); + color: var(--color-text-secondary); + margin-bottom: 50px; + max-width: 600px; + margin-left: auto; + margin-right: auto; + line-height: var(--line-height-normal); + } + + .hero-logo-section { + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 50px; + } + + .logo-circle { + width: 500px; + height: 500px; + background: var(--color-secondary); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + background: radial-gradient( + circle at top left, + #fbcfe8 0%, + #f472b6 45%, + #ec4899 75%, + #fdf2f8 100% + ); + + box-shadow: + 0 20px 40px rgba(244, 114, 182, 0.35), + inset 0 0 0 1px rgba(255, 255, 255, 0.6); + + position: relative; + } + + [data-color-scheme="dark"] .logo-circle { + background: radial-gradient( + circle at top left, + #ffb8d1 0%, + #ff7eb3 35%, + #ff4d94 65%, + #1a000d 100% + ); + + box-shadow: + 0 0 40px rgba(255, 126, 179, 0.55), + inset 0 0 0 1px rgba(255, 255, 255, 0.08); + } + + + .custom-logo { + width: 85%; + height: auto; + object-fit: contain; + + filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15)); + } + + .hero-cta { + display: flex; + gap: var(--space-16); + justify-content: center; + flex-wrap: wrap; + } + + .hero-bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + overflow: hidden; + } + + .gradient-orb { + position: absolute; + border-radius: 50%; + filter: blur(80px); + opacity: 0.08; + } + [data-color-scheme="dark"] .gradient-orb { + opacity: 0.18; + filter: saturate(120%) blur(80px); } + + + .orb-1 { + width: 400px; + height: 400px; + background: var(--color-primary); + top: -100px; + right: -50px; + } + + .orb-2 { + width: 300px; + height: 300px; + background: var(--color-primary); + bottom: -50px; + left: 10%; + } + + /* Sections */ + .section { + padding: 80px var(--space-20); + } + + .section-header { + text-align: center; + max-width: 600px; + margin: 0 auto 60px; + } + + .section-header h2 { + font-size: clamp(var(--font-size-2xl), 5vw, 42px); + font-weight: 800; + margin-bottom: var(--space-16); + color: var(--color-text); + letter-spacing: var(--letter-spacing-tight); + } + + .section-header p { + font-size: var(--font-size-lg); + color: var(--color-text-secondary); + line-height: var(--line-height-normal); + } + + /* Features */ + .features { + background: var(--color-surface); + } + + .features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: var(--space-24); + } + + .feature-item { + padding: var(--space-32); + background: var(--color-surface); + border-radius: var(--radius-lg); + border: 1px solid var(--color-card-border); + text-align: center; + transition: all var(--duration-normal) var(--ease-standard); + } + + .feature-item:hover { + border-color: var(--color-primary); + box-shadow: var(--shadow-md); + transform: translateY(-2px); + } + + .feature-icon { + font-size: 48px; + margin-bottom: var(--space-16); + display: block; + } + + .feature-item h3 { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-bold); + margin-bottom: var(--space-12); + color: var(--color-text); + } + + .feature-item p { + font-size: var(--font-size-base); + color: var(--color-text-secondary); + line-height: var(--line-height-normal); + } + + /* How It Works */ + .how-it-works { + background: var(--color-background); + } + + .steps-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: var(--space-32); + } + + .step-card { + padding: 40px var(--space-32); + background: var(--color-surface); + border-radius: var(--radius-lg); + border: 1px solid var(--color-card-border); + text-align: center; + transition: all var(--duration-normal) var(--ease-standard); + } + + .step-card:hover { + border-color: var(--color-primary); + box-shadow: var(--shadow-md); + transform: translateY(-2px); + } + + .step-number { + font-size: 48px; + font-weight: 800; + color: var(--color-primary); + margin-bottom: var(--space-16); + } + + .step-card h3 { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-bold); + margin-bottom: var(--space-12); + color: var(--color-text); + } + + .step-card p { + font-size: var(--font-size-base); + color: var(--color-text-secondary); + margin-bottom: var(--space-24); + line-height: var(--line-height-normal); + } + + .step-illustration { + font-size: 64px; + } + + /* CTA */ + .cta { + background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); + color: var(--color-btn-primary-text); + text-align: center; + padding: 100px var(--space-20); + } + + .cta h2 { + font-size: clamp(var(--font-size-3xl), 6vw, 48px); + font-weight: 800; + margin-bottom: var(--space-16); + letter-spacing: var(--letter-spacing-tight); + } + + .cta p { + font-size: var(--font-size-xl); + margin-bottom: 40px; + opacity: 0.95; + line-height: var(--line-height-normal); + } + + .cta-buttons { + display: flex; + gap: var(--space-16); + justify-content: center; + flex-wrap: wrap; + } + + .cta .btn-primary { + background: var(--color-surface); + color: var(--color-primary); + box-shadow: var(--shadow-lg); + } + + .cta .btn-primary:hover { + background: var(--color-background); + box-shadow: var(--shadow-lg); + transform: translateY(-1px); + } + + .cta .btn-secondary { + background: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.5); + color: var(--color-btn-primary-text); + } + + .cta .btn-secondary:hover { + background: rgba(255, 255, 255, 0.3); + border-color: var(--color-white); + } + + /* Footer */ + .footer { + background: var(--color-background); + color: var(--color-text); + padding: 60px var(--space-20) var(--space-32); + border-top: 1px solid var(--color-border); + } + + .footer-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 40px; + margin-bottom: 40px; + } + + .footer-col h4 { + font-size: var(--font-size-lg); + font-weight: var(--font-weight-bold); + margin-bottom: var(--space-16); + color: var(--color-text); + } + + .footer-col p { + font-size: var(--font-size-base); + margin-bottom: var(--space-16); + color: var(--color-text-secondary); + line-height: var(--line-height-normal); + } + + .footer-col ul { + list-style: none; + } + + .footer-col ul li { + margin-bottom: var(--space-10); + } + + .footer-col a { + color: var(--color-text-secondary); + text-decoration: none; + font-size: var(--font-size-base); + transition: color var(--duration-fast) var(--ease-standard); + } + + .footer-col a:hover { + color: var(--color-primary); + } + + .footer-col a:focus-visible { + outline: var(--focus-outline); + outline-offset: 2px; + } + + .social-links { + display: flex; + gap: var(--space-16); + margin-top: var(--space-16); + } + + .social-links a:focus-visible { + outline: var(--focus-outline); + outline-offset: 2px; + border-radius: var(--radius-sm); + } + + .footer-bottom { + border-top: 1px solid var(--color-border); + padding-top: var(--space-32); + text-align: center; + font-size: var(--font-size-base); + color: var(--color-text-secondary); + } + + /* Responsive */ + @media (max-width: 1024px) { + .logo-circle { + width: 700px; + height: 700px; + } + .custom-logo { + width: 450px; + height: 450px; + } + } + + @media (max-width: 768px) { + .nav-links { + display: none; + } + .burger { + display: flex; + } + .hero-title { + font-size: clamp(var(--font-size-2xl), 6vw, 36px); + } + .logo-circle { + width: 450px; + height: 450px; + } + .custom-logo { + width: 300px; + height: 300px; + } + .section-header h2 { + font-size: clamp(var(--font-size-xl), 4vw, 32px); + } + .cta h2 { + font-size: clamp(var(--font-size-2xl), 5vw, 36px); + } + .section { + padding: 60px var(--space-16); + } + .features-grid { + grid-template-columns: 1fr; + } + .steps-grid { + grid-template-columns: 1fr; + } + } + + @media (max-width: 480px) { + .container { + padding: 0 var(--space-16); + } + .nav-container { + padding: 0 var(--space-16); + } + .nav-logo { + font-size: var(--font-size-lg); + } + .logo-icon { + font-size: var(--font-size-xl); + } + .hero { + padding: 70px var(--space-16) 60px; + } + .hero-title { + font-size: var(--font-size-2xl); + margin-bottom: var(--space-16); + } + .hero-subtitle { + font-size: var(--font-size-base); + margin-bottom: var(--space-32); + } + .logo-circle { + width: 280px; + height: 280px; + } + .custom-logo { + width: 180px; + height: 180px; + } + .hero-cta { + flex-direction: column; + gap: var(--space-12); + } + .btn-lg { + padding: var(--space-10) var(--space-24); + font-size: var(--font-size-base); + } + .section { + padding: 50px var(--space-16); + } + .section-header { + margin-bottom: 40px; + } + .section-header h2 { + font-size: var(--font-size-xl); + margin-bottom: var(--space-12); + } + .section-header p { + font-size: var(--font-size-base); + } + .features-grid { + gap: var(--space-16); + } + .feature-item { + padding: var(--space-24); + } + .feature-item h3 { + font-size: var(--font-size-lg); + } + .feature-item p { + font-size: var(--font-size-sm); + } + .steps-grid { + gap: var(--space-20); + } + .step-card { + padding: var(--space-24); + } + .step-number { + font-size: 36px; + } + .step-card h3 { + font-size: var(--font-size-lg); + } + .step-card p { + font-size: var(--font-size-sm); + margin-bottom: var(--space-16); + } + .step-illustration { + font-size: 48px; + } + .cta { + padding: 60px var(--space-16); + } + .cta h2 { + font-size: var(--font-size-2xl); + } + .cta p { + font-size: var(--font-size-base); + margin-bottom: var(--space-32); + } + .cta-buttons { + flex-direction: column; + gap: var(--space-12); + } + .footer { + padding: 40px var(--space-16) var(--space-24); + } + .footer-content { + grid-template-columns: 1fr; + gap: var(--space-32); + margin-bottom: var(--space-32); + } + .footer-bottom { + padding-top: var(--space-24); + font-size: var(--font-size-sm); + } + } + #theme-toggle { + cursor: pointer; + font-size: 1.1rem; + background: transparent; + border: none; + padding: 0.25rem 0.5rem; + } + .logo-circle { + transition: transform 250ms ease, box-shadow 250ms ease; + } + + .logo-circle:hover { + transform: translateY(-2px); + box-shadow: + 0 24px 48px rgba(244, 114, 182, 0.45), + inset 0 0 0 1px rgba(255, 255, 255, 0.7); + } + [data-color-scheme="dark"] .btn-primary { + background: linear-gradient( + 135deg, + #ff7eb3, + #ff4d94 + ); + color: #1a000d; + box-shadow: 0 8px 30px rgba(255, 126, 179, 0.45); + } + + [data-color-scheme="dark"] .btn-secondary { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 126, 179, 0.25); + color: #ffe5f0; + } + /* ========================================= + DARK MODE — SECTION SEPARATION + ========================================= */ + +[data-color-scheme="dark"] section { + position: relative; } -body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; +[data-color-scheme="dark"] section::before { + content: ""; + position: absolute; + inset: 0; + pointer-events: none; + + background: linear-gradient( + to bottom, + rgba(255, 126, 179, 0.06), + transparent 25%, + transparent 75%, + rgba(255, 126, 179, 0.06) + ); } diff --git a/app/layout.tsx b/app/layout.tsx index f7fa87e..229fd20 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,20 +1,20 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Plus_Jakarta_Sans, Inter } from "next/font/google"; import "./globals.css"; -const geistSans = Geist({ - variable: "--font-geist-sans", +const plusJakartaSans = Plus_Jakarta_Sans({ + variable: "--font-plus-jakarta", subsets: ["latin"], }); -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", +const inter = Inter({ + variable: "--font-inter", subsets: ["latin"], }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "UniSync | Smart Academic Scheduling", + description: "AI-powered schedule optimization that syncs with your university.", }; export default function RootLayout({ @@ -23,10 +23,8 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - - + + {children} diff --git a/app/page.tsx b/app/page.tsx index 295f8fd..2ea19eb 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,65 +1,347 @@ +"use client"; + import Image from "next/image"; +import { useEffect, useState } from "react"; export default function Home() { + const [theme, setTheme] = useState<"light" | "dark">("dark"); + const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); + const [hasScrolled, setHasScrolled] = useState(false); + const [notification, setNotification] = useState<{ message: string; type: string } | null>(null); + + useEffect(() => { + // Theme initialization + const storedTheme = localStorage.getItem("color-scheme"); + const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; + const initialTheme = storedTheme || (systemPrefersDark ? "dark" : "light"); + setTheme(initialTheme as "light" | "dark"); + document.documentElement.setAttribute("data-color-scheme", initialTheme); + + // Scroll effects initialization + const handleScroll = () => { + setHasScrolled(window.scrollY > 10); + fadeInOnScroll(); + }; + + const fadeInOnScroll = () => { + const elements = document.querySelectorAll(".feature-item, .step-card"); + elements.forEach((element) => { + const rect = element.getBoundingClientRect(); + const isVisible = rect.top < window.innerHeight * 0.85; + if (isVisible && !element.classList.contains("visible")) { + element.classList.add("visible"); + } + }); + }; + + window.addEventListener("scroll", handleScroll); + handleScroll(); // Initial check + + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, []); + + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === "Escape") setIsMobileMenuOpen(false); + }; + document.addEventListener("keydown", handleKeyDown); + return () => document.removeEventListener("keydown", handleKeyDown); + }, []); + + const toggleTheme = () => { + const next = theme === "dark" ? "light" : "dark"; + setTheme(next); + document.documentElement.setAttribute("data-color-scheme", next); + localStorage.setItem("color-scheme", next); + }; + + const showNotificationMsg = (message: string, type = "info") => { + setNotification({ message, type }); + setTimeout(() => { + setNotification(null); + }, 3000); + }; + + const handleLinkClick = (e: React.MouseEvent, id: string) => { + e.preventDefault(); + if (id === "#") { + showNotificationMsg("Feature coming soon!", "info"); + return; + } + const targetElement = document.querySelector(id); + if (targetElement) { + const navHeight = document.querySelector(".navbar")?.clientHeight || 0; + const targetPosition = (targetElement as HTMLElement).offsetTop - navHeight; + window.scrollTo({ + top: targetPosition, + behavior: "smooth", + }); + setIsMobileMenuOpen(false); + } + }; + + const handleButtonClick = (e: React.MouseEvent) => { + e.preventDefault(); + showNotificationMsg("Feature coming soon!", "info"); + }; + return ( -
-
- Next.js logo -
-

- To get started, edit the page.tsx file. + <> + {/* Navigation */} + + + {/* Hero Section */} +
+
+

+ Master Your Time,
+ Ace Your Classes

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. +

+ AI-powered schedule optimization that syncs with your university and suggests your best + times to study, collaborate, and relax.

+ +
+
+ UniSync Logo +
+
+ +
+ + Start free trial + + +
+
+
+
+
+
+
+ + {/* Features Section */} +
+
+
+

Everything you need to succeed

+

One platform for smarter academic management

+
+ +
+ {[ + { icon: "🎯", title: "Smart Schedule Sync", desc: "Automatically import your timetable and detect gaps for study sessions." }, + { icon: "🤖", title: "AI Recommendations", desc: "Get personalized study blocks based on your class patterns and learning style." }, + { icon: "👥", title: "Study Groups", desc: "Find classmates available at the same time without sharing your full schedule." }, + { icon: "📊", title: "Analytics", desc: "Track your productivity and get insights on your study habits." }, + { icon: "🔔", title: "Smart Reminders", desc: "Never miss a class or deadline with intelligent notifications." }, + { icon: "🎓", title: "Grade Tracking", desc: "Monitor your grades and get alerts for assignments you might miss." }, + ].map((feature, i) => ( +
+
{feature.icon}
+

{feature.title}

+

{feature.desc}

+
+ ))} +
+
+
+ + {/* How It Works Section */} +
+
+
+

How it works

+

Get organized in 3 simple steps

+
+ +
+
+
1
+

Connect Your Account

+

Link your university email and we'll sync your schedule instantly.

+
📱
+
+
+
2
+

AI Optimization

+

Our algorithm analyzes gaps and creates personalized study recommendations.

+
⚙️
+
+
+
3
+

Start Optimizing

+

Get smarter about time management and watch your productivity soar.

+
🚀
+
+
+
+
+ + {/* CTA Section */} +
+
+

Ready to ace your semester?

+

Join thousands of students using UniSync to manage their time better.

+
-
+ + {/* Footer */} + + + {/* Notifications */} + {notification && ( +
+ {notification.message}
-

-
+ )} + + {/* Dynamic Desktop/Mobile Menu Styles via styled-jsx */} + + ); } diff --git a/index.html b/index.html deleted file mode 100644 index 716645f..0000000 --- a/index.html +++ /dev/null @@ -1,197 +0,0 @@ - - - - - - - UniSync | Smart Academic Scheduling - - - - - - - - - - -
-
-

Master Your Time,
Ace Your Classes

-

AI-powered schedule optimization that syncs with your university and suggests your best times to study, collaborate, and relax.

- -
-
- -
-
- -
- Start free trial - -
-
-
-
-
-
-
- - -
-
-
-

Everything you need to succeed

-

One platform for smarter academic management

-
- -
-
-
🎯
-

Smart Schedule Sync

-

Automatically import your timetable and detect gaps for study sessions.

-
-
-
🤖
-

AI Recommendations

-

Get personalized study blocks based on your class patterns and learning style.

-
-
-
👥
-

Study Groups

-

Find classmates available at the same time without sharing your full schedule.

-
-
-
📊
-

Analytics

-

Track your productivity and get insights on your study habits.

-
-
-
🔔
-

Smart Reminders

-

Never miss a class or deadline with intelligent notifications.

-
-
-
🎓
-

Grade Tracking

-

Monitor your grades and get alerts for assignments you might miss.

-
-
-
-
- - -
-
-
-

How it works

-

Get organized in 3 simple steps

-
- -
-
-
1
-

Connect Your Account

-

Link your university email and we'll sync your schedule instantly.

-
📱
-
-
-
2
-

AI Optimization

-

Our algorithm analyzes gaps and creates personalized study recommendations.

-
⚙️
-
-
-
3
-

Start Optimizing

-

Get smarter about time management and watch your productivity soar.

-
🚀
-
-
-
-
- - -
-
-

Ready to ace your semester?

-

Join thousands of students using UniSync to manage their time better.

-
- Start free trial - Schedule a demo -
-
-
- - - - - - - \ No newline at end of file diff --git a/assets/logo.png b/public/assets/logo.png similarity index 100% rename from assets/logo.png rename to public/assets/logo.png diff --git a/script.js b/script.js deleted file mode 100644 index f7cae6b..0000000 --- a/script.js +++ /dev/null @@ -1,204 +0,0 @@ -document.addEventListener('DOMContentLoaded', () => { - initNavigation(); - initMobileMenu(); - initScrollEffects(); - initThemeToggle(); -}); -// ==================== THEME TOGGLE ==================== -function initThemeToggle() { - const root = document.documentElement; - const toggleBtn = document.getElementById('theme-toggle'); - - if (!toggleBtn) return; - - const storedTheme = localStorage.getItem('color-scheme'); - const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; - - const initialTheme = storedTheme || (systemPrefersDark ? 'dark' : 'light'); - root.setAttribute('data-color-scheme', initialTheme); - toggleBtn.textContent = initialTheme === 'dark' ? '☀️' : '🌙'; - - toggleBtn.addEventListener('click', () => { - const current = root.getAttribute('data-color-scheme'); - const next = current === 'dark' ? 'light' : 'dark'; - - root.setAttribute('data-color-scheme', next); - localStorage.setItem('color-scheme', next); - toggleBtn.textContent = next === 'dark' ? '☀️' : '🌙'; - }); -} - -// ==================== NAVIGATION ==================== -function initNavigation() { - const navLinks = document.querySelectorAll('.nav-link'); - navLinks.forEach(link => { - link.addEventListener('click', (e) => { - e.preventDefault(); - const targetId = link.getAttribute('href'); - const targetElement = document.querySelector(targetId); - if (targetElement) { - const navHeight = document.querySelector('.navbar').offsetHeight; - const targetPosition = targetElement.offsetTop - navHeight; - window.scrollTo({ - top: targetPosition, - behavior: 'smooth' - }); - closeMobileMenu(); - } - }); - }); - - // Button actions - const primaryBtns = document.querySelectorAll('.btn-primary'); - const secondaryBtns = document.querySelectorAll('.btn-secondary'); - - primaryBtns.forEach(btn => { - btn.addEventListener('click', (e) => { - if (btn.getAttribute('href') === '#') { - e.preventDefault(); - showNotification('Feature coming soon!', 'info'); - } - }); - }); - - secondaryBtns.forEach(btn => { - btn.addEventListener('click', (e) => { - if (btn.getAttribute('href') === '#' || btn.tagName === 'BUTTON') { - e.preventDefault(); - showNotification('Feature coming soon!', 'info'); - } - }); - }); -} - -function initMobileMenu() { - const burger = document.querySelector('.burger'); - if (burger) { - burger.addEventListener('click', () => { - toggleMobileMenu(); - }); - } -} - -function toggleMobileMenu() { - const burger = document.querySelector('.burger'); - const navLinks = document.querySelector('.nav-links'); - const navActions = document.querySelector('.nav-actions'); - - burger.classList.toggle('active'); - - if (navLinks) { - navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex'; - } - if (navActions) { - navActions.style.display = navActions.style.display === 'flex' ? 'none' : 'flex'; - } -} - -function closeMobileMenu() { - const burger = document.querySelector('.burger'); - const navLinks = document.querySelector('.nav-links'); - const navActions = document.querySelector('.nav-actions'); - - if (burger && burger.classList.contains('active')) { - burger.classList.remove('active'); - } - if (navLinks) navLinks.style.display = 'none'; - if (navActions) navActions.style.display = 'none'; -} - -// ==================== SCROLL EFFECTS ==================== -function initScrollEffects() { - const navbar = document.querySelector('.navbar'); - - window.addEventListener('scroll', () => { - const scrollTop = window.scrollY; - if (scrollTop > 10) { - navbar.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)'; - } else { - navbar.style.boxShadow = '0 1px 2px 0 rgba(0, 0, 0, 0.05)'; - } - fadeInOnScroll(); - }); -} - -function fadeInOnScroll() { - const elements = document.querySelectorAll('.feature-item, .step-card'); - - elements.forEach(element => { - const rect = element.getBoundingClientRect(); - const isVisible = rect.top < window.innerHeight * 0.85; - - if (isVisible && !element.classList.contains('visible')) { - element.classList.add('visible'); - } - }); -} - -// ==================== NOTIFICATIONS ==================== -function showNotification(message, type = 'info') { - const existingNotification = document.querySelector('.notification'); - if (existingNotification) existingNotification.remove(); - - const notification = document.createElement('div'); - notification.className = `notification notification-${type}`; - notification.textContent = message; - - const bgColor = type === 'success' ? '#10B981' : type === 'error' ? '#EF4444' : '#3B82F6'; - - notification.style.cssText = ` - position: fixed; - top: 100px; - right: 20px; - padding: 1rem 1.5rem; - background: ${bgColor}; - color: white; - border-radius: 0.5rem; - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); - z-index: 10000; - font-weight: 500; - max-width: 400px; - `; - - document.body.appendChild(notification); - - setTimeout(() => { - notification.remove(); - }, 3000); -} - -// ==================== EVENT LISTENERS ==================== -document.addEventListener('keydown', (e) => { - if (e.key === 'Escape') closeMobileMenu(); -}); - -// Burger menu styles -const style = document.createElement('style'); -style.textContent = ` - .burger.active span:nth-child(1) { - transform: rotate(45deg) translate(8px, 8px); - } - .burger.active span:nth-child(2) { - opacity: 0; - } - .burger.active span:nth-child(3) { - transform: rotate(-45deg) translate(7px, -7px); - } - @media (max-width: 768px) { - .nav-links, .nav-actions { - position: absolute; - top: 70px; - left: 0; - width: 100%; - background: white; - flex-direction: column; - padding: 1.5rem; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); - gap: 1rem; - border-bottom: 1px solid #E5E7EB; - } - } -`; -document.head.appendChild(style); - -console.log('UniSync initialized successfully!'); \ No newline at end of file diff --git a/style.css b/style.css deleted file mode 100644 index 34f0ddd..0000000 --- a/style.css +++ /dev/null @@ -1,1601 +0,0 @@ -:root { - /* Primitive Color Tokens */ - --color-white: rgba(255, 255, 255, 1); - --color-black: rgba(0, 0, 0, 1); - --color-cream-50: rgba(252, 252, 249, 1); - --color-cream-100: rgba(255, 255, 253, 1); - --color-gray-200: rgba(245, 245, 245, 1); - --color-gray-300: rgba(167, 169, 169, 1); - --color-gray-400: rgba(119, 124, 124, 1); - --color-slate-500: rgba(98, 108, 113, 1); - --color-brown-600: rgba(94, 82, 64, 1); - --color-charcoal-700: rgba(31, 33, 33, 1); - --color-charcoal-800: rgba(38, 40, 40, 1); - --color-slate-900: rgba(19, 52, 59, 1); - --color-teal-300: rgba(50, 184, 198, 1); - --color-teal-400: rgba(45, 166, 178, 1); - --color-teal-500: rgba(33, 128, 141, 1); - --color-teal-600: rgba(29, 116, 128, 1); - --color-teal-700: rgba(26, 104, 115, 1); - --color-teal-800: rgba(41, 150, 161, 1); - --color-red-400: rgba(255, 84, 89, 1); - --color-red-500: rgba(192, 21, 47, 1); - --color-orange-400: rgba(230, 129, 97, 1); - --color-orange-500: rgba(168, 75, 47, 1); - - /* RGB versions for opacity control */ - --color-brown-600-rgb: 94, 82, 64; - --color-teal-500-rgb: 33, 128, 141; - --color-slate-900-rgb: 19, 52, 59; - --color-slate-500-rgb: 98, 108, 113; - --color-red-500-rgb: 192, 21, 47; - --color-red-400-rgb: 255, 84, 89; - --color-orange-500-rgb: 168, 75, 47; - --color-orange-400-rgb: 230, 129, 97; - - /* Background color tokens (Light Mode) */ - --color-bg-1: rgb(105, 163, 255); /* Light blue */ - --color-bg-2: rgba(162, 255, 96, 0.08); /* Light yellow */ - --color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */ - --color-bg-4: rgba(255, 122, 122, 0.08); /* Light red */ - --color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */ - --color-bg-6: rgba(252, 173, 117, 0.08); /* Light orange */ - --color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */ - --color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */ - - /* Semantic Color Tokens (Light Mode) */ - --color-background: var(--color-cream-50); - --color-surface: var(--color-cream-100); - --color-text: var(--color-slate-900); - --color-text-secondary: var(--color-slate-500); - --color-primary: var(--color-teal-500); - --color-primary-hover: var(--color-teal-600); - --color-primary-active: var(--color-teal-700); - --color-secondary: rgba(var(--color-brown-600-rgb), 0.12); - --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2); - --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25); - --color-border: rgba(var(--color-brown-600-rgb), 0.2); - --color-btn-primary-text: var(--color-cream-50); - --color-card-border: rgba(var(--color-brown-600-rgb), 0.12); - --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12); - --color-error: var(--color-red-500); - --color-success: var(--color-teal-500); - --color-warning: var(--color-orange-500); - --color-info: var(--color-slate-500); - --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4); - --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8); - - /* Common style patterns */ - --focus-ring: 0 0 0 3px var(--color-focus-ring); - --focus-outline: 2px solid var(--color-primary); - --status-bg-opacity: 0.15; - --status-border-opacity: 0.25; - --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); - --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); - - /* RGB versions for opacity control */ - --color-success-rgb: 33, 128, 141; - --color-error-rgb: 192, 21, 47; - --color-warning-rgb: 168, 75, 47; - --color-info-rgb: 98, 108, 113; - - /* Typography */ - --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, - BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; - --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, - Monaco, Consolas, monospace; - --font-size-xs: 11px; - --font-size-sm: 12px; - --font-size-base: 14px; - --font-size-md: 14px; - --font-size-lg: 16px; - --font-size-xl: 18px; - --font-size-2xl: 20px; - --font-size-3xl: 24px; - --font-size-4xl: 30px; - --font-weight-normal: 400; - --font-weight-medium: 500; - --font-weight-semibold: 550; - --font-weight-bold: 600; - --line-height-tight: 1.2; - --line-height-normal: 1.5; - --letter-spacing-tight: -0.01em; - - /* Spacing */ - --space-0: 0; - --space-1: 1px; - --space-2: 2px; - --space-4: 4px; - --space-6: 6px; - --space-8: 8px; - --space-10: 10px; - --space-12: 12px; - --space-16: 16px; - --space-20: 20px; - --space-24: 24px; - --space-32: 32px; - - /* Border Radius */ - --radius-sm: 6px; - --radius-base: 8px; - --radius-md: 10px; - --radius-lg: 12px; - --radius-full: 9999px; - - /* Shadows */ - --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02); - --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); - --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), - 0 2px 4px -1px rgba(0, 0, 0, 0.02); - --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), - 0 4px 6px -2px rgba(0, 0, 0, 0.02); - --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15), - inset 0 -1px 0 rgba(0, 0, 0, 0.03); - - /* Animation */ - --duration-fast: 150ms; - --duration-normal: 250ms; - --ease-standard: cubic-bezier(0.16, 1, 0.3, 1); - - /* Layout */ - --container-sm: 640px; - --container-md: 768px; - --container-lg: 1024px; - --container-xl: 1280px; - } - - /* Dark mode colors */ - /* ========================================= - LIGHT MODE — SECTION DEPTH & PARTITIONS - ========================================= */ - -[data-color-scheme="light"] section { - position: relative; - background: var(--color-background); -} - -[data-color-scheme="light"] section::before { - content: ""; - position: absolute; - inset: 0; - pointer-events: none; - - background: linear-gradient( - to bottom, - rgba(0, 0, 0, 0.04), - transparent 18%, - transparent 82%, - rgba(0, 0, 0, 0.04) - ); -} -[data-color-scheme="light"] section + section { - border-top: 1px solid rgba(0, 0, 0, 0.08); -} -[data-color-scheme="light"] .card, -[data-color-scheme="light"] .panel, -[data-color-scheme="light"] .feature { - background: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.08); - box-shadow: - 0 1px 0 rgba(0, 0, 0, 0.04), - 0 12px 30px rgba(0, 0, 0, 0.08); -} -[data-color-scheme="light"] #hero + section { - border-top: none; -} - - /* Data attribute for manual theme switching */ - [data-color-scheme="dark"] { - /* RGB versions for opacity control (dark mode) */ - --color-gray-400-rgb: 119, 124, 124; - --color-teal-300-rgb: 50, 184, 198; - --color-gray-300-rgb: 167, 169, 169; - --color-gray-200-rgb: 245, 245, 245; - - /* Colorful background palette - Dark Mode */ - --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */ - --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */ - --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */ - --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */ - --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */ - --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */ - --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */ - --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */ - - /* Semantic Color Tokens (Dark Mode) */ - --color-background: var(--color-charcoal-700); - --color-surface: var(--color-charcoal-800); - --color-text: var(--color-gray-200); - --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7); - --color-primary: var(--color-teal-300); - --color-primary-hover: var(--color-teal-400); - --color-primary-active: var(--color-teal-800); - --color-secondary: rgba(var(--color-gray-400-rgb), 0.15); - --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25); - --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3); - --color-border: rgba(var(--color-gray-400-rgb), 0.3); - --color-error: var(--color-red-400); - --color-success: var(--color-teal-300); - --color-warning: var(--color-orange-400); - --color-info: var(--color-gray-300); - --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4); - --color-btn-primary-text: var(--color-slate-900); - --color-card-border: rgba(var(--color-gray-400-rgb), 0.15); - --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15); - --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), - inset 0 -1px 0 rgba(0, 0, 0, 0.15); - --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2); - --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8); - - /* Common style patterns - updated for dark mode */ - --focus-ring: 0 0 0 3px var(--color-focus-ring); - --focus-outline: 2px solid var(--color-primary); - --status-bg-opacity: 0.15; - --status-border-opacity: 0.25; - --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); - --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); - - /* RGB versions for dark mode */ - --color-success-rgb: var(--color-teal-300-rgb); - --color-error-rgb: var(--color-red-400-rgb); - --color-warning-rgb: var(--color-orange-400-rgb); - --color-info-rgb: var(--color-gray-300-rgb); - } - /* ===================================================== - LIGHT MODE — Elegant Sky Blue (Student Friendly) - ===================================================== */ - -[data-color-scheme="light"] { - /* RGB helpers */ - --color-primary-rgb: 136, 221, 255; - --color-slate-900-rgb: 15, 23, 42; - - /* Core surfaces */ - --color-background: #f7fbff; /* very light blue-white */ - --color-surface: #ffffff; /* pure white cards */ - - /* Text */ - --color-text: #0f172a; /* slate-900 */ - --color-text-secondary: #475569; - - /* Primary (Sky Blue) */ - --color-primary: #88ddff; - --color-primary-hover: #6fd3fb; - --color-primary-active: #4fc7f5; - - /* Secondary (White-based UI) */ - --color-secondary: #ffffff; - --color-secondary-hover: rgba(15, 23, 42, 0.04); - --color-secondary-active: rgba(15, 23, 42, 0.08); - - /* Borders */ - --color-border: rgba(15, 23, 42, 0.12); - --color-card-border: rgba(15, 23, 42, 0.08); - --color-card-border-inner: rgba(15, 23, 42, 0.05); - - /* Buttons */ - --color-btn-primary-text: #0f172a; /* dark text works better on light blue */ - - /* Status colors (kept calm) */ - --color-success: #14b8a6; - --color-warning: #f59e0b; - --color-error: #ef4444; - --color-info: #38bdf8; - - /* Status RGB */ - --color-success-rgb: 20, 184, 166; - --color-warning-rgb: 245, 158, 11; - --color-error-rgb: 239, 68, 68; - --color-info-rgb: 56, 189, 248; - - /* Focus */ - --color-focus-ring: rgba(136, 221, 255, 0.6); - - /* Select caret */ - --color-select-caret: rgba(15, 23, 42, 0.8); -} - - - - /* Base styles */ - html { - font-size: var(--font-size-base); - font-family: var(--font-family-base); - line-height: var(--line-height-normal); - color: var(--color-text); - background-color: var(--color-background); - -webkit-font-smoothing: antialiased; - box-sizing: border-box; - } - - body { - margin: 0; - padding: 0; - } - - *, - *::before, - *::after { - box-sizing: inherit; - } - - /* Typography */ - h1, - h2, - h3, - h4, - h5, - h6 { - margin: 0; - font-weight: var(--font-weight-semibold); - line-height: var(--line-height-tight); - color: var(--color-text); - letter-spacing: var(--letter-spacing-tight); - } - - h1 { - font-size: var(--font-size-4xl); - } - h2 { - font-size: var(--font-size-3xl); - } - h3 { - font-size: var(--font-size-2xl); - } - h4 { - font-size: var(--font-size-xl); - } - h5 { - font-size: var(--font-size-lg); - } - h6 { - font-size: var(--font-size-md); - } - - p { - margin: 0 0 var(--space-16) 0; - } - - a { - color: var(--color-primary); - text-decoration: none; - transition: color var(--duration-fast) var(--ease-standard); - } - - a:hover { - color: var(--color-primary-hover); - } - - code, - pre { - font-family: var(--font-family-mono); - font-size: calc(var(--font-size-base) * 0.95); - background-color: var(--color-secondary); - border-radius: var(--radius-sm); - } - - code { - padding: var(--space-1) var(--space-4); - } - - pre { - padding: var(--space-16); - margin: var(--space-16) 0; - overflow: auto; - border: 1px solid var(--color-border); - } - - pre code { - background: none; - padding: 0; - } - - /* Buttons */ - .btn { - display: inline-flex; - align-items: center; - justify-content: center; - padding: var(--space-8) var(--space-16); - border-radius: var(--radius-base); - font-size: var(--font-size-base); - font-weight: 500; - line-height: 1.5; - cursor: pointer; - transition: all var(--duration-normal) var(--ease-standard); - border: none; - text-decoration: none; - position: relative; - } - - .btn:focus-visible { - outline: none; - box-shadow: var(--focus-ring); - } - - .btn--primary { - background: var(--color-primary); - color: var(--color-btn-primary-text); - } - - .btn--primary:hover { - background: var(--color-primary-hover); - } - - .btn--primary:active { - background: var(--color-primary-active); - } - - .btn--secondary { - background: var(--color-secondary); - color: var(--color-text); - } - - .btn--secondary:hover { - background: var(--color-secondary-hover); - } - - .btn--secondary:active { - background: var(--color-secondary-active); - } - - .btn--outline { - background: transparent; - border: 1px solid var(--color-border); - color: var(--color-text); - } - - .btn--outline:hover { - background: var(--color-secondary); - } - - .btn--sm { - padding: var(--space-4) var(--space-12); - font-size: var(--font-size-sm); - border-radius: var(--radius-sm); - } - - .btn--lg { - padding: var(--space-10) var(--space-20); - font-size: var(--font-size-lg); - border-radius: var(--radius-md); - } - - .btn--full-width { - width: 100%; - } - - .btn:disabled { - opacity: 0.5; - cursor: not-allowed; - } - - /* Form elements */ - .form-control { - display: block; - width: 100%; - padding: var(--space-8) var(--space-12); - font-size: var(--font-size-md); - line-height: 1.5; - color: var(--color-text); - background-color: var(--color-surface); - border: 1px solid var(--color-border); - border-radius: var(--radius-base); - transition: border-color var(--duration-fast) var(--ease-standard), - box-shadow var(--duration-fast) var(--ease-standard); - } - - textarea.form-control { - font-family: var(--font-family-base); - font-size: var(--font-size-base); - } - - select.form-control { - padding: var(--space-8) var(--space-12); - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-image: var(--select-caret-light); - background-repeat: no-repeat; - background-position: right var(--space-12) center; - background-size: 16px; - padding-right: var(--space-32); - } - - /* ===================================================== - DARK MODE — SUPER AMOLED (True Black) - ===================================================== */ - -[data-color-scheme="dark"] { - /* Core surfaces */ - --color-background: #000000; - --color-surface: #050505; - - /* Text */ - --color-text: #e5f6ff; - --color-text-secondary: rgba(229, 246, 255, 0.65); - - /* Primary (Neon Sky Blue) */ - --color-primary: #88ddff; - --color-primary-hover: #a3e7ff; - --color-primary-active: #c1f0ff; - - /* Secondary (Dark glass) */ - --color-secondary: rgba(255, 255, 255, 0.04); - --color-secondary-hover: rgba(255, 255, 255, 0.08); - --color-secondary-active: rgba(255, 255, 255, 0.12); - - /* Borders */ - --color-border: rgba(136, 221, 255, 0.18); - --color-card-border: rgba(136, 221, 255, 0.12); - --color-card-border-inner: rgba(255, 255, 255, 0.06); - - /* Buttons */ - --color-btn-primary-text: #001019; - - /* Status */ - --color-success: #2ef2c4; - --color-warning: #ffb020; - --color-error: #ff4d5a; - --color-info: #88ddff; - - /* RGB helpers */ - --color-success-rgb: 46, 242, 196; - --color-warning-rgb: 255, 176, 32; - --color-error-rgb: 255, 77, 90; - --color-info-rgb: 136, 221, 255; - - /* Focus */ - --color-focus-ring: rgba(136, 221, 255, 0.55); - - /* Caret */ - --color-select-caret: rgba(229, 246, 255, 0.9); -} - - - [data-color-scheme="light"] select.form-control { - background-image: var(--select-caret-light); - } - - .form-control:focus { - border-color: var(--color-primary); - outline: var(--focus-outline); - } - - .form-label { - display: block; - margin-bottom: var(--space-8); - font-weight: var(--font-weight-medium); - font-size: var(--font-size-sm); - } - - .form-group { - margin-bottom: var(--space-16); - } - - /* Card component */ - .card { - background-color: var(--color-surface); - border-radius: var(--radius-lg); - border: 1px solid var(--color-card-border); - box-shadow: var(--shadow-sm); - overflow: hidden; - transition: box-shadow var(--duration-normal) var(--ease-standard); - } - - .card:hover { - box-shadow: var(--shadow-md); - } - - .card__body { - padding: var(--space-16); - } - - .card__header, - .card__footer { - padding: var(--space-16); - border-bottom: 1px solid var(--color-card-border-inner); - } - - /* Status indicators - simplified with CSS variables */ - .status { - display: inline-flex; - align-items: center; - padding: var(--space-6) var(--space-12); - border-radius: var(--radius-full); - font-weight: var(--font-weight-medium); - font-size: var(--font-size-sm); - } - - .status--success { - background-color: rgba( - var(--color-success-rgb, 33, 128, 141), - var(--status-bg-opacity) - ); - color: var(--color-success); - border: 1px solid - rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity)); - } - - .status--error { - background-color: rgba( - var(--color-error-rgb, 192, 21, 47), - var(--status-bg-opacity) - ); - color: var(--color-error); - border: 1px solid - rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity)); - } - - .status--warning { - background-color: rgba( - var(--color-warning-rgb, 168, 75, 47), - var(--status-bg-opacity) - ); - color: var(--color-warning); - border: 1px solid - rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity)); - } - - .status--info { - background-color: rgba( - var(--color-info-rgb, 98, 108, 113), - var(--status-bg-opacity) - ); - color: var(--color-info); - border: 1px solid - rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity)); - } - - /* Container layout */ - .container { - width: 100%; - margin-right: auto; - margin-left: auto; - padding-right: var(--space-16); - padding-left: var(--space-16); - } - - @media (min-width: 640px) { - .container { - max-width: var(--container-sm); - } - } - @media (min-width: 768px) { - .container { - max-width: var(--container-md); - } - } - @media (min-width: 1024px) { - .container { - max-width: var(--container-lg); - } - } - @media (min-width: 1280px) { - .container { - max-width: var(--container-xl); - } - } - - /* Utility classes */ - .flex { - display: flex; - } - .flex-col { - flex-direction: column; - } - .items-center { - align-items: center; - } - .justify-center { - justify-content: center; - } - .justify-between { - justify-content: space-between; - } - .gap-4 { - gap: var(--space-4); - } - .gap-8 { - gap: var(--space-8); - } - .gap-16 { - gap: var(--space-16); - } - - .m-0 { - margin: 0; - } - .mt-8 { - margin-top: var(--space-8); - } - .mb-8 { - margin-bottom: var(--space-8); - } - .mx-8 { - margin-left: var(--space-8); - margin-right: var(--space-8); - } - .my-8 { - margin-top: var(--space-8); - margin-bottom: var(--space-8); - } - - .p-0 { - padding: 0; - } - .py-8 { - padding-top: var(--space-8); - padding-bottom: var(--space-8); - } - .px-8 { - padding-left: var(--space-8); - padding-right: var(--space-8); - } - .py-16 { - padding-top: var(--space-16); - padding-bottom: var(--space-16); - } - .px-16 { - padding-left: var(--space-16); - padding-right: var(--space-16); - } - - .block { - display: block; - } - .hidden { - display: none; - } - - /* Accessibility */ - .sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; - } - - :focus-visible { - outline: var(--focus-outline); - outline-offset: 2px; - } - - /* Dark mode specifics */ - [data-color-scheme="dark"] .btn--outline { - border: 1px solid var(--color-border-secondary); - } - - @font-face { - font-family: 'FKGroteskNeue'; - src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2') - format('woff2'); - } - - /* END PERPLEXITY DESIGN SYSTEM */ - css - :root { - /* Legacy variable mappings for compatibility */ - --primary: var(--color-primary); - --primary-dark: var(--color-primary-hover); - --primary-light: var(--color-secondary); - --text-primary: var(--color-text); - --text-secondary: var(--color-text-secondary); - --text-light: var(--color-text-secondary); - --border: var(--color-border); - --bg-light: var(--color-background); - --bg-lighter: var(--color-background); - --white: var(--color-white); - --black: var(--color-black); - } - - * { - margin: 0; - padding: 0; - box-sizing: border-box; - } - - html { - scroll-behavior: smooth; - } - - body { - font-family: var(--font-family-base); - color: var(--color-text); - background: var(--color-surface); - line-height: var(--line-height-normal); - } - - .container { - max-width: var(--container-xl); - margin: 0 auto; - padding: 0 var(--space-20); - } - - /* Navigation */ - .navbar { - position: fixed; - top: 0; - width: 100%; - height: 70px; - background: rgba(var(--color-surface), 0.98); - backdrop-filter: blur(10px); - border-bottom: 1px solid var(--color-border); - z-index: 1000; - box-shadow: var(--shadow-sm); - } - - .nav-container { - max-width: 1400px; - height: 100%; - margin: 0 auto; - padding: 0 var(--space-32); - display: flex; - justify-content: space-between; - align-items: center; - } - - .nav-logo { - display: flex; - align-items: center; - gap: var(--space-8); - font-weight: var(--font-weight-bold); - font-size: var(--font-size-xl); - color: var(--color-primary); - text-decoration: none; - transition: color var(--duration-fast) var(--ease-standard); - } - - .nav-logo:hover { - color: var(--color-primary-hover); - } - - .logo-icon { - font-size: var(--font-size-3xl); - } - - .nav-links { - display: flex; - list-style: none; - gap: 40px; - position: absolute; - left: 50%; - transform: translateX(-50%); - } - - .nav-link { - text-decoration: none; - color: var(--color-text-secondary); - font-weight: var(--font-weight-medium); - font-size: var(--font-size-base); - cursor: pointer; - transition: color var(--duration-fast) var(--ease-standard); - } - - .nav-link:hover { - color: var(--color-primary); - } - - .nav-link:focus-visible { - outline: var(--focus-outline); - outline-offset: 2px; - } - - .nav-actions { - display: flex; - gap: var(--space-12); - align-items: center; - } - - .btn-text { - color: var(--color-text-secondary); - text-decoration: none; - font-weight: var(--font-weight-semibold); - font-size: var(--font-size-base); - cursor: pointer; - background: none; - border: none; - transition: color var(--duration-fast) var(--ease-standard); - } - - .btn-text:hover { - color: var(--color-primary); - } - - .btn-text:focus-visible { - outline: var(--focus-outline); - outline-offset: 2px; - } - - .btn-primary { - background: var(--color-primary); - color: var(--color-btn-primary-text); - padding: var(--space-8) var(--space-20); - border-radius: var(--radius-base); - font-weight: var(--font-weight-semibold); - font-size: var(--font-size-base); - text-decoration: none; - cursor: pointer; - border: none; - box-shadow: var(--shadow-md); - transition: all var(--duration-normal) var(--ease-standard); - } - - - .btn-primary:hover { - background: var(--color-primary-hover); - box-shadow: var(--shadow-lg); - transform: translateY(-1px); - } - - .btn-primary:active { - background: var(--color-primary-active); - transform: translateY(0); - } - - .btn-primary:focus-visible { - outline: none; - box-shadow: var(--focus-ring), var(--shadow-lg); - } - - .btn-secondary { - background: var(--color-surface); - color: var(--color-text); - padding: var(--space-8) var(--space-20); - border: 1px solid var(--color-border); - border-radius: var(--radius-base); - font-weight: var(--font-weight-semibold); - font-size: var(--font-size-base); - text-decoration: none; - cursor: pointer; - transition: all var(--duration-normal) var(--ease-standard); - } - - .btn-secondary:hover { - border-color: var(--color-primary); - color: var(--color-primary); - background: var(--color-secondary); - } - - .btn-secondary:active { - background: var(--color-secondary-active); - } - - .btn-secondary:focus-visible { - outline: none; - box-shadow: var(--focus-ring); - } - - .btn-lg { - padding: var(--space-12) var(--space-32); - font-size: var(--font-size-lg); - } - - .btn-full { - width: 100%; - } - - .burger { - display: none; - flex-direction: column; - gap: 5px; - cursor: pointer; - background: none; - border: none; - padding: var(--space-4); - } - - .burger:focus-visible { - outline: var(--focus-outline); - outline-offset: 2px; - } - - .burger span { - width: 20px; - height: 2px; - background: var(--color-primary); - transition: all var(--duration-normal) var(--ease-standard); - } - - /* Hero Section */ - .hero { - min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; - padding: 70px var(--space-20) 80px; - position: relative; - overflow: hidden; - background: var(--color-background); - } - - .hero-content { - position: relative; - z-index: 10; - max-width: 1000px; - text-align: center; - } - - .hero-title { - font-size: clamp(var(--font-size-3xl), 8vw, 56px); - font-weight: 800; - line-height: var(--line-height-tight); - margin-bottom: var(--space-20); - color: var(--color-text); - letter-spacing: var(--letter-spacing-tight); - } - - .gradient-text { - color: var(--color-primary); - } - - .hero-subtitle { - font-size: var(--font-size-xl); - color: var(--color-text-secondary); - margin-bottom: 50px; - max-width: 600px; - margin-left: auto; - margin-right: auto; - line-height: var(--line-height-normal); - } - - .hero-logo-section { - display: flex; - align-items: center; - justify-content: center; - margin: 0 auto 50px; - } - - .logo-circle { - width: 500px; - height: 500px; - background: var(--color-secondary); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - background: radial-gradient( - circle at top left, - #bfefff 0%, - #88ddff 45%, - #5fc9f3 75%, - #eaf8ff 100% - ); - - box-shadow: - 0 20px 40px rgba(136, 221, 255, 0.35), - inset 0 0 0 1px rgba(255, 255, 255, 0.6); - - position: relative; - } - - [data-color-scheme="dark"] .logo-circle { - background: radial-gradient( - circle at top left, - #b8ecff 0%, - #88ddff 35%, - #2eaedc 65%, - #001018 100% - ); - - box-shadow: - 0 0 40px rgba(136, 221, 255, 0.55), - inset 0 0 0 1px rgba(255, 255, 255, 0.08); - } - - - .custom-logo { - width: 85%; - height: auto; - object-fit: contain; - - filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15)); - } - - .hero-cta { - display: flex; - gap: var(--space-16); - justify-content: center; - flex-wrap: wrap; - } - - .hero-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 0; - overflow: hidden; - } - - .gradient-orb { - position: absolute; - border-radius: 50%; - filter: blur(80px); - opacity: 0.08; - } - [data-color-scheme="dark"] .gradient-orb { - opacity: 0.18; - filter: saturate(120%) blur(80px); - } - - - .orb-1 { - width: 400px; - height: 400px; - background: var(--color-primary); - top: -100px; - right: -50px; - } - - .orb-2 { - width: 300px; - height: 300px; - background: var(--color-primary); - bottom: -50px; - left: 10%; - } - - /* Sections */ - .section { - padding: 80px var(--space-20); - } - - .section-header { - text-align: center; - max-width: 600px; - margin: 0 auto 60px; - } - - .section-header h2 { - font-size: clamp(var(--font-size-2xl), 5vw, 42px); - font-weight: 800; - margin-bottom: var(--space-16); - color: var(--color-text); - letter-spacing: var(--letter-spacing-tight); - } - - .section-header p { - font-size: var(--font-size-lg); - color: var(--color-text-secondary); - line-height: var(--line-height-normal); - } - - /* Features */ - .features { - background: var(--color-surface); - } - - .features-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: var(--space-24); - } - - .feature-item { - padding: var(--space-32); - background: var(--color-surface); - border-radius: var(--radius-lg); - border: 1px solid var(--color-card-border); - text-align: center; - transition: all var(--duration-normal) var(--ease-standard); - } - - .feature-item:hover { - border-color: var(--color-primary); - box-shadow: var(--shadow-md); - transform: translateY(-2px); - } - - .feature-icon { - font-size: 48px; - margin-bottom: var(--space-16); - display: block; - } - - .feature-item h3 { - font-size: var(--font-size-xl); - font-weight: var(--font-weight-bold); - margin-bottom: var(--space-12); - color: var(--color-text); - } - - .feature-item p { - font-size: var(--font-size-base); - color: var(--color-text-secondary); - line-height: var(--line-height-normal); - } - - /* How It Works */ - .how-it-works { - background: var(--color-background); - } - - .steps-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: var(--space-32); - } - - .step-card { - padding: 40px var(--space-32); - background: var(--color-surface); - border-radius: var(--radius-lg); - border: 1px solid var(--color-card-border); - text-align: center; - transition: all var(--duration-normal) var(--ease-standard); - } - - .step-card:hover { - border-color: var(--color-primary); - box-shadow: var(--shadow-md); - transform: translateY(-2px); - } - - .step-number { - font-size: 48px; - font-weight: 800; - color: var(--color-primary); - margin-bottom: var(--space-16); - } - - .step-card h3 { - font-size: var(--font-size-xl); - font-weight: var(--font-weight-bold); - margin-bottom: var(--space-12); - color: var(--color-text); - } - - .step-card p { - font-size: var(--font-size-base); - color: var(--color-text-secondary); - margin-bottom: var(--space-24); - line-height: var(--line-height-normal); - } - - .step-illustration { - font-size: 64px; - } - - /* CTA */ - .cta { - background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); - color: var(--color-btn-primary-text); - text-align: center; - padding: 100px var(--space-20); - } - - .cta h2 { - font-size: clamp(var(--font-size-3xl), 6vw, 48px); - font-weight: 800; - margin-bottom: var(--space-16); - letter-spacing: var(--letter-spacing-tight); - } - - .cta p { - font-size: var(--font-size-xl); - margin-bottom: 40px; - opacity: 0.95; - line-height: var(--line-height-normal); - } - - .cta-buttons { - display: flex; - gap: var(--space-16); - justify-content: center; - flex-wrap: wrap; - } - - .cta .btn-primary { - background: var(--color-surface); - color: var(--color-primary); - box-shadow: var(--shadow-lg); - } - - .cta .btn-primary:hover { - background: var(--color-background); - box-shadow: var(--shadow-lg); - transform: translateY(-1px); - } - - .cta .btn-secondary { - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.5); - color: var(--color-btn-primary-text); - } - - .cta .btn-secondary:hover { - background: rgba(255, 255, 255, 0.3); - border-color: var(--color-white); - } - - /* Footer */ - .footer { - background: var(--color-background); - color: var(--color-text); - padding: 60px var(--space-20) var(--space-32); - border-top: 1px solid var(--color-border); - } - - .footer-content { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 40px; - margin-bottom: 40px; - } - - .footer-col h4 { - font-size: var(--font-size-lg); - font-weight: var(--font-weight-bold); - margin-bottom: var(--space-16); - color: var(--color-text); - } - - .footer-col p { - font-size: var(--font-size-base); - margin-bottom: var(--space-16); - color: var(--color-text-secondary); - line-height: var(--line-height-normal); - } - - .footer-col ul { - list-style: none; - } - - .footer-col ul li { - margin-bottom: var(--space-10); - } - - .footer-col a { - color: var(--color-text-secondary); - text-decoration: none; - font-size: var(--font-size-base); - transition: color var(--duration-fast) var(--ease-standard); - } - - .footer-col a:hover { - color: var(--color-primary); - } - - .footer-col a:focus-visible { - outline: var(--focus-outline); - outline-offset: 2px; - } - - .social-links { - display: flex; - gap: var(--space-16); - margin-top: var(--space-16); - } - - .social-links a:focus-visible { - outline: var(--focus-outline); - outline-offset: 2px; - border-radius: var(--radius-sm); - } - - .footer-bottom { - border-top: 1px solid var(--color-border); - padding-top: var(--space-32); - text-align: center; - font-size: var(--font-size-base); - color: var(--color-text-secondary); - } - - /* Responsive */ - @media (max-width: 1024px) { - .logo-circle { - width: 700px; - height: 700px; - } - .custom-logo { - width: 450px; - height: 450px; - } - } - - @media (max-width: 768px) { - .nav-links { - display: none; - } - .burger { - display: flex; - } - .hero-title { - font-size: clamp(var(--font-size-2xl), 6vw, 36px); - } - .logo-circle { - width: 450px; - height: 450px; - } - .custom-logo { - width: 300px; - height: 300px; - } - .section-header h2 { - font-size: clamp(var(--font-size-xl), 4vw, 32px); - } - .cta h2 { - font-size: clamp(var(--font-size-2xl), 5vw, 36px); - } - .section { - padding: 60px var(--space-16); - } - .features-grid { - grid-template-columns: 1fr; - } - .steps-grid { - grid-template-columns: 1fr; - } - } - - @media (max-width: 480px) { - .container { - padding: 0 var(--space-16); - } - .nav-container { - padding: 0 var(--space-16); - } - .nav-logo { - font-size: var(--font-size-lg); - } - .logo-icon { - font-size: var(--font-size-xl); - } - .hero { - padding: 70px var(--space-16) 60px; - } - .hero-title { - font-size: var(--font-size-2xl); - margin-bottom: var(--space-16); - } - .hero-subtitle { - font-size: var(--font-size-base); - margin-bottom: var(--space-32); - } - .logo-circle { - width: 280px; - height: 280px; - } - .custom-logo { - width: 180px; - height: 180px; - } - .hero-cta { - flex-direction: column; - gap: var(--space-12); - } - .btn-lg { - padding: var(--space-10) var(--space-24); - font-size: var(--font-size-base); - } - .section { - padding: 50px var(--space-16); - } - .section-header { - margin-bottom: 40px; - } - .section-header h2 { - font-size: var(--font-size-xl); - margin-bottom: var(--space-12); - } - .section-header p { - font-size: var(--font-size-base); - } - .features-grid { - gap: var(--space-16); - } - .feature-item { - padding: var(--space-24); - } - .feature-item h3 { - font-size: var(--font-size-lg); - } - .feature-item p { - font-size: var(--font-size-sm); - } - .steps-grid { - gap: var(--space-20); - } - .step-card { - padding: var(--space-24); - } - .step-number { - font-size: 36px; - } - .step-card h3 { - font-size: var(--font-size-lg); - } - .step-card p { - font-size: var(--font-size-sm); - margin-bottom: var(--space-16); - } - .step-illustration { - font-size: 48px; - } - .cta { - padding: 60px var(--space-16); - } - .cta h2 { - font-size: var(--font-size-2xl); - } - .cta p { - font-size: var(--font-size-base); - margin-bottom: var(--space-32); - } - .cta-buttons { - flex-direction: column; - gap: var(--space-12); - } - .footer { - padding: 40px var(--space-16) var(--space-24); - } - .footer-content { - grid-template-columns: 1fr; - gap: var(--space-32); - margin-bottom: var(--space-32); - } - .footer-bottom { - padding-top: var(--space-24); - font-size: var(--font-size-sm); - } - } - #theme-toggle { - cursor: pointer; - font-size: 1.1rem; - background: transparent; - border: none; - padding: 0.25rem 0.5rem; - } - .logo-circle { - transition: transform 250ms ease, box-shadow 250ms ease; - } - - .logo-circle:hover { - transform: translateY(-2px); - box-shadow: - 0 24px 48px rgba(136, 221, 255, 0.45), - inset 0 0 0 1px rgba(255, 255, 255, 0.7); - } - [data-color-scheme="dark"] .btn-primary { - background: linear-gradient( - 135deg, - #88ddff, - #5fc9f3 - ); - color: #001019; - box-shadow: 0 8px 30px rgba(136, 221, 255, 0.45); - } - - [data-color-scheme="dark"] .btn-secondary { - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(136, 221, 255, 0.25); - color: #e5f6ff; - } - /* ========================================= - DARK MODE — SECTION SEPARATION - ========================================= */ - -[data-color-scheme="dark"] section { - position: relative; -} - -[data-color-scheme="dark"] section::before { - content: ""; - position: absolute; - inset: 0; - pointer-events: none; - - background: linear-gradient( - to bottom, - rgba(136, 221, 255, 0.06), - transparent 25%, - transparent 75%, - rgba(136, 221, 255, 0.06) - ); -}