/* ============================================================================ BOOKINGINGH.COM — GOD MODE CSS v3.0 Drop-in enhancement layer. Loads AFTER theme.css. All selectors use existing .bigh- prefix — zero PHP changes needed. Fonts: Clash Display (display) + Plus Jakarta Sans (body) + Syne (headings) ============================================================================ */ /* ---------- ADDITIONAL FONT IMPORTS (add to in header.php) ---------- Clash Display is imported below via @font-face from Fontshare CDN. --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Syne:wght@700;800&display=swap'); /* ============================================================================ DESIGN TOKENS — enhanced palette with richer depth ============================================================================ */ :root { /* Core brand */ --g-navy: #05122B; --g-blue: #0B3D91; --g-blue-mid: #1565C0; --g-blue-light: #2979FF; --g-gold: #FFB400; --g-gold-light: #FFD54F; --g-gold-deep: #E65100; /* Semantic surfaces */ --g-surface-glass: rgba(255,255,255,0.72); --g-border-subtle: rgba(11,61,145,0.1); --g-border-glow: rgba(11,61,145,0.4); /* Gradients */ --g-grad-hero: linear-gradient(145deg, #05122B 0%, #0B3D91 40%, #1565C0 75%, #01579B 100%); --g-grad-gold: linear-gradient(90deg, #FFB400, #FFD54F 50%, #FFB400); --g-grad-card: linear-gradient(145deg, #ffffff 0%, #f7f9ff 100%); --g-grad-shimmer: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%); /* Shadows — layered for depth */ --g-shadow-xs: 0 1px 3px rgba(5,18,43,0.06), 0 1px 2px rgba(5,18,43,0.04); --g-shadow-sm: 0 2px 8px rgba(5,18,43,0.07), 0 1px 3px rgba(5,18,43,0.05); --g-shadow-md: 0 4px 16px rgba(5,18,43,0.09), 0 2px 6px rgba(5,18,43,0.06); --g-shadow-lg: 0 12px 40px rgba(5,18,43,0.12), 0 4px 16px rgba(5,18,43,0.07); --g-shadow-xl: 0 24px 64px rgba(5,18,43,0.15), 0 8px 24px rgba(5,18,43,0.08); --g-shadow-blue: 0 8px 32px rgba(11,61,145,0.28), 0 2px 8px rgba(11,61,145,0.15); --g-shadow-gold: 0 8px 24px rgba(255,180,0,0.35); /* Motion */ --g-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --g-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --g-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --g-t-fast: 0.15s; --g-t-normal: 0.25s; --g-t-slow: 0.4s; /* Geometry */ --g-r-sm: 6px; --g-r-md: 12px; --g-r-lg: 18px; --g-r-xl: 24px; --g-r-2xl: 32px; --g-r-pill: 999px; } html[data-theme="dark"] { --g-surface-glass: rgba(22,32,46,0.85); --g-border-subtle: rgba(75,115,210,0.15); --g-border-glow: rgba(75,115,210,0.5); --g-grad-hero: linear-gradient(145deg, #020810 0%, #061a3a 40%, #0d3070 75%, #041025 100%); --g-grad-card: linear-gradient(145deg, #16202e 0%, #1a2640 100%); --g-shadow-blue: 0 8px 32px rgba(59,130,246,0.2), 0 2px 8px rgba(59,130,246,0.1); } /* ============================================================================ BASE OVERRIDES — typography & global feel ============================================================================ */ html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif; font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; letter-spacing: -0.01em; } /* Selection color */ ::selection { background: rgba(11,61,145,0.18); color: var(--bigh-primary); } /* Focus ring — beautiful accessible outline */ :focus-visible { outline: 2.5px solid var(--g-blue-light); outline-offset: 3px; border-radius: 4px; } /* Scrollbar — subtle luxury */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(11,61,145,0.2); border-radius: var(--g-r-pill); } ::-webkit-scrollbar-thumb:hover { background: rgba(11,61,145,0.4); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(75,115,210,0.3); } /* ============================================================================ PRELOADER — cinematic ============================================================================ */ .bigh-preloader { background: var(--bigh-bg); backdrop-filter: blur(20px); transition: opacity 0.5s var(--g-ease), transform 0.5s var(--g-ease); } .bigh-preloader.is-done { opacity: 0; transform: scale(1.04); pointer-events: none; } .bigh-preloader__logo { gap: 18px; } .bigh-preloader__mark { filter: drop-shadow(0 8px 24px rgba(11,61,145,0.35)); animation: g-preload-bob 2s var(--g-ease) infinite; } @keyframes g-preload-bob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.05); } } .bigh-preloader__text { font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.2px; background: var(--g-grad-hero); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .bigh-preloader__bar { width: 160px; height: 3px; background: var(--bigh-border); border-radius: var(--g-r-pill); overflow: hidden; position: relative; } .bigh-preloader__fill { height: 100%; background: linear-gradient(90deg, var(--g-blue), var(--g-gold), var(--g-blue)); background-size: 200% 100%; animation: g-loadbar-sweep 1.6s ease-in-out infinite; } @keyframes g-loadbar-sweep { 0% { transform: translateX(-105%); } 100% { transform: translateX(205%); } } /* ============================================================================ TOP BAR — refined ============================================================================ */ .bigh-topbar { background: linear-gradient(90deg, var(--g-navy), var(--g-blue) 60%, var(--g-blue-mid)); height: 38px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em; position: relative; overflow: hidden; } .bigh-topbar::after { content: ''; position: absolute; inset: 0; background: var(--g-grad-shimmer); background-size: 200% 100%; animation: g-shimmer 4s linear infinite; opacity: 0.3; pointer-events: none; } @keyframes g-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .bigh-topbar__right a { color: rgba(255,255,255,0.75); font-weight: 500; transition: color var(--g-t-fast) var(--g-ease); } .bigh-topbar__right a:hover { color: var(--g-gold); } /* ============================================================================ HEADER — elevated glass-morphism ============================================================================ */ .bigh-header { background: rgba(255,255,255,0.95); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--g-border-subtle); transition: all var(--g-t-slow) var(--g-ease); will-change: transform, box-shadow; } html[data-theme="dark"] .bigh-header { background: rgba(14,20,32,0.95); } .bigh-header.is-scrolled { box-shadow: 0 4px 30px rgba(5,18,43,0.1), 0 1px 0 rgba(11,61,145,0.08); border-bottom-color: transparent; } html[data-theme="dark"] .bigh-header.is-scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.45), 0 1px 0 rgba(75,115,210,0.1); } /* Logo glow on hover */ .bigh-logo { transition: transform var(--g-t-normal) var(--g-ease-spring); } .bigh-logo:hover { transform: scale(1.03); text-decoration: none !important; } .bigh-logo:hover .bigh-logo__mark svg { filter: drop-shadow(0 4px 12px rgba(11,61,145,0.35)); } /* Nav links — active indicator underline */ .bigh-nav__links > li > a { position: relative; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; padding: 10px 12px; border-radius: var(--g-r-md); transition: all var(--g-t-fast) var(--g-ease); } .bigh-nav__links > li > a::after { content: ''; position: absolute; bottom: 6px; left: 12px; right: 12px; height: 2px; background: var(--bigh-primary); border-radius: var(--g-r-pill); transform: scaleX(0); transform-origin: center; transition: transform var(--g-t-normal) var(--g-ease-spring); } .bigh-nav__links > li > a:hover::after, .bigh-nav__links > li.is-active > a::after { transform: scaleX(1); } /* Icon buttons — premium feel */ .bigh-icon-btn { border-radius: var(--g-r-md) !important; transition: all var(--g-t-fast) var(--g-ease-spring) !important; position: relative; overflow: hidden; } .bigh-icon-btn::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(11,61,145,0.15), transparent 70%); opacity: 0; transition: opacity var(--g-t-fast); } .bigh-icon-btn:hover::before { opacity: 1; } .bigh-icon-btn:hover { transform: translateY(-2px) scale(1.05) !important; } .bigh-icon-btn:active { transform: translateY(0) scale(0.97) !important; } /* CTA button — hero gradient */ .bigh-btn--nav-cta { background: linear-gradient(135deg, var(--g-blue), var(--g-blue-mid)) !important; box-shadow: 0 3px 12px rgba(11,61,145,0.3) !important; border-radius: var(--g-r-md) !important; font-weight: 700 !important; letter-spacing: -0.01em !important; transition: all var(--g-t-normal) var(--g-ease-spring) !important; position: relative; overflow: hidden; } .bigh-btn--nav-cta::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s; } .bigh-btn--nav-cta:hover { transform: translateY(-2px) scale(1.03) !important; box-shadow: var(--g-shadow-blue) !important; } .bigh-btn--nav-cta:hover::before { left: 100%; } .bigh-btn--nav-cta:active { transform: translateY(0) scale(0.98) !important; } /* Account button */ .bigh-acct-btn { border-radius: var(--g-r-md) !important; transition: all var(--g-t-fast) var(--g-ease) !important; } .bigh-acct-btn:hover { box-shadow: var(--g-shadow-sm) !important; } .bigh-acct-avatar { background: linear-gradient(135deg, var(--g-blue), var(--g-blue-mid)) !important; font-weight: 800 !important; box-shadow: 0 2px 8px rgba(11,61,145,0.3); } /* Mega menu — architectural */ .bigh-mega { border-radius: var(--g-r-xl) !important; border: 1px solid var(--g-border-subtle) !important; box-shadow: 0 24px 80px rgba(5,18,43,0.15), 0 4px 16px rgba(5,18,43,0.06) !important; overflow: hidden !important; transition: all var(--g-t-normal) var(--g-ease) !important; } html[data-theme="dark"] .bigh-mega { box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3) !important; } .bigh-mega__col a { border-radius: var(--g-r-md) !important; transition: all var(--g-t-fast) var(--g-ease) !important; font-weight: 500 !important; } .bigh-mega__col a:hover { background: linear-gradient(135deg, rgba(11,61,145,0.06), rgba(11,61,145,0.03)) !important; transform: translateX(3px); } /* Account dropdown */ .bigh-acct-drop { border-radius: var(--g-r-lg) !important; border: 1px solid var(--g-border-subtle) !important; box-shadow: 0 20px 60px rgba(5,18,43,0.15), 0 4px 16px rgba(5,18,43,0.07) !important; overflow: hidden !important; } .bigh-acct-drop a { transition: all var(--g-t-fast) var(--g-ease) !important; } .bigh-acct-drop a:hover { padding-left: 20px !important; background: rgba(11,61,145,0.05) !important; } /* ============================================================================ MOBILE DRAWER — smooth luxury ============================================================================ */ .bigh-drawer { box-shadow: -20px 0 60px rgba(5,18,43,0.15) !important; transition: transform 0.35s var(--g-ease) !important; } .bigh-drawer__links li a { border-radius: var(--g-r-md) !important; margin: 2px 12px !important; padding: 12px 16px !important; transition: all var(--g-t-fast) var(--g-ease) !important; font-weight: 600 !important; } .bigh-drawer__links li a:hover { padding-left: 24px !important; background: rgba(11,61,145,0.07) !important; color: var(--bigh-primary) !important; } .bigh-backdrop { backdrop-filter: blur(4px) !important; transition: opacity 0.35s var(--g-ease) !important; } /* ============================================================================ BUTTONS — universal upgrade ============================================================================ */ .bigh-btn { position: relative; overflow: hidden; border-radius: var(--g-r-md) !important; font-weight: 700 !important; letter-spacing: -0.01em !important; transition: all var(--g-t-normal) var(--g-ease-spring) !important; isolation: isolate; } .bigh-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent); opacity: 0; transition: opacity var(--g-t-fast); pointer-events: none; } .bigh-btn:hover::before { opacity: 1; } .bigh-btn:hover { transform: translateY(-2px) !important; } .bigh-btn:active { transform: translateY(0) scale(0.98) !important; } /* Primary button */ .bigh-btn:not(.bigh-btn--ghost):not(.bigh-btn--accent):not(.bigh-btn--outline-white):not(.bigh-btn--white) { background: linear-gradient(135deg, var(--g-blue), var(--g-blue-mid)) !important; box-shadow: 0 3px 12px rgba(11,61,145,0.25), 0 1px 3px rgba(11,61,145,0.15) !important; } .bigh-btn:not(.bigh-btn--ghost):not(.bigh-btn--accent):not(.bigh-btn--outline-white):not(.bigh-btn--white):hover { box-shadow: 0 8px 28px rgba(11,61,145,0.35), 0 3px 8px rgba(11,61,145,0.2) !important; } /* Ghost button */ .bigh-btn--ghost { background: transparent !important; backdrop-filter: blur(4px); } .bigh-btn--ghost:hover { background: rgba(11,61,145,0.06) !important; border-color: var(--bigh-primary) !important; } /* Accent button */ .bigh-btn--accent { background: linear-gradient(135deg, var(--g-gold), var(--g-gold-light)) !important; box-shadow: 0 3px 12px rgba(255,180,0,0.3) !important; color: var(--g-navy) !important; } .bigh-btn--accent:hover { box-shadow: var(--g-shadow-gold) !important; } /* Search form button */ .bigh-sf-btn { background: linear-gradient(135deg, var(--g-blue), var(--g-blue-mid)) !important; box-shadow: 0 4px 16px rgba(11,61,145,0.3) !important; border-radius: var(--g-r-md) !important; font-weight: 700 !important; letter-spacing: -0.01em !important; transition: all var(--g-t-normal) var(--g-ease-spring) !important; position: relative; overflow: hidden; } .bigh-sf-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255,255,255,0.2); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.5s, height 0.5s, opacity 0.5s; opacity: 0; } .bigh-sf-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 28px rgba(11,61,145,0.4) !important; } .bigh-sf-btn:active::after { width: 200px; height: 200px; opacity: 0; } /* ============================================================================ FORMS — polished inputs ============================================================================ */ .bigh-input, .bigh-select, .bigh-textarea, .bigh-sf-input, .bigh-sf-select { border-radius: var(--g-r-md) !important; border: 1.5px solid var(--bigh-border) !important; font-weight: 500 !important; transition: all var(--g-t-fast) var(--g-ease) !important; background: var(--bigh-surface) !important; } .bigh-input:focus, .bigh-select:focus, .bigh-textarea:focus, .bigh-sf-input:focus, .bigh-sf-select:focus { border-color: var(--g-blue-light) !important; box-shadow: 0 0 0 3px rgba(41,121,255,0.12) !important; outline: none !important; } .bigh-input:hover:not(:focus), .bigh-select:hover:not(:focus), .bigh-sf-input:hover:not(:focus), .bigh-sf-select:hover:not(:focus) { border-color: rgba(11,61,145,0.3) !important; } .bigh-label, .bigh-sf-label { font-weight: 700 !important; letter-spacing: 0.02em !important; font-size: 11.5px !important; } /* Swap button */ .bigh-swap-btn { border-radius: var(--g-r-pill) !important; transition: all var(--g-t-normal) var(--g-ease-spring) !important; } .bigh-swap-btn:hover { transform: rotate(180deg) scale(1.1) !important; box-shadow: var(--g-shadow-blue) !important; } /* ============================================================================ HERO v2 — cinematic depth ============================================================================ */ .bigh-hero-v2 { background: var(--g-grad-hero); position: relative; overflow: hidden; } /* Animated mesh overlay */ .bigh-hero-v2::before { content: ''; position: absolute; inset: -50%; background: radial-gradient(ellipse 60% 50% at 20% 60%, rgba(255,180,0,0.12) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 80% 20%, rgba(41,121,255,0.15) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 60% 80%, rgba(11,61,145,0.2) 0%, transparent 50%); animation: g-mesh-drift 20s ease-in-out infinite alternate; pointer-events: none; } @keyframes g-mesh-drift { 0% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(-3%, 2%) rotate(1deg); } 66% { transform: translate(2%, -3%) rotate(-1deg); } 100% { transform: translate(-1%, 1%) rotate(0.5deg); } } /* Subtle grid pattern */ .bigh-hero-v2__bg::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } /* Particles */ .bigh-particle { background: rgba(255,255,255,0.5) !important; box-shadow: 0 0 var(--s) rgba(255,180,0,0.4); filter: blur(0.5px); } /* Hero badge */ .bigh-hero-v2__badge { background: rgba(255,255,255,0.12) !important; backdrop-filter: blur(12px) !important; border: 1px solid rgba(255,255,255,0.2) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; animation: g-badge-in 0.6s var(--g-ease-spring) both; } @keyframes g-badge-in { from { opacity: 0; transform: translateY(-10px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Hero title */ .bigh-hero-v2__title { font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif !important; letter-spacing: -0.5px !important; text-shadow: 0 2px 20px rgba(5,18,43,0.3); animation: g-title-in 0.8s var(--g-ease-spring) 0.1s both; } @keyframes g-title-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .bigh-hero-v2__highlight { background: var(--g-grad-gold) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; animation: g-gold-flow 3s linear infinite; } @keyframes g-gold-flow { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } .bigh-hero-v2__sub { animation: g-sub-in 0.8s var(--g-ease) 0.2s both; } @keyframes g-sub-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Stats */ .bigh-hero-v2__stats { animation: g-stats-in 0.8s var(--g-ease) 0.35s both; } @keyframes g-stats-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .bigh-hero-v2__stat strong { font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif !important; text-shadow: 0 2px 8px rgba(255,180,0,0.2); } .bigh-hero-v2__stat-sep { background: rgba(255,255,255,0.2) !important; } /* ============================================================================ SEARCH CARD v2 — premium floating card ============================================================================ */ .bigh-search-section { margin-top: -70px !important; } .bigh-search-card-v2 { border-radius: var(--g-r-2xl) !important; box-shadow: 0 32px 80px rgba(5,18,43,0.18), 0 8px 24px rgba(5,18,43,0.08), 0 0 0 1px rgba(11,61,145,0.06) !important; overflow: hidden !important; animation: g-card-rise 0.8s var(--g-ease-spring) 0.4s both; border: 1px solid var(--g-border-subtle) !important; } @keyframes g-card-rise { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } html[data-theme="dark"] .bigh-search-card-v2 { box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(75,115,210,0.12) !important; } /* Search tabs */ .bigh-search-tabs { background: var(--bigh-surface-2) !important; border-bottom: 1px solid var(--g-border-subtle) !important; gap: 0 !important; padding: 0 6px !important; } .bigh-search-tab { font-weight: 700 !important; letter-spacing: -0.01em !important; border-bottom: 3px solid transparent !important; padding: 16px 24px !important; border-radius: 0 !important; gap: 9px !important; transition: all var(--g-t-fast) var(--g-ease) !important; } .bigh-search-tab svg { transition: transform var(--g-t-normal) var(--g-ease-spring); } .bigh-search-tab:hover svg { transform: scale(1.15) rotate(-3deg); } .bigh-search-tab.is-active svg { transform: scale(1.1); } .bigh-search-tab.is-active { background: var(--bigh-surface) !important; border-bottom-color: var(--g-blue) !important; color: var(--g-blue) !important; } /* Search pane */ .bigh-search-pane { padding: 28px 24px !important; } /* ============================================================================ TRUST STRIP — premium badges ============================================================================ */ .bigh-trust-strip { padding: 44px 0 !important; } .bigh-trust-icon { background: linear-gradient(135deg, rgba(11,61,145,0.08), rgba(11,61,145,0.04)) !important; border-radius: var(--g-r-md) !important; box-shadow: var(--g-shadow-xs) !important; transition: all var(--g-t-normal) var(--g-ease-spring) !important; } .bigh-trust-item:hover .bigh-trust-icon { background: linear-gradient(135deg, var(--g-blue), var(--g-blue-mid)) !important; color: #fff !important; box-shadow: var(--g-shadow-blue) !important; transform: translateY(-2px) scale(1.05); } .bigh-trust-item strong { font-weight: 700 !important; letter-spacing: -0.01em; } /* ============================================================================ SECTION HEADINGS ============================================================================ */ .bigh-section-title { font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif !important; letter-spacing: -0.3px !important; line-height: 1.1 !important; } .bigh-section-eyebrow { font-weight: 800 !important; letter-spacing: 1.5px !important; } .bigh-section-title::after { content: none; } /* ============================================================================ DESTINATION CARDS v2 — hover magic ============================================================================ */ .bigh-dest-card-v2 { border-radius: var(--g-r-xl) !important; transition: all var(--g-t-slow) var(--g-ease) !important; box-shadow: var(--g-shadow-sm) !important; overflow: hidden !important; } .bigh-dest-card-v2:hover { transform: translateY(-8px) scale(1.02) !important; box-shadow: 0 24px 60px rgba(5,18,43,0.22) !important; } .bigh-dest-card-v2__img { transition: transform 0.5s var(--g-ease) !important; } .bigh-dest-card-v2:hover .bigh-dest-card-v2__img { transform: scale(1.08) !important; } .bigh-dest-card-v2__code { background: rgba(255,180,0,0.92) !important; backdrop-filter: blur(8px) !important; font-weight: 800 !important; } .bigh-dest-card-v2__action { background: rgba(255,255,255,0.18) !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(255,255,255,0.25) !important; font-weight: 700 !important; } /* ============================================================================ UNIVERSAL CARDS — refined depth ============================================================================ */ .bigh-card { border-radius: var(--g-r-xl) !important; box-shadow: var(--g-shadow-xs) !important; border: 1px solid var(--g-border-subtle) !important; transition: all var(--g-t-slow) var(--g-ease) !important; background: var(--g-grad-card) !important; overflow: hidden !important; } .bigh-card:hover { transform: translateY(-8px) !important; box-shadow: 0 24px 60px rgba(5,18,43,0.14), 0 8px 20px rgba(5,18,43,0.07) !important; border-color: rgba(11,61,145,0.12) !important; } html[data-theme="dark"] .bigh-card:hover { box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 8px 20px rgba(0,0,0,0.25) !important; border-color: rgba(75,115,210,0.2) !important; } .bigh-card__img { position: relative; overflow: hidden !important; } .bigh-card__img img, .bigh-card__img .bigh-card__img-inner { transition: transform 0.5s var(--g-ease) !important; } .bigh-card:hover .bigh-card__img img, .bigh-card:hover .bigh-card__img-inner { transform: scale(1.05) !important; } .bigh-card__price strong { font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif !important; background: linear-gradient(135deg, var(--g-blue), var(--g-blue-mid)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .bigh-card__badge { border-radius: var(--g-r-pill) !important; backdrop-filter: blur(8px) !important; font-weight: 700 !important; } /* Hotel cards */ .bigh-hotel-card { border-radius: var(--g-r-xl) !important; box-shadow: var(--g-shadow-xs) !important; border: 1px solid var(--g-border-subtle) !important; overflow: hidden !important; transition: all var(--g-t-slow) var(--g-ease) !important; } .bigh-hotel-card:hover { transform: translateY(-8px) !important; box-shadow: 0 24px 60px rgba(5,18,43,0.14) !important; } .bigh-hotel-price strong { font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif !important; background: linear-gradient(135deg, var(--g-blue), var(--g-blue-mid)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================================================ WHY CARDS — premium icons ============================================================================ */ .bigh-why-card { border-radius: var(--g-r-xl) !important; box-shadow: var(--g-shadow-xs) !important; border: 1px solid var(--g-border-subtle) !important; transition: all var(--g-t-slow) var(--g-ease) !important; position: relative; overflow: hidden; } .bigh-why-card::before { content: ''; position: absolute; inset: 0; background: var(--g-grad-card); opacity: 0; transition: opacity var(--g-t-normal); pointer-events: none; } .bigh-why-card:hover { transform: translateY(-6px) !important; box-shadow: 0 20px 50px rgba(5,18,43,0.12) !important; border-color: rgba(11,61,145,0.15) !important; } .bigh-why-icon { border-radius: 16px !important; width: 58px !important; height: 58px !important; transition: all var(--g-t-normal) var(--g-ease-spring) !important; } .bigh-why-card:hover .bigh-why-icon { transform: scale(1.1) rotate(3deg); box-shadow: 0 8px 20px rgba(11,61,145,0.15); } .bigh-why-icon--blue { background: linear-gradient(135deg, rgba(11,61,145,0.12), rgba(11,61,145,0.06)) !important; } .bigh-why-icon--amber { background: linear-gradient(135deg, rgba(255,180,0,0.18), rgba(255,180,0,0.08)) !important; } .bigh-why-icon--green { background: linear-gradient(135deg, rgba(27,94,32,0.12), rgba(27,94,32,0.06)) !important; } /* ============================================================================ BLOG CARDS ============================================================================ */ .bigh-blog-card { border-radius: var(--g-r-xl) !important; box-shadow: var(--g-shadow-xs) !important; border: 1px solid var(--g-border-subtle) !important; overflow: hidden !important; transition: all var(--g-t-slow) var(--g-ease) !important; } .bigh-blog-card:hover { transform: translateY(-6px) !important; box-shadow: 0 20px 50px rgba(5,18,43,0.12) !important; } .bigh-blog-card__img { overflow: hidden !important; position: relative; } .bigh-blog-card__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,18,43,0.3), transparent); opacity: 0; transition: opacity var(--g-t-normal); } .bigh-blog-card:hover .bigh-blog-card__img::after { opacity: 1; } .bigh-blog-card__read { display: inline-flex; align-items: center; gap: 4px; font-weight: 700 !important; transition: gap var(--g-t-fast) var(--g-ease-spring); } .bigh-blog-card__read::after { content: '→'; transition: transform var(--g-t-fast) var(--g-ease-spring); } .bigh-blog-card:hover .bigh-blog-card__read::after { transform: translateX(3px); } /* ============================================================================ CTA BANNER ============================================================================ */ .bigh-cta-banner { position: relative; overflow: hidden; } .bigh-cta-banner::before { content: ''; position: absolute; inset: -50%; background: radial-gradient(ellipse 50% 80% at 10% 50%, rgba(255,180,0,0.15) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 90% 30%, rgba(41,121,255,0.12) 0%, transparent 60%); animation: g-mesh-drift 15s ease-in-out infinite alternate; pointer-events: none; } .bigh-cta-banner__content h2 { font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif !important; letter-spacing: -0.2px !important; } .bigh-btn--white { border-radius: var(--g-r-md) !important; font-weight: 800 !important; transition: all var(--g-t-normal) var(--g-ease-spring) !important; } .bigh-btn--white:hover { box-shadow: 0 8px 28px rgba(255,255,255,0.3) !important; } /* ============================================================================ FOOTER — dark premium ============================================================================ */ .bigh-footer { position: relative; } .bigh-footer__wave svg { filter: drop-shadow(0 -4px 12px rgba(5,18,43,0.08)); } .bigh-footer__body { background: var(--bigh-footer-bg) !important; position: relative; overflow: hidden; } .bigh-footer__body::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,180,0,0.4), rgba(41,121,255,0.4), transparent); } /* Animated noise texture */ .bigh-footer__body::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.025; pointer-events: none; } .bigh-footer__tagline { line-height: 1.7 !important; } .bigh-footer__contact-link { display: flex !important; align-items: center !important; gap: 10px !important; color: rgba(255,255,255,0.55) !important; font-size: 13.5px !important; transition: all var(--g-t-fast) var(--g-ease) !important; padding: 2px 0 !important; } .bigh-footer__contact-link:hover { color: var(--g-gold) !important; transform: translateX(3px); } .bigh-footer__contact-link svg { flex-shrink: 0; opacity: 0.7; transition: opacity var(--g-t-fast); } .bigh-footer__contact-link:hover svg { opacity: 1; } /* Badges */ .bigh-footer__badge { background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: var(--g-r-pill) !important; font-size: 12px !important; font-weight: 700 !important; transition: all var(--g-t-fast) var(--g-ease) !important; padding: 6px 14px !important; } .bigh-footer__badge:hover { background: rgba(255,255,255,0.12) !important; border-color: rgba(255,180,0,0.3) !important; transform: translateY(-1px); } /* Footer links */ .bigh-footer__col a { transition: all var(--g-t-fast) var(--g-ease) !important; display: inline-block !important; } .bigh-footer__col a:hover { color: #fff !important; transform: translateX(4px); } .bigh-footer__col-title { color: rgba(255,255,255,0.35) !important; font-size: 10.5px !important; letter-spacing: 1.2px !important; font-weight: 800 !important; } /* Newsletter input */ .bigh-footer__input { border-radius: var(--g-r-md) !important; height: 46px !important; transition: all var(--g-t-fast) var(--g-ease) !important; } .bigh-footer__input:focus { box-shadow: 0 0 0 3px rgba(255,180,0,0.15) !important; } .bigh-footer__sub-btn { border-radius: var(--g-r-md) !important; box-shadow: 0 4px 12px rgba(255,180,0,0.3) !important; transition: all var(--g-t-normal) var(--g-ease-spring) !important; } .bigh-footer__sub-btn:hover { box-shadow: var(--g-shadow-gold) !important; transform: translateY(-2px) scale(1.05) !important; } /* Social links */ .bigh-footer__social-link { border-radius: var(--g-r-md) !important; transition: all var(--g-t-normal) var(--g-ease-spring) !important; position: relative; overflow: hidden; } .bigh-footer__social-link::before { content: ''; position: absolute; inset: 0; background: var(--g-gold); transform: scaleY(0); transform-origin: bottom; transition: transform var(--g-t-fast) var(--g-ease); pointer-events: none; } .bigh-footer__social-link:hover::before { transform: scaleY(1); } .bigh-footer__social-link:hover { color: #000 !important; border-color: var(--g-gold) !important; transform: translateY(-3px) scale(1.05) !important; } .bigh-footer__social-link svg { position: relative; z-index: 1; } /* Footer bottom */ .bigh-footer__bottom { background: rgba(0,0,0,0.35) !important; border-top: 1px solid rgba(255,255,255,0.05) !important; } .bigh-footer__bottom-links a { transition: color var(--g-t-fast) var(--g-ease) !important; font-size: 12.5px !important; } .bigh-footer__bottom-links a:hover { color: #fff !important; } .bigh-pay-icon { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: var(--g-r-sm) !important; font-weight: 800 !important; letter-spacing: 0.5px !important; font-size: 10.5px !important; transition: all var(--g-t-fast) var(--g-ease) !important; } .bigh-pay-icon:hover { background: rgba(255,180,0,0.15) !important; border-color: rgba(255,180,0,0.3) !important; color: var(--g-gold) !important; } /* ============================================================================ FLASH MESSAGES — polished ============================================================================ */ .bigh-flash { border-radius: var(--g-r-md) !important; border-left-width: 4px !important; box-shadow: var(--g-shadow-sm) !important; animation: g-flash-in 0.4s var(--g-ease-spring) both; } @keyframes g-flash-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } /* ============================================================================ AUTH CARDS ============================================================================ */ .bigh-auth-card { border-radius: var(--g-r-2xl) !important; box-shadow: 0 24px 60px rgba(5,18,43,0.1), 0 4px 16px rgba(5,18,43,0.06) !important; border: 1px solid var(--g-border-subtle) !important; backdrop-filter: blur(10px); } html[data-theme="dark"] .bigh-auth-card { box-shadow: 0 24px 60px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.2) !important; } /* ============================================================================ PAGE HERO ============================================================================ */ .bigh-page-hero h1 { font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif !important; letter-spacing: -0.3px !important; } /* ============================================================================ CHATBOT — refined ============================================================================ */ .bigh-chat-fab { background: linear-gradient(135deg, var(--g-blue), var(--g-blue-mid)) !important; box-shadow: 0 8px 24px rgba(11,61,145,0.4), 0 2px 8px rgba(11,61,145,0.2) !important; transition: all var(--g-t-normal) var(--g-ease-spring) !important; } .bigh-chat-fab:hover { transform: scale(1.1) translateY(-2px) !important; box-shadow: 0 12px 32px rgba(11,61,145,0.5) !important; } .bigh-chat-panel { border-radius: var(--g-r-xl) !important; box-shadow: 0 24px 60px rgba(5,18,43,0.18), 0 8px 20px rgba(5,18,43,0.08) !important; border: 1px solid var(--g-border-subtle) !important; animation: g-chat-in 0.35s var(--g-ease-spring); } @keyframes g-chat-in { from { opacity: 0; transform: translateY(16px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .bigh-chat-head { background: linear-gradient(135deg, var(--g-blue), var(--g-blue-mid)) !important; } .bigh-chat-msg--bot { border-radius: 16px 16px 16px 4px !important; } .bigh-chat-msg--user { background: linear-gradient(135deg, var(--g-blue), var(--g-blue-mid)) !important; border-radius: 16px 16px 4px 16px !important; box-shadow: 0 3px 10px rgba(11,61,145,0.2) !important; } .bigh-chat-chip { border-radius: var(--g-r-pill) !important; transition: all var(--g-t-fast) var(--g-ease-spring) !important; } .bigh-chat-chip:hover { transform: translateY(-1px) scale(1.03) !important; box-shadow: var(--g-shadow-blue) !important; } .bigh-chat-form input { border-radius: var(--g-r-pill) !important; transition: all var(--g-t-fast) var(--g-ease) !important; } .bigh-chat-form button { border-radius: var(--g-r-pill) !important; background: linear-gradient(135deg, var(--g-blue), var(--g-blue-mid)) !important; transition: all var(--g-t-fast) var(--g-ease-spring) !important; } .bigh-chat-form button:hover { transform: scale(1.05); } /* ============================================================================ PWA INSTALL BANNER ============================================================================ */ .bigh-install-banner { border-radius: var(--g-r-xl) !important; box-shadow: 0 20px 50px rgba(5,18,43,0.18) !important; backdrop-filter: blur(20px) !important; border: 1px solid var(--g-border-subtle) !important; } /* ============================================================================ SECTION TRANSITION ANIMATIONS (Intersection Observer driven) ============================================================================ */ .g-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--g-ease), transform 0.6s var(--g-ease); } .g-reveal.is-visible { opacity: 1; transform: translateY(0); } .g-reveal--delay-1 { transition-delay: 0.1s; } .g-reveal--delay-2 { transition-delay: 0.2s; } .g-reveal--delay-3 { transition-delay: 0.3s; } .g-reveal--delay-4 { transition-delay: 0.4s; } /* Scale reveal variant */ .g-reveal--scale { transform: translateY(16px) scale(0.97); } .g-reveal--scale.is-visible { transform: translateY(0) scale(1); } /* ============================================================================ PILL TAGS ============================================================================ */ .bigh-pill { border-radius: var(--g-r-pill) !important; font-weight: 700 !important; transition: all var(--g-t-fast) var(--g-ease-spring) !important; } .bigh-pill:hover, .bigh-pill.is-active { box-shadow: 0 4px 12px rgba(11,61,145,0.25) !important; transform: translateY(-1px); } /* ============================================================================ DASHBOARD ENHANCEMENTS ============================================================================ */ /* Stats cards in dashboards */ .bigh-stat-card { border-radius: var(--g-r-xl) !important; box-shadow: var(--g-shadow-xs) !important; border: 1px solid var(--g-border-subtle) !important; transition: all var(--g-t-normal) var(--g-ease) !important; } .bigh-stat-card:hover { box-shadow: var(--g-shadow-md) !important; transform: translateY(-2px); } /* Table upgrades */ table { border-radius: var(--g-r-lg) !important; overflow: hidden !important; } thead th { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 700 !important; letter-spacing: 0.02em !important; font-size: 11.5px !important; text-transform: uppercase !important; } tbody tr { transition: background var(--g-t-fast) var(--g-ease) !important; } tbody tr:hover { background: rgba(11,61,145,0.03) !important; } html[data-theme="dark"] tbody tr:hover { background: rgba(75,115,210,0.05) !important; } /* ============================================================================ FLIGHT RESULTS PAGE ============================================================================ */ /* Flight result cards */ .bigh-flight-result { border-radius: var(--g-r-xl) !important; border: 1px solid var(--g-border-subtle) !important; transition: all var(--g-t-normal) var(--g-ease) !important; box-shadow: var(--g-shadow-xs) !important; } .bigh-flight-result:hover { border-color: rgba(11,61,145,0.2) !important; box-shadow: 0 12px 32px rgba(5,18,43,0.1) !important; transform: translateY(-3px); } /* ============================================================================ BOOKING SUCCESS / ERROR PAGES ============================================================================ */ .bigh-success-icon { animation: g-success-pop 0.5s var(--g-ease-spring) both; } @keyframes g-success-pop { from { transform: scale(0.5) rotate(-10deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } } /* ============================================================================ REFINED MISC UTILITIES ============================================================================ */ /* Skeleton loading shimmer */ .g-skeleton { background: linear-gradient(90deg, var(--bigh-border) 25%, rgba(229,233,242,0.5) 50%, var(--bigh-border) 75%); background-size: 200% 100%; animation: g-skeleton-wave 1.5s ease-in-out infinite; border-radius: var(--g-r-md); } @keyframes g-skeleton-wave { from { background-position: 200% 0; } to { background-position: -200% 0; } } html[data-theme="dark"] .g-skeleton { background: linear-gradient(90deg, var(--bigh-border) 25%, rgba(39,53,74,0.5) 50%, var(--bigh-border) 75%); background-size: 200% 100%; animation: g-skeleton-wave 1.5s ease-in-out infinite; } /* Number counter animation (JS-driven) */ .g-count-up { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; } /* Tooltip */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--g-navy); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--g-r-md); white-space: nowrap; pointer-events: none; opacity: 0; transition: all var(--g-t-fast) var(--g-ease); z-index: 9999; } [data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================================================ RESPONSIVE REFINEMENTS ============================================================================ */ @media (max-width: 767px) { .bigh-search-tab { padding: 14px 16px !important; font-size: 13.5px !important; } .bigh-search-tab span.tab-label { display: none; } .bigh-hero-v2__title { letter-spacing: -0.3px !important; } .bigh-card, .bigh-hotel-card, .bigh-blog-card, .bigh-dest-card-v2 { border-radius: var(--g-r-lg) !important; } } @media (min-width: 768px) { .bigh-hero-v2__title { font-size: 68px !important; } .bigh-section-title { font-size: 40px !important; } } @media (min-width: 1200px) { .bigh-hero-v2__title { font-size: 76px !important; } } /* ============================================================================ PRINT ============================================================================ */ @media print { .bigh-header, .bigh-footer, .bigh-chat-fab, .bigh-chat-panel, .bigh-install-banner, .bigh-topbar { display: none !important; } body { background: #fff; color: #000; } .bigh-card, .bigh-hotel-card { box-shadow: none !important; border: 1px solid #ddd !important; } }