css

index.html

@@ -54,305 +54,8 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
     
-    <style>
-        /* Prevent horizontal overflow */
-        html, body {
-            overflow-x: hidden;
-            width: 100%;
-        }
-        
-        /* Apply fonts to base elements */
-        body {
-            font-family: 'Source Sans Pro', sans-serif;
-            --header-height: 100px; /* Two-line navigation menu - desktop */
-            
-            /* Typography scale - consistent font sizes */
-            --text-xs: 0.75rem;    /* 12px */
-            --text-sm: 0.875rem;   /* 14px */
-            --text-base: 1rem;     /* 16px */
-            --text-lg: 1.125rem;   /* 18px */
-            --text-xl: 1.25rem;    /* 20px */
-            --text-2xl: 1.5rem;    /* 24px */
-            --text-3xl: 1.875rem;  /* 30px */
-            --text-4xl: 2.25rem;   /* 36px */
-            
-            /* Line heights for readability */
-            --leading-tight: 1.25;
-            --leading-normal: 1.5;
-            --leading-relaxed: 1.625;
-            --leading-loose: 1.75;
-        }
-        
-        /* Ensure minimum readable font size on mobile */
-        @media (max-width: 767px) {
-            body {
-                font-size: 14px; /* Minimum 14px on mobile */
-            }
-            
-            /* Adjust heading sizes for mobile */
-            h1 {
-                font-size: var(--text-2xl);
-            }
-            
-            h2 {
-                font-size: var(--text-xl);
-            }
-            
-            h3 {
-                font-size: var(--text-lg);
-            }
-        }
-        
-        /* Responsive header height */
-        @media (max-width: 1023px) {
-            body {
-                --header-height: 80px; /* Tablet */
-            }
-        }
-        
-        @media (max-width: 767px) {
-            body {
-                --header-height: 70px; /* Mobile */
-            }
-        }
-
-        h1, h2, h3, h4, h5, h6 {
-            font-family: 'Montserrat', sans-serif;
-            line-height: var(--leading-tight);
-        }
-        
-        /* Body text readability */
-        p {
-            line-height: var(--leading-relaxed);
-        }
-        
-        /* Improve readability of long-form content */
-        .prose p {
-            line-height: var(--leading-loose);
-            margin-bottom: 1em;
-        }
-        
-        /* Ensure all major containers respect viewport width */
-        #main-layout, #main-content {
-            max-width: 100vw;
-        }
-        
-        /* Mobile menu - switch at lg breakpoint (1024px) 
-           2x3 grid is more compact, can show on smaller screens */
-        @media (max-width: 1023px) {
-            .mobile-menu-hidden {
-                display: none;
-            }
-        }
-        
-        /* Mobile search sidebar - full screen on mobile */
-        @media (max-width: 767px) {
-            #search-sidebar {
-                width: 100vw !important;
-                right: 0;
-            }
-            
-            #search-sidebar > div {
-                padding: 1rem;
-            }
-            
-            /* Adjust search results height for mobile */
-            #search-results {
-                height: calc(100vh - 180px) !important;
-            }
-        }
-        
-        /* Navigation overflow handling */
-        @media (min-width: 769px) {
-            .nav-line-scroll {
-                overflow-x: auto;
-                overflow-y: hidden;
-                white-space: nowrap;
-            }
-            
-            .nav-line-scroll::-webkit-scrollbar {
-                height: 4px;
-            }
-            
-            .nav-line-scroll::-webkit-scrollbar-track {
-                background: #f1f1f1;
-            }
-            
-            .nav-line-scroll::-webkit-scrollbar-thumb {
-                background: #888;
-                border-radius: 2px;
-            }
-        }
-        /* Frosted glass effect */
-        .backdrop-blur-md {
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-        }
-        
-        .backdrop-blur-sm {
-            backdrop-filter: blur(8px);
-            -webkit-backdrop-filter: blur(8px);
-        }
-        
-        /* Text utilities */
-        .line-clamp-2 {
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-        }
-
-        .line-clamp-3 {
-            display: -webkit-box;
-            -webkit-line-clamp: 3;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-        }
-        
-        .drop-shadow-lg {
-            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
-        }
-
-        .scrollbar-hide {
-            -ms-overflow-style: none;
-            scrollbar-width: none;
-        }
-
-        .scrollbar-hide::-webkit-scrollbar {
-            display: none;
-        }
-        
-        /* Screen reader only utility */
-        .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;
-        }
-        
-        .sr-only:focus {
-            position: static;
-            width: auto;
-            height: auto;
-            padding: inherit;
-            margin: inherit;
-            overflow: visible;
-            clip: auto;
-            white-space: normal;
-        }
-        
-        /* Mobile carousel improvements */
-        @media (max-width: 767px) {
-            /* Hide carousel navigation arrows on mobile */
-            .carousel-arrow {
-                display: none;
-            }
-            
-            /* Smooth touch scrolling for carousels */
-            .carousel-scroll {
-                -webkit-overflow-scrolling: touch;
-                scroll-behavior: smooth;
-            }
-            
-            /* Add padding to carousel for better touch targets */
-            .carousel-scroll > * {
-                scroll-snap-align: start;
-            }
-        }
-        
-        /* Carousel arrow styling */
-        .carousel-arrow {
-            transition: opacity 0.2s, transform 0.2s;
-        }
-        
-        .carousel-arrow:hover {
-            transform: scale(1.1);
-        }
-        
-        .carousel-arrow:active {
-            transform: scale(0.95);
-        }
-        
-        /* Custom scrollbar for research area card descriptions */
-        .overflow-y-auto::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .overflow-y-auto::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .overflow-y-auto::-webkit-scrollbar-thumb {
-            background: #cbd5e0;
-            border-radius: 2px;
-        }
-        
-        .overflow-y-auto::-webkit-scrollbar-thumb:hover {
-            background: #a0aec0;
-        }
-
-        /* Search results scrolling */
-        #search-results {
-            scrollbar-width: thin;
-            scrollbar-color: #cbd5e0 #f7fafc;
-        }
-
-        #search-results::-webkit-scrollbar {
-            width: 6px;
-        }
-
-        #search-results::-webkit-scrollbar-track {
-            background: #f7fafc;
-        }
-
-        #search-results::-webkit-scrollbar-thumb {
-            background: #cbd5e0;
-            border-radius: 3px;
-        }
-
-        #search-results::-webkit-scrollbar-thumb:hover {
-            background: #a0aec0;
-        }
-
-        /* Overall background styling */
-        #overall-background {
-            background-attachment: fixed;
-        }
-        
-        #overall-background img {
-            object-fit: cover;
-            object-position: left top;
-        }
-
-        #page-background {
-            overflow: hidden;
-        }
-        
-        #page-background img {
-            height: 100%;
-            width: auto;
-            min-width: 100%;
-            object-fit: cover;
-            object-position: left top;
-        }
-
-        /* Semi-transparent overlays for header and search sidebar */
-        header, #search-sidebar {
-            background: rgba(255, 255, 255, 0.6);
-        }
-        
-        /* Ensure content is readable over background */
-        header *, #search-sidebar * {
-            position: relative;
-            z-index: 1;
-        }
-
-        </style>
+    <!-- Custom Styles -->
+    <link rel="stylesheet" href="styles.css">
 </head>
 <body class="bg-gray-50 text-gray-800">
     <!-- Overall Background Image - Only for header and sidebars -->

