83 lines
3.1 KiB
SCSS
83 lines
3.1 KiB
SCSS
// Styles specific to the Home Page layout (.backendlayout-home_page)
|
|
|
|
.backendlayout-home_page {
|
|
|
|
// --- Target the header element ---
|
|
header {
|
|
// --- Mobile First: Always Primary Background ---
|
|
@apply bg-primary text-white;
|
|
|
|
// Mobile link/icon colors (on primary background)
|
|
#mainNav .nav-link { // Target links within #mainNav
|
|
@apply text-white hover:text-gray-200;
|
|
}
|
|
#mainNav .nav-toggle-icon,
|
|
#mainNav .nav-toggle-icon::before,
|
|
#mainNav .nav-toggle-icon::after {
|
|
@apply bg-white; // Ensure mobile toggle is visible
|
|
}
|
|
// Adjust mobile submenu link colors if needed (depends on dropdown background)
|
|
#mainNav .sub-menu .nav-link {
|
|
@apply text-gray-700 hover:text-black; // Assuming light dropdown background
|
|
}
|
|
|
|
// --- Desktop Styles ---
|
|
@screen lg {
|
|
// Initial state: Transparent background, fixed position
|
|
@apply fixed top-0 left-0 right-0 z-50 bg-transparent transition-colors duration-300 ease-in-out;
|
|
|
|
// Initial link colors and background for transparent header (desktop)
|
|
#mainNav .nav-link {
|
|
@apply bg-white text-primary hover:text-primary px-3 py-1 rounded; // Add bg-white, padding, and rounded corners
|
|
}
|
|
// Ensure mobile toggle icon also uses primary color initially on desktop if visible (though usually hidden)
|
|
#mainNav .nav-toggle-icon,
|
|
#mainNav .nav-toggle-icon::before,
|
|
#mainNav .nav-toggle-icon::after {
|
|
@apply bg-primary;
|
|
}
|
|
// Desktop submenu link colors (assuming light dropdown background)
|
|
#mainNav .sub-menu .nav-link {
|
|
@apply text-gray-700 hover:text-black;
|
|
}
|
|
|
|
// Scrolled state: Primary background (desktop)
|
|
&.scrolled {
|
|
@apply bg-primary shadow-md;
|
|
|
|
// Link colors for primary background (desktop scrolled)
|
|
#mainNav .nav-link {
|
|
@apply bg-primary text-white hover:text-gray-200;
|
|
}
|
|
// Submenu link colors likely don't need changing here if dropdown is consistent
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- Default styles for header on NON-home pages ---
|
|
// Ensures header has a background and correct colors on other pages
|
|
body:not(.backendlayout-home_page) {
|
|
header {
|
|
@apply bg-primary text-white; // Or your desired default background/text
|
|
|
|
#mainNav .nav-link {
|
|
@apply text-white hover:text-gray-200;
|
|
}
|
|
#mainNav .nav-toggle-icon,
|
|
#mainNav .nav-toggle-icon::before,
|
|
#mainNav .nav-toggle-icon::after {
|
|
@apply bg-white;
|
|
}
|
|
#mainNav .sub-menu .nav-link {
|
|
@apply text-gray-700 hover:text-black; // Assuming light dropdown background
|
|
}
|
|
}
|
|
// On non-home pages, main content doesn't need extra padding-top
|
|
@screen lg {
|
|
main {
|
|
@apply pt-0; // Reset padding if needed
|
|
}
|
|
}
|
|
}
|