Files
emaui/libs/ui/src/lib/landing/landing.css

60 lines
1.6 KiB
CSS

/* Public landing page — scoped under .ema-landing so nothing leaks into the
rest of either app. Neither app's global CSS (portal's .ema-page-enter /
.ema-hover-lift, portal's --ema-surface-*) is available here, so this file
is self-contained. */
/* `scroll-behavior` only affects the element that actually scrolls — for a
full page that's `html`, not this div, so it has to live here. Scoped with
:has() so it only applies while the landing page is mounted. */
html:has(.ema-landing) {
scroll-behavior: smooth;
}
.ema-landing section[id] {
/* Offsets anchor jumps by the sticky header height so the heading isn't
hidden underneath it. Keep in sync with the header's fixed height. */
scroll-margin-top: 72px;
}
.ema-landing .ema-landing-fade {
animation: ema-landing-fade-up 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ema-landing-fade-up {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ema-landing .ema-landing-hover {
transition:
transform 160ms ease,
box-shadow 160ms ease,
border-color 160ms ease;
}
.ema-landing .ema-landing-hover:hover {
transform: translateY(-3px);
}
/* Amharic runs 20-40% longer than English and falls back to a different font
(Inter has no Ethiopic glyphs), so it needs more vertical room. */
.ema-landing:lang(am) {
line-height: 1.7;
}
@media (prefers-reduced-motion: reduce) {
html:has(.ema-landing) {
scroll-behavior: auto;
}
.ema-landing .ema-landing-fade,
.ema-landing .ema-landing-hover {
animation: none;
transition: none;
}
}