/* Apply the Inter font */ body { font-family: 'Inter', sans-serif; /* Fix for mobile Safari empty space scrolling */ position: relative; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* Fix for mobile Safari viewport issues */ html { overflow-x: hidden; width: 100%; height: 100%; } /* Accessibility: links distinguishable without color only; visible focus */ a[href]:hover { text-decoration: underline; } a[href]:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .nav-topic-item:hover, .ad-link:hover, .featured-article-link:hover, .important-card:hover { text-decoration: none; } /* Liquid Glass Navigation Effect */ .liquid-glass-nav, #main-nav { background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3)) !important; backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15), inset 0 1px 0 0 rgba(255, 255, 255, 0.5), 0 1px 0 0 rgba(0, 0, 0, 0.05); overflow: hidden !important; } /* Desktop: Fixed navigation from the start */ @media only screen and (min-width: 769px) { header { padding-top: 0 !important; /* No padding - nav is fixed */ } #main-nav { position: fixed !important; top: 24px !important; /* Default position from top */ left: 50% !important; transform: translateX(-50%) !important; z-index: 1000 !important; width: calc(100% - 1.5rem) !important; max-width: calc(80rem + 60px) !important; padding: 0.875rem 1.5rem !important; /* Slightly leaner to tighten nav */ transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; height: auto !important; min-height: auto !important; align-items: center !important; } /* Ensure nav container maintains consistent height */ #main-nav .nav-container { height: auto !important; min-height: 0 !important; align-items: center !important; } /* Nav container transitions */ .nav-container { transition: justify-content 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Ensure equal spacing from nav edges to topics */ /* Nav padding is 24px (1.5rem) on both sides */ /* Both containers are flex-1 (equal width), so we need to ensure topics align the same way */ /* Add equal padding to both to ensure first/last topics are equidistant from nav edges */ .nav-topics-left { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; min-width: 0 !important; /* Since justify-end pushes topics to right, add padding-left to balance */ padding-left: 0.5rem !important; } .nav-topics-right { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; min-width: 0 !important; /* Since justify-start pushes topics to left, add padding-right to balance */ padding-right: 0.5rem !important; } /* Make both containers equal width and ensure topics align to edges */ .nav-topics-left, .nav-topics-right { flex: 1 1 0 !important; min-width: 0 !important; } /* Ensure topics align to outer edges with equal spacing */ /* Both containers are flex-1 (equal width), nav padding is 24px on both sides */ /* Left: topics at right edge of container (closest to center) */ /* Right: topics at left edge of container (closest to center) */ /* This ensures equal distance from nav edges since containers are equal width */ .nav-topics-left { justify-content: flex-end !important; } .nav-topics-right { justify-content: flex-start !important; } /* Ensure brand doesn't affect spacing - it's flex-shrink-0 with mx-4 (16px each side) */ /* Both topic containers are flex-1 so they get equal remaining space */ /* Topic containers transitions */ .nav-topics-left, .nav-topics-right { transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; overflow: hidden; height: auto !important; align-items: center !important; } /* Individual topic items transitions */ .nav-topic-item { transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* When scrolled, nav reduces and hides topics */ #main-nav.nav-stuck { padding: 0.75rem 1.5rem !important; max-width: 300px !important; } /* Center the nav container when scrolled */ #main-nav.nav-stuck .nav-container { justify-content: center !important; } /* Hide topic containers when scrolled - immediate hide */ #main-nav.nav-stuck .nav-topics-left, #main-nav.nav-stuck .nav-topics-right { opacity: 0 !important; visibility: hidden !important; max-height: 0 !important; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Hide individual topic items when scrolled */ #main-nav.nav-stuck .nav-topic-item { opacity: 0; transform: scale(0.8); width: 0; overflow: hidden; padding: 0; margin: 0; pointer-events: none; } /* Show brand when scrolled - ensure it's centered */ #main-nav.nav-stuck .nav-brand { display: block; margin: 0 auto; } /* Show topics when not scrolled - delayed show after nav expands */ #main-nav:not(.nav-stuck) .nav-topic-item { opacity: 1; transform: scale(1); width: auto; pointer-events: auto; } /* When expanding (removing nav-stuck), keep topics hidden and height 0 */ #main-nav.expanding .nav-topics-left, #main-nav.expanding .nav-topics-right { opacity: 0 !important; visibility: hidden !important; max-height: 0 !important; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* When expanded, show topics with smooth fade-in and restore height */ #main-nav.expanded .nav-topics-left, #main-nav.expanded .nav-topics-right { opacity: 1 !important; visibility: visible !important; max-height: 100px !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Default state when not scrolled and not in transition */ #main-nav:not(.nav-stuck):not(.expanding):not(.expanded) .nav-topics-left, #main-nav:not(.nav-stuck):not(.expanding):not(.expanded) .nav-topics-right { opacity: 1 !important; visibility: visible !important; max-height: 100px !important; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } } /* Mobile: fixed navigation like desktop */ @media only screen and (max-width: 768px) { header { padding-top: 0 !important; /* No padding - nav is fixed */ } nav#main-nav.liquid-glass-nav { position: fixed !important; /* Always fixed on mobile */ top: 12px !important; /* Default gap from top */ left: 50% !important; transform: translateX(-50%) scale(1) !important; transform-origin: center center; z-index: 1000 !important; width: calc(100% - 1rem) !important; /* Narrower: was 1.5rem, now 1rem */ max-width: 95% !important; /* Ensure it doesn't get too wide */ padding: 0.6rem 0.75rem !important; /* 1.2x bigger padding for taller nav bar (0.5rem * 1.2) */ transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smooth transition for all properties */ } /* Override the px-4 py-2 from HTML for mobile - ensure 1.2x bigger padding when not scrolled */ @media only screen and (max-width: 768px) { nav#main-nav.liquid-glass-nav:not(.nav-stuck) { padding: 0.6rem 0.4rem !important; /* Reduced to push icons to edges */ } } /* Make mobile nav buttons closer to title */ @media only screen and (max-width: 768px) { /* Mobile nav container - equal spacing from center title */ #main-nav:not(.nav-stuck) .flex.md\\:hidden, nav#main-nav.liquid-glass-nav:not(.nav-stuck) .flex.md\\:hidden { justify-content: space-between !important; /* Equal spacing from center */ /* Use same padding as scrolled state to prevent layout shift */ padding-left: 0.75rem !important; /* Match stabilizer fix padding */ padding-right: 0.75rem !important; /* Match stabilizer fix padding */ } /* Timeline and burger buttons - base layout properties only */ /* Don't set size/transform here - let state-specific rules handle it */ #timeline-toggle, #burger-toggle { margin: 0 !important; flex-shrink: 0 !important; flex-grow: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; align-self: center !important; /* Smooth transition - match nav width transition timing (0.5s) */ transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Timeline icon size - 1.5x bigger when not scrolled */ #timeline-toggle svg { width: 1.875rem !important; /* 1.25rem * 1.5 = 30px */ height: 1.875rem !important; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Adjust burger icon size - 1.5x bigger when not scrolled */ #burger-toggle .burger-icon { width: 27px !important; /* 18px * 1.5 */ height: 21px !important; /* 14px * 1.5 */ transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; } #burger-toggle .burger-line { height: 3px !important; /* 2px * 1.5 */ transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* FIXED: Title Size when NOT scrolled */ @media only screen and (max-width: 768px) { /* Target the absolute positioned title link directly inside the nav */ #main-nav:not(.nav-stuck) .relative a.absolute { font-size: 1.5rem !important; /* Slightly smaller to create space */ line-height: 1.5rem !important; font-weight: 700 !important; letter-spacing: 0.02em !important; /* More elegant spacing */ padding: 0 !important; margin: 0 !important; position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 5 !important; white-space: nowrap !important; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smooth transition for all properties */ } } /* Buttons are positioned via flexbox space-between in the stabilizer fix above */ /* No need for absolute positioning - flexbox handles it */ #main-nav .flex.md\\:hidden a { order: 2 !important; z-index: 5 !important; /* Lower than buttons but still visible */ } } /* Scrolled state - Widen the container and reduce padding */ nav#main-nav.liquid-glass-nav.nav-stuck { width: calc((100% - 1rem) / 2) !important; /* 2 times narrower - restore animation */ /* Set min-width to 1.5 times the actual width of scrolled state */ min-width: calc(((100% - 1rem) / 2) * 1.5) !important; /* 1.5 times bigger */ /* REDUCED: Reduce padding so icons can get closer to the edge */ padding: 0.4rem 0.75rem !important; /* Was 1.5rem (too thick) */ max-width: 85% !important; /* Increased slightly to be safe on small phones */ transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smooth transition for all properties */ } /* CRITICAL FIX: When expanding, transition from scrolled width to full width */ /* This prevents the nav from getting narrower before expanding */ nav#main-nav.liquid-glass-nav.expanding { /* Start with scrolled width and transition to full width - NEVER NARROWER */ width: calc(100% - 1rem) !important; /* Transition directly to full width */ min-width: 280px !important; /* Maintain minimum width (prevents narrowing below scrolled state) */ max-width: 95% !important; /* Full max width */ padding: 0.6rem 0.4rem !important; /* Unscrolled padding */ /* Smooth transition from scrolled to full width */ transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important, max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important, padding 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* --- STABILIZER FIX: PREVENT ICON TELEPORTING --- */ @media only screen and (max-width: 768px) { /* 1. Force the inner container to NEVER change layout mode */ #main-nav .flex.md\\:hidden { /* Always fill the nav bar */ width: 100% !important; /* Always pin icons to the far edges with equal spacing */ justify-content: space-between !important; /* Equal padding on both sides for symmetry - consistent across states */ padding-left: 0.75rem !important; padding-right: 0.75rem !important; /* Vertical center always */ align-items: center !important; /* Never use gap - let width control the distance */ gap: 0 !important; /* Lock position context */ position: relative !important; /* DISABLE layout transitions on the container itself */ /* We only want the PARENT nav width to animate, not this container */ transition: none !important; /* Prevent layout shifts during nav width transition */ min-width: 0 !important; overflow: visible !important; /* Ensure buttons stay at edges during nav width transition */ box-sizing: border-box !important; } /* Scrolled state - Ensure NO inner padding interferes */ #main-nav.nav-stuck .flex.md\\:hidden { /* CRITICAL: Set these to 0 so the icons go to the very corners */ padding-left: 0 !important; padding-right: 0 !important; /* Keep the layout logic */ width: 100% !important; justify-content: space-between !important; align-items: center !important; gap: 0 !important; position: relative !important; transition: none !important; min-width: 0 !important; overflow: visible !important; box-sizing: border-box !important; } /* 2. Lock the icons to prevent them from collapsing/jumping */ #timeline-toggle, #burger-toggle { /* Never let them shrink or disappear */ flex-shrink: 0 !important; /* Keep them visible blocks */ display: flex !important; align-items: center !important; justify-content: center !important; /* Smooth scale only - no margin/padding jumping */ transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* 3. Ensure the Title stays absolutely centered and independent */ #main-nav .relative a.absolute { /* Strict centering that ignores flex layout */ position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; /* Ensure it doesn't push icons */ margin: 0 !important; white-space: nowrap !important; } /* 4. Title when SCROLLED (Keep Absolute, just shrink text) */ #main-nav.nav-stuck .relative a.absolute { font-size: 1.25rem !important; /* Shrink from 1.875rem to 1.25rem */ line-height: 1.25rem !important; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* 5. Icons when SCROLLED - 20% bigger */ #main-nav.nav-stuck #timeline-toggle, #main-nav.nav-stuck #burger-toggle { transform: scale(0.85) !important; /* Slight shrink for formal feel */ transform-origin: center center !important; /* 20% bigger: 2rem * 1.2 = 2.4rem */ width: 2.4rem !important; /* 20% bigger than 2rem */ height: 2.4rem !important; /* 20% bigger than 2rem */ padding: 0.45rem !important; /* 0.375rem * 1.2 = 0.45rem - 20% bigger */ } /* 6. Icons when NOT scrolled - TARGET position for animation */ #main-nav:not(.nav-stuck) #timeline-toggle, #main-nav:not(.nav-stuck) #burger-toggle { transform: scale(1) !important; /* Full size - this is the TARGET */ transform-origin: center center !important; width: 2.625rem !important; /* Target size - animates from 2.4rem */ height: 2.625rem !important; /* Target size - animates from 2.4rem */ padding: 0.5625rem !important; /* Target padding - animates from 0.45rem */ } /* Timeline icon - 20% bigger when scrolled */ #main-nav.nav-stuck #timeline-toggle svg { width: 1.5rem !important; /* 1.25rem * 1.2 = 1.5rem (24px) - 20% bigger */ height: 1.5rem !important; /* 1.25rem * 1.2 = 1.5rem (24px) - 20% bigger */ transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Burger icon - 20% bigger when scrolled */ #main-nav.nav-stuck #burger-toggle .burger-icon { width: 21.6px !important; /* 18px * 1.2 = 21.6px - 20% bigger */ height: 16.8px !important; /* 14px * 1.2 = 16.8px - 20% bigger */ transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; } #main-nav.nav-stuck #burger-toggle .burger-line { height: 2.4px !important; /* 2px * 1.2 = 2.4px - 20% bigger */ transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; } } } /* Mobile: floating buttons side by side above bottom edge */ @media only screen and (max-width: 768px) { #floating-theme-toggle { bottom: var(--float-theme-bottom) !important; right: 24px !important; } #floating-lang-selector { bottom: var(--float-lang-bottom) !important; right: 85px !important; } } /* Mobile Safari: Reduce blur to prevent cloudiness */ @media only screen and (max-width: 768px) { body:not(.dark-mode) .liquid-glass-nav, body:not(.dark-mode) #main-nav { backdrop-filter: blur(5px) saturate(120%) !important; -webkit-backdrop-filter: blur(5px) saturate(120%) !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.75)) !important; } /* Dark mode mobile nav */ body.dark-mode .liquid-glass-nav, body.dark-mode #main-nav { backdrop-filter: blur(10px) saturate(150%) !important; -webkit-backdrop-filter: blur(10px) saturate(150%) !important; background: linear-gradient(135deg, rgba(53, 59, 78, 0.8), rgba(23, 31, 48, 0.8)) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important; } } /* Mobile navigation container needs relative positioning */ .liquid-glass-nav > div { position: relative; } /* Animated Burger Menu Icon */ .burger-icon { position: relative; width: 24px; height: 18px; display: flex; flex-direction: column; justify-content: space-between; } .burger-line { display: block; width: 100%; height: 2.5px; background-color: currentColor; border-radius: 2px; transition: all 0.3s ease; transform-origin: center; } /* Burger menu active state (transforms to X) */ #burger-toggle.active .burger-line-1 { transform: translateY(7.75px) rotate(45deg); } #burger-toggle.active .burger-line-2 { opacity: 0; transform: scaleX(0); } #burger-toggle.active .burger-line-3 { transform: translateY(-7.75px) rotate(-45deg); } /* Dark mode burger menu color */ body.dark-mode .burger-line { background-color: #e5e7eb; } body.dark-mode #burger-toggle.active .burger-line { background-color: #ef4444; } /* Explicitly disable any before/after animations and pseudo-elements */ .liquid-glass-nav::before, .liquid-glass-nav::after, .liquid-glass-nav *::before, .liquid-glass-nav *::after { content: none !important; display: none !important; animation: none !important; background: none !important; } /* Ensure nav items are properly positioned */ .liquid-glass-nav > * { position: relative; z-index: 1; } /* Carousel styles */ .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Big Search Bar Styles */ #main-search-input::placeholder { color: #9ca3af; opacity: 0.8; } body.dark-mode #main-search-input::placeholder { color: #6b7280; opacity: 0.7; } #main-search-input:focus { transform: translateY(-1px); box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.1), 0 10px 10px -5px rgba(239, 68, 68, 0.04); } body.dark-mode #main-search-input:focus { box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.2), 0 10px 10px -5px rgba(239, 68, 68, 0.1); } /* Ensure desktop search bar size is not overridden */ @media (min-width: 768px) { #main-search-input { padding-left: 2rem !important; /* md:px-8 */ padding-right: 2rem !important; padding-top: 1.25rem !important; /* md:py-5 */ padding-bottom: 1.25rem !important; font-size: 1.5rem !important; /* md:text-2xl */ line-height: 2rem !important; border-radius: 0.75rem !important; /* md:rounded-xl */ } #main-search-form button[type="submit"] { padding-left: 1.5rem !important; /* md:px-6 */ padding-right: 1.5rem !important; padding-top: 1.25rem !important; /* md:py-5 */ padding-bottom: 1.25rem !important; border-radius: 0.75rem !important; /* md:rounded-xl */ } #main-search-form button[type="submit"] svg { width: 1.5rem !important; /* md:w-6 */ height: 1.5rem !important; /* md:h-6 */ } } /* Search bar container dark mode */ body.dark-mode .liquid-glass-nav { background: linear-gradient(135deg, rgba(53, 59, 78, 0.8), rgba(23, 31, 48, 0.8)) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } /* Floating Search Results Dropdown */ #search-results-dropdown { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); z-index: 9999 !important; position: absolute !important; } body.dark-mode #search-results-dropdown { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } /* Ad Styling for Homepage */ .ad-container { margin: 0; text-align: center; width: 100%; } /* Ensure body is positioned for absolute children */ body { position: relative; } /* Ads page: TOP banner showcase (the