/* ============================================================ Emmye Travels — Global Stylesheet Loaded on every page alongside Tailwind CDN. ============================================================ */ /* ── Google Fonts are loaded via tags in each HTML ── */ /* ── Material Symbols defaults ───────────────────────────── */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } /* ── Glass morphism helpers ──────────────────────────────── */ .glass-effect { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .glass-card { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .glass-dark { background: rgba(22, 40, 57, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ── Hero gradient overlays ──────────────────────────────── */ .hero-gradient { background: linear-gradient( to right, rgba(22, 40, 57, 0.80), rgba(22, 40, 57, 0.30) ); } .hero-gradient-bottom { background: linear-gradient( to top, rgba(22, 40, 57, 0.90) 0%, transparent 60% ); } /* ── Scroll-reveal animation base ────────────────────────── */ /* Applied by site.js; CSS provides the transition */ .reveal-hidden { opacity: 0; transform: translateY(2rem); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal-visible { opacity: 1; transform: translateY(0); } /* ── Toast notification ──────────────────────────────────── */ #et-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 9999; padding: 0.75rem 1.5rem; border-radius: 0.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); color: #fff; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; white-space: nowrap; } #et-toast.show { opacity: 1; } /* ── Mobile hamburger bars ───────────────────────────────── */ .menu-bar { display: block; width: 1.5rem; height: 2px; background-color: #162839; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; } /* ── Active nav link indicator ───────────────────────────── */ nav a.nav-active { color: #006879; border-bottom: 2px solid #006879; padding-bottom: 2px; font-weight: 700; } /* ── Smooth scrolling ────────────────────────────────────── */ html { scroll-behavior: smooth; } /* ── Focus ring for accessibility ────────────────────────── */ :focus-visible { outline: 2px solid #14B9D5; outline-offset: 2px; } /* ── Image lazy-load fade-in ─────────────────────────────── */ img { transition: opacity 0.4s ease; } img[loading="lazy"] { opacity: 0; } img[loading="lazy"].loaded { opacity: 1; } /* ── Utility: hide scrollbar but keep scroll ─────────────── */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ── FAQ Accordion ────────────────────────────────────────── */ /* Content is collapsed by default; expands when parent gets .active */ .faq-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding-bottom 0.35s ease; padding-bottom: 0; } .faq-accordion-item.active .faq-accordion-content { max-height: 600px; padding-bottom: 1.5rem; } /* Rotate the expand_more arrow when open */ .faq-accordion-item.active .arrow-icon { transform: rotate(180deg); }