/* ============================================ Meduseo - Ocean Turquoise Theme Professional responsive design ============================================ */ /* Google Fonts 'Inter' is loaded in base.html.twig for performance — do NOT use @import here */ /* Force font-display:swap on FontAwesome to avoid invisible text (FOIT) */ @font-face { font-family: "Font Awesome 6 Free"; font-display: swap; } @font-face { font-family: "Font Awesome 6 Brands"; font-display: swap; } @font-face { font-family: "Font Awesome 5 Free"; font-display: swap; } @font-face { font-family: "Font Awesome 5 Brands"; font-display: swap; } @font-face { font-family: "FontAwesome"; font-display: swap; } :root { --med-primary: #0e7490; --med-primary-light: #22a3b8; --med-primary-dark: #0a5a6e; --med-accent: #06b6d4; --med-accent-light: #67e8f9; --med-ocean: #0ea5e9; --med-ocean-light: #bae6fd; --med-turquoise: #14b8a6; --med-turquoise-light: #5eead4; --med-cyan: #22d3ee; --med-danger: #ef4444; --med-warning: #f59e0b; --med-success: #10b981; --med-bg: #f0fdfa; --med-bg-alt: #ecfeff; --med-card-bg: #ffffff; --med-text: #0f172a; --med-text-muted: #64748b; --med-border: #cffafe; --med-border-strong: #a5f3fc; --med-gradient: linear-gradient(135deg, #0e7490 0%, #06b6d4 50%, #14b8a6 100%); --med-gradient-ocean: linear-gradient(135deg, #0891b2 0%, #14b8a6 100%); --med-gradient-deep: linear-gradient(135deg, #164e63 0%, #0e7490 50%, #0891b2 100%); --med-gradient-glass: linear-gradient(135deg, rgba(14,116,144,0.05) 0%, rgba(20,184,166,0.08) 100%); --med-shadow: 0 4px 20px rgba(14,116,144,0.12); --med-shadow-hover: 0 8px 32px rgba(14,116,144,0.18); --med-radius: 16px; --med-radius-sm: 10px; } * { box-sizing: border-box; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--med-bg); color: var(--med-text); line-height: 1.6; } /* ---- Navbar ---- */ .meduseo-navbar { background: var(--med-gradient-deep); box-shadow: 0 2px 20px rgba(0,0,0,0.15); padding: 0.5rem 0; backdrop-filter: blur(10px); } .meduseo-navbar .navbar-brand { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; color: white !important; } .meduseo-navbar .navbar-brand i { color: var(--med-turquoise-light); font-size: 1.2rem; } .meduseo-navbar .nav-link { font-size: 0.88rem; font-weight: 500; color: rgba(255,255,255,0.85) !important; transition: color 0.2s; padding: 0.5rem 0.8rem !important; } .meduseo-navbar .nav-link:hover { color: var(--med-turquoise-light) !important; } .meduseo-navbar .form-control { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); color: white; font-size: 0.88rem; } .meduseo-navbar .form-control::placeholder { color: rgba(255,255,255,0.5); } .meduseo-navbar .form-control:focus { background: rgba(255,255,255,0.2); border-color: var(--med-turquoise-light); box-shadow: 0 0 0 3px rgba(20,184,166,0.25); color: white; } /* ---- Footer ---- */ .meduseo-footer { background: var(--med-gradient-deep); } .meduseo-footer h5 { font-weight: 700; } /* ---- Map ---- */ .leaflet-container { background-color: #cce8f4 !important; } #map, .map-container { width: 100%; border-radius: 0; background-color: #cce8f4; } .map-fullwidth { height: 65vh; min-height: 480px; max-height: 750px; box-shadow: 0 4px 30px rgba(0,0,0,0.1); } .map-location { height: 420px; border-radius: 0 0 var(--med-radius) var(--med-radius); } @media (max-width: 768px) { .map-fullwidth { height: 55vh; min-height: 360px; } .map-location { height: 300px; } } @media (max-width: 480px) { .map-fullwidth { height: 50vh; min-height: 300px; } } /* ---- Cards ---- */ .med-card { background: var(--med-card-bg); border: 1px solid var(--med-border); border-radius: var(--med-radius); box-shadow: var(--med-shadow); transition: box-shadow 0.3s, transform 0.3s; overflow: hidden; } .med-card:hover { box-shadow: var(--med-shadow-hover); transform: translateY(-2px); } .med-card-header { background: var(--med-gradient-glass); padding: 1rem 1.25rem; border-bottom: 1px solid var(--med-border); } .med-card-header h5 { margin: 0; font-weight: 700; font-size: 1rem; color: var(--med-primary); } .med-card-header i { color: var(--med-turquoise); } /* ---- Section Title ---- */ .section-title { font-weight: 800; font-size: 1.5rem; color: var(--med-primary); letter-spacing: -0.02em; } .section-subtitle { color: var(--med-text-muted); font-size: 0.95rem; } /* ---- Load indicators ---- */ .load-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 20px; font-size: 0.82rem; font-weight: 600; color: #fff; letter-spacing: 0.01em; text-align: left; max-height: 40px; text-transform: capitalize; } .load-none { background: linear-gradient(135deg, #10b981, #34d399); } .load-rare { background: linear-gradient(135deg, #efe976, #f3f05a); color: #676767; } .load-few { background: linear-gradient(135deg, #f97316, #fb923c); } .load-lot { background: linear-gradient(135deg, #ef4444, #f87171); } .load-unknown { background: linear-gradient(135deg, #94a3b8, #a8b8cc); } /* ---- Location header banner ---- */ .location-header { background: var(--med-gradient); color: white; padding: 1.5rem 0; position: relative; overflow: hidden; } .location-header::before { content: ''; position: absolute; top: -50%; right: -20%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%); border-radius: 50%; } .location-header h1 { font-size: 1.6rem; font-weight: 800; margin: 0; letter-spacing: -0.02em; } .location-header .load-status { font-size: 1.1rem; margin-top: 0.3rem; } .weather-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.15); backdrop-filter: blur(5px); padding: 5px 12px; border-radius: 10px; font-size: 0.85rem; margin-right: 8px; margin-top: 4px; } /* ---- Report button ---- */ .btn-report { background: var(--med-gradient-ocean); color: white; border: none; border-radius: 25px; padding: 12px 28px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: transform 0.2s, box-shadow 0.3s; letter-spacing: 0.01em; } .btn-report:hover { transform: scale(1.04); box-shadow: 0 6px 24px rgba(8,145,178,0.4); color: white; } /* ---- Report modal ---- */ .report-modal .modal-header { background: var(--med-gradient-ocean); color: white; } /* ---- Beach list ---- */ .beach-list-item { display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--med-border); text-decoration: none; color: var(--med-text); transition: background 0.2s; border-radius: 8px; margin-bottom: 2px; } .beach-list-item:hover { background: var(--med-bg-alt); } .beach-flag-icon { width: 24px; height: 24px; margin-right: 10px; } /* ---- Reports table ---- */ .reports-table th { font-size: 0.78rem; text-transform: uppercase; color: var(--med-primary); font-weight: 700; letter-spacing: 0.04em; border-bottom: 2px solid var(--med-border-strong); } .reports-table td { font-size: 0.85rem; vertical-align: middle; } .reports-table tbody tr { transition: background 0.15s; cursor: pointer; border-radius: 8px; } .reports-table tbody tr:hover { background: var(--med-bg-alt); } .reports-table tbody tr a { text-decoration: none; color: inherit; } /* ---- Chart container ---- */ .chart-container { background: white; border-radius: var(--med-radius); padding: 16px; } /* ---- Trend section ---- */ .trend-section { background: var(--med-gradient); color: white; padding: 2rem 0; } /* ---- Auth forms ---- */ .auth-container { max-width: 440px; margin: 3rem auto; padding: 2rem; background: white; border-radius: var(--med-radius); box-shadow: var(--med-shadow); border: 1px solid var(--med-border); } .auth-container h2 { text-align: center; margin-bottom: 1.5rem; background: var(--med-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 800; } /* ---- Admin ---- */ .admin-sidebar { background: var(--med-gradient-deep); min-height: calc(100vh - 56px); padding-top: 1rem; } .admin-sidebar .nav-link { color: rgba(255,255,255,0.7); padding: 0.6rem 1rem; border-radius: 8px; margin: 2px 8px; font-size: 0.9rem; } .admin-sidebar .nav-link:hover, .admin-sidebar .nav-link.active { background: rgba(255,255,255,0.12); color: white; } .admin-card { background: white; border-radius: var(--med-radius); padding: 1.5rem; text-align: center; box-shadow: var(--med-shadow); border: 1px solid var(--med-border); } .admin-card .stat-number { font-size: 2.2rem; font-weight: 800; background: var(--med-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ---- Admin filter panels ---- */ .admin-filter-panel { background: white; border-radius: var(--med-radius); box-shadow: var(--med-shadow); border: 1px solid var(--med-border); overflow: hidden; } .admin-filter-header { display: flex; align-items: center; padding: 0.65rem 1rem; font-size: 0.88rem; font-weight: 600; color: var(--med-text); cursor: pointer; background: var(--med-bg-alt); border-bottom: 1px solid var(--med-border); transition: background .15s; } .admin-filter-header:hover { background: #e9ecef; } .admin-filter-body { padding: 1rem; } /* ---- Admin gallery cards ---- */ .admin-gallery-card { background: white; border-radius: var(--med-radius); box-shadow: var(--med-shadow); border: 1px solid var(--med-border); overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform .15s, box-shadow .15s; } .admin-gallery-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1); } .admin-gallery-img-wrap { position: relative; overflow: hidden; height: 190px; } .admin-gallery-img-wrap img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .3s; } .admin-gallery-img-wrap:hover img { transform: scale(1.05); } .admin-gallery-status { position: absolute; top: 8px; right: 8px; } .admin-gallery-body { flex: 1; padding: 0.75rem; } .admin-gallery-footer { padding: 0.5rem 0.75rem; border-top: 1px solid var(--med-border); background: var(--med-bg-alt); } .admin-species-assign { background: var(--med-bg-alt); border-radius: var(--med-radius-sm); padding: 0.5rem; border: 1px dashed var(--med-border); } /* ---- Admin tables ---- */ .admin-table thead { background: var(--med-bg-alt); } .admin-table thead th { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; border-bottom: 2px solid var(--med-border); padding: 0.6rem 0.5rem; white-space: nowrap; } .admin-table tbody td { padding: 0.5rem; vertical-align: middle; } .admin-table tbody tr { transition: background .1s; } .admin-table tbody tr:hover { background: rgba(59, 130, 246, 0.03); } .admin-table th.sortable { cursor: pointer; user-select: none; } .admin-table th.sortable:hover { color: var(--med-primary, #3b82f6); } .admin-table th.sortable .sort-arrow { font-size: .6rem; margin-left: .25rem; opacity: .35; } .admin-table th.sortable.active .sort-arrow { opacity: 1; color: var(--med-primary, #3b82f6); } .text-inherit { color: inherit !important; } /* ---- Search results ---- */ #searchResults { border-radius: var(--med-radius-sm); box-shadow: var(--med-shadow); border: 1px solid var(--med-border); } #searchResults .dropdown-item { padding: 10px 14px; font-size: 0.88rem; border-bottom: 1px solid var(--med-border); transition: background 0.15s; } #searchResults .dropdown-item:hover { background: var(--med-bg-alt); } #searchResults .dropdown-item .badge { font-size: 0.7rem; } /* ---- Species photo cards ---- */ .species-photo-card { transition: transform .2s, box-shadow .2s; } .species-photo-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.15) !important; } /* ---- Leaflet legend ---- */ .info2 { padding: 8px 12px; font: 13px/18px 'Inter', sans-serif; background: rgba(255,255,255,0.95); box-shadow: 0 2px 10px rgba(0,0,0,0.15); border-radius: 10px; backdrop-filter: blur(5px); } .legend2 i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.85; border-radius: 4px; } /* ---- Responsive tweaks ---- */ @media (max-width: 576px) { .location-header h1 { font-size: 1.3rem; } .btn-report { width: 100%; } .section-title { font-size: 1.2rem; } /* Map legend & controls smaller on mobile */ .info2 { padding: 4px 7px !important; font: 10px/14px 'Inter', sans-serif !important; border-radius: 7px; } .legend2 i { width: 12px; height: 12px; margin-right: 5px; } .leaflet-control-zoom a { width: 26px !important; height: 26px !important; line-height: 26px !important; font-size: 14px !important; } .leaflet-control-attribution { font-size: 8px !important; } } /* ---- Propose beach name ---- */ .propose-form { background: var(--med-bg-alt); padding: 14px; border-radius: var(--med-radius-sm); border: 1px solid var(--med-border); } /* ---- Article cards ---- */ .article-card { border-radius: var(--med-radius); overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; border: 1px solid var(--med-border); box-shadow: var(--med-shadow); } .article-card:hover { transform: translateY(-4px); box-shadow: var(--med-shadow-hover); } .article-card img { height: 180px; object-fit: cover; } /* ---- Honeypot ---- */ .ohnohoney { opacity: 0; position: absolute; top: 0; left: 0; height: 0; width: 0; z-index: -1; } /* ---- Scroll indicator for map ---- */ .scroll-hint { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; background: rgba(14,116,144,0.85); color: white; padding: 6px 18px; border-radius: 20px; font-size: 0.82rem; font-weight: 600; backdrop-filter: blur(5px); animation: fadeInUp 0.5s ease; pointer-events: none; } @keyframes fadeInUp { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ---- Buttons general ---- */ .btn-ocean { background: var(--med-gradient-ocean); color: white; border: none; border-radius: 10px; font-weight: 600; transition: transform 0.2s, box-shadow 0.2s; } .btn-ocean:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(8,145,178,0.3); color: white; } /* ---- Home sections ---- */ .home-section { padding: 2rem 0; } .home-section:nth-child(even) { background: var(--med-bg-alt); } /* ---- Species gallery cards ---- */ .species-card { border-radius: var(--med-radius-sm); transition: transform 0.2s, box-shadow 0.2s; background: var(--med-card-bg); border: 1px solid var(--med-border); } .species-card:hover { transform: translateY(-3px); box-shadow: var(--med-shadow-hover); } /* ---- City circle tooltips on map ---- */ .city-circle-tooltip { font-family: 'Inter', system-ui, sans-serif; font-size: 0.78rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; } .leaflet-interactive { cursor: pointer; } /* ---- Moving Average selector ---- */ #movingAvgSelect { border-radius: 8px; border: 1px solid var(--med-border-strong); font-size: 0.82rem; padding: 4px 10px; background: white; } /* ---- Species images in report modal ---- */ .species-select-img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; cursor: pointer; border: 3px solid transparent; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; } .species-select-img:hover { transform: scale(1.08); border-color: var(--med-border-strong); } .species-select-img.selected { border-color: var(--med-accent); box-shadow: 0 0 16px rgba(6,182,212,0.4); transform: scale(1.08); } /* ---- Report modal tabs (full-width pill style) ---- */ .report-modal .nav-pills.nav-fill .nav-link, .reporter-header ~ .container .nav-pills.nav-fill .nav-link { border-radius: 20px; padding: 8px 16px; font-weight: 600; font-size: 0.9rem; color: var(--med-primary); background: transparent; border: 2px solid transparent; transition: all 0.2s; } .report-modal .nav-pills.nav-fill .nav-link.active, .reporter-header ~ .container .nav-pills.nav-fill .nav-link.active { background: var(--med-primary); color: #fff; border-color: var(--med-primary); } .report-modal .nav-pills.nav-fill .nav-link:hover:not(.active), .reporter-header ~ .container .nav-pills.nav-fill .nav-link:hover:not(.active) { background: var(--med-bg-alt); } /* ---- Level buttons in report modal ---- */ .level-btn { border-radius: 10px; padding: 8px 16px; margin: 3px; border: 2px solid var(--med-border-strong); background: white; cursor: pointer; transition: all 0.2s; font-weight: 600; font-size: 0.88rem; } .level-btn:hover { border-color: var(--med-accent); background: var(--med-bg-alt); } .level-btn.selected { border-color: var(--med-accent); background: var(--med-accent); color: white; } /* ---- Floating report button on map ---- */ @media (max-width: 576px) { .btn-report[data-bs-target="#reportModal"] { bottom: 12px !important; right: 12px !important; padding: 10px 18px; font-size: 0.9rem; } } /* ---- Country filter select ---- */ #countryFilter { border-radius: 8px; border: 1px solid var(--med-border-strong); font-size: 0.82rem; padding: 4px 10px; background: white; } /* ---- Nav pills small variant ---- */ .nav-pills-sm .nav-link { font-size: 0.8rem; padding: 4px 12px; border-radius: 8px; } /* ---- Floating centered contribute button ---- */ .btn-contribute-floating { display: inline-block; padding: 14px 36px; font-size: 1.05rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #0891b2 0%, #14b8a6 50%, #06b6d4 100%); background-size: 200% 200%; border: none; border-radius: 50px; box-shadow: 0 6px 28px rgba(8,145,178,0.35); cursor: pointer; transition: transform 0.25s, box-shadow 0.3s, background-position 0.5s; letter-spacing: 0.02em; animation: contributeGradient 4s ease infinite; } .btn-contribute-floating:hover { transform: scale(1.06); box-shadow: 0 8px 36px rgba(8,145,178,0.5); } @keyframes contributeGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (max-width: 576px) { .btn-contribute-floating { padding: 12px 28px; font-size: 0.95rem; } } /* ---- Article content (Joomla migrated) ---- */ .article-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 0.5rem 0; } .article-content p { line-height: 1.7; margin-bottom: 1rem; } .article-content h2, .article-content h3 { margin-top: 1.5rem; margin-bottom: 0.75rem; color: var(--med-primary); } .article-content a.btn { margin: 0.25rem 0.25rem 0.25rem 0; } .article-content table { width: 100%; margin-bottom: 1rem; } .article-content table td, .article-content table th { padding: 0.5rem; border: 1px solid var(--med-border); } /* ---- GPS Report Markers on map ---- */ .gps-report-icon { background: transparent !important; border: none !important; box-shadow: none !important; } .gps-report-icon.leaflet-div-icon { background: transparent !important; border: none !important; } .gps-report-marker { width: 14px; height: 14px; border-radius: 50%; border: 3px solid #22d3ae; background: rgba(255, 255, 255, 0.95); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; } .gps-report-marker:hover { transform: scale(1.15); } .gps-report-img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block; } .gps-report-popup { font-family: 'Inter', sans-serif; line-height: 1.4; } .gps-report-popup-wrapper .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); padding: 0; overflow: hidden; } .gps-report-popup-wrapper .leaflet-popup-content { margin: 0; min-width: 200px; } .gps-report-popup-wrapper .leaflet-popup-tip { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* Stylish GPS popup structure */ .gps-popup { font-family: 'Inter', -apple-system, sans-serif; line-height: 1.5; } .gps-popup-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(135deg, #f0fdfa 0%, #f8fafc 100%); border-bottom: 1px solid #e2e8f0; } .gps-popup-species-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2.5px solid #22d3ae; flex-shrink: 0; } .gps-popup-species-info { min-width: 0; } .gps-popup-species-name { font-weight: 700; font-size: .9rem; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .gps-popup-level { display: inline-block; font-size: .7rem; font-weight: 600; padding: 2px 10px; color: #fff; border-radius: 10px; margin-top: 2px; } .gps-popup-certified { color: #0ea5e9; font-size: .8rem; margin-left: 4px; } .gps-popup-details { padding: 10px 14px; } .gps-popup-row { font-size: .8rem; color: #475569; padding: 2px 0; } .gps-popup-row i { width: 18px; text-align: center; color: #94a3b8; margin-right: 4px; } .gps-popup-coords { font-size: .72rem; color: #94a3b8; } .gps-popup-comment { font-size: .8rem; color: #64748b; font-style: italic; padding: 4px 0 2px; border-top: 1px dashed #e2e8f0; margin-top: 4px; } .gps-popup-comment i { color: #94a3b8; margin-right: 4px; } .gps-popup-photo { padding: 0 14px 10px; } .gps-popup-photo img { width: 100%; max-height: 160px; object-fit: cover; border-radius: 10px; border: 1px solid #e2e8f0; } .gps-popup-footer { padding: 8px 14px; background: #fef2f2; border-top: 1px solid #fecaca; font-size: .78rem; color: #ef4444; font-weight: 600; } .gps-popup-footer i { margin-right: 3px; } .species-item-link .species-img-wrapper img { transition: transform 0.4s ease; } .species-item-link:hover .species-img-wrapper img { transform: scale(1.08); } .species-item-link:hover .species-title { color: var(--med-primary, #0bb3b2) !important; } .species-item-link .species-img-wrapper { border-radius: 1rem; overflow: hidden; }