/* ========================================================= USLY — CSS FINAL (v11) BAZA: Twoje „kod CSS v9” (działający) + DODANE/ROZSZERZONE pod HTML v11: - PL only (bez przełącznika języka) - Ustawienia w tabbar: tylko koło zębate (⚙) — bez dodatkowych ikon - Rejestracja Towarzysza: suwaki zakresu wieku + wartości (range) - „W okolicy”: mapa + markery osoby/wydarzenia + listy - Grupy: sekcja dodania znajomego do grupy (hook) - Organizer: osobne ustawienia profilu + logo preview + statystyki - Plany: karty planów (User/Partner) + data-plan-icon (backend hook) - Ujednolicenia pod backend: style dla nowych ID / elementów nie psują v9 ========================================================= */ /* ------------------------- Reset / Base -------------------------- */ * { box-sizing: border-box; } html, body { height: 100%; } body{ font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin:0; background: radial-gradient(1200px 900px at 18% 20%, rgba(255, 86, 214,.18) 0%, rgba(255,86,214,0) 60%), radial-gradient(1200px 900px at 82% 28%, rgba(59, 216, 255,.18) 0%, rgba(59,216,255,0) 55%), radial-gradient(900px 900px at 50% 105%, rgba(95, 75, 255,.14) 0%, rgba(95,75,255,0) 55%), linear-gradient(180deg, #05060c 0%, #07081a 50%, #05060c 100%); color:#eaf0ff; } :root{ --pink: #ff4bd4; --blue: #34e6ff; --violet:#7b4dff; --muted: rgba(233,240,255,.70); --muted2: rgba(233,240,255,.55); --shadow2: 0 14px 34px rgba(0,0,0,.48); --shadow3: 0 26px 70px rgba(0,0,0,.62); --r-xl: 26px; --r-lg: 22px; --r-md: 18px; --tabH: 82px; --safePad: 16px; --focusRing: 0 0 0 4px rgba(52,230,255,.18); --glassA: rgba(255,255,255,.08); --glassB: rgba(255,255,255,.03); --glassBorder: rgba(255,255,255,.10); --ink: #06101c; } ::selection{ background: rgba(52,230,255,.26); } /* ------------------------- Layout shell -------------------------- */ .stage{ min-height:100vh; display:grid; place-items:center; padding:28px 14px; } .phone{ width:390px; height:844px; border-radius: 42px; position:relative; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); box-shadow: 0 60px 160px rgba(0,0,0,.62); padding: 14px; overflow:hidden; } .phone::before{ content:""; position:absolute; inset:0; border-radius: 42px; background: radial-gradient(120% 120% at 20% 10%, rgba(255,75,212,.20) 0%, rgba(255,75,212,0) 55%), radial-gradient(120% 120% at 80% 15%, rgba(52,230,255,.20) 0%, rgba(52,230,255,0) 55%), linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); pointer-events:none; mix-blend-mode: screen; filter: blur(.2px); } .screenHost{ height:100%; border-radius: 32px; overflow:hidden; position:relative; background: radial-gradient(900px 650px at 20% 0%, rgba(255,75,212,.18) 0%, rgba(255,75,212,0) 55%), radial-gradient(900px 650px at 85% 15%, rgba(52,230,255,.18) 0%, rgba(52,230,255,0) 55%), radial-gradient(900px 650px at 50% 110%, rgba(123,77,255,.14) 0%, rgba(123,77,255,0) 60%), linear-gradient(180deg, #050612 0%, #06071a 55%, #050612 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); } @media (max-width: 430px){ .phone{ width:min(390px, 100%); height: calc(min(390px, 100vw) * (844 / 390)); } } /* ------------------------- Ambient blobs -------------------------- */ .ambient{ position:absolute; inset:-60px; pointer-events:none; filter: blur(22px); opacity:.9; } .blob{ position:absolute; border-radius: 999px; mix-blend-mode: screen; transform: translateZ(0); } .b1{ width:340px;height:340px;left:-60px;top:80px; background: radial-gradient(circle at 30% 30%, rgba(255,75,212,.85), rgba(255,75,212,0) 65%); animation: float1 9s ease-in-out infinite; } .b2{ width:420px;height:420px;right:-150px;top:60px; background: radial-gradient(circle at 40% 35%, rgba(52,230,255,.85), rgba(52,230,255,0) 70%); animation: float2 10s ease-in-out infinite; } .b3{ width:520px;height:520px;left:50%;bottom:-280px; transform: translateX(-50%); background: radial-gradient(circle at 50% 40%, rgba(123,77,255,.70), rgba(123,77,255,0) 72%); animation: float3 12s ease-in-out infinite; } @keyframes float1{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(18px,-16px)} } @keyframes float2{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-22px,14px)} } @keyframes float3{ 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(18px)} } /* ------------------------- Views / Scrolling -------------------------- */ .view{ position:absolute; inset:0; padding: 78px var(--safePad) 18px var(--safePad); overflow:auto; display:none; } .view.active{ display:block; } .view::-webkit-scrollbar{ width:0; height:0; } /* Ensure content not hidden under tabbar when logged in */ #appRoot.isLoggedIn .view{ padding-bottom: calc(var(--tabH) + 18px); } #appRoot.isLoggedIn #S6B_CHAT_THREAD, #appRoot.isLoggedIn #S8B_GROUP_THREAD{ padding-bottom: 0; } /* ------------------------- Topbar -------------------------- */ .topbar{ position:absolute; top:0; left:0; right:0; height: 74px; padding: 14px 14px 10px; display:flex; align-items:center; justify-content:space-between; z-index: 10; background: linear-gradient(180deg, rgba(6,8,20,.92) 0%, rgba(6,8,20,.72) 62%, rgba(6,8,20,0) 100%); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.05); } .brandCenter{ display:flex; align-items:center; justify-content:center; flex:1; padding:0 10px; } .brandRow{ display:flex; gap:20px; align-items:center; justify-content:center; } .brandLogo{ width:60px; height:60px; border-radius: 18px; object-fit: contain; box-shadow: 0 10px 22px rgba(0,0,0,.26); border:none; } .backBtn, .ghostBtn, .topIconBtn{ width: 44px; height: 44px; border-radius: 15px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); color: #f3f7ff; display:grid; place-items:center; font-weight: 900; box-shadow: 0 12px 28px rgba(0,0,0,.24), 0 0 0 1px rgba(255,255,255,.03) inset; backdrop-filter: blur(10px); cursor:pointer; } .ghostBtn{ opacity:0; pointer-events:none; } /* Brand in topbar */ .brandCenter{ display:flex; align-items:center; justify-content:center; flex:1; padding:0 10px; } .brandRow{ display:flex; gap:20px; align-items:center; justify-content:center; } .brandLogo{ width:60px; height:60px; border-radius: 18px; object-fit: contain; box-shadow: 0 6px 14px rgba(0,0,0,.22); border:none; } .brandLogo.sm{ width:34px;height:34px;border-radius: 12px; } .brandText{ text-align:left; transform: translateY(2px); } .brandName{ display:none; font-weight: 1000; letter-spacing: .8px; line-height: 1.05; font-size: 16px; } .brandTagline{ font-weight: 800; font-size: 11.5px; color: var(--muted); line-height: 1.1; } .brandCenter.small .brandTagline{ font-size:12px; opacity:.88; } /* Locked topbar for message threads only */ #S6B_CHAT_THREAD, #S8B_GROUP_THREAD{ padding-top: 0; } #S6B_CHAT_THREAD .topbar, #S8B_GROUP_THREAD .topbar{ position: sticky; top: 0; z-index: 12; } #S6B_CHAT_THREAD .topbar, #S8B_GROUP_THREAD .topbar{ position: sticky; top: 0; z-index: 12; } #S6B_CHAT_THREAD.active, #S8B_GROUP_THREAD.active{ display: flex; flex-direction: column; overflow: hidden; } #S6B_CHAT_THREAD .chatContent, #S8B_GROUP_THREAD .chatContent{ flex: 1 1 auto; min-height: 0; overflow: auto; padding-bottom: 12px; } #appRoot.isLoggedIn #S6B_CHAT_THREAD .chatContent, #appRoot.isLoggedIn #S8B_GROUP_THREAD .chatContent{ padding-bottom: 12px; } #S6B_CHAT_THREAD .inputDock, #S8B_GROUP_THREAD .inputDock{ position: relative; bottom: auto; margin: 0 16px 12px; z-index: 6; } #appRoot.isLoggedIn #S6B_CHAT_THREAD .inputDock, #appRoot.isLoggedIn #S8B_GROUP_THREAD .inputDock{ bottom: auto; margin-bottom: calc(var(--tabH) + 24px); } /* Top-right icon behavior: - default: gradient dot - notifBtn*: bell-only */ .topIconBtn{ position:relative; } .topIconBtn::before{ content:""; width: 18px; height: 18px; border-radius: 7px; display:block; background: linear-gradient(90deg, rgba(255,75,212,.82), rgba(52,230,255,.78)); box-shadow: 0 8px 20px rgba(0,0,0,.18); } .topIconBtn[aria-label="Menu"]::before{ content:"☰" !important; width:auto !important; height:auto !important; display:block; border-radius:0 !important; background:none !important; box-shadow:none !important; font-size: 17px !important; font-weight: 1000; line-height: 1; color:#f3f7ff !important; transform: translateY(-1px); } button[id^="notifBtn"]::before{ content:"🔔"; width:auto; height:auto; border-radius: 0; background: none; box-shadow:none; font-size: 17px; transform: translateY(-1px); filter: saturate(.95) brightness(1.04); } /* Notification badge (if JS adds .hasBadge and data-badge attr) */ button[id^="notifBtn"].hasBadge::after{ content: attr(data-badge); position:absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; display:flex; align-items:center; justify-content:center; font-size: 11px; font-weight: 700; color:#eaf2ff; background: rgba(12,18,28,0.92); border: 1px solid rgba(120,180,255,0.25); box-shadow: 0 4px 14px rgba(0,0,0,0.35); backdrop-filter: blur(6px); z-index: 2; } /* ------------------------- Spacing helpers -------------------------- */ .content{ position:relative; z-index:2; } .hero{ padding-top: 10px; } .mt10{ margin-top:10px; } .mt12{ margin-top:12px; } .mt16{ margin-top:16px; } .center{ text-align:center; } .row{ display:flex; gap:20px; align-items:stretch; } .col{ display:flex; flex-direction:column; gap:20px; } .row > *{ min-width: 0; } /* ------------------------- Cards + text -------------------------- */ .card, .heroCard, .hintCard, .mapCard, .metricCard{ background: linear-gradient(180deg, var(--glassA), var(--glassB)); border: 1px solid var(--glassBorder); border-radius: var(--r-xl); padding: 14px; box-shadow: var(--shadow2); backdrop-filter: blur(12px); } .heroCard{ padding: 20px; border-color: rgba(255,255,255,.16); border-radius: calc(var(--r-xl) + 4px); background: radial-gradient(760px 260px at 18% 0%, rgba(255,75,212,.28) 0%, rgba(255,75,212,0) 56%), radial-gradient(760px 260px at 82% 10%, rgba(52,230,255,.24) 0%, rgba(52,230,255,0) 56%), linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.045)); box-shadow: 0 28px 72px rgba(0,0,0,.34); backdrop-filter: blur(16px); } .sectionTitle{ font-weight: 1100; margin-bottom: 4px; font-size: 17px; letter-spacing: -.02em; line-height: 1.12; } .sectionSub{ color: var(--muted); font-weight: 800; font-size: 12.5px; line-height: 1.35; } .heroHeader{ margin-bottom: 12px; text-align:left; } .heroHello{ font-size: 22px; font-weight: 1100; } .heroSub{ margin-top: 4px; color: var(--muted); font-weight: 850; line-height: 1.35; } .promoLine{ font-weight:900; color:var(--muted); } .tStrong{ font-weight: 950; margin-bottom: 6px; text-align:left; } .tMuted{ color: var(--muted); font-weight: 850; } p{ margin:0; color: rgba(233,240,255,.82); font-weight: 800; line-height:1.45; } /* ------------------------- Divider -------------------------- */ .divider{ position:relative; height: 18px; display:grid; place-items:center; } .divider::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.16), rgba(255,255,255,0)); } .divider span{ position:relative; padding: 0 10px; font-weight: 900; font-size: 12px; color: var(--muted2); background: rgba(8,10,22,.60); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; } /* ------------------------- Buttons -------------------------- */ .btn{ width:100%; border: 0; border-radius: 16px; padding: 12px 14px; font-weight: 950; color: var(--ink); background: linear-gradient(90deg, var(--pink) 0%, var(--blue) 100%); box-shadow: 0 18px 44px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.08) inset; cursor:pointer; transition: transform .08s ease, filter .2s ease; } .btn:active{ transform: translateY(1px) scale(.995); } .btn:hover{ filter: brightness(1.02); } .btn.secondary{ color:#eaf0ff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 34px rgba(0,0,0,.34); } .btn.small{ padding:10px 12px; border-radius:18px; width:auto; } .btn.danger{ color:#fff; background: linear-gradient(90deg, rgba(255,75,212,.92), rgba(123,77,255,.92)); border: 1px solid rgba(255,255,255,.10); } .btn.social{ display:flex; align-items:center; justify-content:center; gap:20px; background: rgba(255,255,255,.06); color:#eaf0ff; border: 1px solid rgba(255,255,255,.14); } .btn.social .sIco{ width:26px; height:26px; display:grid; place-items:center; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-weight: 1000; } /* For anchor styled as button */ a.btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; } /* ------------------------- Inputs -------------------------- */ label{ display:block; font-size: 12px; font-weight: 950; color: rgba(233,240,255,.78); margin-top: 12px; margin-bottom: 7px; } input, select, textarea{ width:100%; box-sizing:border-box; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(7,8,20,.55); color:#eaf0ff; padding: 12px 12px; outline:none; box-shadow: 0 14px 34px rgba(0,0,0,.20); font-weight: 850; } textarea{ min-height: 92px; resize:none; line-height:1.35; } input::placeholder, textarea::placeholder{ color: rgba(233,240,255,.45); font-weight:800; } input:focus, select:focus, textarea:focus{ border-color: rgba(52,230,255,.35); box-shadow: 0 16px 40px rgba(0,0,0,.28), 0 0 0 4px rgba(52,230,255,.10); } /* File input */ input[type="file"]{ padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.05); } /* Range sliders (NOWE: preferencje wieku) */ input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height: 36px; background: transparent; padding: 0; margin: 0; } input[type="range"]::-webkit-slider-runnable-track{ height: 8px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); } input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; margin-top: -8px; width: 24px; height: 24px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,75,212,.95), rgba(52,230,255,.95)); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 18px 40px rgba(0,0,0,.45); cursor:pointer; } input[type="range"]::-moz-range-track{ height: 8px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.10); } input[type="range"]::-moz-range-thumb{ width: 24px; height: 24px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,75,212,.95), rgba(52,230,255,.95)); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 18px 40px rgba(0,0,0,.45); cursor:pointer; } /* ------------------------- Segmented controls -------------------------- */ .segLabel{ font-weight:950; color: rgba(233,240,255,.78); font-size:12px; margin-top: 10px; margin-bottom: 7px; } .seg{ display:flex; gap:8px; padding: 6px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 14px 34px rgba(0,0,0,.22); } .seg.wide{ width:100%; } .segBtn{ flex:1; border:0; border-radius: 14px; padding: 10px 12px; font-weight: 1000; color: rgba(233,240,255,.86); background: transparent; cursor:pointer; transition: transform .08s ease, filter .2s ease; } .segBtn:active{ transform: translateY(1px); } .segBtn.on, .segBtn.active{ color:#07121e; background: linear-gradient(90deg, rgba(255,75,212,.95), rgba(52,230,255,.95)); box-shadow: 0 12px 26px rgba(0,0,0,.28); } /* ------------------------- Pills + chips -------------------------- */ .pill, .planPill{ display:inline-flex; align-items:center; gap:8px; padding: 8px 10px; border-radius: 999px; font-weight: 950; font-size: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(233,240,255,.9); } .heroBadges{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px; } .planPill{ padding: 7px 10px; background: linear-gradient(90deg, rgba(255,75,212,.22), rgba(52,230,255,.18)); border-color: rgba(255,255,255,.14); letter-spacing:.4px; } #badgeChats, #badgeGroups, #badgePartnerMsgs{ font-weight: 1000; padding: 0 6px; min-width: 18px; height: 18px; z-index: 2; line-height: 1; font-size: 11px; color: #f7fbff; background: rgba(9, 12, 24, .96); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 6px 14px rgba(0,0,0,.26), 0 0 12px rgba(52,230,255,.18), /* lekka poświata */ 0 0 0 1px rgba(255,255,255,.04) inset; backdrop-filter: blur(8px); transform: translateY(-2px); /* lekko wyżej */ } #badgeChats::after, #badgeGroups::after, #badgePartnerMsgs::after{ content: none !important; } .chips{ display:flex; flex-wrap:wrap; gap:8px; } .chip{ padding: 8px 10px; border-radius: 999px; font-weight: 950; font-size: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(233,240,255,.88); cursor:pointer; user-select:none; } /* Typeahead */ .typeahead{ display:none; margin-top:10px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(7,8,20,.55); overflow:hidden; } .typeahead.open, .typeahead.show{ display:block; } .typeahead .taItem{ padding: 10px 12px; font-weight: 900; border-bottom: 1px solid rgba(255,255,255,.08); cursor:pointer; } .typeahead .taItem:last-child{ border-bottom:0; } .typeahead .taItem:hover{ background: rgba(255,255,255,.06); } /* ------------------------- Hash row -------------------------- */ .hashRow{ position:relative; display:flex; align-items:center; gap:20px; } .hashPrefix{ position:absolute; left:14px; top:50%; transform: translateY(-50%); font-weight: 1100; color: rgba(233,240,255,.75); } .hashRow input{ padding-left: 28px; } /* ------------------------- Links -------------------------- */ .link{ color: rgba(52,230,255,.92); font-weight: 950; cursor:pointer; text-decoration:none; } .link:hover{ text-decoration: underline; } .dotSep{ color: rgba(233,240,255,.35); padding:0 8px; } /* ------------------------- Avatar -------------------------- */ .avatar{ width: 44px; height: 44px; border-radius: 18px; display:grid; place-items:center; font-size: 20px; background: radial-gradient(120% 120% at 30% 20%, rgba(255,75,212,.26) 0%, rgba(255,75,212,0) 55%), radial-gradient(120% 120% at 70% 25%, rgba(52,230,255,.22) 0%, rgba(52,230,255,0) 55%), rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 16px 40px rgba(0,0,0,.34); } .avatar.big{ width: 96px; height: 96px; border-radius: 22px; font-size: 26px; } #userAvatar, #settingsUserAvatarPreview, #setupOrgLogoPreview, #setOrgLogoPreview, #partnerHubLogoPreview{ overflow: hidden; } /* Organizer logo preview container */ #orgLogoPreview, #setOrgLogoPreview{ width: 56px; height: 56px; border-radius: 22px; background: radial-gradient(120% 120% at 30% 20%, rgba(255,75,212,.18) 0%, rgba(255,75,212,0) 55%), radial-gradient(120% 120% at 70% 25%, rgba(52,230,255,.16) 0%, rgba(52,230,255,0) 55%), rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 16px 40px rgba(0,0,0,.28); } /* ------------------------- Toast -------------------------- */ .toast{ position:absolute; left: 16px; right: 16px; top: 84px; z-index: 50; opacity: 0; transform: translateY(-12px) scale(.98); pointer-events:none; padding: 14px 16px; border-radius: 20px; background: linear-gradient(180deg, rgba(20,22,45,.96), rgba(10,12,28,.92)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 24px rgba(255,75,212,.08); font-family: 'Manrope', -apple-system, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .1px; color:#f2f6ff; backdrop-filter: blur(12px); transition: opacity .2s ease, transform .2s ease; } .toast.show{ opacity:1; transform: translateY(0) scale(1); } /* ------------------------- Map (realistic + clickable) -------------------------- */ .mapCard{ padding:0; overflow:hidden; } .mapReal{ height: 220px; position:relative; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border-bottom: 1px solid rgba(255,255,255,.10); } .mapMeta{ padding: 12px 14px 14px; } .mapTitle{ font-weight: 1050; } .mapSub{ margin-top: 2px; font-size: 12.5px; color: var(--muted); font-weight: 850; } /* ------------------------- Analytics grid (organizer) -------------------------- */ .analyticsGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; } .metricCard{ padding: 12px; border-radius: 22px; } .metricTop{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; } .metricLabel{ font-weight: 950; color: rgba(233,240,255,.78); font-size: 12px; } .metricVal{ font-weight: 1100; font-size: 26px; } .metricSub{ margin-top: 2px; font-weight: 850; font-size: 12px; color: var(--muted); } .metricDot{ width: 10px; height: 10px; border-radius:999px; background: linear-gradient(90deg, var(--pink), var(--blue)); box-shadow: 0 0 0 3px rgba(255,255,255,.06); } /* ------------------------- Lists (dynamic items) -------------------------- */ .listItem{ border-radius: calc(var(--r-lg) + 2px); border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.055); box-shadow: 0 20px 48px rgba(0,0,0,.30); padding: 14px; cursor:pointer; transition: transform .08s ease, filter .2s ease, border-color .2s ease, box-shadow .2s ease; } .listItem:hover{ filter: brightness(1.03); border-color: rgba(255,255,255,.16); } .listItem:active{ transform: translateY(1px); } .listTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } .listLeft{ display:flex; align-items:flex-start; gap:14px; min-width:0; flex: 1 1 auto; } .listAvatar{ width:48px; height:48px; border-radius: 18px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); display:grid; place-items:center; box-shadow: 0 16px 40px rgba(0,0,0,.26); overflow: hidden; flex: 0 0 auto; } .listTitle{ font-weight: 1100; font-size: 15px; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; } .listMeta{ margin-top: 4px; font-weight: 850; font-size: 12.5px; line-height: 1.35; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; } .listRight{ display:flex; align-items:flex-start; gap:8px; flex: 0 0 auto; } .listTag{ padding: 6px 9px; border-radius: 999px; font-weight: 1000; font-size: 11px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(233,240,255,.92); } .listTag.paid{ background: linear-gradient(90deg, rgba(255,75,212,.18), rgba(52,230,255,.14)); } .listItem.isFeatured{ border-color: rgba(255,255,255,.18); background: radial-gradient(120% 140% at 0% 0%, rgba(255,75,212,.12) 0%, rgba(255,75,212,0) 58%), radial-gradient(120% 140% at 100% 0%, rgba(52,230,255,.10) 0%, rgba(52,230,255,0) 58%), rgba(255,255,255,.065); box-shadow: 0 20px 48px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.04) inset; } .listItem.isFeatured:hover{ border-color: rgba(255,255,255,.24); box-shadow: 0 24px 56px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.06) inset; } .listTag.featured{ background: linear-gradient(90deg, rgba(255,75,212,.22), rgba(52,230,255,.18)); border-color: rgba(255,255,255,.18); color: #f7fbff; } .listBody{ margin-top: 12px; font-weight: 850; font-size: 12.5px; line-height: 1.45; color: rgba(233,240,255,.82); } /* Unread chat row (JS adds .unread to .listItem) */ .unread{ position: relative; border-color: rgba(110,231,255,.42) !important; background: linear-gradient(90deg, rgba(110,231,255,.10) 0%, rgba(110,231,255,0) 22%), rgba(255,255,255,.072) !important; box-shadow: 0 20px 54px rgba(0,0,0,.42), 0 0 0 1px rgba(110,231,255,.14) inset, 0 0 26px rgba(110,231,255,.08) !important; } .unread::before{ content:""; position:absolute; left:-1px; top:14px; bottom:14px; width:4px; border-radius:999px; background:linear-gradient(180deg,#6EE7FF,#8B5CF6); box-shadow:0 0 14px rgba(110,231,255,.55); } .unread .listTitle{ color:#fff; font-weight:1200; } .unread .listMeta{ color:#F4F8FF; font-weight:950; } .unread .listAvatar{ box-shadow: 0 0 0 2px rgba(110,231,255,.22), 0 16px 40px rgba(0,0,0,.32), 0 0 20px rgba(110,231,255,.12); } /* Small number badge inside list items */ .badgeMini{ display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 8px; border-radius:999px; font-weight:1100; font-size:13px; color:#f7fbff; background: linear-gradient(135deg,#111827,#0b1220); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 6px 14px rgba(0,0,0,.26), 0 0 18px rgba(110,231,255,.16), 0 0 0 1px rgba(255,255,255,.04) inset; } .unread .badgeMini{ animation: unreadPulse 2s ease-in-out infinite; } @keyframes unreadPulse{ 0%{ transform:scale(1); } 50%{ transform:scale(1.08); } 100%{ transform:scale(1); } } /* ------------------------- Chat -------------------------- */ .chatContent{ min-height: calc(100% - 12px); display:flex; flex-direction:column; padding-bottom: calc(18px + 84px); } #appRoot.isLoggedIn .chatContent{ padding-bottom: calc(var(--tabH) + 92px); } #chatBubbles, #groupBubbles{ display:flex; flex-direction:column; gap:20px; flex:1; min-height: 0; } .bubble{ max-width: 78%; padding: 10px 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); font-weight: 850; line-height: 1.35; } .bubble.me{ margin-left:auto; background: linear-gradient(90deg, rgba(255,75,212,.20), rgba(52,230,255,.14)); } .bubble.them{ margin-right:auto; } /* Input dock */ .inputDock{ position: sticky; z-index: 5; left: auto; right: auto; bottom: 12px; margin: 0 16px; padding: 10px 12px; display:flex; gap:10px; align-items:center; background: linear-gradient(180deg, rgba(5,6,18,.18) 0%, rgba(5,6,18,.84) 35%, rgba(5,6,18,.94) 100%); backdrop-filter: blur(12px); } #appRoot.isLoggedIn .inputDock{ bottom: calc(var(--tabH) + 10px); } .inputDock input{ flex: 1 1 auto; min-width: 0; width: 0; margin: 0; padding: 12px 16px; font-size: 15px; } .inputDock .btn.small{ flex: 0 0 46px; width: 46px; min-width: 46px; height: 46px; padding: 0; border-radius: 999px; font-size: 18px; line-height: 1; display: grid; place-items: center; position: relative; z-index: 3; pointer-events: auto; } /* ------------------------- Modal -------------------------- */ .modalOverlay{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; padding: 16px; z-index: 40; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); } .modalOverlay.show, .modalOverlay[aria-hidden="false"]{ display:flex; } .modal{ width: 100%; max-width: 360px; border-radius: 28px; background: radial-gradient(600px 220px at 20% 0%, rgba(255,75,212,.20) 0%, rgba(255,75,212,0) 55%), radial-gradient(600px 220px at 85% 10%, rgba(52,230,255,.18) 0%, rgba(52,230,255,0) 55%), linear-gradient(180deg, rgba(16,18,35,.92), rgba(10,12,24,.86)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 50px 140px rgba(0,0,0,.70); overflow:hidden; } .modalTop{ display:flex; align-items:center; justify-content:space-between; padding: 14px 14px 10px; border-bottom: 1px solid rgba(255,255,255,.10); } .mTitle{ font-weight: 1100; letter-spacing: .8px; } .xBtn{ width: 40px; height: 40px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color:#eaf0ff; cursor:pointer; } .modalScroll{ max-height: 60vh; overflow:auto; padding: 12px 14px; } .modalScroll::-webkit-scrollbar{ width:0; height:0; } .modalFooter{ padding: 12px 14px 14px; border-top: 1px solid rgba(255,255,255,.10); } /* ------------------------- Legal / checkbox -------------------------- */ .legalBox{ padding: 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); } .checkRow{ display:flex; gap:20px; align-items:flex-start; font-weight: 850; line-height:1.25; } .checkRow input{ width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); } /* Organizer event create: capacity block */ #S9_PARTNER_CREATE .partnerCapacityToggle{ margin-top: 14px; } #S9_PARTNER_CREATE .partnerCapacityToggleRow, #S10B_PROFILE_EDIT .partnerCapacityToggleRow, #S3_PROFILE_SETUP .partnerCapacityToggleRow{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.045); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); } #S9_PARTNER_CREATE .partnerCapacityToggleRow .tStrong, #S10B_PROFILE_EDIT .partnerCapacityToggleRow .tStrong, #S3_PROFILE_SETUP .partnerCapacityToggleRow .tStrong{ font-size: 15px; font-weight: 950; line-height: 1.15; color: #f3f8ff; } #S9_PARTNER_CREATE .partnerCapacityToggleRow input, #S10B_PROFILE_EDIT .partnerCapacityToggleRow input, #S3_PROFILE_SETUP .partnerCapacityToggleRow input{ width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--blue); } #S9_PARTNER_CREATE .partnerCapacityBox{ padding-top: 2px; } #S9_PARTNER_CREATE .partnerCapacityBox > label{ display:block; margin-bottom: 8px; } /* Ticket disclaimer */ #evTicketBox .legalBox{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); } /* ------------------------- Tabbar (MUST HAVE) -------------------------- */ .tabbar{ position:absolute; left: 10px; right: 10px; bottom: 10px; height: var(--tabH); padding: 10px 10px 12px; border-radius: 26px; display:none; gap: 6px; align-items:stretch; justify-content:flex-start; overflow:hidden; z-index: 20; background: radial-gradient(700px 120px at 25% 0%, rgba(255,75,212,.20) 0%, rgba(255,75,212,0) 55%), radial-gradient(700px 120px at 80% 0%, rgba(52,230,255,.18) 0%, rgba(52,230,255,0) 55%), linear-gradient(180deg, rgba(12,14,30,.82), rgba(7,8,20,.82)); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow3); backdrop-filter: blur(14px); } /* When logged in: JS should show only one of them by toggling display/classes. CSS keeps both eligible when isLoggedIn; JS should hide irrelevant. */ #appRoot.isLoggedIn #tabbarUser, #appRoot.isLoggedIn #tabbarPartner{ display:flex; } .tabbar button{ flex:1; min-width:0; border:0; background: transparent; color: rgba(233,240,255,.78); font-weight: 950; font-size: 11px; padding: 10px 6px 8px; border-radius: 18px; cursor:pointer; display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; transition: transform .08s ease, filter .2s ease, background .2s ease; } .tabbar button:active{ transform: translateY(1px); } .tabbar button .ico{ width: 34px; height: 34px; border-radius: 16px; display:grid; place-items:center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 12px 28px rgba(0,0,0,.25); font-size: 16px; position:relative; } /* Default icon dots (used in most tabs) */ .tabbar button .ico > span{ width: 18px; height: 18px; border-radius: 8px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } /* Active tab */ .tabbar button.active, .tabbar button.on{ background: linear-gradient(90deg, rgba(255,75,212,.22), rgba(52,230,255,.16)); color:#f4f8ff; box-shadow: 0 18px 44px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.06) inset; } .tabbar button.active .ico, .tabbar button.on .ico{ background: linear-gradient(90deg, rgba(255,75,212,.30), rgba(52,230,255,.24)); border-color: rgba(255,255,255,.20); box-shadow: 0 12px 28px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.08) inset; } /* Cosmetic icon mapping (only for dot-based tabs; settings uses literal ⚙ in HTML) */ #tabNearby .ico > span::after{ content:"🗺️"; } #tabChats .ico > span::after{ content:"💬"; } #tabEvents .ico > span::after{ content:"📅"; } #tabGroups .ico > span::after{ content:"👥"; } #ptabDash .ico > span::after{ content:"📊"; } #ptabCreate .ico > span::after{ content:"➕"; } #ptabMyEvents .ico > span::after{ content:"🗓️"; } #ptabMsgs .ico > span::after{ content:"✉️"; } /* Apply for ::after above */ .tabbar button .ico > span::after{ font-size: 16px; display:block; opacity:.9; transform: translateY(-1px); } /* Pills inside tab icons (badges) */ .pill{ display:inline-flex; align-items:center; justify-content:center; } /* Settings gear icon in tabbar: ensure it looks centered (HTML has ⚙ directly) */ #tabSettingsUser .ico, #ptabSettings .ico{ font-size: 18px; } /* ------------------------- Profile hub emphasis v2 -------------------------- */ .profileActionRow{ display:grid !important; grid-template-columns: 1fr 1fr !important; gap:12px !important; align-items:stretch; } .profileActionRow .btn{ width:100%; min-height:56px !important; border-radius:20px !important; font-size:16px !important; font-weight:1100 !important; justify-content:center; } .profileActionRow .btn:nth-child(1){ background: linear-gradient(90deg, rgba(255,75,212,.95), rgba(52,230,255,.95)); color:#07121e; border:0; box-shadow: 0 18px 40px rgba(0,0,0,.24); } .profileActionRow .btn:nth-child(2){ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.14); color:#eef3ff; } .profileActionRow .btn:nth-child(3){ grid-column: 1 / -1; min-height:60px !important; border-radius:22px !important; background: linear-gradient(90deg, rgba(255,75,212,.18), rgba(52,230,255,.16)), linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.16); color:#f8fbff; letter-spacing:.01em; box-shadow: 0 20px 46px rgba(0,0,0,.22); } #settingsUserBox .heroCard .planPill{ min-width:72px !important; min-height:38px !important; font-size:13px !important; font-weight:1000 !important; } .profileSummaryCard{ padding:20px !important; border-radius:30px !important; } .profileSummaryCard .sectionTitle{ font-size:21px !important; font-weight:1100 !important; letter-spacing:-.025em; line-height:1.05; color:#f7fbff; text-shadow: 0 8px 24px rgba(0,0,0,.22); margin-bottom:8px !important; } .profileSummaryCard .sectionSub{ font-size:15px !important; font-weight:900 !important; line-height:1.38 !important; color:rgba(241,246,255,.88) !important; max-width:30ch; } .profileSummaryCard .pill{ min-width:90px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-size:15px; font-weight:1100; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.16); color:#f6fbff; box-shadow: 0 12px 28px rgba(0,0,0,.18); } #settingsUserBox > .sectionTitle{ font-size:24px !important; font-weight:1100 !important; letter-spacing:-.03em; } #settingsUserBox > .sectionSub{ font-size:15px !important; font-weight:900 !important; color:rgba(241,246,255,.84) !important; line-height:1.42 !important; } /* ------------------------- Profile clean premium -------------------------- */ #settingsUserBox .profileActionRow{ display:grid !important; grid-template-columns: 1fr 1fr !important; gap:10px !important; align-items:stretch !important; } #settingsUserBox .profileActionRow .btn{ width:100% !important; min-height:46px !important; border-radius:16px !important; font-size:14px !important; font-weight:900 !important; justify-content:center !important; padding:0 14px !important; } #settingsUserBox .profileActionRow .btn:nth-child(3){ grid-column:1 / -1 !important; min-height:48px !important; border-radius:18px !important; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; border:1px solid rgba(255,255,255,.14) !important; color:#eef3ff !important; font-size:14px !important; font-weight:1000 !important; box-shadow:none !important; } #settingsUserBox .friendsCard .sectionTitle, #settingsUserBox .invitesCard .sectionTitle{ font-size:18px !important; font-weight:1100 !important; letter-spacing:-.02em !important; line-height:1.08 !important; margin-bottom:6px !important; color:#f8fbff !important; text-shadow:none !important; } #settingsUserBox .friendsCard .sectionSub, #settingsUserBox .invitesCard .sectionSub{ font-size:13px !important; font-weight:850 !important; line-height:1.34 !important; color:rgba(241,246,255,.82) !important; } #settingsUserBox .profileSummaryCard{ border-radius: 26px !important; padding: 18px !important; } #settingsUserBox .profileSummaryCard .pill{ min-width: 84px; min-height: 40px; font-size: 14px; font-weight: 1000; } #settingsUserBox .heroCard{ padding:18px !important; border-radius:28px !important; } #settingsUserBox .heroCard .sectionTitle{ font-size:15px !important; line-height:1.08 !important; margin-bottom:4px !important; } #settingsUserBox .heroCard .sectionSub{ font-size:12.5px !important; line-height:1.3 !important; max-width:24ch !important; } #settingsUserBox .heroCard .planPill{ min-width:72px !important; min-height:38px !important; font-size:13px !important; font-weight:1000 !important; } /* ------------------------- Profile + Plans premium polish -------------------------- */ #settingsUserBox .profileActionRow .btn:nth-child(1){ background: linear-gradient(90deg, rgba(255,75,212,.96), rgba(52,230,255,.96)) !important; color: #07121e !important; border: 0 !important; box-shadow: 0 16px 38px rgba(0,0,0,.22) !important; } #settingsUserBox .profileActionRow .btn:nth-child(2), #settingsUserBox .profileActionRow .btn:nth-child(3){ background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important; border: 1px solid rgba(255,255,255,.16) !important; color: #f3f8ff !important; box-shadow: 0 12px 28px rgba(0,0,0,.14) !important; } #S11_PLANS .content{ gap: 18px; } #S11_PLANS .card{ border-radius: 30px !important; padding: 22px !important; border: 1px solid rgba(255,255,255,.14) !important; background: radial-gradient(120% 140% at 0% 0%, rgba(255,75,212,.18) 0%, rgba(255,75,212,0) 56%), radial-gradient(120% 140% at 100% 0%, rgba(52,230,255,.16) 0%, rgba(52,230,255,0) 56%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)) !important; box-shadow: 0 24px 64px rgba(0,0,0,.26) !important; } #S11_PLANS .sectionTitle{ font-size: 22px !important; font-weight: 1100 !important; letter-spacing: -.03em !important; line-height: 1.04 !important; } #S11_PLANS .sectionSub{ font-size: 14px !important; font-weight: 850 !important; line-height: 1.42 !important; color: rgba(241,246,255,.82) !important; } #S11_PLANS .planPill{ min-height: 42px; padding: 10px 14px; font-size: 14px; font-weight: 1100; border-radius: 999px; background: linear-gradient(90deg, rgba(255,75,212,.22), rgba(52,230,255,.18)), linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.16); color: #f8fbff; } #S11_PLANS .btn.secondary{ min-height: 54px; border-radius: 20px; font-size: 15px; font-weight: 1000; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.14); color: #f4f8ff; } /* ------------------------- Small misc bits used in HTML -------------------------- */ .charHint{ margin-top: 8px; text-align:right; color: var(--muted2); font-weight: 900; font-size: 12px; } .hintCard .hintTitle{ font-weight: 1050; font-size: 15px; letter-spacing: -.01em; } .hintCard .hintText{ color: var(--muted); font-weight: 850; margin-top: 6px; font-size: 13.5px; line-height: 1.5; } /* Make plan cards feel “premium” and consistent */ section#S11_PLANS .card[data-plan]{ position:relative; overflow:hidden; } section#S11_PLANS .card[data-plan]::after{ content:""; position:absolute; inset:-1px; border-radius: inherit; pointer-events:none; background: radial-gradient(500px 220px at 15% 0%, rgba(255,75,212,.14), transparent 55%), radial-gradient(500px 220px at 85% 10%, rgba(52,230,255,.12), transparent 55%); opacity:.9; mix-blend-mode: screen; } /* Group invite hook emphasis */ #groupInviteHook{ border-color: rgba(52,230,255,.16); } /* Near map / lists spacing niceties */ .mapCard + .card{ margin-top: 16px; } /* Ticketing layout niceties */ #evTicketBox .planPill{ white-space: nowrap; } /* Keep “hero” blocks readable on small screens */ @media (max-width: 420px){ .heroHello{ font-size: 20px; } .btn.small{ font-size: 13px; } } /* ------------------------- Accessibility focus -------------------------- */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline: none; } button:focus-visible, a:focus-visible{ box-shadow: var(--focusRing); } /* ===== Welcome screen premium polish ===== */ #S0_WELCOME .content.hero{ gap: 14px; } #S0_WELCOME .heroCard{ padding: 20px 18px; border-color: rgba(255,255,255,.10); background: radial-gradient(520px 180px at 18% 0%, rgba(255,75,212,.16) 0%, rgba(255,75,212,0) 58%), radial-gradient(520px 180px at 82% 8%, rgba(52,230,255,.14) 0%, rgba(52,230,255,0) 58%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); box-shadow: 0 18px 48px rgba(0,0,0,.22); } #S0_WELCOME .heroHeader{ margin-bottom: 14px; } #S0_WELCOME .heroHello{ font-size: 26px; line-height: 1.08; letter-spacing: -.02em; max-width: 12ch; } #S0_WELCOME .heroSub{ margin-top: 8px; font-size: 14px; line-height: 1.45; max-width: 28ch; color: rgba(233,240,255,.74); } #S0_WELCOME .segLabel{ margin-bottom: 8px; color: rgba(233,240,255,.62); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } #S0_WELCOME .seg.wide{ margin-bottom: 14px; } #S0_WELCOME .heroBadges{ gap: 10px; margin-top: 0; margin-bottom: 14px; } #S0_WELCOME .pill{ padding: 7px 10px; font-size: 11.5px; font-weight: 850; color: rgba(233,240,255,.82); background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.08); } #S0_WELCOME .row.mt12{ margin-top: 0 !important; gap: 10px; } #S0_WELCOME .row.mt12 .btn{ min-height: 48px; font-size: 14px; } #S0_WELCOME .promoLine{ margin-top: 14px !important; font-size: 12.5px; line-height: 1.45; font-weight: 800; color: rgba(233,240,255,.62); } #S0_WELCOME .card.mt16{ margin-top: 0 !important; padding: 16px 18px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)); border-color: rgba(255,255,255,.08); } #S0_WELCOME .card.mt16 .sectionTitle{ font-size: 16px; margin-bottom: 4px; } #S0_WELCOME .card.mt16 .sectionSub{ margin-bottom: 12px; color: rgba(233,240,255,.66); } @media (max-width: 420px){ #S0_WELCOME .heroHello{ font-size: 23px; max-width: 13ch; } #S0_WELCOME .heroSub{ font-size: 13px; max-width: none; } } /* ===== Welcome header polish ===== */ #S0_WELCOME .topbar{ justify-content: center; padding-top: 10px; padding-bottom: 6px; } #S0_WELCOME .brandCenter{ padding: 0; } #S0_WELCOME .brandRow{ gap: 0; width: 100%; justify-content: center; } #S0_WELCOME .brandLogo{ width: 84px; height: 84px; border-radius: 24px; box-shadow: 0 12px 28px rgba(0,0,0,.28); } #S0_WELCOME .brandText{ display: none; } /* ===== Better vertical balance for welcome logo ===== */ #S0_WELCOME .topbar{ padding-top: 28px; padding-bottom: 18px; } #S0_WELCOME .brandLogo{ margin-top: 6px; } #S0_WELCOME .content.hero{ margin-top: 4px; } /* ===== Welcome layout refinement ===== */ #S0_WELCOME .topbar{ padding-top: 26px; padding-bottom: 0; } #S0_WELCOME .brandLogo{ width: 90px; height: 90px; margin-bottom: -10px; z-index: 5; position: relative; box-shadow: 0 18px 40px rgba(0,0,0,.30), 0 0 36px rgba(255,75,212,.20), 0 0 42px rgba(52,230,255,.18); filter: saturate(1.08) brightness(1.06); } #S0_WELCOME .heroCard{ margin-top: 10px; padding-top: 56px; } /* ===== Welcome hero final polish ===== */ #S0_WELCOME .content.hero{ display: flex; flex-direction: column; gap: 16px; } #S0_WELCOME .heroCard{ margin-top: 10px; padding: 62px 22px 22px; text-align: center; align-items: center; } #S0_WELCOME .heroHeader{ margin-bottom: 18px; text-align: center; } #S0_WELCOME .heroHello{ max-width: 11ch; margin: 0 auto; font-size: 32px; line-height: 0.96; letter-spacing: -0.035em; text-wrap: balance; } #S0_WELCOME .heroSub{ margin: 12px auto 0; max-width: 28ch; font-size: 14px; line-height: 1.5; text-align: center; color: rgba(233,240,255,.78); text-wrap: balance; } #S0_WELCOME .segLabel{ text-align: center; } #S0_WELCOME .seg.wide{ max-width: 340px; margin: 0 auto 18px; } #S0_WELCOME .heroBadges{ display: none !important; } #S0_WELCOME .row.mt12{ margin-top: 0 !important; display: flex; gap: 10px; justify-content: center; align-items: stretch; } #S0_WELCOME .row.mt12 .btn{ flex: 1 1 0; min-height: 50px; max-width: 220px; font-size: 14px; } #S0_WELCOME .promoLine{ margin-top: 16px !important; max-width: 26ch; margin-left: auto; margin-right: auto; text-align: center; font-size: 12.5px; line-height: 1.45; color: rgba(233,240,255,.66); } #S0_WELCOME .card.mt16{ text-align: center; } #S0_WELCOME .card.mt16 .sectionSub{ max-width: 28ch; margin: 6px auto 12px; text-align: center; } #S0_WELCOME .card.mt16 .btn{ min-width: 180px; } @media (max-width: 420px){ #S0_WELCOME .heroCard{ padding: 58px 18px 20px; } #S0_WELCOME .heroHello{ font-size: 28px; max-width: 12ch; } #S0_WELCOME .heroSub{ font-size: 13px; max-width: 30ch; } #S0_WELCOME .row.mt12{ flex-direction: column; } #S0_WELCOME .row.mt12 .btn{ max-width: none; width: 100%; } } section#S11_PLANS .card{ border-radius: 24px !important; padding: 18px !important; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 18px 42px rgba(0,0,0,.18) !important; } section#S11_PLANS .card .sectionTitle{ font-size: 18px !important; font-weight: 1100 !important; line-height: 1.08 !important; letter-spacing: -.02em !important; } section#S11_PLANS .card .sectionSub{ font-size: 13px !important; line-height: 1.38 !important; font-weight: 850 !important; } section#S11_PLANS .planPill{ min-height: 38px !important; padding: 8px 12px !important; font-size: 13px !important; font-weight: 1000 !important; } section#S11_PLANS .btn.secondary{ min-height: 48px !important; border-radius: 16px !important; font-size: 14px !important; font-weight: 1000 !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #f4f8ff !important; } /* ===== Profile hub: stronger entry cards for Friends + Invites ===== */ #settingsUserBox .friendsCard, #settingsUserBox .invitesCard{ position: relative; overflow: hidden; min-height: 104px; padding: 18px !important; border-radius: 28px !important; border: 1px solid rgba(255,255,255,.14) !important; background: radial-gradient(120% 140% at 18% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 54%), radial-gradient(120% 140% at 100% 0%, rgba(52,230,255,.10) 0%, rgba(52,230,255,0) 58%), linear-gradient(180deg, rgba(20,28,43,.92), rgba(14,21,34,.88)) !important; box-shadow: 0 18px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06) !important; backdrop-filter: blur(14px); } #settingsUserBox .friendsCard::before, #settingsUserBox .invitesCard::before{ content: none; } #settingsUserBox .friendsCard .sectionTitle, #settingsUserBox .invitesCard .sectionTitle{ font-size: 18px !important; font-weight: 1100 !important; line-height: 1.02 !important; margin-bottom: 8px !important; color: #ffffff !important; } #settingsUserBox .friendsCard .sectionSub, #settingsUserBox .invitesCard .sectionSub{ font-size: 13px !important; line-height: 1.45 !important; font-weight: 820 !important; color: rgba(238,244,255,.80) !important; max-width: 26ch; } #settingsUserBox .friendsCard .pill, #settingsUserBox .invitesCard .pill{ min-width: 88px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,75,212,.88), rgba(52,230,255,.88)) !important; color: #07121e !important; border: 0 !important; font-size: 14px !important; font-weight: 1100 !important; box-shadow: 0 14px 30px rgba(0,0,0,.20) !important; } /* ===== Plans: cleaner hierarchy, stronger readability ===== */ section#S11_PLANS .card[data-plan]{ border-radius: 28px !important; padding: 24px 22px !important; border: 1px solid rgba(255,255,255,.12) !important; background: linear-gradient(180deg, rgba(17,23,34,.88), rgba(12,18,28,.78)) !important; box-shadow: 0 18px 42px rgba(0,0,0,.18) !important; } section#S11_PLANS .card[data-plan].is-current{ border-color: rgba(255,255,255,.24) !important; box-shadow: 0 22px 52px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; } section#S11_PLANS .card[data-plan] .row{ align-items: center !important; gap: 12px !important; margin-bottom: 18px !important; } section#S11_PLANS .card[data-plan] .sectionTitle{ font-size: 24px !important; font-weight: 1100 !important; letter-spacing: -.03em !important; line-height: 1 !important; color: #ffffff !important; margin: 0 !important; } section#S11_PLANS .card[data-plan] .planPill{ min-height: 40px !important; padding: 8px 14px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 1000 !important; color: rgba(248,251,255,.96) !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: none !important; } section#S11_PLANS .card[data-plan] p{ margin: 0 0 12px 0 !important; font-size: 15px !important; line-height: 1.5 !important; font-weight: 760 !important; color: rgba(232,239,248,.82) !important; } section#S11_PLANS .card[data-plan] p.mt12{ margin-top: 0 !important; margin-bottom: 16px !important; font-size: 18px !important; line-height: 1.35 !important; font-weight: 980 !important; color: #ffffff !important; max-width: 24ch; } section#S11_PLANS .card[data-plan] .btn{ margin-top: 14px !important; min-height: 52px !important; border-radius: 18px !important; font-size: 15px !important; font-weight: 1000 !important; } section#S11_PLANS .card[data-plan].is-current .btn{ background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.16) !important; color: rgba(248,251,255,.94) !important; box-shadow: none !important; } section#S11_PLANS .card[data-plan]:not(.is-current) .btn{ background: linear-gradient(90deg, rgba(255,75,212,.96), rgba(52,230,255,.96)) !important; border: 0 !important; color: #08121d !important; box-shadow: 0 12px 26px rgba(0,0,0,.18) !important; } /* ===== Plans: premium list layout for user cards ===== */ section#S11_PLANS .card[data-plan] .planList{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } section#S11_PLANS .card[data-plan] .planList li{ position: relative; padding-left: 18px; font-size: 14px; line-height: 1.48; font-weight: 760; color: rgba(232,239,248,.84); } section#S11_PLANS .card[data-plan] .planList li::before{ content: ""; position: absolute; left: 0; top: .58em; width: 8px; height: 8px; border-radius: 999px; background: linear-gradient(180deg, rgba(255,75,212,.95), rgba(52,230,255,.95)); box-shadow: 0 0 12px rgba(52,230,255,.18); } section#S11_PLANS .card[data-plan] p.mt12{ margin-bottom: 18px !important; max-width: 23ch; } section#S11_PLANS .card[data-plan].is-current{ border-color: rgba(255,255,255,.24) !important; box-shadow: 0 22px 52px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; } section#S11_PLANS .card[data-plan].is-current .planPill{ background: linear-gradient(90deg, rgba(255,75,212,.18), rgba(52,230,255,.16)) !important; border-color: rgba(255,255,255,.20) !important; color: #ffffff !important; } section#S11_PLANS .card[data-plan].is-current .btn{ background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.16) !important; color: rgba(248,251,255,.94) !important; box-shadow: none !important; } /* ===== Organizer profile: premium settings hub ===== */ #settingsPartnerBox{ border-radius: 32px !important; padding: 22px !important; border: 1px solid rgba(255,255,255,.14) !important; background: radial-gradient(120% 140% at 0% 0%, rgba(255,75,212,.14) 0%, rgba(255,75,212,0) 52%), radial-gradient(120% 140% at 100% 0%, rgba(52,230,255,.12) 0%, rgba(52,230,255,0) 52%), linear-gradient(180deg, rgba(18,24,36,.92), rgba(14,20,30,.84)) !important; box-shadow: 0 24px 58px rgba(0,0,0,.24) !important; } #settingsPartnerBox > .sectionTitle{ font-size: 24px !important; font-weight: 1100 !important; letter-spacing: -.03em !important; line-height: 1.02 !important; } #settingsPartnerBox > .sectionSub{ font-size: 14px !important; line-height: 1.45 !important; font-weight: 850 !important; color: rgba(235,241,250,.80) !important; max-width: 34ch; } #settingsPartnerBox label{ font-size: 13px; font-weight: 950; color: rgba(241,246,255,.86); } #settingsPartnerBox input, #settingsPartnerBox select, #settingsPartnerBox textarea{ border-radius: 18px; min-height: 52px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); } #settingsPartnerBox textarea{ min-height: 132px; } #settingsPartnerBox .hintCard{ border-radius: 24px !important; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: none !important; } #settingsPartnerBox .hintCard .hintTitle, #settingsPartnerBox .sectionTitle.mt16{ font-size: 18px !important; font-weight: 1100 !important; letter-spacing: -.02em !important; color: #ffffff !important; } #settingsPartnerBox .hintCard .hintText, #settingsPartnerBox .sectionTitle.mt16 + .sectionSub{ font-size: 13px !important; line-height: 1.42 !important; font-weight: 820 !important; color: rgba(235,241,250,.78) !important; } #settingsPartnerPlanBox{ margin-top: 14px; padding: 16px; border-radius: 24px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); } #settingsPartnerBox .segBtn{ min-height: 52px !important; border-radius: 18px !important; font-size: 14px !important; font-weight: 1000 !important; } #settingsPartnerBox .segBtn.on, #settingsPartnerBox .segBtn.active{ background: linear-gradient(90deg, rgba(255,75,212,.96), rgba(52,230,255,.96)) !important; color: #07121e !important; border: 0 !important; box-shadow: 0 14px 30px rgba(0,0,0,.18) !important; } #settingsPartnerBox > .btn{ min-height: 52px !important; border-radius: 18px !important; font-size: 15px !important; font-weight: 1000 !important; } #settingsPartnerBox > .btn.secondary{ background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #f3f8ff !important; } #settingsPartnerBox > .btn.mt16 + .btn.mt12{ margin-top: 10px !important; } /* ===== Organizer profile: sectional product layout ===== */ #settingsPartnerBox{ padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #settingsPartnerBox > .heroCard{ padding: 22px !important; border-radius: 30px !important; border: 1px solid rgba(255,255,255,.14) !important; background: radial-gradient(120% 140% at 0% 0%, rgba(255,75,212,.16) 0%, rgba(255,75,212,0) 54%), radial-gradient(120% 140% at 100% 0%, rgba(52,230,255,.12) 0%, rgba(52,230,255,0) 54%), linear-gradient(180deg, rgba(18,24,36,.94), rgba(14,20,30,.88)) !important; box-shadow: 0 24px 56px rgba(0,0,0,.24) !important; } #settingsPartnerBox > .heroCard .sectionTitle{ font-size: 24px !important; font-weight: 1100 !important; letter-spacing: -.03em !important; line-height: 1.02 !important; color: #fff !important; } #settingsPartnerBox > .heroCard .sectionSub{ margin-top: 6px !important; font-size: 14px !important; line-height: 1.45 !important; font-weight: 850 !important; color: rgba(235,241,250,.80) !important; max-width: 32ch !important; } #settingsPartnerBox > .heroCard .planPill{ min-width: 76px !important; min-height: 40px !important; font-size: 13px !important; font-weight: 1100 !important; } #settingsPartnerBox > .card, #settingsPartnerBox > .hintCard{ margin-top: 16px !important; padding: 20px !important; border-radius: 28px !important; border: 1px solid rgba(255,255,255,.12) !important; background: linear-gradient(180deg, rgba(18,24,36,.82), rgba(13,19,29,.74)) !important; box-shadow: 0 18px 42px rgba(0,0,0,.18) !important; } #settingsPartnerBox > .card .sectionTitle, #settingsPartnerBox > .hintCard .hintTitle{ font-size: 19px !important; font-weight: 1100 !important; letter-spacing: -.02em !important; line-height: 1.08 !important; color: #fff !important; } #settingsPartnerBox > .card .sectionSub, #settingsPartnerBox > .hintCard .hintText{ margin-top: 6px !important; font-size: 13px !important; line-height: 1.42 !important; font-weight: 820 !important; color: rgba(235,241,250,.78) !important; } #settingsPartnerBox #settingsPartnerPlanBox{ margin-top: 16px !important; padding: 16px !important; border-radius: 22px !important; background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.10) !important; } #settingsPartnerBox .segBtn{ min-height: 52px !important; border-radius: 18px !important; font-size: 14px !important; font-weight: 1000 !important; } #settingsPartnerBox .segBtn.on, #settingsPartnerBox .segBtn.active{ background: linear-gradient(90deg, rgba(255,75,212,.96), rgba(52,230,255,.96)) !important; color: #07121e !important; border: 0 !important; box-shadow: 0 14px 28px rgba(0,0,0,.18) !important; } #settingsPartnerBox > .card .btn, #settingsPartnerBox > .hintCard .btn{ min-height: 52px !important; border-radius: 18px !important; font-size: 15px !important; font-weight: 1000 !important; } /* ===== Partner profile hub (S9_PARTNER) ===== */ #S9_PARTNER .content{ gap: 16px; } #S9_PARTNER .partnerHubHero{ padding: 22px !important; border-radius: 32px !important; border: 1px solid rgba(255,255,255,.14) !important; background: radial-gradient(120% 140% at 0% 0%, rgba(255,75,212,.16) 0%, rgba(255,75,212,0) 54%), radial-gradient(120% 140% at 100% 0%, rgba(52,230,255,.14) 0%, rgba(52,230,255,0) 54%), linear-gradient(180deg, rgba(18,24,36,.94), rgba(14,20,30,.88)) !important; box-shadow: 0 24px 56px rgba(0,0,0,.24) !important; } #S9_PARTNER .partnerHubHero > .row .sectionTitle{ font-size: 25px !important; font-weight: 1100 !important; line-height: 1.02 !important; letter-spacing: -.03em !important; color: #fff !important; } #S9_PARTNER .partnerHubHero > .row .sectionSub{ margin-top: 6px !important; max-width: 32ch !important; font-size: 14px !important; line-height: 1.46 !important; font-weight: 850 !important; color: rgba(235,241,250,.80) !important; } #S9_PARTNER .partnerHubHero .planPill{ min-width: 78px !important; min-height: 40px !important; font-size: 13px !important; font-weight: 1100 !important; } #S9_PARTNER .partnerHubHero > .card{ margin-top: 16px !important; padding: 18px !important; border-radius: 24px !important; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: none !important; } #S9_PARTNER .partnerHubHero > .card .sectionTitle{ font-size: 18px !important; font-weight: 1100 !important; color: #fff !important; } #S9_PARTNER .partnerHubHero > .card .sectionSub{ font-size: 13px !important; line-height: 1.42 !important; font-weight: 820 !important; color: rgba(235,241,250,.78) !important; } #S9_PARTNER > .content > .card{ border-radius: 28px !important; padding: 20px !important; border: 1px solid rgba(255,255,255,.12) !important; background: linear-gradient(180deg, rgba(18,24,36,.82), rgba(13,19,29,.74)) !important; box-shadow: 0 18px 42px rgba(0,0,0,.18) !important; } #S9_PARTNER .analyticsGrid{ gap: 12px !important; } #S9_PARTNER .metricCard{ min-height: 132px; border-radius: 24px !important; border: 1px solid rgba(255,255,255,.12) !important; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important; box-shadow: none !important; } #S9_PARTNER .metricLabel{ font-size: 12px !important; font-weight: 950 !important; letter-spacing: .02em; } #S9_PARTNER .metricVal{ font-size: 28px !important; font-weight: 1100 !important; line-height: 1 !important; } #S9_PARTNER .metricSub{ font-size: 12px !important; font-weight: 850 !important; color: rgba(235,241,250,.72) !important; } #S9_PARTNER .row.mt16, #S9_PARTNER .row.mt12{ gap: 10px; } #S9_PARTNER .row.mt16 .btn, #S9_PARTNER .row.mt12 .btn{ flex: 1 1 0; min-height: 52px !important; border-radius: 18px !important; font-size: 14px !important; font-weight: 1000 !important; } /* ===== USLY: organizer settings cleanup (tester-ready) ===== */ #settingsPartnerBox > .heroCard{ padding: 18px !important; border-radius: 24px !important; background: linear-gradient(180deg, rgba(18,24,36,.88), rgba(14,20,30,.82)) !important; box-shadow: none !important; } #settingsPartnerBox > .heroCard .sectionTitle{ font-size: 22px !important; } #settingsPartnerBox > .heroCard .sectionSub{ max-width: none !important; color: rgba(235,241,250,.76) !important; } #settingsPartnerBox > .hintCard{ padding: 20px !important; border-radius: 28px !important; border: 1px solid rgba(255,255,255,.12) !important; background: linear-gradient(180deg, rgba(18,24,36,.82), rgba(13,19,29,.74)) !important; box-shadow: 0 18px 42px rgba(0,0,0,.18) !important; } #settingsPartnerBox > .hintCard .hintTitle{ font-size: 19px !important; font-weight: 1100 !important; letter-spacing: -.02em !important; line-height: 1.08 !important; color: #fff !important; } #settingsPartnerBox > .hintCard .hintText{ margin-top: 6px !important; font-size: 13px !important; line-height: 1.42 !important; font-weight: 820 !important; color: rgba(235,241,250,.78) !important; } /* ===== Person profile: bigger mobile-first hero ===== */ #S5_PERSON_PROFILE .content{ padding-top: 4px; } #S5_PERSON_PROFILE .heroCard.profileSummaryCard.personHeroCard{ padding: 18px 18px 20px !important; border-radius: 34px !important; min-height: 0 !important; background: radial-gradient(560px 220px at 0% 0%, rgba(255,75,212,.32) 0%, rgba(255,75,212,0) 58%), radial-gradient(620px 260px at 100% 6%, rgba(52,230,255,.28) 0%, rgba(52,230,255,0) 60%), linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)) !important; box-shadow: 0 28px 72px rgba(0,0,0,.34) !important; overflow: hidden; } #S5_PERSON_PROFILE .personHeroCard > .row:first-child{ margin-bottom: 2px; } #S5_PERSON_PROFILE .personHeroCard > .row:first-child .btn{ min-width: 56px; min-height: 56px; border-radius: 18px; padding: 0; font-size: 22px; background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 18px 42px rgba(0,0,0,.18); } #S5_PERSON_PROFILE #personAvatar.avatar.big{ width: 132px !important; height: 132px !important; border-radius: 34px !important; font-size: 52px !important; background: radial-gradient(120% 120% at 22% 14%, rgba(255,75,212,.32) 0%, rgba(255,75,212,0) 56%), radial-gradient(120% 120% at 78% 24%, rgba(52,230,255,.26) 0%, rgba(52,230,255,0) 58%), rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.20) !important; box-shadow: 0 26px 60px rgba(0,0,0,.30); } #S5_PERSON_PROFILE #personNick{ font-size: 34px !important; line-height: .96 !important; margin-bottom: 10px !important; letter-spacing: -.04em !important; color: #f8fbff !important; text-shadow: 0 12px 28px rgba(0,0,0,.18); } #S5_PERSON_PROFILE #personMeta{ font-size: 16px !important; line-height: 1.42 !important; font-weight: 950 !important; color: rgba(241,246,255,.88) !important; } #S5_PERSON_PROFILE #personInterests{ gap: 12px !important; margin-top: 2px; } #S5_PERSON_PROFILE #personInterests .chip{ min-height: 42px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 1000; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 30px rgba(0,0,0,.16); } #S5_PERSON_PROFILE .personHeroCard .sectionTitle:not(#personNick){ font-size: 20px !important; margin-bottom: 8px !important; color: #f7fbff !important; } #S5_PERSON_PROFILE #personBio{ display: block; font-size: 16px !important; line-height: 1.62 !important; font-weight: 850 !important; color: rgba(241,246,255,.94) !important; max-width: 30ch; } #S5_PERSON_PROFILE .personHeroCard > div[style*="width:100%;"]{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.10); border-radius: 24px; padding: 16px 16px 14px; } #S5_PERSON_PROFILE .personHeroCard > div[style*="width:100%;"]:first-of-type{ background: transparent; border: 0; border-radius: 0; padding: 0; } #S5_PERSON_PROFILE .row.mt16{ gap: 12px; align-items: stretch; margin-top: 18px !important; } #S5_PERSON_PROFILE .row.mt16 .btn{ min-height: 56px; border-radius: 20px; font-size: 16px; font-weight: 1000; box-shadow: 0 18px 36px rgba(0,0,0,.18); } /* ===== PERSON PROFILE FINAL POLISH ===== */ #S5_PERSON_PROFILE #personTitle{ font-size: 18px !important; font-weight: 1000 !important; letter-spacing: -.02em; } #S5_PERSON_PROFILE #personInterests{ gap: 12px !important; justify-content: center !important; margin-top: 6px; } /* sekcja zainteresowań label */ #S5_PERSON_PROFILE #personInterests::before{ content: attr(data-label); width: 100%; text-align: center; font-size: 13px; font-weight: 900; color: rgba(241,246,255,.6); margin-bottom: 6px; letter-spacing: .02em; } #S5_PERSON_PROFILE .personMatchScore{ display: inline-flex; align-items: center; justify-content: center; align-self: center; margin: 14px auto 4px; padding: 10px 18px; min-height: 42px; border-radius: 999px; font-size: 14px; font-weight: 1000; letter-spacing: .01em; color: #ffffff; background: linear-gradient(180deg, rgba(156,116,255,.46), rgba(103,70,232,.34)), linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(190,170,255,.58); box-shadow: 0 14px 34px rgba(89,58,224,.34), inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 14px rgba(206,190,255,.18); position: relative; overflow: hidden; } #S5_PERSON_PROFILE .personMatchScore::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 28%, rgba(255,255,255,.30) 50%, transparent 72%); opacity: .7; animation: shimmer 2.8s infinite linear; } /* lepsze osadzenie chipsów */ #S5_PERSON_PROFILE #personInterests .chip{ display: inline-flex; align-items: center; justify-content: center; } #S5_PERSON_PROFILE #personInterests .chip.isShared{ background: linear-gradient(180deg, rgba(156,116,255,.46), rgba(103,70,232,.34)), linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(190,170,255,.58); color: #ffffff; box-shadow: 0 14px 34px rgba(89,58,224,.34), inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 14px rgba(206,190,255,.18); position: relative; overflow: hidden; } #S5_PERSON_PROFILE #personInterests .chip.isShared::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 28%, rgba(255,255,255,.30) 50%, transparent 72%); opacity: .7; animation: shimmer 2.8s infinite linear; } @keyframes shimmer{ 0%{ transform: translateX(-100%); } 100%{ transform: translateX(100%); } } /* ===== PERSON PROFILE STEP 2: floating avatar ===== */ #S5_PERSON_PROFILE .personHeroCard{ padding-top: 86px !important; } #S5_PERSON_PROFILE #personAvatar.avatar.big{ margin-top: -8px !important; margin-bottom: 6px !important; position: relative; z-index: 2; overflow: hidden !important; box-shadow: 0 30px 70px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.18), 0 0 0 10px rgba(255,255,255,.03) !important; } /* === EVENT STATUS CHIP (Biorę udział / Obserwowane) === */ .listBody .chips{ position: static; display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; justify-content:center; } .eventStatusBadge{ display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:900; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); margin-right:8px; } .sectionTitle{ font-weight: 700; letter-spacing: -0.2px; } .listTitle{ font-weight: 600; } .sectionSub{ font-weight: 400; opacity: 0.75; } .logoutBtn{ width: auto !important; min-width: 180px; max-width: 240px; margin: 20px auto calc(var(--tabH) + 18px) auto !important; display: flex; justify-content: center; } /* ===== Cleaner topbar on main app screens: logo only ===== */ #S4_NEARBY .brandTagline, #S6_CHATS_LIST .brandTagline, #S7_EVENTS .brandTagline, #S8_GROUPS .brandTagline, #S9_PARTNER .brandTagline, #S9_PARTNER_CREATE .brandTagline, #S9_PARTNER_EVENTS .brandTagline, #S9_PARTNER_MESSAGES .brandTagline, #S10_SETTINGS .brandTagline, #S11_PLANS .brandTagline, #S12_NOTIFICATIONS .brandTagline{ display:none; } #S4_NEARBY .brandLogo.sm, #S6_CHATS_LIST .brandLogo.sm, #S7_EVENTS .brandLogo.sm, #S8_GROUPS .brandLogo.sm, #S9_PARTNER .brandLogo.sm, #S9_PARTNER_CREATE .brandLogo.sm, #S9_PARTNER_EVENTS .brandLogo.sm, #S9_PARTNER_MESSAGES .brandLogo.sm, #S10_SETTINGS .brandLogo.sm, #S11_PLANS .brandLogo.sm, #S12_NOTIFICATIONS .brandLogo.sm{ width: 42px; height: 42px; border-radius: 14px; } #S4_NEARBY .brandRow, #S6_CHATS_LIST .brandRow, #S7_EVENTS .brandRow, #S8_GROUPS .brandRow, #S9_PARTNER .brandRow, #S9_PARTNER_CREATE .brandRow, #S9_PARTNER_EVENTS .brandRow, #S9_PARTNER_MESSAGES .brandRow, #S10_SETTINGS .brandRow, #S11_PLANS .brandRow, #S12_NOTIFICATIONS .brandRow{ gap: 0; } /* No topbar divider on auth / entry screens */ #S0_WELCOME .topbar, #S1_LOGIN .topbar, #S2_REGISTER .topbar, #S3_PROFILE_SETUP .topbar, #S3B_PARTNER_SETUP .topbar{ border-bottom: none !important; } /* ===== Topbar icons: cleaner app-like SVG look ===== */ .backBtn{ color: transparent !important; font-size: 0 !important; line-height: 0 !important; position: relative; box-shadow: 0 12px 28px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 12px rgba(255,75,212,.16), 0 0 18px rgba(52,230,255,.12) !important; } .backBtn::before{ content:""; width: 18px; height: 18px; display:block; background: #f4f8ff; transform: translateX(-2px); filter: drop-shadow(0 0 4px rgba(255,75,212,.45)) drop-shadow(0 0 6px rgba(52,230,255,.35)); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .topIconBtn[aria-label="Menu"]::before{ content:"" !important; width: 18px !important; height: 18px !important; display:block !important; background: #f4f8ff !important; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; border-radius:0 !important; box-shadow:none !important; transform:none !important; } button[id^="notifBtn"]::before{ content:"" !important; width: 18px !important; height: 18px !important; display:block !important; background: #f4f8ff !important; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; border-radius:0 !important; box-shadow:none !important; transform:none !important; } /* Slightly cleaner control shell */ .backBtn, .ghostBtn, .topIconBtn{ border-radius: 16px !important; border: 1px solid rgba(255,255,255,.13) !important; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045)) !important; box-shadow: 0 12px 28px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.03) inset !important; } /* ===== Visible brand glow for back + notifications (STRONGER) ===== */ .backBtn, button[id^="notifBtn"]{ box-shadow: 0 14px 32px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 18px rgba(255,75,212,.32), 0 0 28px rgba(52,230,255,.24), 0 0 42px rgba(255,75,212,.18) !important; } /* ===== PREMIUM INTERACTION: back + notifications ===== */ .backBtn, button[id^="notifBtn"]{ transition: transform .12s ease, box-shadow .18s ease, filter .18s ease; } /* hover (desktop feel, też działa na mobile tap preview) */ .backBtn:hover, button[id^="notifBtn"]:hover{ transform: translateY(-1px) scale(1.04); box-shadow: 0 18px 40px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.05) inset, 0 0 22px rgba(255,75,212,.38), 0 0 34px rgba(52,230,255,.28); } /* active (tap feel) */ .backBtn:active, button[id^="notifBtn"]:active{ transform: translateY(1px) scale(.96); box-shadow: 0 10px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 12px rgba(255,75,212,.22), 0 0 18px rgba(52,230,255,.18); } /* subtle premium ring */ .backBtn::after{ content:""; position:absolute; inset:-2px; border-radius:16px; background: linear-gradient(120deg, rgba(255,75,212,.25), rgba(52,230,255,.25)); opacity:0; transition: opacity .2s ease; z-index:-1; pointer-events:none; } .backBtn:hover::after{ opacity:.6; } /* ===== Auth topbar: role as premium mode chip, not screen title ===== */ #S1_LOGIN .brandRow, #S2_REGISTER .brandRow{ gap: 12px; } #S1_LOGIN .brandText, #S2_REGISTER .brandText{ transform: none; display: flex; align-items: center; } #S1_LOGIN .brandName, #S2_REGISTER .brandName{ display: none !important; } /* ===== Auth role chip: DARK PREMIUM VERSION ===== */ #S1_LOGIN .brandTagline, #S2_REGISTER .brandTagline{ display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 14px; border-radius: 999px; font-size: 12.5px !important; font-weight: 1100; letter-spacing: .04em; color: #f4f8ff; background: linear-gradient(180deg, rgba(18,22,36,.88), rgba(10,14,26,.82)); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 12px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04), 0 0 12px rgba(255,75,212,.12), 0 0 16px rgba(52,230,255,.10); backdrop-filter: blur(10px); white-space: nowrap; } /* subtle hover lift (premium feel) */ #S1_LOGIN .brandTagline:hover, #S2_REGISTER .brandTagline:hover{ transform: translateY(-1px); box-shadow: 0 16px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05), 0 0 18px rgba(255,75,212,.18), 0 0 24px rgba(52,230,255,.14); } /* AgeAny checkbox – user settings + setup */ #S10B_PROFILE_EDIT .partnerCapacityToggleRow input, #S3_PROFILE_SETUP .partnerCapacityToggleRow input { width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; } .listItem.notifNew{ border-color: rgba(52,230,255,.45); box-shadow: 0 0 0 1px rgba(52,230,255,.18) inset, 0 10px 24px rgba(52,230,255,.10); background: linear-gradient(180deg, rgba(52,230,255,.10), rgba(255,255,255,.03)); } .listItem.notifNew .listTitle{ font-weight: 900; } /* --- Group invite modal only --- */ .groupInviteModal .listItem{ padding: 12px; } .groupInviteModal .groupInviteCardTop{ display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; column-gap: 12px; } .groupInviteModal .groupInviteCardText{ min-width: 0; } .groupInviteModal .listAvatar{ width: 48px; height: 48px; border-radius: 16px; flex: none; } .groupInviteModal .listTitle{ display: block; font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .groupInviteModal .listMeta{ display: block; margin-top: 3px; font-size: 12px; line-height: 1.3; color: var(--muted); overflow: hidden; text-overflow: ellipsis; } .groupInviteModal .groupInviteCardAction{ margin-top: 10px; display: flex; justify-content: center; } .groupInviteModal .groupInviteCardAction .btn{ width: auto; min-width: 0; padding: 10px 14px; white-space: nowrap; justify-content: center; } .groupInviteModal .btn.secondary[disabled]{ opacity: .72; cursor: default; } /* --- Group people modal: container + tabs only --- */ #modalBox:has(.groupInviteModal){ max-width: 440px; } #modalBox:has(.groupInviteModal) .modalScroll{ max-height: 72vh; padding: 14px 16px 16px; } .groupInviteModal .segmented{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; padding: 6px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); } .groupInviteModal .segBtn{ min-height: 44px; border-radius: 14px; font-size: 13px; line-height: 1.15; text-align: center; display: flex; align-items: center; justify-content: center; } .groupInviteModal .segBtn:not(.on):not(.active){ background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); } /* --- Group people full-screen list --- */ #groupPeopleScreen .groupPeopleRow{ padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } #groupPeopleScreen .groupPeopleMain{ display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; } #groupPeopleScreen .groupPeopleText{ min-width: 0; flex: 1 1 auto; } #groupPeopleScreen .groupPeopleRow .listAvatar{ width: 44px; height: 44px; border-radius: 14px; flex: 0 0 auto; } #groupPeopleScreen .groupPeopleRow .listTitle{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #groupPeopleScreen .groupPeopleRow .listMeta{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #groupPeopleScreen .groupPeopleAction{ flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; } #groupPeopleScreen .groupPeopleAction .btn{ width: auto; min-width: 0; padding: 10px 14px; white-space: nowrap; } #groupPeopleScreen .groupPeopleAction .btn.secondary[disabled]{ opacity: .72; cursor: default; } /* ===== Friends / Invites cards — interactive feel ===== */ #settingsUserBox .friendsCard, #settingsUserBox .invitesCard{ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; cursor: pointer; } #settingsUserBox .friendsCard:hover, #settingsUserBox .invitesCard:hover{ transform: translateY(-2px) scale(1.01); box-shadow: 0 24px 52px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); } #settingsUserBox .friendsCard:active, #settingsUserBox .invitesCard:active{ transform: translateY(0) scale(.99); box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06); } #S5_PERSON_PROFILE #personDistanceMeta{ display: inline-flex; align-items: center; justify-content: center; align-self: center; margin: 8px auto 2px; padding: 8px 14px; border-radius: 999px; font-size: 13px !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .01em; color: rgba(248,251,255,.96) !important; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045)); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 12px 28px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.16); } #S5_PERSON_PROFILE #personDistanceMeta:empty{ display: none; } /* ===== Store-ready lightweight registration ===== */ #S2_REGISTER .content{ padding-top: 8px; } #S2_REGISTER .heroCard.profileSummaryCard{ padding: 16px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035)); box-shadow: 0 18px 48px rgba(0,0,0,.26); } #S2_REGISTER .heroCard.profileSummaryCard > .sectionTitle{ font-size: 22px; line-height: 1.05; margin-bottom: 6px; } #S2_REGISTER .heroCard.profileSummaryCard > .sectionSub{ font-size: 13px; line-height: 1.45; margin-bottom: 14px; } #S2_REGISTER .card{ padding: 13px; border-radius: 20px; background: rgba(255,255,255,.055); box-shadow: 0 12px 32px rgba(0,0,0,.20); } #S2_REGISTER .card .sectionTitle{ font-size: 15px; margin-bottom: 3px; } #S2_REGISTER .card .sectionSub, #S2_REGISTER .tMuted{ font-size: 12.5px; line-height: 1.4; } #S2_REGISTER label{ font-size: 12px; margin-bottom: 6px; } #S2_REGISTER input, #S2_REGISTER select, #S2_REGISTER textarea{ min-height: 46px; font-size: 14px; } #S2_REGISTER .seg.wide{ gap: 8px; } #S2_REGISTER .segBtn{ min-height: 42px; padding: 9px 10px; font-size: 12.5px; } #S2_REGISTER .legalBox{ padding: 12px; border-radius: 18px; } #S2_REGISTER .checkRow{ align-items: flex-start; font-size: 12.5px; line-height: 1.35; } #S2_REGISTER .btn{ min-height: 48px; } /* ===== Store-ready setup screens: user + organizer ===== */ #S3_PROFILE_SETUP .content, #S3B_PARTNER_SETUP .content{ padding-top: 8px; } #S3_PROFILE_SETUP .heroCard, #S3B_PARTNER_SETUP .heroCard{ padding: 16px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035)); box-shadow: 0 18px 48px rgba(0,0,0,.26); } #S3_PROFILE_SETUP .card, #S3_PROFILE_SETUP .hintCard, #S3B_PARTNER_SETUP .card{ padding: 14px; border-radius: 20px; background: rgba(255,255,255,.055); box-shadow: 0 12px 32px rgba(0,0,0,.20); } #S3_PROFILE_SETUP .sectionTitle, #S3B_PARTNER_SETUP .sectionTitle{ font-size: 20px; line-height: 1.08; margin-bottom: 5px; } #S3_PROFILE_SETUP .hintCard .hintTitle, #S3B_PARTNER_SETUP .card .sectionTitle{ font-size: 15px; } #S3_PROFILE_SETUP .sectionSub, #S3_PROFILE_SETUP .hintText, #S3_PROFILE_SETUP .tMuted, #S3B_PARTNER_SETUP .sectionSub, #S3B_PARTNER_SETUP .tMuted{ font-size: 12.5px; line-height: 1.45; } #S3_PROFILE_SETUP label, #S3B_PARTNER_SETUP label{ font-size: 12px; margin-bottom: 6px; } #S3_PROFILE_SETUP input, #S3_PROFILE_SETUP select, #S3_PROFILE_SETUP textarea, #S3B_PARTNER_SETUP input, #S3B_PARTNER_SETUP select, #S3B_PARTNER_SETUP textarea{ min-height: 46px; font-size: 14px; } #S3_PROFILE_SETUP textarea, #S3B_PARTNER_SETUP textarea{ min-height: 104px; } #S3_PROFILE_SETUP .btn, #S3B_PARTNER_SETUP .btn{ min-height: 48px; } #S3_PROFILE_SETUP .btn.small, #S3B_PARTNER_SETUP .btn.small{ min-height: 40px; } #S3_PROFILE_SETUP .hashRow{ gap: 8px; } #S3_PROFILE_SETUP .chips{ margin-top: 10px; } #S3B_PARTNER_SETUP #setupOrgLogo{ min-height: auto; padding: 10px; } /* ===== PREMIUM INTEREST CARD ===== */ .setupInterestCard{ padding: 16px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 16px 40px rgba(0,0,0,.28), 0 0 18px rgba(255,75,212,.12), 0 0 24px rgba(52,230,255,.10); backdrop-filter: blur(12px); } .setupInterestHeader{ display:flex; justify-content:space-between; align-items:center; gap:10px; } .setupInterestTitle{ font-size:16px; font-weight:900; letter-spacing:-.02em; } #setupInterestLimitHint{ font-size:12.5px; opacity:.7; } /* INPUT PREMIUM */ .setupInterestCard .hashRow input{ border-radius: 999px; background: rgba(10,14,26,.8); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 rgba(0,0,0,0); transition: all .18s ease; } .setupInterestCard .hashRow input:focus{ border-color: rgba(52,230,255,.6); box-shadow: 0 0 0 2px rgba(52,230,255,.18), 0 0 18px rgba(52,230,255,.25); } /* BUTTON subtle premium */ .setupInterestCard .hashAddBtn{ border-radius: 999px; padding: 0 16px; } /* CHIPS = bardziej premium */ .setupInterestCard .chips .chip{ border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 4px 14px rgba(0,0,0,.25), 0 0 10px rgba(255,75,212,.08); } /* ===== Interest limit badge ===== */ #setupInterestLimitHint, #interestLimitHint, #setInterestLimitHint, #regInterestLimitHint{ padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 4px 12px rgba(0,0,0,.25), 0 0 10px rgba(52,230,255,.08); } /* ===== Compact registration consents ===== */ #S2_REGISTER .legalBox{ margin-top: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.08); } #S2_REGISTER .checkRow{ min-height: auto; gap: 9px; font-size: 12px; line-height: 1.25; } #S2_REGISTER .checkRow input{ width: 16px; height: 16px; min-height: 16px; margin-top: 1px; } #S2_REGISTER .card:has(.legalBox){ padding: 12px; background: rgba(255,255,255,.035); box-shadow: 0 8px 22px rgba(0,0,0,.16); } #S2_REGISTER .card:has(.legalBox) .sectionTitle{ font-size: 14px; margin-bottom: 0; } #S2_REGISTER .card:has(.legalBox) .btn{ margin-top: 12px; } /* ===== Organizer setup identity card polish ===== */ #S3B_PARTNER_SETUP .setupOrgIdentityCard .setupOrgLogoPreview{ overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.28); } #S3B_PARTNER_SETUP .setupOrgIdentityCard .setupOrgLogoPreview img{ width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } #S3B_PARTNER_SETUP .setupOrgIdentityCard .btn:not(.secondary){ background: linear-gradient(135deg, #ff4bd4, #34e6ff); color: #07101a; font-weight: 950; border: 0; } #S3B_PARTNER_SETUP .setupOrgLogoPreview{ font-size:28px; font-weight:900; letter-spacing:-.02em; color:#fff; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#ff4bd4,#7b61ff); } /* ===== Organizer logo fallback letter polish ===== */ #S3B_PARTNER_SETUP .setupOrgLogoPreview{ font-size: 34px; font-weight: 950; letter-spacing: -.03em; color: #fff; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.16), transparent 42%), linear-gradient(135deg, rgba(255,75,212,.92), rgba(123,97,255,.88), rgba(52,230,255,.78)); } #S3B_PARTNER_SETUP .setupOrgLogoPreview:empty::before{ content: "U"; } #S3B_PARTNER_SETUP .setupOrgLogoPreview img{ width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } /* ===== Partner setup spacing polish ===== */ #S3B_PARTNER_SETUP .card{ padding: 18px 18px 20px; border-radius: 22px; margin-top: 18px; } #S3B_PARTNER_SETUP .sectionTitle{ font-size: 16px; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 2px; } #S3B_PARTNER_SETUP .sectionSub{ font-size: 13px; opacity: .7; margin-bottom: 14px; } #S3B_PARTNER_SETUP label{ margin-top: 14px; font-size: 13px; opacity: .75; } #S3B_PARTNER_SETUP input, #S3B_PARTNER_SETUP select, #S3B_PARTNER_SETUP textarea{ margin-top: 6px; } #S3B_PARTNER_SETUP textarea{ min-height: 90px; } #S3B_PARTNER_SETUP .charHint{ margin-top: 6px; font-size: 11px; opacity: .6; } #S3B_PARTNER_SETUP .btn{ margin-top: 22px; height: 48px; font-size: 15px; font-weight: 900; } /* ===== Premium input focus (shared feel) ===== */ #S3B_PARTNER_SETUP input:focus, #S3B_PARTNER_SETUP select:focus, #S3B_PARTNER_SETUP textarea:focus{ outline: none; border-color: rgba(52,230,255,.65); box-shadow: 0 0 0 2px rgba(52,230,255,.18), 0 0 18px rgba(52,230,255,.25); background: rgba(10,14,26,.92); transition: all .18s ease; } /* subtle idle polish */ #S3B_PARTNER_SETUP input, #S3B_PARTNER_SETUP select, #S3B_PARTNER_SETUP textarea{ transition: all .18s ease; } /* ===== Premium input focus (USER setup) ===== */ #S3_PROFILE_SETUP input:focus, #S3_PROFILE_SETUP select:focus, #S3_PROFILE_SETUP textarea:focus{ outline: none; border-color: rgba(52,230,255,.65); box-shadow: 0 0 0 2px rgba(52,230,255,.18), 0 0 18px rgba(52,230,255,.25); background: rgba(10,14,26,.92); } #S3_PROFILE_SETUP input, #S3_PROFILE_SETUP select, #S3_PROFILE_SETUP textarea{ transition: all .18s ease; } /* ===== User avatar fallback (premium) ===== */ .userAvatarFallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:24px; color:#fff; border-radius:inherit; position:relative; overflow:hidden; } /* dynamiczny gradient */ .userAvatarFallback::before{ content:""; position:absolute; inset:0; background: linear-gradient(135deg,#ff4bd4,#7b61ff,#34e6ff); opacity:.9; z-index:0; } /* glow */ .userAvatarFallback::after{ content:""; position:absolute; inset:-10%; background: radial-gradient(circle, rgba(255,255,255,.25), transparent 60%); opacity:.35; z-index:0; } /* litera na wierzchu */ .userAvatarFallback{ z-index:1; } .userAvatarFallback span{ position:relative; z-index:2; } /* ===== User avatar fallback readability fix ===== */ .userAvatarFallback{ font-size: 34px !important; font-weight: 950 !important; color: #fff !important; text-shadow: 0 2px 10px rgba(0,0,0,.38), 0 0 16px rgba(255,255,255,.18); isolation: isolate; } .userAvatarFallback::before, .userAvatarFallback::after{ display: none !important; } /* ===== ADMIN WORKFLOW LIST ===== */ .adminWorkflowList{ display:flex; flex-direction:column; gap:10px; } .adminWorkflowRow{ display:grid; grid-template-columns:92px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 14px; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:rgba(14,18,32,.72); backdrop-filter:blur(10px); } .adminWorkflowTicket{ min-width:0; } .adminWorkflowTicket strong{ display:block; font-size:15px; font-weight:900; line-height:1.1; } .adminWorkflowDate{ margin-top:4px; font-size:11px; opacity:.72; line-height:1.15; } .adminWorkflowMain{ min-width:0; } .adminWorkflowTop{ display:flex; align-items:center; gap:8px; min-width:0; } .adminWorkflowTitle{ font-size:13px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .adminWorkflowMeta{ margin-top:4px; font-size:12px; opacity:.72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .adminWorkflowActions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .adminStatusBadge{ display:inline-flex; align-items:center; justify-content:center; min-width:110px; padding:8px 12px; border-radius:999px; font-size:11px; font-weight:900; letter-spacing:.02em; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.08); } .adminStatusBadge[data-status="new"]{ background:rgba(59,130,246,.18); } .adminStatusBadge[data-status="in_review"], .adminStatusBadge[data-status="accepted"]{ background:rgba(245,158,11,.18); } .adminStatusBadge[data-status="in_progress"]{ background:rgba(168,85,247,.18); } .adminStatusBadge[data-status="resolved"], .adminStatusBadge[data-status="fixed"]{ background:rgba(34,197,94,.18); } .adminStatusBadge[data-status="rejected"], .adminStatusBadge[data-status="not_reproducible"], .adminStatusBadge[data-status="archived"]{ background:rgba(239,68,68,.16); opacity:.78; } /* ===== ADMIN DASHBOARD RECOVERY ===== */ .adminDashboard{ padding-bottom:40px; } .adminDashboardHero{ border-radius:28px; padding:22px; background: linear-gradient(180deg, rgba(18,24,44,.96), rgba(10,14,26,.96)); border:1px solid rgba(255,255,255,.08); } .adminDashboardSection{ border-radius:18px; padding:18px; background: linear-gradient(180deg, rgba(16,20,34,.94), rgba(10,12,24,.96)); border:1px solid rgba(255,255,255,.06); } .adminDashboardSection .sectionTitle{ font-size:18px; font-weight:900; margin-bottom:4px; } .adminDashboardSection #adminUserReportsList, .adminDashboardSection #adminEventReportsList, .adminDashboardSection #adminBugReportsList{ display:flex; flex-direction:column; gap:10px; } .adminDashboardSection .card{ margin-top:0 !important; border-radius:18px !important; padding:14px !important; background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.07); } .adminDashboardSection .pill{ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.10); font-weight:900; } .eventPlacePreviewMap{ display:flex; align-items:center; gap:12px; } .eventPlaceContent{ flex:1 1 auto; min-width:0; overflow:hidden; } .eventPlaceContent .tStrong{ line-height:1.15; margin-bottom:6px; word-break:break-word; } .eventPlaceContent .sectionSub{ line-height:1.25; word-break:break-word; } .eventMiniMap{ flex:0 0 76px; width:76px; min-width:76px; height:76px; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); box-shadow:0 10px 30px rgba(0,0,0,.25); } .eventMiniMap .leaflet-control-container{ display:none; } .eventMiniMap .leaflet-marker-icon{ margin-top:-38px !important; } .eventPlacePreview.eventPlacePreviewMap{ display:grid !important; grid-template-columns:82px minmax(0, 1fr) !important; align-items:center !important; column-gap:18px !important; } .eventPlacePreview.eventPlacePreviewMap .eventMiniMap{ grid-column:1 !important; grid-row:1 !important; width:82px !important; min-width:82px !important; height:82px !important; border-radius:18px !important; margin:0 !important; position:relative !important; z-index:1 !important; } .eventPlacePreview.eventPlacePreviewMap .eventPlaceContent{ grid-column:2 !important; grid-row:1 !important; min-width:0 !important; overflow:visible !important; position:relative !important; z-index:2 !important; } .eventPlacePreview.eventPlacePreviewMap .eventPlaceContent .tStrong, .eventPlacePreview.eventPlacePreviewMap .eventPlaceContent .sectionSub{ overflow-wrap:anywhere !important; word-break:normal !important; } .eventPlaceMapCard{ display:grid; grid-template-columns:82px minmax(0, 1fr); gap:18px; align-items:center; padding:14px; border-radius:22px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.10); } .eventPlaceMapThumb{ width:82px; height:82px; min-width:82px; border-radius:18px; overflow:hidden; background:rgba(255,255,255,.06); box-shadow:0 10px 26px rgba(0,0,0,.24); } .eventPlaceMapThumb .leaflet-control-container{ display:none; } .eventPlaceMapText{ min-width:0; } .eventPlaceMapText .tStrong{ line-height:1.15; margin-bottom:6px; overflow-wrap:anywhere; } .eventPlaceMapText .sectionSub{ line-height:1.25; overflow-wrap:anywhere; } #S7B_EVENT_DETAIL .eventSocialHeader{ padding:18px 16px 20px; border-radius:24px; background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.035)); border:1px solid rgba(255,255,255,.10); box-shadow:0 18px 44px rgba(0,0,0,.18); } #S7B_EVENT_DETAIL .eventSocialKicker{ color:#6ee7ff !important; text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:1000; margin-bottom:10px; } #S7B_EVENT_DETAIL #evTitle{ color:#fff !important; text-shadow:0 8px 26px rgba(0,0,0,.26); } #S7B_EVENT_DETAIL #evMeta{ color:rgba(247,251,255,.88) !important; font-weight:850 !important; } #S7B_EVENT_DETAIL .eventDetailChips{ margin-top:16px !important; } #S7B_EVENT_DETAIL .eventActionsGrid .btn{ min-height:58px; border-radius:26px; font-size:16px; font-weight:1000; box-shadow:0 16px 36px rgba(0,0,0,.22); transform:translateZ(0); transition:transform .18s ease, filter .18s ease, box-shadow .18s ease; } #S7B_EVENT_DETAIL .eventActionsGrid .btn:first-child{ background:linear-gradient(135deg,#f044d4 0%,#65d9ff 100%) !important; color:#0b1020 !important; } #S7B_EVENT_DETAIL .eventActionsGrid .btn.secondary{ background:linear-gradient(135deg,rgba(139,92,246,.92),rgba(72,34,130,.92)) !important; border:1px solid rgba(255,255,255,.15) !important; color:#fff !important; } #S7B_EVENT_DETAIL .eventActionsGrid .btn:active{ transform:scale(.975); filter:brightness(1.08); } #S7B_EVENT_DETAIL #evMeta{ white-space:pre-line !important; } .eventSelectedTag{ display:inline-flex; align-items:center; gap:10px; margin-top:10px; padding:10px 12px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); font-weight:950; } .eventSelectedTag[hidden]{ display:none !important; } .eventSelectedTag button{ width:26px; height:26px; border:0; border-radius:999px; background:rgba(255,255,255,.14); color:#fff; font-size:18px; font-weight:950; } .partnerEventRow{ display:grid; grid-template-columns:58px minmax(0,1fr) 34px; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); cursor:pointer; } .partnerEventRow:last-child{ border-bottom:0; } .partnerEventIcon{ width:64px; height:64px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:34px; background: radial-gradient(circle at 28% 22%, rgba(255,255,255,.30), transparent 30%), linear-gradient(135deg, rgba(244,63,211,.72), rgba(66,213,255,.58)); border:1px solid rgba(255,255,255,.16); box-shadow: 0 16px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18); filter:saturate(1.12); text-shadow:0 8px 18px rgba(0,0,0,.26); } .partnerEventContent{ min-width:0; } .partnerEventTitle{ font-size:17px; line-height:1.15; font-weight:1000; color:#fff; margin-bottom:8px; } .partnerEventMeta{ font-size:13px; line-height:1.25; font-weight:850; color:rgba(247,251,255,.68); overflow-wrap:anywhere; } .partnerEventMeta + .partnerEventMeta{ margin-top:5px; } .partnerEventArrow{ width:34px; height:34px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:30px; line-height:1; color:#f0a8ff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); } .notificationItem{ display:flex; align-items:flex-start; gap:12px; padding:13px 14px; border-radius:18px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); cursor:pointer; box-shadow:0 8px 22px rgba(0,0,0,.12); } .notificationIcon{ width:28px; height:28px; min-width:28px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(110,231,255,.16),rgba(255,255,255,.04)); border:1px solid rgba(110,231,255,.14); color:#dff9ff; font-size:13px; font-weight:1000; margin-top:1px; } .notificationContent{ flex:1; min-width:0; } .notificationItem + .notificationItem{ margin-top:10px; } .notificationItem.notifNew{ background:linear-gradient(135deg,rgba(110,231,255,.16),rgba(244,63,211,.10)); border-color:rgba(110,231,255,.28); box-shadow: 0 12px 28px rgba(0,0,0,.18), 0 0 0 1px rgba(110,231,255,.08) inset, 0 0 22px rgba(110,231,255,.08); } .notificationTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .notificationTitle{ display:flex; align-items:center; gap:8px; min-width:0; color:#fff; font-weight:1000; line-height:1.2; } .notificationNewDot{ width:9px; height:9px; min-width:9px; border-radius:999px; background:#6ee7ff; box-shadow:0 0 0 5px rgba(110,231,255,.14); } .notificationTime{ white-space:nowrap; flex-shrink:0; font-size:12px; color:rgba(247,251,255,.62); font-weight:850; } .notificationBody{ margin-top:4px; color:rgba(247,251,255,.68); font-size:13px; line-height:1.32; font-weight:700; } .notificationIcon.notifIconSuccess, .notificationIcon.notifIconObserve{ color:#7dffad; background:linear-gradient(135deg,rgba(34,197,94,.22),rgba(255,255,255,.04)); border-color:rgba(34,197,94,.24); } .notificationIcon.notifIconEvent{ color:#6ee7ff; background:linear-gradient(135deg,rgba(59,130,246,.22),rgba(255,255,255,.04)); border-color:rgba(59,130,246,.24); } .notificationIcon.notifIconWarning{ color:#ffc457; background:linear-gradient(135deg,rgba(255,196,87,.22),rgba(255,255,255,.04)); border-color:rgba(255,196,87,.26); } .notificationIcon.notifIconInfo{ color:#c7a7ff; background:linear-gradient(135deg,rgba(139,92,246,.24),rgba(255,255,255,.04)); border-color:rgba(139,92,246,.26); } .notificationIcon.notifIconGroup, .notificationIcon.notifIconFriend{ color:#f0a8ff; background:linear-gradient(135deg,rgba(244,114,255,.20),rgba(255,255,255,.04)); border-color:rgba(244,114,255,.22); } .notificationIcon svg{ width:17px; height:17px; display:block; } .notificationIcon svg path, .notificationIcon svg circle{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .notificationIcon svg circle{ vector-effect:non-scaling-stroke; } /* ===== STORE READY TOPBAR — CENTERED PREMIUM BRAND ===== */ .topbar{ min-height: 82px !important; padding: 10px 16px 12px !important; background: linear-gradient(180deg, rgba(7,9,22,.92) 0%, rgba(7,9,22,.72) 62%, rgba(7,9,22,0) 100%) !important; border-bottom: 1px solid rgba(255,255,255,.055) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; } .brandCenter.small{ min-width:0 !important; padding:0 8px !important; } .brandCenter.small .brandRow{ flex-direction: column !important; gap: 3px !important; max-width: 54vw !important; min-width:0 !important; text-align:center !important; } .brandCenter.small .brandLogo.sm{ width: 38px !important; height: 38px !important; border-radius: 13px !important; box-shadow: 0 10px 22px rgba(0,0,0,.24) !important; } .brandCenter.small .brandText{ transform:none !important; text-align:center !important; min-width:0 !important; width:100% !important; } .brandCenter.small .brandName{ display:none !important; } .brandCenter.small .brandTagline{ display:block !important; max-width: 54vw !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; font-size: 12.5px !important; line-height:1.12 !important; font-weight: 850 !important; letter-spacing: -.01em !important; color: rgba(247,251,255,.94) !important; opacity: .96 !important; } .backBtn, .ghostBtn, .topIconBtn{ width: 42px !important; height: 42px !important; border-radius: 16px !important; background: rgba(255,255,255,.075) !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 12px 26px rgba(0,0,0,.22) !important; } .backBtn::after{ display:none !important; } /* ===== Partner event sections: collapsible store-ready list ===== */ .partnerEventSection{ padding: 0 !important; overflow: hidden; } .partnerEventSectionHeader{ width:100%; border:0; background: linear-gradient(90deg, rgba(255,75,212,.10), rgba(52,230,255,.08)); color:#f7fbff; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; text-align:left; cursor:pointer; } .partnerEventSectionTitle{ font-size:17px; line-height:1.05; font-weight:1200; letter-spacing:.02em; text-transform:uppercase; } .partnerEventSectionMeta{ margin-top:5px; font-size:12px; font-weight:900; color:rgba(233,240,255,.72); } .partnerEventSectionChevron{ width:34px; height:34px; border-radius:999px; display:grid; place-items:center; font-size:22px; font-weight:900; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); } .partnerEventSection > .col{ padding:0 14px 14px; } /* ===== Partner events sections — soft USLY premium ===== */ .partnerEventSection{ padding:0 !important; overflow:hidden; border-radius:30px !important; background: radial-gradient(130% 150% at 0% 0%, rgba(255,75,212,.13), rgba(255,75,212,0) 58%), radial-gradient(130% 150% at 100% 0%, rgba(52,230,255,.11), rgba(52,230,255,0) 58%), linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow: 0 22px 54px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.025) inset !important; } .partnerEventSectionHeader{ width:100%; min-height:132px; padding:22px 20px !important; border:0; background:transparent !important; color:#f8fbff; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; cursor:pointer; } .partnerEventSectionHeader::before{ display:none !important; } .partnerEventSectionHeader > div:first-child{ display:flex !important; align-items:center !important; gap:16px !important; min-width:0 !important; } .partnerEventSectionIcon{ width:58px; height:58px; border-radius:20px; display:grid; place-items:center; flex:0 0 auto; font-size:26px; background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.045)); border:1px solid rgba(255,255,255,.12); box-shadow: 0 14px 30px rgba(0,0,0,.24), 0 0 22px rgba(255,75,212,.10); } .partnerEventSectionText{ min-width:0; } .partnerEventSectionTitle{ font-size:24px !important; line-height:1.05 !important; font-weight:1050 !important; letter-spacing:-.035em !important; text-transform:none !important; color:#F8FBFF !important; } .partnerEventSectionDesc{ margin-top:7px; font-size:13.5px; line-height:1.25; font-weight:800; color:rgba(233,240,255,.72); } .partnerEventSectionMeta{ display:inline-flex; align-items:center; gap:7px; width:max-content; margin-top:12px !important; padding:7px 11px; border-radius:999px; font-size:13px !important; line-height:1; font-weight:950 !important; color:rgba(247,251,255,.92) !important; background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.10); } .partnerEventSectionMeta::before{ content:""; width:8px; height:8px; border-radius:999px; background:#6EE7FF; box-shadow:0 0 12px rgba(110,231,255,.55); } .partnerEventSectionChevron{ width:44px !important; height:44px !important; border-radius:999px !important; display:grid; place-items:center; flex:0 0 auto; font-size:25px !important; font-weight:850 !important; color:#f7fbff; background:rgba(255,255,255,.07) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 12px 26px rgba(0,0,0,.22) !important; } .partnerEventSection > .col{ padding:0 16px 16px; } .partnerEventSection.isOpen{ border-color:rgba(52,230,255,.18) !important; } .partnerEventSection.isOpen .partnerEventSectionChevron{ opacity:.78; } .partnerEventSection.isCollapsed .partnerEventSectionHeader{ min-height:118px; } .partnerEventSection.isCollapsed .partnerEventSectionChevron{ opacity:.92; } /* section accents in USLY palette */ .partnerEventSection[data-section="drafts"] .partnerEventSectionMeta::before{ background:#F472B6; box-shadow:0 0 12px rgba(244,114,182,.50); } .partnerEventSection[data-section="finished"] .partnerEventSectionMeta::before{ background:#A78BFA; box-shadow:0 0 12px rgba(167,139,250,.48); } .partnerEventSection[data-section="archived"] .partnerEventSectionMeta::before{ background:#94A3B8; box-shadow:0 0 12px rgba(148,163,184,.38); } .partnerEventSection[data-section="drafts"] .partnerEventSectionIcon{ box-shadow:0 14px 30px rgba(0,0,0,.24), 0 0 20px rgba(244,114,182,.10); } .partnerEventSection[data-section="finished"] .partnerEventSectionIcon{ box-shadow:0 14px 30px rgba(0,0,0,.24), 0 0 20px rgba(167,139,250,.10); } .partnerEventSection[data-section="archived"] .partnerEventSectionIcon{ box-shadow:0 14px 30px rgba(0,0,0,.24), 0 0 20px rgba(148,163,184,.08); } /* ===== Partner events sections — compact premium correction ===== */ .partnerEventSectionHeader{ min-height: 96px !important; padding: 16px 18px !important; gap: 12px !important; } .partnerEventSection.isCollapsed .partnerEventSectionHeader{ min-height: 92px !important; } .partnerEventSectionHeader > div:first-child{ gap: 13px !important; } .partnerEventSectionIcon{ width: 46px !important; height: 46px !important; border-radius: 16px !important; font-size: 22px !important; } .partnerEventSectionTitle{ font-size: 19.5px !important; line-height: 1.04 !important; font-weight: 1050 !important; letter-spacing: -.02em !important; color:#F8FBFF !important; text-shadow: 0 2px 10px rgba(0,0,0,.18); } .partnerEventSectionDesc{ margin-top: 5px !important; font-size: 12.5px !important; line-height: 1.22 !important; } .partnerEventSectionMeta{ margin-top: 9px !important; padding: 6px 10px !important; font-size: 12.5px !important; } .partnerEventSectionChevron{ width: 36px !important; height: 36px !important; font-size: 22px !important; } .partnerEventSection > .col{ padding: 0 14px 14px !important; } .partnerEventSection, .partnerEventSectionHeader, .partnerEventSectionIcon, .partnerEventSectionChevron{ transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease; } .partnerEventSectionHeader:hover .partnerEventSectionChevron{ transform: translateY(-1px); background: rgba(255,255,255,.10) !important; } .partnerEventSectionHeader:active{ transform: scale(.995); } .partnerEventArchiveIcon{ width: 25px; height: 25px; display:block; background:#f7fbff; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .langSwitchWelcome{ margin-top:14px; display:inline-flex; align-items:center; gap:4px; padding:4px; border-radius:999px; background:rgba(12,18,38,.58); border:1px solid rgba(255,255,255,.10); box-shadow:0 10px 30px rgba(0,0,0,.20); backdrop-filter:blur(12px); } .langBtn{ min-width:48px; height:34px; border:0; border-radius:999px; background:transparent; color:rgba(247,251,255,.72); font-weight:1000; letter-spacing:.02em; cursor:pointer; transition:.18s ease; } .langBtn.active{ background:linear-gradient(135deg,#f44fd3,#55d6ff); color:#081120; box-shadow:0 6px 18px rgba(85,214,255,.22); } /* Auth topbar restore after global compact header override */ #S1_LOGIN .brandCenter.small .brandRow, #S2_REGISTER .brandCenter.small .brandRow{ flex-direction: row !important; gap: 12px !important; max-width: none !important; text-align: left !important; } #S1_LOGIN .brandCenter.small .brandText, #S2_REGISTER .brandCenter.small .brandText{ width: auto !important; text-align: left !important; } #S1_LOGIN .brandCenter.small .brandTagline, #S2_REGISTER .brandCenter.small .brandTagline{ display: inline-flex !important; max-width: none !important; font-weight: 1100 !important; letter-spacing: .04em !important; } /* === Password visibility toggle (login/register) === */ .passwordField{ position: relative; width: 100%; } .passwordField input{ padding-right: 48px; } .passwordToggleBtn{ position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 14px; background: rgba(255,255,255,.08); color: rgba(234,240,255,.86); font-size: 16px; line-height: 1; display: grid; place-items: center; cursor: pointer; box-shadow: none; } .passwordToggleBtn:active{ transform: translateY(-50%) scale(.96); } .passwordEyeIcon{ width: 18px; height: 18px; display: grid; place-items: center; } .passwordEyeIcon svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .passwordToggleBtn{ border: 1px solid rgba(255,255,255,.12); background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,0) 54%), linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045)); color: rgba(234,240,255,.72); backdrop-filter: blur(10px); transition: color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .passwordToggleBtn:hover, .passwordToggleBtn.is-visible{ color: rgba(247,251,255,.96); border-color: rgba(52,230,255,.30); box-shadow: 0 0 0 3px rgba(52,230,255,.08), 0 8px 20px rgba(0,0,0,.16); }