/* ========================================================================== fp-experience.css — Friendse UI/UX experience pack (MF Team) Home / Dashboard / Feed ko smooth, modern aur "maza aane wala" banata hai. Sirf presentation layer — koi markup ya logic change nahi. Load order: sabse aakhir me (fp-center.css ke baad) taake yeh jeet sake. ========================================================================== */ /* ---------- 1. Global smoothness ---------- */ /* SCROLL FIX (MF Team): wheel scrolling must stay native. Animated smooth scrolling on + overscroll lock on made the dashboard middle column feel stuck and swallowed mouse-wheel ticks. */ html { scroll-behavior: auto; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior-y: auto; } /* Nothing may trap the page scroll: the shell and its columns grow with their content and let the window do the scrolling. */ /* NOTE: html/body ka overflow default rehna zaroori hai, warna sticky sidebars toot jati hain (sides scroll par upar chali jati thin). */ html, body { overflow-y: visible; height: auto; max-height: none; } main, .friende-app-shell, .friende-app-shell > section { overflow: visible; max-height: none; } /* Feed column: momentum scrolling + no layout jank */ #posts-list, .friende-feed, main { -webkit-overflow-scrolling: touch; } /* Har scrollable area ka scrollbar slim + modern */ * { scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--c-text, #64748b) 22%, transparent) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--c-text, #64748b) 20%, transparent); border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--c-text, #64748b) 34%, transparent); } /* ---------- 2. Cards — soft, layered, alive ---------- */ .friende-card { border-radius: 18px; transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s cubic-bezier(.22,.61,.36,1), border-color .22s ease; will-change: transform; } @media (hover: hover) and (pointer: fine) { #posts-list .friende-card:hover, .fp-post:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -18px rgba(2, 6, 23, .45), 0 2px 6px -2px rgba(2, 6, 23, .12); } } #posts-list > * + * { margin-top: 14px; } /* ---------- 3. Reveal-on-scroll (JS adds .fx-reveal / .fx-in) ---------- */ .fx-reveal { opacity: 0; transform: translateY(14px) scale(.995); transition: opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1); } .fx-reveal.fx-in { opacity: 1; transform: none; } /* ---------- 4. Story tray — drag, snap, fade edges ---------- */ .friende-story-row-wrap { position: relative; } .friende-story-row { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-left: 4px; scroll-behavior: smooth; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .friende-story-row::-webkit-scrollbar { height: 0; } .friende-story-row.is-dragging { scroll-behavior: auto; cursor: grabbing; } .friende-story-row.is-dragging .friende-story { pointer-events: none; } .friende-story { flex: 0 0 auto; width: 108px; height: 172px; border-radius: 16px; scroll-snap-align: start; display: flex; align-items: flex-end; padding: 8px; color: #fff; overflow: hidden; position: relative; transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease; box-shadow: 0 6px 18px -12px rgba(2, 6, 23, .6); } .friende-story::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, rgba(0,0,0,.62), transparent); pointer-events: none; } .friende-story > span { position: relative; z-index: 2; } @media (hover: hover) and (pointer: fine) { .friende-story:hover { transform: translateY(-3px) scale(1.02); } } .friende-story:active { transform: scale(.97); } /* right/left fade — "aur bhi hai" ka signal */ .friende-story-row-wrap::after, .friende-story-row-wrap::before { content: ""; position: absolute; top: 0; bottom: 8px; width: 42px; pointer-events: none; opacity: 0; transition: opacity .25s ease; z-index: 3; } .friende-story-row-wrap::after { right: 0; background: linear-gradient(to left, var(--c-surface, #fff), transparent); } .friende-story-row-wrap::before { left: 0; background: linear-gradient(to right, var(--c-surface, #fff), transparent); } .friende-story-row-wrap.is-scrollable::after { opacity: 1; } .friende-story-row-wrap.can-scroll-left::before { opacity: 1; } /* tray arrows (JS injects) */ .fx-tray-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--c-border, #e5e7eb); background: var(--c-surface, #fff); color: var(--c-text, #0f172a); display: none; align-items: center; justify-content: center; font-size: 16px; line-height: 1; cursor: pointer; z-index: 4; box-shadow: 0 6px 18px -8px rgba(2,6,23,.35); transition: transform .18s ease, opacity .18s ease; } .fx-tray-nav:hover { transform: translateY(-50%) scale(1.08); } .fx-tray-nav--prev { left: 6px; } .fx-tray-nav--next { right: 6px; } @media (hover: hover) and (pointer: fine) { .friende-story-row-wrap.can-scroll-left .fx-tray-nav--prev, .friende-story-row-wrap.is-scrollable .fx-tray-nav--next { display: flex; } } /* Phones use native swipe scrolling. Some mobile browsers report hover support and were therefore showing the desktop arrow plus its wide edge fade, which looked like an empty white strip over the last story. */ @media (max-width: 720px) { .friende-story-row-wrap::before, .friende-story-row-wrap::after { display: none !important; } .friende-story-row-wrap .fx-tray-nav { display: none !important; } /* Keep every real status reachable with native horizontal swipe and expose a slim, draggable scrollbar instead of the desktop arrow overlay. */ .friende-story-row, .fx-tray-row { overflow-x: auto !important; overflow-y: hidden; scrollbar-width: thin !important; scrollbar-color: var(--c-primary, #4f46e5) color-mix(in srgb, var(--c-text, #0f172a) 8%, transparent); padding-bottom: 8px !important; touch-action: pan-x; } .friende-story-row::-webkit-scrollbar, .fx-tray-row::-webkit-scrollbar { display: block !important; height: 4px !important; } .friende-story-row::-webkit-scrollbar-track, .fx-tray-row::-webkit-scrollbar-track { background: color-mix(in srgb, var(--c-text, #0f172a) 8%, transparent); border-radius: 999px; } .friende-story-row::-webkit-scrollbar-thumb, .fx-tray-row::-webkit-scrollbar-thumb { background: var(--c-primary, #4f46e5); border-radius: 999px; } } /* ---------- 5. Buttons / tap feedback ---------- */ button, .friende-btn, .fp-btn, .friende-icon-btn, .friende-stat, a.friende-story { -webkit-tap-highlight-color: transparent; transition: transform .16s cubic-bezier(.22,.61,.36,1), background-color .18s ease, color .18s ease, box-shadow .18s ease; } button:active, .friende-btn:active, .fp-btn:active, .friende-icon-btn:active, .friende-stat:active { transform: scale(.96); } .friende-icon-btn:hover { background: color-mix(in oklab, var(--c-text, #0f172a) 8%, transparent); } /* Focus ring — keyboard users ke liye saaf, mouse par shor nahi */ :focus-visible { outline: 2px solid var(--c-primary, #4f46e5); outline-offset: 2px; border-radius: 10px; } /* ---------- 6. Sticky topbar jo scroll par chhup jaye (mobile) ---------- */ .friende-topbar { position: sticky; top: 0; z-index: 60; backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); background: color-mix(in oklab, var(--c-surface, #fff) 86%, transparent); transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease; } body.fx-scrolled .friende-topbar { box-shadow: 0 8px 24px -20px rgba(2, 6, 23, .8); } @media (max-width: 768px) { body.fx-nav-hidden .friende-topbar { transform: translateY(-100%); } } /* ---------- 7. Media — koi layout jump nahi ---------- */ #posts-list img, #posts-list video, .friende-story img, .friende-story video { background: color-mix(in oklab, var(--c-text, #0f172a) 6%, transparent); } #posts-list img { opacity: 0; transition: opacity .35s ease; } #posts-list img.fx-loaded, #posts-list img[data-fx-eager] { opacity: 1; } /* ---------- 8. Skeleton shimmer (infinite scroll loading) ---------- */ .fx-skeleton { border-radius: 18px; height: 190px; margin-top: 14px; background: linear-gradient( 100deg, color-mix(in oklab, var(--c-text, #0f172a) 6%, transparent) 30%, color-mix(in oklab, var(--c-text, #0f172a) 12%, transparent) 50%, color-mix(in oklab, var(--c-text, #0f172a) 6%, transparent) 70% ); background-size: 220% 100%; animation: fx-shimmer 1.25s linear infinite; } @keyframes fx-shimmer { from { background-position: 180% 0; } to { background-position: -60% 0; } } /* ---------- 9. Scroll progress + back-to-top ---------- */ .fx-progress { display: none !important; /* blue scroll line removed (MF Team) */ position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 90; background: linear-gradient(90deg, var(--c-primary, #4f46e5), #06b6d4); border-radius: 0 999px 999px 0; transition: width .1s linear, opacity .3s ease; pointer-events: none; } .fx-top { position: fixed; right: 18px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--c-border, #e5e7eb); background: var(--c-surface, #fff); color: var(--c-text, #0f172a); font-size: 18px; display: grid; place-items: center; z-index: 70; cursor: pointer; opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; box-shadow: 0 14px 32px -16px rgba(2, 6, 23, .55); transition: opacity .25s ease, transform .25s cubic-bezier(.22,.61,.36,1); } .fx-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } @media (min-width: 1024px) { .fx-top { bottom: 28px; } } /* ---------- 10. Composer / quick actions polish ---------- */ .friende-section-title { letter-spacing: .02em; text-transform: uppercase; font-size: 11px; font-weight: 800; opacity: .55; margin-bottom: 10px; } .friende-stat { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--c-border, #e5e7eb); font-weight: 600; } .friende-stat:hover { border-color: color-mix(in oklab, var(--c-primary, #4f46e5) 55%, transparent); background: color-mix(in oklab, var(--c-primary, #4f46e5) 8%, transparent); transform: translateY(-1px); } /* ---------- 11. Mobile spacing so kuch bhi crop na ho ---------- */ @media (max-width: 640px) { .friende-card { border-radius: 16px; } .friende-story { width: 96px; height: 156px; } #posts-list > * + * { margin-top: 10px; } main { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } } /* ---------- 12. Accessibility: motion kam chahiye to sab shaant ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .fx-reveal { opacity: 1; transform: none; } }