/*
* Shared hero backdrop + sticky nav scroll styling, used across every page so
* the marketing/home aesthetic carries through to learn/admin/etc.
*
* To use, page must:
* 1. Include this file:
* 2. Include the boot script:
* 3. Render the backdrop element near the top of :
*
*
*
*
*
*
*
*
*
* 4. Render the nav with `id="eze-site-nav"` and the transparent classes
* (`nano-bg--transparent nano-border--0`). The boot script swaps them
* to `nano-bg--light` once the user scrolls past the threshold.
*/
/* Sticky site nav with smooth color transition on scroll. */
#eze-site-nav.eze-site-nav {
position: sticky;
top: 0;
z-index: var(--z-sticky);
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
#eze-site-nav.eze-site-nav--scrolled {
box-shadow: 0 1px 0 var(--color-layer-02);
}
/* Hero gradient overlay — subtle primary tint at the top of every page. */
.app__hero-color {
position: absolute;
height: 500px;
background: linear-gradient(
to bottom,
color-mix(in srgb, var(--color-primary) 15%, transparent) 0%,
transparent 100%
);
inset: 0;
z-index: -10;
}
/* World map decoration — animated, subtle, non-interactive. */
.app__hero-image {
position: absolute;
height: 500px;
inset: 0;
z-index: -10;
opacity: 0.3;
overflow: hidden;
pointer-events: none;
}
@media (prefers-color-scheme: dark) {
html:not([data-nano-theme]) .app__hero-image {
filter: invert(1);
opacity: 0.1;
}
}
html[data-nano-theme="dark"] .app__hero-image {
filter: invert(1);
opacity: 0.1;
}
.app__hero-image__track {
display: flex;
width: 200%;
height: 100%;
will-change: transform;
animation: app-hero-world-pan 180s linear infinite;
}
.app__hero-image__tile {
flex: 0 0 50%;
height: 100%;
min-height: 100%;
background-image: url(/images/world.svg);
background-position: center;
background-repeat: no-repeat;
/* Preserve aspect ratio on narrow viewports (avoid 100% 100% stretch). */
background-size: cover;
}
@keyframes app-hero-world-pan {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.app__hero-image__track {
animation: none;
}
}