skycel
ca828d86b4
Default layout with sticky AppHeader (nav, LanguageSwitcher, mobile hamburger), AppFooter with social links. Minimal layout for express mode. 7 placeholder pages with localized EN routes. Page transitions (fade+slide), prefers-reduced-motion support, custom scroll behavior, error.vue, useSeo composable, SVG favicon. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
61 lines
1.1 KiB
CSS
61 lines
1.1 KiB
CSS
/* Transition de page - effet "changement de zone" */
|
|
.page-enter-active,
|
|
.page-leave-active {
|
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
.page-enter-from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
.page-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
/* Transition de layout */
|
|
.layout-enter-active,
|
|
.layout-leave-active {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.layout-enter-from,
|
|
.layout-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Mobile menu slide */
|
|
.slide-down-enter-active,
|
|
.slide-down-leave-active {
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.slide-down-enter-from,
|
|
.slide-down-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-8px);
|
|
}
|
|
|
|
/* Respect de prefers-reduced-motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.page-enter-active,
|
|
.page-leave-active,
|
|
.layout-enter-active,
|
|
.layout-leave-active,
|
|
.slide-down-enter-active,
|
|
.slide-down-leave-active {
|
|
transition: none;
|
|
}
|
|
|
|
.page-enter-from,
|
|
.page-leave-to,
|
|
.layout-enter-from,
|
|
.layout-leave-to,
|
|
.slide-down-enter-from,
|
|
.slide-down-leave-to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|