@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap'); body { font-family: 'Inter', Arial, sans-serif; background: #f8fafd url('shark-tattoo.png') repeat; background-size: 150px 150px; background-position: center; color: #23272f; } .card { border: none; border-radius: 1.5rem; box-shadow: 0 2px 16px rgba(0,0,0,0.08); background: #fff; } .card-img-top, .img-thumbnail, .img-fluid { border-radius: 1rem; box-shadow: 0 1px 8px rgba(0,0,0,0.06); object-fit: cover; aspect-ratio: 1/1; } .btn-primary { background: #1777ff; border-radius: 999px; border: none; padding: 0.75rem 2rem; font-weight: 600; transition: background 0.2s; } .btn-primary:hover { background: #145fd1; } .form-control { border-radius: 1rem; box-shadow: none; border: 1px solid #e0e0e0; padding: 1rem; } .modal-content { border-radius: 2rem; box-shadow: 0 4px 32px rgba(0,0,0,0.14); } h1, h2, h3, .fw-bold { letter-spacing: -0.5px; } /* --- Awesomplete Dropdown Fixes --- */ #divesiteSearch { width: 100%; max-width: 100%; font-size: 1.2rem; position: relative; z-index: 100; /* Lowered so it doesn't conflict with modals */ background: #fff; } .awesomplete { width: 100%; position: relative; } .awesomplete > ul, ul.awesomplete { z-index: 99999; position: absolute; left: 0; right: 0; background: #fff; border-radius: 0.5rem; box-shadow: 0 4px 24px #0001; margin-top: 2px; padding: 0; list-style: none; overflow: visible; } .awesomplete > ul li, ul.awesomplete li { padding: 0.5rem 1rem; cursor: pointer; } /* Highlighted search result */ .awesomplete li[aria-selected="true"] { background: #e6f0ff; color: #1777ff; } /* Keep map underneath */ #divesiteMap, .leaflet-container { z-index: 1; } /* Responsive fixes for map/search stack on mobile */ @media (max-width: 576px) { #divesiteSearch { font-size: 1rem; } #divesiteMap { height: 280px; } } /* Optional: for marker popups if you use custom styling */ .leaflet-popup-content-wrapper { border-radius: 1rem; box-shadow: 0 2px 12px #0001; } /* --- FIXED: Search Instruction Overlay --- */ #searchInstruction { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: #888; pointer-events: none; font-size: 1.07rem; opacity: 0.8; z-index: 100; /* Lower than Bootstrap modal's z-index (1050) */ font-style: italic; transition: opacity 0.25s; background: transparent; } /* Hide search instruction when modal is open (Bootstrap adds .modal-open to ) */ body.modal-open #searchInstruction { display: none !important; } @media (max-width: 600px) { #searchInstruction { font-size: 1rem; left: 0.8rem; } } .footer-bg-wrapper { position: relative; overflow: hidden; } .footer-bg-wrapper::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: url('footer-bg.jpg') center bottom/cover no-repeat; opacity: 0.25; /* Adjust for effect */ pointer-events: none; z-index: 0; } .footer { position: relative; z-index: 1; background: transparent; /* Or use rgba(255,255,255,0.7) for see-through white */ } .continent-tile, .country-tile { position: relative; border-radius: 2rem; overflow: hidden; transition: transform 0.18s cubic-bezier(.29,1.29,.56,.96); box-shadow: 0 4px 18px rgba(0,0,0,0.13); background: #f9f9f9; min-height: 275px; } .continent-tile:hover, .country-tile:hover { transform: scale(1.045); box-shadow: 0 6px 22px rgba(30,90,200,0.18); } .continent-img, .country-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; filter: brightness(0.82); transition: filter 0.2s; } .continent-tile:hover .continent-img, .country-tile:hover .country-img { filter: brightness(0.97); } .overlay-details { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; background: linear-gradient(180deg, rgba(40,50,70,0.73) 62%, rgba(0,0,0,0.28) 100%); padding: 1.5rem 1rem 1rem 1rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; z-index: 2; } .tile-title { font-size: 1.3rem; font-weight: 700; margin-bottom: .65rem; letter-spacing: 0.03em; text-shadow: 0 2px 8px rgba(0,0,0,0.23); } .tile-stats { font-size: 1.01rem; display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: .15rem; } .tile-stat i { margin-right: 0.4em; font-size: 1.04em; vertical-align: -0.1em; } .country-tile .overlay-details { padding: 1.2rem 1rem 1.2rem 1rem; justify-content: flex-end; align-items: flex-start; } .selected-continent { border: 3px solid #3b9cff !important; box-shadow: 0 4px 24px rgba(59,156,255,0.18) !important; } .country-row { flex-wrap: wrap; display: flex; justify-content: center; } .continent-tile { background: transparent !important; min-height: auto !important; box-shadow: 0 4px 18px rgba(0,0,0,0.13); padding: 0 !important; } .continent-img { filter: none !important; } .continent-tile:hover .continent-img { filter: brightness(1) !important; } .overlay-details { background: transparent !important; padding: 1.2rem 1rem !important; color: white !important; text-shadow: 0 2px 8px rgba(0,0,0,0.7) !important; }