:root { /* Light Theme Defaults for custom properties not directly covered by Tailwind's dark: */ --heading-font: "Lora", serif; /* New variable for headings */ /* Only include non-color-related or non-Tailwind-overridden variables here */ } body { font-family: "Inter", sans-serif; scroll-behavior: smooth; /* Background and color are now handled by Tailwind classes in HTML and the 'dark' class */ color-scheme: light dark; /* Enable browser's native dark mode preference detection */ transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for theme change */ } /* NO body.dark-mode or @media prefers-color-scheme in style.css for color overrides */ /* All colors are now controlled directly by Tailwind's dark: prefixes in abyss.html and the 'dark' class added to the element by script.js */ /* Headings Font Style (still uses custom property) */ h2 { font-family: var(--heading-font); /* Apply Lora to H2 elements */ } /* Custom scrollbar for a cleaner look */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; /* Light mode default for scrollbar track */ border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #555; cursor: pointer; } /* Dark mode scrollbar styles - directly target using the 'dark' class on html */ html.dark ::-webkit-scrollbar-track { background: #333; /* Dark mode scrollbar track */ } html.dark ::-webkit-scrollbar-thumb { background: #bbb; } html.dark ::-webkit-scrollbar-thumb:hover { background: #ddd; } /* Style for the video placeholder to mimic a video player */ /* Video Player Container */ /* Adjust margin and max-width to fit *within* the card, if necessary */ .video-player-container { position: relative; width: 100%; /* max-width: 900px; -- REMOVED: No longer needed as it's constrained by parent card */ margin: 0 auto; /* Adjust margin to fit well within the card's padding */ background-color: #000; /* Black background for video player */ border-radius: 8px; /* Slight rounding for the player itself */ overflow: hidden; /* Ensures embedded video stays within bounds */ /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); -- REMOVED: Outer card provides shadow */ } #mainVideoPlayer { position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio (9 / 16 = 0.5625) */ height: 0; overflow: hidden; } #mainVideoPlayer iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .video-placeholder-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #222; /* Dark background for placeholder */ color: #fff; cursor: pointer; transition: opacity 0.3s ease; } .video-placeholder-content img { width: 100%; height: 100%; object-fit: cover; /* Cover the container without distortion */ position: absolute; top: 0; left: 0; z-index: 1; } .video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent overlay */ z-index: 2; opacity: 1; /* Initially visible */ transition: background-color 0.3s ease, opacity 0.3s ease; } .video-placeholder-content:hover .video-overlay { background-color: rgba(0, 0, 0, 0.8); /* Darker on hover */ } #currentVideoTitle { font-size: 1.2rem; /* Adjusted for smaller card size */ margin-bottom: 0.5rem; /* Adjusted for smaller card size */ text-align: center; padding: 0 0.5rem; /* Adjusted for smaller card size */ } .play-button { background-color: rgba(255, 0, 0, 0.8); /* YouTube red */ color: white; border: none; border-radius: 50%; width: 60px; /* Adjusted for smaller card size */ height: 60px; /* Adjusted for smaller card size */ font-size: 2rem; /* Adjusted for smaller card size */ display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; } .play-button:hover { background-color: #ff0000; transform: scale(1.1); } /* Video Thumbnail Carousel */ .video-thumbnail-carousel { display: flex; align-items: center; justify-content: center; margin: 0 auto; /* Adjust margin to fit well within the card's padding */ /* max-width: 900px; -- REMOVED: Constrained by parent card */ } .carousel-nav { background-color: #3b82f6; /* Tailwind sky-500 */ color: white; border: none; padding: 0.5rem 0.8rem; /* Adjusted for smaller size */ font-size: 1rem; /* Adjusted for smaller size */ cursor: pointer; border-radius: 5px; margin: 0 5px; /* Adjusted for smaller size */ transition: background-color 0.3s ease; } html.dark .carousel-nav { background-color: #0c4a6e; /* Tailwind sky-800 for dark mode */ } .carousel-nav:hover { background-color: #2563eb; /* Darker sky-600 */ } html.dark .carousel-nav:hover { background-color: #075985; /* Darker sky-900 */ } .thumbnails-wrapper { display: flex; overflow-x: scroll; /* Enable horizontal scrolling */ -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ scroll-behavior: smooth; /* Smooth scroll when navigating */ gap: 10px; /* Space between thumbnails, adjusted for smaller size */ padding: 5px 0; /* Padding for scrollbar, adjusted for smaller size */ flex-grow: 1; /* Allow wrapper to take available space */ justify-content: flex-start; /* Align items to the start initially */ } /* Hide scrollbar for a cleaner look, but still allow scrolling */ .thumbnails-wrapper::-webkit-scrollbar { height: 6px; /* Smaller scrollbar height */ } .thumbnails-wrapper::-webkit-scrollbar-thumb { background: #9ca3af; /* Tailwind gray-400 */ border-radius: 3px; } html.dark .thumbnails-wrapper::-webkit-scrollbar-thumb { background: #4b5563; /* Tailwind gray-600 */ } .thumbnails-wrapper::-webkit-scrollbar-track { background: #e5e7eb; /* Tailwind gray-200 */ } html.dark .thumbnails-wrapper::-webkit-scrollbar-track { background: #374151; /* Tailwind gray-700 */ } .thumbnail-item { flex: 0 0 auto; /* Do not grow, do not shrink, base on content */ width: 120px; /* Fixed width for thumbnails, adjusted for smaller card size */ cursor: pointer; border: 2px solid transparent; /* Adjusted border for smaller size */ border-radius: 4px; /* Adjusted rounding for smaller size */ overflow: hidden; transition: border-color 0.3s ease, transform 0.2s ease; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* Adjusted shadow for smaller size */ position: relative; /* For the active indicator */ background-color: #fff; /* Light mode default */ } html.dark .thumbnail-item { background-color: #1f2937; /* Tailwind gray-800 for dark mode */ } .thumbnail-item img { width: 100%; height: 67.5px; /* Maintain 16:9 aspect ratio (120 * 9/16) */ object-fit: cover; display: block; } .thumbnail-title { background-color: #374151; /* Tailwind gray-700 */ color: white; padding: 0.4rem; /* Adjusted for smaller size */ font-size: 0.7rem; /* Adjusted for smaller size */ text-align: center; white-space: nowrap; /* Prevent text wrapping */ overflow: hidden; /* Hide overflowing text */ text-overflow: ellipsis; /* Add ellipsis for hidden text */ } html.dark .thumbnail-title { background-color: #111827; /* Tailwind gray-900 */ } /* Active thumbnail item style */ .thumbnail-item.active { border-color: #3b82f6; /* Tailwind sky-500 */ transform: translateY(-2px); /* Slight lift for active item */ } html.dark .thumbnail-item.active { border-color: #0ea5e9; /* Tailwind sky-400 for dark mode */ } /* Responsive adjustments (keeping these simple as fixed size is desired) */ @media (max-width: 768px) { /* No specific overrides needed if base styles are sized for small cards */ } @media (max-width: 480px) { .video-thumbnail-carousel { flex-direction: row; /* Keep as row for better use of space in a single card */ } .carousel-nav { margin: 0 5px; /* Adjust as needed */ } } /* Floating Buttons (removed theme specific colors, handled by dark: in HTML) */ #chat-toggle-button, #theme-toggle-button { transition: background-color 0.2s ease, transform 0.2s ease; /* Smooth transition for hover effects */ } /* AI Welcome Popup Positioning */ .popup-position { bottom: 56px; /* Adjusted mobile vertical position to center with chat button */ right: 4.6rem; /* Adjusted mobile horizontal position to the left of chat button */ z-index: 100; /* Ensure popup is always on top */ } @media (min-width: 768px) { /* Medium screens and up (md breakpoint) */ .popup-position { bottom: 28px; /* Adjusted desktop vertical position to center with chat button */ right: 7.1rem; /* Adjusted desktop horizontal position to the left of chat button */ } } /* Ensure your existing #ai-welcome-popup::after (tail) rules are also correct: */ /* AI Welcome Popup Speech Bubble Tail */ /* NEW TAIL STYLE: Pointing right, vertically centered on the popup's right edge (mobile & base) */ #ai-welcome-popup::after { content: ""; position: absolute; top: 50%; /* Center vertically on the popup's right edge */ right: -6px; /* Position at the right edge of the popup, sticking out */ transform: translateY(-50%); /* Adjust for perfect vertical centering */ width: 0; height: 0; border-top: 6px solid transparent; /* Top triangle side (transparent for right-pointing tip) */ border-bottom: 6px solid transparent; /* Bottom triangle side (transparent for right-pointing tip) */ border-left: 6px solid #1f2937; /* This forms the solid part of the triangle that points right (light mode) */ border-right: 0; /* No right border needed */ filter: drop-shadow(1px 0 1px rgba(0, 0, 0, 0.05)); /* Adjust shadow direction for right-pointing tail */ } /* Dark mode tail color */ html.dark #ai-welcome-popup::after { border-left: 6px solid #374151; /* Background color of the popup in dark mode (gray-700) */ /* No need to change border-bottom as it's transparent now */ } /* Adjust tail position for md screens */ @media (min-width: 768px) { #ai-welcome-popup::after { /* Override vertical centering for desktop to align with chat button */ top: auto; /* Remove top: 50% */ bottom: 4px; /* Adjusted value to align arrow vertically with chat button on desktop */ right: -6px; /* Ensure it still sticks out from the popup's right edge */ transform: none; /* Remove transform: translateY(-50%) */ } } /* Custom styling for the "Remember Me" toggle button */ .remember-me-container label .custom-checkbox-visual { background-color: #333; /* Dark background color for the outer circle */ border: 2px solid #555; /* Gray border for the outer circle */ transition: all 0.3s ease-in-out; /* Add transition for a smooth effect */ } /* Style the inner dot (initially hidden) */ .remember-me-container label .inner-dot { background-color: #007bff; /* The blue color for the filled dot */ transform: scale(0); /* Start hidden and small */ transition: all 0.3s ease-in-out; /* Add transition for a smooth effect */ } /* When the checkbox is checked, make the inner dot visible and change the outer border color */ .remember-me-container input[type="checkbox"]:checked + label .custom-checkbox-visual { border-color: #007bff; /* Change the border color to match the inner dot */ } .remember-me-container input[type="checkbox"]:checked + label .inner-dot { transform: scale(1); /* Scale up to its full size */ }