*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { --shelfd-page-bg: #0E0E0E; --shelfd-safe-top: env(safe-area-inset-top, 0px); --shelfd-safe-right: env(safe-area-inset-right, 0px); --shelfd-safe-bottom: env(safe-area-inset-bottom, 0px); --shelfd-safe-left: env(safe-area-inset-left, 0px); scrollbar-width: none; /* v10.278: bounce/rubber-band scrolling. `overscroll-behavior-y: auto` is the default but we set it explicitly to defend against any inherited suppression elsewhere in the stylesheet stack. */ overscroll-behavior-y: auto; } html::-webkit-scrollbar { display: none; } body { /* v10.278: was 100vh â€” bumped to 100vh + 1px so the body always has at least 1px of overflow. iOS WKWebView only bounces if content overflows (default `alwaysBounceVertical: false`), so on short pages (Notifications empty state, login, etc.) bounce wouldn't engage. 1px extra is invisible to the eye but enough for iOS to enable the rubber-band gesture at both top and bottom. Long pages already overflow more than this so behavior is unchanged for them. For a more polished feel, the iOS native side should also set `webView.scrollView.alwaysBounceVertical = true` in ViewController.swift. */ min-height: calc(100vh + 1px); overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch; /* v482: furthest-back page background changed to #0E0E0E (neutral grey). Cards and panels retain their own darker surfaces so they float on this grey base. Light mode overrides this via body.light-mode in 16-light-mode-contrast.css. v10.803: root bounce/reveal color now follows --shelfd-page-bg so iOS rubber-band overscroll matches the active app surface. */ background: var(--shelfd-page-bg, #0E0E0E); font-family: 'Sohne', 'DM Sans', sans-serif; /* v11.210: app default body-text size = 15.9px (was the browser's implicit 16px). This is the INHERITED baseline only — every element that sets its own font-size is unaffected; this just defines what unsized body text renders at. */ font-size: 15.9px; color: #e8e3f3; /* v11.246: app default letter-spacing = 0em (inherited baseline). */ letter-spacing: 0; overflow-anchor: none; /* v11.231: crisp text on the true-black UI. iOS WKWebView defaults to subpixel antialiasing, which renders type heavier/softer on dark surfaces. `antialiased` (grayscale) makes text + thin strokes render lighter and sharper — the standard dark-mode "HD" text fix. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html { background: var(--shelfd-page-bg, #0E0E0E); } /* v10.803: iOS bounce reveal */ /* v10.210: stronger mobile portrait presentation lock. The manifest/native Screen Orientation API are hints on iOS, not a hard guarantee. The old fallback transformed , which let fixed top-level portals keep landscape viewport math. Instead, the viewport stays fixed and each top-level app surface is rotated into a portrait coordinate system using JS-synced visualViewport dimensions. */ @media (orientation: landscape) and (pointer: coarse) and (max-height: 620px) { html.shelfd-phone-landscape-lock { width: var(--shelfd-lock-viewport-w, 100vw); height: var(--shelfd-lock-viewport-h, 100vh); overflow: hidden !important; background: #0E0E0E; overscroll-behavior: none; } html.shelfd-phone-landscape-lock body { position: fixed; inset: 0; width: var(--shelfd-lock-viewport-w, 100vw) !important; height: var(--shelfd-lock-viewport-h, 100vh) !important; min-height: var(--shelfd-lock-viewport-h, 100vh) !important; overflow: hidden !important; transform: none !important; transform-origin: initial !important; background: #0E0E0E; overscroll-behavior: none; } html.shelfd-phone-landscape-lock body > :where( #login-screen, #login-terms-page, #login-privacy-page, #login-email-page, #shelfd-signin-page, #shelfd-reset-page, #shelfd-signup-page, #shelfd-verify-page, #shelfd-setup-page, #app-container, #feed-post-page, #screenlist-live-update-splash, .discover-media-profile-overlay, .game-media-profile-overlay, .discover-category-full-overlay, .discover-universal-search-overlay, .discover-friends-modal-overlay, .screenlist-media-swipe-underlay ) { position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; width: var(--shelfd-lock-portrait-w, 100vh) !important; height: var(--shelfd-lock-portrait-h, 100vw) !important; min-height: var(--shelfd-lock-portrait-h, 100vw) !important; max-width: none !important; max-height: none !important; overflow-x: hidden !important; overflow-y: auto; transform: translate3d(var(--shelfd-lock-viewport-w, 100vw), 0, 0) rotate(90deg) !important; transform-origin: top left !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background-color: #0E0E0E; } } /* Header */ .header { background: #0E0E0E; border-bottom: 1px solid rgba(0,0,0,0.18); padding: 24px 0; } /* v10.585: Safe area applied to .header only, not body. See 17-auth-flow-setup.css for the header rule. */ .container { max-width: 920px; margin: 0 auto; padding: 0 20px; } .login-info-wrap { max-width: 560px; margin: 32px auto 0; text-align: left; font-size: 14px; line-height: 1.6; color: #b8afd1; border-top: 1px solid rgba(139,92,246,0.2); padding-top: 24px; } .login-info-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } .login-info-tab { appearance: none; border: 1px solid rgba(139,92,246,0.24); background: rgba(255,255,255,0.03); color: #b8afd1; border-radius: 999px; padding: 8px 14px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .login-info-tab.active { background: rgba(139,92,246,0.16); border-color: rgba(167,139,250,0.44); color: #f8f4ff; } .login-info-panel { display: none; } .login-info-panel.active { display: block; } .login-info-panel p { margin-top: 0; margin-bottom: 16px; } .login-privacy-link { margin-top: 18px; border: 0; background: transparent; color: #a78bfa; font-family: 'Sohne', sans-serif; font-size: 11px; font-weight: 400; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; } .login-mobile-tip { margin: 20px auto 0; max-width: 300px; text-align: center; font-family: 'Sohne', sans-serif; font-size: 12px; line-height: 1.5; color: #ffffff; } .login-legal-links { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; } /* v10.561: Terms / Privacy overlay restyled to match Editorial Dark UI. Charcoal #0E0E0E background, lavender accents (#c4b5fd / #a78bfa), 12px default body text. */ .login-privacy-page { position: fixed; inset: 0; z-index: 5000; background: #0E0E0E; overflow-y: auto; padding: max(34px, calc(var(--shelfd-safe-top, 0px) + 24px)) 18px 40px; font-family: 'Sohne', sans-serif; } .login-privacy-shell { width: min(860px, 100%); margin: 0 auto; } .login-privacy-back { border: 0; background: transparent; color: #c4b5fd; font-family: 'Sohne', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; padding: 8px 0 18px; } .login-privacy-content { background: #161616; border: 1px solid rgba(196,181,253,0.18); border-radius: 18px; padding: 22px 18px 26px; color: #d8d0e9; font-size: 12px; line-height: 1.65; } .login-privacy-content h1, .login-privacy-content h2, .login-privacy-content h3 { color: #f8f4ff; letter-spacing: -0.005em; } .login-privacy-content h1 { font-size: 22px; font-weight: 700; margin-bottom: 10px; } .login-privacy-content h2 { font-size: 15px; font-weight: 700; margin: 22px 0 8px; color: #c4b5fd; } .login-privacy-content h3 { font-size: 12px; font-weight: 700; margin: 14px 0 6px; color: #c4b5fd; } .login-privacy-content p, .login-privacy-content ul { margin: 0 0 12px; font-size: 12px; } .login-privacy-content ul { padding-left: 18px; } .login-privacy-content li { margin-bottom: 6px; font-size: 12px; } .login-privacy-content strong { color: #f8f4ff; font-weight: 700; } .login-privacy-content a { color: #c4b5fd; text-decoration: underline; text-underline-offset: 2px; } .login-privacy-content hr { border: 0; border-top: 1px solid rgba(196,181,253,0.12); margin: 18px 0; } .login-privacy-loading { color: #b8afd1; font-size: 12px; font-weight: 700; text-align: center; padding: 10px 0; } .header-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .logo { font-size: 26px; font-family: 'Sora', sans-serif; font-weight: 700; background: linear-gradient(90deg, #f59e0b, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .subtitle { font-size: 12px; color: #9990b3; margin-top: 4px; } .stats { display: flex; gap: 24px; } .stat-val { font-size: 20px; font-weight: 700; color: #a78bfa; text-align: center; } .stat-val.gold { color: #f59e0b; } .stat-label { font-size: 10px; color: #9990b3; text-transform: uppercase; letter-spacing: 1.5px; text-align: center; }