:root { --color-primary: #4d98a9; --color-secondary: #001941; --color-action: #ffad00; --color-info: #787878; --color-background: #f8f9fa; --color-border: #ebe3d7; } html { font-family: "LufthansaText", sans-serif; font-size: 16px; } div, section { scroll-margin-top: 120px; } [v-cloak] { display: none; } h1, h2, h3, h4, h5, h6 { font-family: "LufthansaHead", sans-serif; font-weight: bold; } h1 { font-size: 2.5rem; line-height: 1.2; } h2 { font-size: 2rem; line-height: 1.25; } h3 { font-size: 1.625rem; line-height: 1.3; } h4 { font-size: 1.375rem; line-height: 1.35; } h5 { font-size: 1.125rem; line-height: 1.4; } h6 { font-size: 1rem; line-height: 1.5; } @media (max-width: 767px) { h1 { font-size: 2rem; line-height: 1.2; } h2 { font-size: 1.75rem; line-height: 1.25; } h3 { font-size: 1.375rem; line-height: 1.3; } h4 { font-size: 1.125rem; line-height: 1.35; } h5 { font-size: 1rem; line-height: 1.4; } h6 { font-size: 0.875rem; line-height: 1.5; } } .info a { color: var(--color-secondary); text-decoration: none; } .info ul { list-style: disc; padding-left: 20px; } a:hover { color: var(--color-action); } .btn-primary { display: flex; justify-content: center; align-items: center; background-color: var(--color-primary); color: var(--color-white) !important; border-radius: var(--radius-xl); padding: 10px 20px; } .btn-primary:hover { cursor: pointer; background-color: var(--color-action); } .btn-secondary { display: flex; justify-content: center; align-items: center; background-color: var(--color-secondary); color: var(--color-white) !important; border-radius: var(--radius-xl); padding: 10px 20px; } .btn-secondary:hover { cursor: pointer; background-color: var(--color-action); } .btn-action { display: flex; justify-content: center; align-items: center; background-color: var(--color-action); color: var(--color-white) !important; border-radius: var(--radius-xl); padding: 8px 20px; } .btn-action:hover { cursor: pointer; background-color: var(--color-primary); } .swiper-navigation-icon { color: var(--color-primary); } .swiper-button-next, .swiper-button-prev { width: 40px; height: 40px; background: white; border-radius: 50%; top: 50%; margin-top: -20px; } .swiper-button-next svg, .swiper-button-prev svg { height: 16px; } .swiper-pagination-bullet { width: 8px; height: 8px; background-color: #ccc; opacity: 0.8; border-radius: 50%; transition: all 0.3s ease; } .swiper-pagination-bullet-active { background-color: var(--color-action); width: 30px; height: 8px; border-radius: 9999px; opacity: 1; } /* Vanilla Calendar theme customization */ .vanilla-calendar { font-family: inherit; z-index: 100; } .vanilla-calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .vanilla-calendar-header__content { font-weight: 600; color: var(--color-primary); } .vanilla-calendar-arrow { cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s; } .vanilla-calendar-arrow:hover { background-color: #f3f4f6; } .vanilla-calendar-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 0.5rem; } .vanilla-calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); } .vanilla-calendar-day__btn_selected, .vanilla-calendar-day__btn_today, .vanilla-calendar-months__month_selected, .vanilla-calendar-years__year_selected { background-color: var(--color-secondary) !important; color: white !important; font-weight: 600; } .vanilla-calendar-day__btn_selected:hover, .vanilla-calendar-months__month_selected:hover, .vanilla-calendar-years__year_selected:hover, .vanilla-calendar-months__month:hover:not( .vanilla-calendar-months__month_disabled ), .vanilla-calendar-years__year:hover:not(.vanilla-calendar-years__year_disabled), .vanilla-calendar-day__btn:hover:not(.vanilla-calendar-day__btn_disabled) { background-color: var(--color-action) !important; color: white !important; font-weight: 600; } .vanilla-calendar-day__btn_disabled { color: #d1d5db; cursor: not-allowed; } .vanilla-calendar-day__btn_prev, .vanilla-calendar-day__btn_next { color: #9ca3af; } .loader { position: fixed; display: flex; justify-content: center; align-items: center; width: 100%; min-width: 100%; height: 100%; min-height: 100%; top: 0; left: 0; z-index: 10000 !important; background-color: rgba(255, 255, 255, 0.75); } .main-loader { width: 45px; aspect-ratio: 0.75; --c: no-repeat linear-gradient(var(--color-action) 0 0); background: var(--c) 0% 100%, var(--c) 50% 100%, var(--c) 100% 100%; background-size: 20% 65%; animation: l5 1s infinite linear; } @keyframes l5 { 20% { background-position: 0% 50%, 50% 100%, 100% 100%; } 40% { background-position: 0% 0%, 50% 50%, 100% 100%; } 60% { background-position: 0% 100%, 50% 0%, 100% 50%; } 80% { background-position: 0% 100%, 50% 100%, 100% 0%; } }<br>