<header class="sticky top-0 z-50 py-4 shadow-skeuomorphic-light dark:shadow-skeuomorphic-dark bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
<nav class="container mx-auto flex flex-col md:flex-row items-center justify-between px-4 md:px-6 lg:px-8">
<!-- Logo/Site Title -->
<div class="flex items-center mb-4 md:mb-0">
<a href="#" class="text-2xl lg:text-3xl font-extrabold text-gray-800 dark:text-gray-100 uppercase tracking-widest leading-none">
<span class="text-red-600 dark:text-red-500">NEWS</span>CAST
</a>
</div>
<!-- Navigation Links -->
<div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4 lg:space-x-6 items-center flex-grow justify-center">
<a href="#" class="nav-button">
<span class="button-text">Latest</span>
</a>
<a href="#" class="nav-button">
<span class="button-text">Politics</span>
</a>
<a href="#" class="nav-button">
<span class="button-text">Business</span>
</a>
<a href="#" class="nav-button">
<span class="button-text">Tech</span>
</a>
<a href="#" class="nav-button">
<span class="button-text">Sports</span>
</a>
<a href="#" class="nav-button">
<span class="button-text">Opinion</span>
</a>
</div>
<!-- Search and Theme Toggle -->
<div class="flex items-center space-x-4 mt-4 md:mt-0">
<!-- Search Button -->
<button class="nav-button group relative p-3 w-10 h-10 flex items-center justify-center">
<svg class="w-5 h-5 text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
<span class="sr-only">Search</span>
</button>
<!-- Theme Toggle Button -->
<button id="theme-toggle" class="nav-button group relative p-3 w-10 h-10 flex items-center justify-center">
<!-- Moon icon for light mode (default) -->
<svg id="theme-toggle-dark-icon" class="w-5 h-5 text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 transition-colors duration-200 hidden dark:block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
<!-- Sun icon for dark mode -->
<svg id="theme-toggle-light-icon" class="w-5 h-5 text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 transition-colors duration-200 dark:hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.121-7.778l.707-.707a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414zM4 10a1 1 0 01-1 1H2a1 1 0 110-2h1a1 1 0 011 1zm3.657 5.657l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM10 18a1 1 0 01-1 1v1a1 1 0 112 0v-1a1 1 0 01-1-1zm-4.95-2.121l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zm-2.121-7.778l-.707-.707a1 1 0 00-1.414 1.414l.707.707a1 1 0 001.414-1.414z"></path>
</svg>
<span class="sr-only">Toggle theme</span>
</button>
</div>
</nav>
</header>
<!-- Placeholder Content to Demonstrate Stickiness and give page height for scrolling -->
<div class="h-[1200px] bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-200 p-8 flex items-center justify-center">
<p class="text-4xl font-light opacity-30">Scroll down to see the sticky header in action.</p>
</div>
<style>
/* Skeuomorphic styles using custom properties for easy theme switching */
.shadow-skeuomorphic-light {
box-shadow:
inset 2px 2px 5px rgba(255, 255, 255, 0.7),
inset -3px -3px 8px rgba(0, 0, 0, 0.2),
5px 5px 15px rgba(0, 0, 0, 0.1),
-5px -5px 15px rgba(255, 255, 255, 0.8);
}
.dark .shadow-skeuomorphic-light, html.dark .shadow-skeuomorphic-light {
box-shadow: none; /* Remove light shadows in dark mode */
}
.shadow-skeuomorphic-dark {
box-shadow:
inset 5px 5px 10px rgba(0, 0, 0, 0.4),
inset -5px -5px 10px rgba(255, 255, 255, 0.05),
5px 5px 15px rgba(0, 0, 0, 0.4),
-5px -5px 15px rgba(255, 255, 255, 0.08);
}
.light .shadow-skeuomorphic-dark, html.light .shadow-skeuomorphic-dark {
box-shadow: none; /* Remove dark shadows in light mode */
}
/* Nav Button Base */
.nav-button {
@apply relative flex items-center justify-center px-4 py-2 text-sm font-medium rounded-full shadow-skeuomorphic-button-light dark:shadow-skeuomorphic-button-dark transition-all duration-200;
@apply bg-gradient-to-br from-gray-200 to-gray-50 dark:from-gray-800 dark:to-gray-950;
}
/* Nav Button Text */
.nav-button .button-text {
@apply text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 transition-colors duration-200;
}
/* Nav Button Hover/Active State */
.nav-button:hover {
@apply text-red-600 dark:text-red-500;
@apply shadow-skeuomorphic-button-inset-light dark:shadow-skeuomorphic-button-inset-dark;
@apply bg-gradient-to-tr from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900;
}
.shadow-skeuomorphic-button-light {
box-shadow:
3px 3px 6px rgba(0, 0, 0, 0.1),
-3px -3px 6px rgba(255, 255, 255, 0.6);
}
.shadow-skeuomorphic-button-dark {
box-shadow:
3px 3px 6px rgba(0, 0, 0, 0.6),
-3px -3px 6px rgba(255, 255, 255, 0.08);
}
.shadow-skeuomorphic-button-inset-light {
box-shadow:
inset 2px 2px 5px rgba(0, 0, 0, 0.15),
inset -2px -2px 5px rgba(255, 255, 255, 0.7);
}
.shadow-skeuomorphic-button-inset-dark {
box-shadow:
inset 3px 3px 7px rgba(0, 0, 0, 0.8),
inset -3px -3px 7px rgba(255, 255, 255, 0.05);
}
/* Media queries for responsiveness of buttons within the grid */
@media (min-width: 768px) {
.md\:flex-row > .nav-button {
padding-left: 1rem; /* px-4 */
padding-right: 1rem; /* px-4 */
}
}
@media (min-width: 1024px) {
.lg\:space-x-6 > .nav-button {
margin-left: 1.5rem; /* space-x-6 */
margin-right: 0; /* Override default margin from flex-row */
}
.lg\:space-x-6 > .nav-button + .nav-button {
margin-left: 1.5rem; /* Re-apply margin between siblings */
}
}
</style>
<script>
// Simple JS for theme toggle (Tailwind doesn't handle this automatically)
document.addEventListener('DOMContentLoaded', () => {
const themeToggleBtn = document.getElementById('theme-toggle');
const htmlElement = document.documentElement;
// Function to set theme based on localStorage or system preference
const setTheme = (theme) => {
if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
htmlElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
} else {
htmlElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
}
};
// Initial theme setting
setTheme(localStorage.getItem('theme'));
// Toggle theme on button click
themeToggleBtn.addEventListener('click', () => {
if (htmlElement.classList.contains('dark')) {
setTheme('light');
} else {
setTheme('dark');
}
});
});
</script>