styles.css

@@ -0,0 +1,340 @@
+/* ============================================
+   ML & Society Team Website - Custom Styles
+   ============================================ */
+
+/* ============================================
+   Base Styles & Layout
+   ============================================ */
+
+/* Prevent horizontal overflow */
+html, body {
+    overflow-x: hidden;
+    width: 100%;
+}
+
+/* Apply fonts to base elements */
+body {
+    font-family: 'Source Sans Pro', sans-serif;
+    --header-height: 100px; /* Two-line navigation menu - desktop */
+    
+    /* Typography scale - consistent font sizes */
+    --text-xs: 0.75rem;    /* 12px */
+    --text-sm: 0.875rem;   /* 14px */
+    --text-base: 1rem;     /* 16px */
+    --text-lg: 1.125rem;   /* 18px */
+    --text-xl: 1.25rem;    /* 20px */
+    --text-2xl: 1.5rem;    /* 24px */
+    --text-3xl: 1.875rem;  /* 30px */
+    --text-4xl: 2.25rem;   /* 36px */
+    
+    /* Line heights for readability */
+    --leading-tight: 1.25;
+    --leading-normal: 1.5;
+    --leading-relaxed: 1.625;
+    --leading-loose: 1.75;
+}
+
+/* Ensure all major containers respect viewport width */
+#main-layout, #main-content {
+    max-width: 100vw;
+}
+
+/* ============================================
+   Typography
+   ============================================ */
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Montserrat', sans-serif;
+    line-height: var(--leading-tight);
+}
+
+/* Body text readability */
+p {
+    line-height: var(--leading-relaxed);
+}
+
+/* Improve readability of long-form content */
+.prose p {
+    line-height: var(--leading-loose);
+    margin-bottom: 1em;
+}
+
+/* ============================================
+   Responsive Design - Mobile
+   ============================================ */
+
+/* Ensure minimum readable font size on mobile */
+@media (max-width: 767px) {
+    body {
+        font-size: 14px; /* Minimum 14px on mobile */
+    }
+    
+    /* Adjust heading sizes for mobile */
+    h1 {
+        font-size: var(--text-2xl);
+    }
+    
+    h2 {
+        font-size: var(--text-xl);
+    }
+    
+    h3 {
+        font-size: var(--text-lg);
+    }
+}
+
+/* Responsive header height */
+@media (max-width: 1023px) {
+    body {
+        --header-height: 80px; /* Tablet */
+    }
+}
+
+@media (max-width: 767px) {
+    body {
+        --header-height: 70px; /* Mobile */
+    }
+}
+
+/* Mobile menu */
+@media (max-width: 1023px) {
+    .mobile-menu-hidden {
+        display: none;
+    }
+}
+
+/* Mobile search sidebar - full screen on mobile */
+@media (max-width: 767px) {
+    #search-sidebar {
+        width: 100vw !important;
+        right: 0;
+    }
+    
+    #search-sidebar > div {
+        padding: 1rem;
+    }
+    
+    /* Adjust search results height for mobile */
+    #search-results {
+        height: calc(100vh - 180px) !important;
+    }
+}
+
+/* ============================================
+   Navigation
+   ============================================ */
+
+/* Navigation overflow handling */
+@media (min-width: 769px) {
+    .nav-line-scroll {
+        overflow-x: auto;
+        overflow-y: hidden;
+        white-space: nowrap;
+    }
+    
+    .nav-line-scroll::-webkit-scrollbar {
+        height: 4px;
+    }
+    
+    .nav-line-scroll::-webkit-scrollbar-track {
+        background: #f1f1f1;
+    }
+    
+    .nav-line-scroll::-webkit-scrollbar-thumb {
+        background: #888;
+        border-radius: 2px;
+    }
+}
+
+/* ============================================
+   Visual Effects
+   ============================================ */
+
+/* Frosted glass effect */
+.backdrop-blur-md {
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+}
+
+.backdrop-blur-sm {
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+}
+
+.drop-shadow-lg {
+    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
+}
+
+/* ============================================
+   Text Utilities
+   ============================================ */
+
+.line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* ============================================
+   Scrollbar Styles
+   ============================================ */
+
+.scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+    display: none;
+}
+
+/* Custom scrollbar for research area card descriptions */
+.overflow-y-auto::-webkit-scrollbar {
+    width: 4px;
+}
+
+.overflow-y-auto::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.overflow-y-auto::-webkit-scrollbar-thumb {
+    background: #cbd5e0;
+    border-radius: 2px;
+}
+
+.overflow-y-auto::-webkit-scrollbar-thumb:hover {
+    background: #a0aec0;
+}
+
+/* Search results scrolling */
+#search-results {
+    scrollbar-width: thin;
+    scrollbar-color: #cbd5e0 #f7fafc;
+}
+
+#search-results::-webkit-scrollbar {
+    width: 6px;
+}
+
+#search-results::-webkit-scrollbar-track {
+    background: #f7fafc;
+}
+
+#search-results::-webkit-scrollbar-thumb {
+    background: #cbd5e0;
+    border-radius: 3px;
+}
+
+#search-results::-webkit-scrollbar-thumb:hover {
+    background: #a0aec0;
+}
+
+/* ============================================
+   Accessibility
+   ============================================ */
+
+/* Screen reader only utility */
+.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;
+}
+
+.sr-only:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: inherit;
+    margin: inherit;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+}
+
+/* ============================================
+   Carousel
+   ============================================ */
+
+/* Carousel arrow styling */
+.carousel-arrow {
+    transition: opacity 0.2s, transform 0.2s;
+}
+
+.carousel-arrow:hover {
+    transform: scale(1.1);
+}
+
+.carousel-arrow:active {
+    transform: scale(0.95);
+}
+
+/* Mobile carousel improvements */
+@media (max-width: 767px) {
+    /* Hide carousel navigation arrows on mobile */
+    .carousel-arrow {
+        display: none;
+    }
+    
+    /* Smooth touch scrolling for carousels */
+    .carousel-scroll {
+        -webkit-overflow-scrolling: touch;
+        scroll-behavior: smooth;
+    }
+    
+    /* Add padding to carousel for better touch targets */
+    .carousel-scroll > * {
+        scroll-snap-align: start;
+    }
+}
+
+/* ============================================
+   Background Images
+   ============================================ */
+
+/* Overall background styling */
+#overall-background {
+    background-attachment: fixed;
+}
+
+#overall-background img {
+    object-fit: cover;
+    object-position: left top;
+}
+
+#page-background {
+    overflow: hidden;
+}
+
+#page-background img {
+    height: 100%;
+    width: auto;
+    min-width: 100%;
+    object-fit: cover;
+    object-position: left top;
+}
+
+/* Semi-transparent overlays for header and search sidebar */
+header, #search-sidebar {
+    background: rgba(255, 255, 255, 0.6);
+}
+
+/* Ensure content is readable over background */
+header *, #search-sidebar * {
+    position: relative;
+    z-index: 1;
+}
+