112 lines
2.5 KiB
CSS
112 lines
2.5 KiB
CSS
|
/* === 1. HEADER: Starts transparent, turns indigo later === */
|
||
|
|
.md-header {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
z-index: 1000;
|
||
|
|
box-shadow: none !important;
|
||
|
|
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Transparent before scroll */
|
||
|
|
.md-header:not(.scrolled) {
|
||
|
|
background-color: rgba(0, 0, 0, 0.01) !important;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* After scroll past hero */
|
||
|
|
.md-header.scrolled {
|
||
|
|
background-color: var(--md-primary-fg-color);
|
||
|
|
box-shadow: var(--md-shadow-z2);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === 2. HERO BANNER === */
|
||
|
|
.hero-banner {
|
||
|
|
background:
|
||
|
|
linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
|
||
|
|
url('../assets/banner1.png') no-repeat center center;
|
||
|
|
background-size: cover;
|
||
|
|
color: white;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
width: 100vw;
|
||
|
|
margin-left: calc(50% - 50vw);
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
min-height: 100vh;
|
||
|
|
padding: 6rem 2rem 2rem;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 1s ease-in-out;
|
||
|
|
position: relative;
|
||
|
|
z-index: 0; /* Ensure it's underneath the header */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === 3. PAGE OFFSET FIX: eliminate top margin under fixed header === */
|
||
|
|
.md-main__inner {
|
||
|
|
margin-top: 0 !important;
|
||
|
|
}
|
||
|
|
.md-content {
|
||
|
|
margin-top: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === 4. HEADER TEXT COLOR: White on hero, revert on scroll === */
|
||
|
|
.md-header__title,
|
||
|
|
.md-header__button,
|
||
|
|
.md-search__input,
|
||
|
|
.md-search__icon,
|
||
|
|
.md-nav__link,
|
||
|
|
.md-icon {
|
||
|
|
color: white !important;
|
||
|
|
fill: white !important;
|
||
|
|
transition: color 0.3s ease, fill 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.md-header.scrolled .md-header__title,
|
||
|
|
.md-header.scrolled .md-header__button,
|
||
|
|
.md-header.scrolled .md-search__input,
|
||
|
|
.md-header.scrolled .md-search__icon,
|
||
|
|
.md-header.scrolled .md-nav__link,
|
||
|
|
.md-header.scrolled .md-icon {
|
||
|
|
color: var(--md-primary-bg-color) !important;
|
||
|
|
fill: var(--md-primary-bg-color) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-banner h1,
|
||
|
|
.hero-banner p {
|
||
|
|
color: white !important;
|
||
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.4); /* Optional: adds readability over image */
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* === Sidebar Fade (desktop only) === */
|
||
|
|
@media screen and (min-width: 76.25em) {
|
||
|
|
.md-sidebar--primary {
|
||
|
|
transition: opacity 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === Ensure sidebar menu text matches theme mode === */
|
||
|
|
.md-sidebar__inner,
|
||
|
|
.md-nav__title,
|
||
|
|
.md-nav__link {
|
||
|
|
color: var(--md-typeset-color) !important;
|
||
|
|
background-color: var(--md-default-bg-color);
|
||
|
|
transition: color 0.3s ease, background-color 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Optional: add better hover contrast */
|
||
|
|
.md-nav__link:hover {
|
||
|
|
background-color: var(--md-accent-bg-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|