/* ========================================================= VARIABLES ========================================================= */ :root { --topbar-height: 56px; --footer-height: 48px; --page-bg: #2f2f2f; --card-bg: #f1f1f1; --text-muted: #777; --radius-card: 16px; --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.25); } /* ========================================================= RESET / BASE ========================================================= */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Inter", sans-serif; background: var(--page-bg); overflow-x: hidden; } .text-muted { color: var(--text-muted); } /* ========================================================= TOP BAR (HEADER) ========================================================= */ .top-bar { height: var(--topbar-height); display: flex; align-items: center; justify-content: space-between; padding: 0 30px; background: linear-gradient(to right, #444, #222); color: #fff; } .logo { font-size: 22px; font-weight: 700; color: #fff; text-decoration: none; } .logo span { color: #ff7849; } .btn-purple { background: #7b61ff; color: #fff; border-radius: 8px; padding: 6px 14px; border: none; cursor: pointer; font-weight: 500; } .btn-purple:hover { background: #6a52e8; } /* ========================================================= FOOTER ========================================================= */ footer { height: var(--footer-height); display: flex; align-items: center; justify-content: center; gap: 20px; background: #222; } footer a { color: #bbb; text-decoration: none; font-size: 13px; } /* Header/Footer responsiveness */ @media (max-width: 480px) { .top-bar { padding: 0 16px; } .logo { font-size: 20px; } footer { height: auto; padding: 12px 8px; flex-wrap: wrap; gap: 12px; text-align: center; } } /* ========================================================= AUTH PAGES ONLY (login.php / signup.php) Requires: Mapped from index-page full-height behavior ========================================================= */ /* stop page scroll on auth too (same as index) */ body.auth-page { overflow: hidden; } /* Map should fit between header and footer (same as index) */ .auth-page .map-bg { position: relative; width: 100%; height: calc(100vh - var(--topbar-height) - var(--footer-height)); overflow: hidden; /* keep auth centering */ display: flex; align-items: center; justify-content: center; /* remove old padding behavior */ padding: 0; transform: none !important; } /* ========================================================= BACKGROUND MAP SUPPORT (Leaflet + iframe) - login.php uses Leaflet (#mapContainer) - other auth pages may use iframe ========================================================= */ /* Leaflet container should fill the background */ .auth-page #mapContainer, .auth-page .leaflet-container { position: absolute; inset: 0; width: 100% !important; height: 100% !important; background: #ddd; /* prevents white gaps while tiles load */ z-index: 1; /* keep behind overlay card */ } .auth-page #mapContainer { overflow: hidden !important; } /* Fix tile seams + “missing grid blocks” in Chrome sometimes */ .auth-page .leaflet-tile { image-rendering: auto; will-change: transform; } /* Prevent leaflet panes from being clipped by weird stacking contexts */ .auth-page .leaflet-pane, .auth-page .leaflet-map-pane, .auth-page .leaflet-tile-pane, .auth-page .leaflet-overlay-pane, .auth-page .leaflet-marker-pane, .auth-page .leaflet-shadow-pane { transform: translateZ(0); } /* iframe background fills map-bg (if you use it anywhere) */ .auth-page .map-bg iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; transform: scale(1.05); filter: saturate(1.05) contrast(1.05); pointer-events: none; z-index: 1; /* same layer as map */ } /* overlay above map (same behavior as index overlay) */ .auth-page .map-overlay { position: absolute; inset: 0; z-index: 500; /* allow card interaction but keep map protected */ pointer-events: none; /* keep auth centering */ display: flex; justify-content: center; align-items: center; padding: 0 16px; transform: none !important; } .auth-page .map-overlay * { pointer-events: auto; } /* Card stays same */ .auth-page .signup-card { background: var(--card-bg); border-radius: var(--radius-card); padding: 36px 30px; width: 380px; max-width: 100%; text-align: center; box-shadow: var(--shadow-card); } .auth-page .signup-card h2 { margin: 0 0 6px; font-weight: 700; } .auth-page .signup-card p { margin: 0 0 16px; } .auth-page .signup-card input { border-radius: 8px; padding: 10px; } /* divider etc unchanged */ .auth-page .divider { display: flex; align-items: center; margin: 16px 0; color: #777; font-size: 14px; } .auth-page .divider::before, .auth-page .divider::after { content: ""; flex: 1; height: 1px; background: #ccc; } .auth-page .divider::before { margin-right: 10px; } .auth-page .divider::after { margin-left: 10px; } .auth-page .dot-separator { width: 60px; height: 60px; background: radial-gradient(circle, #ff7849 2px, transparent 2px) center / 10px 10px; margin: 0 auto; border-radius: 50%; } .auth-page .terms { font-size: 12px; color: var(--text-muted); margin-top: 16px; } /* ========================================================= AUTH mobile: allow vertical scrolling, prevent overlap ========================================================= */ @media (max-width: 768px) { /* allow vertical scroll (signup can be taller than viewport) */ html, body.auth-page { height: auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* map container becomes flexible instead of fixed-height */ .auth-page .map-bg { height: auto; min-height: calc(100vh - var(--topbar-height) - var(--footer-height)); padding: 16px 0; overflow: visible; } /* overlay should be in normal flow so it pushes height */ .auth-page .map-overlay { position: relative; inset: auto; z-index: 2; pointer-events: auto; /* not overlaying map in mobile */ } /* keep card safe inside viewport */ .auth-page .signup-card { width: min(420px, 100%); max-width: 100%; box-sizing: border-box; } /* ensure form controls don't cause horizontal scroll */ .auth-page .signup-card input, .auth-page .signup-card button, .auth-page .signup-card form, .auth-page .signup-card .btn, .auth-page .signup-card .form-control { width: 100%; max-width: 100%; box-sizing: border-box; } /* optional: hide heavy bg on mobile */ .auth-page .map-bg iframe { display: none; } /* Leaflet background should still not create overflow */ .auth-page #mapContainer, .auth-page .leaflet-container { position: absolute; inset: 0; overflow: hidden; } } @media (max-height: 700px) { .auth-page .signup-card { padding: 28px 22px; } } /* ========================================================= INDEX PAGE ONLY (map full height + bottom sticky bar) Requires: ========================================================= */ /* stop page scroll on index */ body.index-page { overflow: hidden; } /* Map should fit between header and footer */ .index-page .map-bg { position: relative; width: 100%; height: calc(100vh - var(--topbar-height) - var(--footer-height)); overflow: hidden; transform: none !important; } /* overlay above map */ .index-page .map-overlay { position: absolute; inset: 0; z-index: 500; pointer-events: none; transform: none !important; } .index-page .map-overlay * { pointer-events: auto; } .index-page #mapContainer, .index-page .leaflet-container { width: 100% !important; height: 100% !important; background: #ddd; /* prevents white gaps while tiles load */ } .index-page #mapContainer { overflow: hidden !important; } /* Fix tile seams + “missing grid blocks” in Chrome sometimes */ .index-page .leaflet-tile { image-rendering: auto; will-change: transform; } /* Prevent leaflet panes from being clipped by weird stacking contexts */ .index-page .leaflet-pane, .index-page .leaflet-map-pane, .index-page .leaflet-tile-pane, .index-page .leaflet-overlay-pane, .index-page .leaflet-marker-pane, .index-page .leaflet-shadow-pane { transform: translateZ(0); } /* --- Nearby profile pins (Leaflet custom divIcon) --- */ .index-page .profile-pin-wrap { background: transparent !important; border: 0 !important; } .index-page .profile-pin { width: 46px; height: 46px; border-radius: 999px; overflow: hidden; background: #fff; border: 2px solid rgba(255, 149, 122, 0.95); /* matches your peach UI */ box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22); } .index-page .profile-pin img { width: 100%; height: 100%; object-fit: cover; display: block; } .index-page .profile-pin--fallback { display: grid; place-items: center; font-size: 20px; color: #111; /* important */ background: #fff; /* optional but helps visibility */ line-height: 46px; /* helps on some browsers */ text-align: center; } .index-page .leaflet-div-icon.profile-pin-wrap { background: transparent !important; border: 0 !important; } /* Bottom bar */ .index-page .index-bottom-bar { position: fixed; left: 50%; transform: translateX(-50%) translateZ(0); bottom: calc(var(--footer-height) + 18px); width: calc(100% - 56px); max-width: 980px; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-radius: 18px; background: #fff; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25); z-index: 999999; } /* icon buttons */ .index-page .ibb-btn { width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); padding: 0; cursor: pointer; transition: transform 0.12s ease, background 0.12s ease; } .index-page .ibb-btn:hover { background: rgba(0, 0, 0, 0.03); transform: translateY(-1px); } /* center pill */ .index-page .ibb-center { border: 0; cursor: pointer; height: 34px; min-width: 78px; padding: 0 12px; border-radius: 999px; background: #f2a07f; color: #111; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 10px 24px rgba(242, 160, 127, 0.45); font-weight: 700; } .index-page .ibb-center-icon { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; } /* red dot */ .index-page .ibb-right { position: relative; } .index-page .ibb-right::after { content: ""; position: absolute; top: 8px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #e11d48; border: 2px solid #fff; } /* mobile tweaks */ @media (max-width: 480px) { .index-page .index-bottom-bar { width: calc(100% - 24px); height: 60px; padding: 0 14px; border-radius: 16px; bottom: calc(var(--footer-height) + 12px); } .index-page .ibb-btn { width: 42px; height: 42px; } .index-page .ibb-center { height: 32px; min-width: 70px; padding: 0 10px; } } /* ========================================================= Bottom bar image icons ========================================================= */ .index-page .ibb-btn img { width: 22px; height: 22px; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; } .index-page .ibb-center-icon img { width: 16px; height: 16px; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; } /* ========================================================= MODAL BASE (shared by all index popups) ========================================================= */ .index-page .profile-popup, .index-page .eyes-popup, .index-page .limit-popup, .index-page .settings-popup { position: fixed; inset: 0; display: none; } .index-page .profile-popup.is-open, .index-page .eyes-popup.is-open, .index-page .limit-popup.is-open, .index-page .settings-popup.is-open { display: block; } .index-page .profile-popup__backdrop, .index-page .eyes-popup__backdrop, .index-page .limit-popup__backdrop, .index-page .settings-popup__backdrop { position: absolute; inset: 0; backdrop-filter: blur(2px); } .index-page .profile-popup { z-index: 999998; } .index-page .eyes-popup { z-index: 999999; } .index-page .limit-popup { z-index: 1000000; } .index-page .settings-popup { z-index: 1000000; } .index-page .profile-popup__backdrop, .index-page .eyes-popup__backdrop { background: rgba(0, 0, 0, 0.25); } .index-page .limit-popup__backdrop { background: rgba(0, 0, 0, 0.20); } .index-page .settings-popup__backdrop { background: rgba(0, 0, 0, 0.15); } /* ========================================================= PROFILE POPUP ========================================================= */ .index-page .profile-popup__card { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--footer-height) + 95px); width: min(520px, calc(100% - 32px)); background: #fff; border-radius: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25); padding: 22px 20px 18px; text-align: center; } .index-page .profile-popup__close { position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; border-radius: 999px; border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: #111; } .index-page .profile-popup__avatar { width: 150px; height: 150px; border-radius: 999px; margin: 6px auto 14px; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 50% / 24px 24px; border: 8px solid #fff; } .index-page .profile-popup__meta { margin-bottom: 14px; } .index-page .profile-popup__username { font-weight: 800; font-size: 18px; color: #111; margin-bottom: 4px; } .index-page .profile-popup__status { font-size: 12px; color: #777; } .index-page .profile-popup__btn { display: inline-block; width: 100%; max-width: 340px; padding: 10px 14px; border-radius: 10px; background: #111; color: #fff; text-decoration: none; font-weight: 600; font-size: 13px; margin: 0 auto; } @media (max-width: 480px) { .index-page .profile-popup__card { bottom: calc(var(--footer-height) + 84px); padding: 18px 16px 16px; } .index-page .profile-popup__avatar { width: 120px; height: 120px; } } /* ========================================================= EYES ON YOU POPUP ========================================================= */ .index-page .eyes-popup__card { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(340px, calc(100% - 24px)); background: #1f232a; border-radius: 14px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35); padding: 14px 12px 12px; } .index-page .eyes-popup__header { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 10px; } .index-page .eyes-popup__title { color: #fff; font-weight: 800; font-size: 16px; } .index-page .eyes-popup__close { width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; } .index-page .eyes-popup__list { display: flex; flex-direction: column; gap: 8px; padding: 0 4px 4px; } .index-page .eyes-popup__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); } .index-page .eyes-popup__left { display: flex; align-items: center; gap: 10px; min-width: 0; } .index-page .eyes-popup__avatar { width: 28px; height: 28px; border-radius: 999px; background: #cbd5e1; flex: 0 0 auto; } .index-page .eyes-popup__name { color: #e5e7eb; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } .index-page .eyes-popup__btn { text-decoration: none; font-size: 11px; font-weight: 700; color: #111; background: #fff; padding: 6px 10px; border-radius: 999px; flex: 0 0 auto; } @media (max-width: 480px) { .index-page .eyes-popup__card { top: 46%; width: min(330px, calc(100% - 18px)); } } /* ========================================================= PROFILE LIMIT POPUP ========================================================= */ .index-page .limit-popup__card { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(320px, calc(100% - 24px)); background: #2b2f36; border-radius: 14px; padding: 18px 16px 16px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35); text-align: center; color: #fff; } .index-page .limit-popup__close { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; } .index-page .limit-popup__icon { display: grid; place-items: center; margin-top: 4px; } .index-page .limit-popup__small { margin-top: 10px; font-size: 12px; opacity: 0.9; line-height: 1.25; } .index-page .limit-popup__title { margin-top: 14px; font-size: 18px; font-weight: 800; line-height: 1.15; } .index-page .limit-popup__muted { margin-top: 10px; font-size: 11px; color: rgba(255, 255, 255, 0.7); } .index-page .limit-popup__btn { margin-top: 14px; border: 0; cursor: pointer; padding: 10px 18px; border-radius: 999px; background: #fff; color: #111; font-weight: 800; font-size: 13px; } /* ========================================================= SETTINGS POPUP ========================================================= */ .index-page .settings-popup__card { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(760px, calc(100% - 28px)); background: #e9e9e9; border-radius: 14px; padding: 22px 22px 18px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35); } .index-page .settings-popup__close { position: absolute; right: 14px; top: 12px; width: 38px; height: 38px; border-radius: 10px; border: 0; background: transparent; color: #111; font-size: 28px; cursor: pointer; } .index-page .settings-popup__title { margin: 0 0 14px; font-size: 38px; font-weight: 900; color: #111; } .index-page .settings-popup__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 18px; align-items: start; } .index-page .settings-popup__refer { background: #111; color: #fff; border-radius: 10px; padding: 12px; margin-bottom: 12px; } .index-page .settings-popup__referTitle { font-weight: 800; font-size: 14px; } .index-page .settings-popup__referSub { font-size: 11px; opacity: 0.8; margin-top: 2px; } .index-page .settings-popup__referRow { display: flex; gap: 8px; margin-top: 10px; } .index-page .settings-popup__input { flex: 1; height: 30px; border-radius: 8px; border: 0; padding: 0 10px; font-size: 12px; } .index-page .settings-popup__copy { width: 34px; height: 30px; border-radius: 8px; border: 0; background: #2a2a2a; color: #fff; cursor: pointer; } .index-page .settings-popup__how { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; color: #fff; text-decoration: none; opacity: 0.9; } .index-page .settings-popup__section { margin-top: 10px; } .index-page .settings-popup__sectionTitle { font-size: 12px; font-weight: 800; margin-bottom: 6px; color: #111; } .index-page .settings-popup__item { width: 100%; background: #fff; border: 0; border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; font-size: 12px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; text-decoration: none; color: #111; } .index-page .settings-popup__right { display: grid; justify-items: center; gap: 10px; } .index-page .settings-popup__avatar { width: 150px; height: 150px; border-radius: 999px; background: #111; } .index-page .settings-popup__username { font-weight: 900; font-size: 18px; color: #111; } .index-page .settings-popup__btn { width: 100%; max-width: 230px; border: 0; border-radius: 999px; padding: 10px 14px; font-weight: 800; cursor: pointer; text-decoration: none; } .index-page .settings-popup__btn--orange, .index-page .settings-popup__btn--red { background: #f05a1a; color: #fff; text-align: center; } .index-page .settings-popup__btn--red { opacity: 0.95; } @media (max-width: 720px) { .index-page .settings-popup__card { top: 50%; } .index-page .settings-popup__title { font-size: 30px; } .index-page .settings-popup__grid { grid-template-columns: 1fr; } .index-page .settings-popup__avatar { width: 110px; height: 110px; } } /* ========================================================= INDEX: REFERRALS POPUP ========================================================= */ .index-page .referrals-popup { position: fixed; inset: 0; z-index: 1000001; display: none; } .index-page .referrals-popup.is-open { display: block; } .index-page .referrals-popup__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.15); backdrop-filter: blur(2px); } .index-page .referrals-popup__card { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(340px, calc(100% - 24px)); background: #fff; border-radius: 14px; padding: 18px 16px 16px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35); } .index-page .referrals-popup__close { position: absolute; right: 12px; top: 10px; width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: #111; font-size: 28px; line-height: 1; cursor: pointer; } .index-page .referrals-popup__title { font-size: 22px; font-weight: 900; color: #f05a1a; margin: 0 0 10px; } .index-page .referrals-popup__small { font-size: 11px; color: #111; margin-bottom: 8px; } .index-page .referrals-popup__referCard { background: #111; color: #fff; border-radius: 12px; padding: 12px; } .index-page .referrals-popup__referTitle { font-weight: 900; font-size: 14px; } .index-page .referrals-popup__referSub { font-size: 11px; opacity: 0.85; margin-top: 2px; } .index-page .referrals-popup__copyRow { display: flex; gap: 8px; margin-top: 10px; } .index-page .referrals-popup__input { flex: 1; height: 30px; border-radius: 8px; border: 0; padding: 0 10px; font-size: 12px; } .index-page .referrals-popup__copyBtn { width: 34px; height: 30px; border-radius: 8px; border: 0; background: #2a2a2a; color: #fff; cursor: pointer; } .index-page .referrals-popup__howTitle { margin-top: 12px; font-size: 12px; font-weight: 900; color: #111; } .index-page .referrals-popup__steps { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; } .index-page .referrals-popup__step { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: #f3f3f3; } .index-page .referrals-popup__icon { width: 34px; height: 34px; border-radius: 999px; background: #111; color: #fff; display: grid; place-items: center; font-size: 14px; flex: 0 0 auto; } .index-page .referrals-popup__stepHead { font-weight: 900; font-size: 12px; color: #111; } .index-page .referrals-popup__stepSub { font-size: 11px; color: #555; margin-top: 2px; } /* ========================================================= INDEX: FEEDBACK POPUP ========================================================= */ .index-page .feedback-popup { position: fixed; inset: 0; z-index: 1000002; display: none; } .index-page .feedback-popup.is-open { display: block; } .index-page .feedback-popup__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.15); backdrop-filter: blur(2px); } .index-page .feedback-popup__card { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(420px, calc(100% - 24px)); background: #fff; border-radius: 14px; padding: 18px 18px 16px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35); } .index-page .feedback-popup__close { position: absolute; right: 12px; top: 10px; width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: #111; } .index-page .feedback-popup__title { margin: 2px 0 2px; font-size: 16px; font-weight: 900; text-align: center; color: #111; } .index-page .feedback-popup__sub { margin: 0 0 10px; font-size: 12px; text-align: center; color: #666; } .index-page .feedback-popup__ratingRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 12px; } .index-page .feedback-popup__stars { display: flex; gap: 6px; } .index-page .feedback-star { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.08); background: #fff; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; color: #d1d5db; /* grey */ } .index-page .feedback-star.is-active { color: #f59e0b; /* amber */ border-color: rgba(245, 158, 11, 0.35); } .index-page .feedback-popup__avg { font-size: 11px; color: #666; white-space: nowrap; } .index-page .feedback-popup__label { display: block; font-size: 11px; font-weight: 800; color: #444; margin: 8px 0 6px; } .index-page .feedback-popup__input, .index-page .feedback-popup__textarea { width: 100%; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.10); padding: 10px 10px; font-size: 12px; outline: none; } .index-page .feedback-popup__textarea { resize: none; } .index-page .feedback-popup__submit { margin-top: 12px; width: 100%; border: 0; border-radius: 10px; padding: 10px 12px; cursor: pointer; font-weight: 900; font-size: 12px; background: #7b61ff; color: #fff; } .index-page .feedback-popup__submit:hover { background: #6a52e8; } /* Eyes on You empty state */ .eyes-popup__empty { padding: 14px 10px; color: #666; font-size: 14px; text-align: center; }