/* Community home on the phone (static/js/mobile-community/home.js): * the front page of a room -- live line, the room's words, room pills, * top post, top pic, right now, the talk bar. Archivo + JetBrains Mono, * the page and its ink, the app colour, 2px ink rules between sections. * * Every colour is a token on #community-layers-home. The page's own colour * (mobile-page-colors.js writes --pc-* on when an owner sets one) * takes over the tokens; without it the tokens follow light and dark. * Selectors carry #community-main-area #community-layers-home so they * outrank the phone's blanket sweeps ([data-theme] * * *, [class*="bytes"] * ..., #community-main-area *). No grey fills: surfaces are the page itself, * the app colour, or a photograph. */ #community-layers-home { --lh-ink: #0b0b0c; --lh-page: #ffffff; --lh-dim: color-mix(in srgb, var(--lh-ink) 60%, var(--lh-page)); --lh-faint: color-mix(in srgb, var(--lh-ink) 42%, var(--lh-page)); --lh-line: color-mix(in srgb, var(--lh-ink) 11%, var(--lh-page)); --lh-edge: color-mix(in srgb, var(--lh-ink) 22%, var(--lh-page)); --lh-live: #16a34a; --lh-accent: var(--primary-color, #e63946); --lh-on-accent: #ffffff; /* Colours that sit on a photograph. Named so the page-colour twins (mobile-page-colors.js customRole) leave them alone: a scrim on a picture is not the page. */ --lh-scrim: rgba(0, 0, 0, .54); --lh-on-photo: #ffffff; --lh-night: #000000; --lh-snow: #ffffff; display: none; } html[data-theme="dark"] #community-layers-home { --lh-ink: #f4f4f2; --lh-page: #000000; --lh-live: #4ade80; } html[data-page-color] #community-layers-home { --lh-ink: var(--pc-ink); --lh-page: var(--pc-page); --lh-dim: var(--pc-dim); --lh-faint: var(--pc-faint); --lh-line: var(--pc-line); --lh-edge: var(--pc-edge); --lh-live: var(--pc-good); } /* The home stands in for the post feed; the feed's own controls go with it. */ html body.community-active.community-layers-home-on #community-main-area #community-layers-home:not([hidden]) { display: block !important; } html body.community-active.community-layers-home-on #community-main-area #arena-grid, html body.community-active.community-layers-home-on #community-main-area #community-feed-modes, html body.community-active.community-layers-home-on #community-main-area #community-room-rail, html body.community-active.community-layers-home-on #community-main-area #community-blips-rail { display: none !important; } html body #community-main-area #community-layers-home { width: 100%; max-width: 100vw; padding: 2px 0 calc(128px + env(safe-area-inset-bottom, 0px)); background: transparent !important; font-family: var(--font-family, inherit); overflow-x: hidden; } html body #community-main-area #community-layers-home, html body #community-main-area #community-layers-home * { color: var(--lh-ink) !important; -webkit-text-fill-color: var(--lh-ink) !important; text-shadow: none; box-sizing: border-box !important; } html body #community-main-area #community-layers-home button { appearance: none; -webkit-appearance: none; margin: 0; font: inherit; text-align: left; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* ------------------------------------------------------------ community home */ html body #community-main-area #community-layers-home { --fp-sans: "Archivo", var(--font-family, system-ui), sans-serif; --fp-mono: "JetBrains Mono", ui-monospace, monospace; padding: 8px 0 calc(120px + env(safe-area-inset-bottom, 0px)) !important; font-family: var(--fp-sans) !important; } html body #community-main-area #community-layers-home * { font-family: var(--fp-sans) !important; } html body #community-main-area #community-layers-home .fp-eye, html body #community-main-area #community-layers-home .fp-eye *, html body #community-main-area #community-layers-home .fp-link, html body #community-main-area #community-layers-home .fp-hero__count, html body #community-main-area #community-layers-home .fp-card__live, html body #community-main-area #community-layers-home .fp-card__lock, html body #community-main-area #community-layers-home .fp-row__room, html body #community-main-area #community-layers-home .fp-row__dur { font-family: var(--fp-mono) !important; } html body #community-main-area #community-layers-home i.fas, html body #community-main-area #community-layers-home i.fas::before { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important; font-weight: 900 !important; } html body #community-main-area #community-layers-home .fp-eye { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 11px; line-height: 1.2; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } html body #community-main-area #community-layers-home .fp-dot { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lh-accent) !important; } html body #community-main-area #community-layers-home .fp-link { flex: none; padding: 0 !important; border: 0 !important; background: transparent !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .12em; color: var(--lh-accent) !important; -webkit-text-fill-color: var(--lh-accent) !important; } /* the Lobby hero: always a dark photo card, words in white */ html body #community-main-area #community-layers-home .fp-hero { position: relative; margin: 4px 16px 0; min-height: 470px; border-radius: 26px; overflow: hidden; background: var(--lh-night) !important; display: flex; flex-direction: column; justify-content: space-between; } html body #community-main-area #community-layers-home .fp-hero, html body #community-main-area #community-layers-home .fp-hero * { color: var(--lh-snow) !important; -webkit-text-fill-color: var(--lh-snow) !important; } html body #community-main-area #community-layers-home .fp-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } html body #community-main-area #community-layers-home .fp-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 38%, rgba(0,0,0,.82) 72%, rgba(0,0,0,.94) 100%) !important; } html body #community-main-area #community-layers-home .fp-hero__top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 16px 0; } html body #community-main-area #community-layers-home .fp-hero__label { display: flex; flex-direction: column; gap: 6px; min-width: 0; } html body #community-main-area #community-layers-home .fp-hero__count { font-size: 11px; font-weight: 500; letter-spacing: .06em; opacity: .85; } html body #community-main-area #community-layers-home .fp-hero__stack { flex: 0 1 196px; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; } html body #community-main-area #community-layers-home .fp-bubble { display: flex !important; align-items: center; gap: 8px; width: 100%; min-height: 0 !important; padding: 6px 12px 6px 6px !important; border: 0 !important; border-radius: 999px !important; background: rgba(0,0,0,.58) !important; text-align: left !important; } html body #community-main-area #community-layers-home .fp-bubble__face { flex: none; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } html body #community-main-area #community-layers-home .fp-bubble__words { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; } html body #community-main-area #community-layers-home .fp-bubble__words b { font-size: 11px; font-weight: 800; } html body #community-main-area #community-layers-home .fp-bubble__words span { font-size: 12px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } html body #community-main-area #community-layers-home .fp-hero__foot { position: relative; padding: 0 16px 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } html body #community-main-area #community-layers-home .fp-title { margin: 0; width: 100%; font-size: 48px; line-height: .9; font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; letter-spacing: -.01em; text-transform: uppercase; overflow-wrap: normal; word-break: normal; hyphens: manual; } html body #community-main-area #community-layers-home .fp-hero__sub { font-size: 14px; font-weight: 600; opacity: .92; } html body #community-main-area #community-layers-home .fp-hero__go { margin-top: 6px !important; height: 44px !important; min-height: 44px !important; padding: 0 20px !important; border: 0 !important; border-radius: 999px !important; background: var(--lh-snow) !important; font-size: 15px !important; font-weight: 800 !important; } html body #community-main-area #community-layers-home .fp-hero .fp-hero__go { color: var(--lh-night) !important; -webkit-text-fill-color: var(--lh-night) !important; } /* sections */ html body #community-main-area #community-layers-home .fp-sec { margin: 30px 0 0; } html body #community-main-area #community-layers-home .fp-sec__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 16px 12px; padding-top: 14px; border-top: 2px solid var(--lh-ink) !important; } /* all rooms: tall cards */ html body #community-main-area #community-layers-home .fp-cards { display: flex; gap: 10px; padding: 0 16px 4px !important; scroll-padding-left: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; } html body #community-main-area #community-layers-home .fp-cards::-webkit-scrollbar { display: none; } html body #community-main-area #community-layers-home .fp-card { position: relative; flex: 0 0 158px; height: 236px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 20px !important; overflow: hidden; background: var(--lh-night) !important; display: flex !important; flex-direction: column; justify-content: space-between; text-align: left !important; scroll-snap-align: start; } html body #community-main-area #community-layers-home .fp-card__ring { position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--lh-accent) !important; pointer-events: none; } html body #community-main-area #community-layers-home .fp-card, html body #community-main-area #community-layers-home .fp-card * { color: var(--lh-snow) !important; -webkit-text-fill-color: var(--lh-snow) !important; } html body #community-main-area #community-layers-home .fp-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } html body #community-main-area #community-layers-home .fp-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.35) 52%, rgba(0,0,0,.9) 100%) !important; } html body #community-main-area #community-layers-home .fp-card.is-lobby .fp-card__shade { border-radius: inherit; } html body #community-main-area #community-layers-home .fp-card__top { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 12px 0; } html body #community-main-area #community-layers-home .fp-card__live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; } html body #community-main-area #community-layers-home .fp-card__lock { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--lh-snow) !important; font-size: 10px; font-weight: 700; letter-spacing: .04em; } html body #community-main-area #community-layers-home .fp-card .fp-card__lock, html body #community-main-area #community-layers-home .fp-card .fp-card__lock i, html body #community-main-area #community-layers-home .fp-card .fp-card__lock i::before { color: var(--lh-night) !important; -webkit-text-fill-color: var(--lh-night) !important; } html body #community-main-area #community-layers-home .fp-card__foot { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 0 12px 12px; } html body #community-main-area #community-layers-home .fp-card__name { font-size: 17px; font-weight: 850; line-height: 1.1; letter-spacing: -.01em; } html body #community-main-area #community-layers-home .fp-card__desc { font-size: 12px; font-weight: 500; line-height: 1.25; opacity: .88; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html body #community-main-area #community-layers-home .fp-faces { display: flex; align-items: center; margin-top: 3px; } html body #community-main-area #community-layers-home .fp-face { width: 22px; height: 22px; margin-right: -6px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--lh-night) !important; } html body #community-main-area #community-layers-home .fp-faces__more { margin-left: 12px; font-size: 11px; font-weight: 700; } html body #community-main-area #community-layers-home .fp-card--new { justify-content: center !important; align-items: center; gap: 10px; background: var(--lh-page) !important; box-shadow: inset 0 0 0 1.5px var(--lh-ink) !important; } html body #community-main-area #community-layers-home .fp-card--new, html body #community-main-area #community-layers-home .fp-card--new *, html body #community-main-area #community-layers-home .fp-card--new i::before { color: var(--lh-ink) !important; -webkit-text-fill-color: var(--lh-ink) !important; } html body #community-main-area #community-layers-home .fp-card__plus { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--lh-ink) !important; } /* from the rooms */ html body #community-main-area #community-layers-home .fp-rows { display: flex; flex-direction: column; } html body #community-main-area #community-layers-home .fp-row { display: flex; gap: 12px; margin: 0 16px; padding: 14px 0; border-bottom: 1px solid var(--lh-line) !important; cursor: pointer; -webkit-tap-highlight-color: transparent; } html body #community-main-area #community-layers-home .fp-row:last-child { border-bottom: 0 !important; } html body #community-main-area #community-layers-home .fp-row__thumb { position: relative; flex: none; width: 84px; height: 104px; border-radius: 14px; overflow: hidden; background: var(--lh-night) !important; } html body #community-main-area #community-layers-home .fp-row__thumb img, html body #community-main-area #community-layers-home .fp-row__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; } html body #community-main-area #community-layers-home .fp-row__dur { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 6px; background: var(--lh-scrim) !important; font-size: 10px; font-weight: 700; } html body #community-main-area #community-layers-home .fp-row .fp-row__dur { color: var(--lh-on-photo) !important; -webkit-text-fill-color: var(--lh-on-photo) !important; } html body #community-main-area #community-layers-home .fp-row__dur[hidden] { display: none !important; } /* A post's picture or video sits on the right; the words lead. */ html body #community-main-area #community-layers-home .fp-row__thumb { order: 2; } /* Bigger posts: larger words, picture, faces and actions; the ··· sits with the actions on the left instead of out at the far edge. */ html body #community-main-area #community-layers-home .fp-row { padding: 20px 0 !important; gap: 14px !important; } html body #community-main-area #community-layers-home .fp-row__thumb { width: 124px !important; height: 156px !important; border-radius: 16px !important; } html body #community-main-area #community-layers-home .fp-row__body { gap: 9px !important; } html body #community-main-area #community-layers-home .fp-row__meta { font-size: 15px !important; gap: 8px !important; } html body #community-main-area #community-layers-home .fp-row__face { width: 26px !important; height: 26px !important; } html body #community-main-area #community-layers-home .fp-row__text { font-size: 20px !important; line-height: 1.28 !important; font-weight: 600 !important; -webkit-line-clamp: 4 !important; } html body #community-main-area #community-layers-home .fp-row__acts { gap: 20px !important; } html body #community-main-area #community-layers-home .fp-stat { font-size: 15px !important; gap: 6px !important; } html body #community-main-area #community-layers-home .fp-stat i, html body #community-main-area #community-layers-home .fp-stat i::before { font-size: 17px !important; } html body #community-main-area #community-layers-home .fp-row__more { margin-left: 0 !important; font-size: 18px !important; width: 40px !important; } html body #community-main-area #community-layers-home .fp-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } html body #community-main-area #community-layers-home .fp-row__room { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; border: 1.5px solid var(--lh-ink) !important; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } html body #community-main-area #community-layers-home .fp-row__room .fp-dot { width: 6px; height: 6px; } html body #community-main-area #community-layers-home .fp-row__meta { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; } html body #community-main-area #community-layers-home .fp-row__meta b { font-weight: 800; } html body #community-main-area #community-layers-home .fp-row__meta span { color: var(--lh-dim) !important; -webkit-text-fill-color: var(--lh-dim) !important; } html body #community-main-area #community-layers-home .fp-row__face { flex: none; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; } html body #community-main-area #community-layers-home .fp-row__text { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 500; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } html body #community-main-area #community-layers-home .fp-row__acts { display: flex; align-items: center; gap: 16px; width: 100%; } html body #community-main-area #community-layers-home .fp-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; } html body #community-main-area #community-layers-home .fp-stat i, html body #community-main-area #community-layers-home .fp-stat i::before { font-size: 13px; color: var(--lh-ink) !important; -webkit-text-fill-color: var(--lh-ink) !important; } html body #community-main-area #community-layers-home .fp-row__more { margin-left: 0 !important; width: 36px; height: 28px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; font-size: 16px !important; font-weight: 900 !important; letter-spacing: .05em; text-align: center !important; } html body #community-main-area #community-layers-home .lh-loading { padding: 40px 18px; font-size: 14px; color: var(--lh-faint) !important; -webkit-text-fill-color: var(--lh-faint) !important; } /* the header on this page: " Community" and the community search */ #mobile-app-header-name .fp-hname { display: none; } /* "Community" rides under the name as a small second line, so a long app name never runs under the search button. */ body.community-active.community-layers-home-on #mobile-app-header-name { display: inline-flex !important; flex-direction: column !important; align-items: flex-start !important; line-height: 1.05 !important; white-space: nowrap !important; } body.community-active.community-layers-home-on #mobile-app-header-name .fp-hname { display: block; font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase; opacity: 0.75; margin-top: 2px; } #community-fp-search { display: none !important; } /* ------------------------------------------------------------ rooms view */ /* The nav's Rooms button (home.js roomsViewHtml): the hottest room as a photo hero, then the directory: search, access chips, Create a room (owner), and every room, most recently active first. Open space, no boxes around rows; the counts are small bubbles on their icon's top-right corner. */ html body #community-main-area #community-layers-home .rv { padding: 6px 0 calc(64px + env(safe-area-inset-bottom, 0px)); } /* the hero card */ html body #community-main-area #community-layers-home .rv-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; margin: 6px 16px 0; min-height: 300px; border-radius: 26px; overflow: hidden; background: var(--lh-night) !important; isolation: isolate; } html body #community-main-area #community-layers-home .rv-hero, html body #community-main-area #community-layers-home .rv-hero * { color: var(--lh-on-photo) !important; -webkit-text-fill-color: var(--lh-on-photo) !important; } html body #community-main-area #community-layers-home .rv-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } html body #community-main-area #community-layers-home .rv-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,.3) 52%, rgba(0,0,0,.86) 100%) !important; } html body #community-main-area #community-layers-home .rv-hero__eye { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; align-items: center; gap: 7px; font-family: var(--fp-mono) !important; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } html body #community-main-area #community-layers-home .rv-hero__foot { padding: 0 16px 16px; min-width: 0; } html body #community-main-area #community-layers-home .rv-hero__name { margin: 0; font-size: 58px; line-height: .86; font-weight: 900; font-stretch: 62%; text-transform: uppercase; letter-spacing: -.005em; overflow-wrap: anywhere; } html body #community-main-area #community-layers-home .rv-hero__say { display: flex !important; align-items: center; gap: 8px; max-width: 100%; width: max-content; margin: 12px 0 12px !important; padding: 6px 14px 6px 6px !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,.3) !important; background: rgba(0,0,0,.42) !important; font-size: 13.5px !important; line-height: 1.2; min-width: 0; } html body #community-main-area #community-layers-home .rv-hero__say span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } html body #community-main-area #community-layers-home .rv-hero__say b { font-weight: 800; } html body #community-main-area #community-layers-home .rv-hero__face { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; } html body #community-main-area #community-layers-home .rv-hero__row { display: flex; align-items: center; gap: 14px; min-width: 0; } html body #community-main-area #community-layers-home .rv-hero__counts { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--fp-mono) !important; font-size: 11px; font-weight: 600; opacity: .86; } html body #community-main-area #community-layers-home .rv-hero__go { margin-left: auto !important; flex: none; height: 36px; padding: 0 16px !important; border-radius: 999px !important; border: 0 !important; background: var(--lh-snow) !important; font-size: 14px !important; font-weight: 800 !important; } html body #community-main-area #community-layers-home .rv-hero .rv-hero__go { color: var(--lh-night) !important; -webkit-text-fill-color: var(--lh-night) !important; } html body #community-main-area #community-layers-home .rv-hero .fp-dot { background: var(--lh-accent) !important; } /* faces with their +N */ html body #community-main-area #community-layers-home .rv-faces { position: relative; display: inline-flex; align-items: center; flex: none; padding-right: 4px; } html body #community-main-area #community-layers-home .rv-face { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; margin-left: -6px; box-shadow: 0 0 0 2px var(--lh-page) !important; } html body #community-main-area #community-layers-home .rv-face:first-child { margin-left: 0; } html body #community-main-area #community-layers-home .rv-hero .rv-face { width: 22px; height: 22px; box-shadow: 0 0 0 2px rgba(0,0,0,.55) !important; } /* the +N bubble: ink on the page, ringed in the page colour */ html body #community-main-area #community-layers-home .rv-badge { position: absolute; top: -7px; right: -9px; z-index: 2; min-width: 18px; height: 17px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--lh-ink) !important; box-shadow: 0 0 0 2px var(--lh-page) !important; font-family: var(--fp-mono) !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -.02em; white-space: nowrap; color: var(--lh-page) !important; -webkit-text-fill-color: var(--lh-page) !important; } html body #community-main-area #community-layers-home .rv-badge--faces { top: -8px; right: -12px; } html body #community-main-area #community-layers-home .rv-hero .rv-badge { background: var(--lh-night) !important; box-shadow: 0 0 0 1.5px rgba(255,255,255,.45) !important; color: var(--lh-snow) !important; -webkit-text-fill-color: var(--lh-snow) !important; } /* search */ html body #community-main-area #community-layers-home .rv-search { display: flex; align-items: center; gap: 10px; margin: 22px 16px 0; height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--lh-edge) !important; background: transparent !important; } html body #community-main-area #community-layers-home .rv-search i { font-size: 15px; color: var(--lh-dim) !important; -webkit-text-fill-color: var(--lh-dim) !important; } html body #community-main-area #community-layers-home .rv-search__input { flex: 1; min-width: 0; height: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; font-size: 16px !important; font-weight: 500 !important; -webkit-appearance: none; appearance: none; } html body #community-main-area#community-main-area #community-layers-home#community-layers-home input.rv-search__input { color: var(--lh-ink) !important; -webkit-text-fill-color: var(--lh-ink) !important; caret-color: var(--lh-accent); background: transparent !important; } html body #community-main-area #community-layers-home .rv-search__input::placeholder { color: var(--lh-faint) !important; -webkit-text-fill-color: var(--lh-faint) !important; opacity: 1; } html body #community-main-area #community-layers-home .rv-search__input::-webkit-search-cancel-button { -webkit-appearance: none; } /* access chips; each count is the chip's corner bubble */ html body #community-main-area #community-layers-home .rv-chips { display: flex; flex-wrap: wrap; gap: 12px 10px; padding: 16px 16px 0; } html body #community-main-area #community-layers-home .rv-chip { position: relative; display: inline-flex !important; align-items: center; gap: 6px; height: 32px; padding: 0 14px !important; border-radius: 999px !important; border: 1px solid var(--lh-edge) !important; background: transparent !important; font-family: var(--fp-mono) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .02em; } html body #community-main-area #community-layers-home .rv-chip i { font-size: 9px; color: var(--lh-accent) !important; -webkit-text-fill-color: var(--lh-accent) !important; } html body #community-main-area #community-layers-home .rv-chip .fp-dot { width: 6px; height: 6px; } html body #community-main-area #community-layers-home .rv-chip__n { position: absolute; top: -7px; right: -6px; min-width: 17px; height: 16px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; background: var(--lh-ink) !important; box-shadow: 0 0 0 2px var(--lh-page) !important; font-family: var(--fp-mono) !important; font-size: 9.5px !important; font-weight: 800 !important; line-height: 1 !important; color: var(--lh-page) !important; -webkit-text-fill-color: var(--lh-page) !important; } html body #community-main-area #community-layers-home .rv-chip.is-on { background: var(--lh-accent) !important; border-color: var(--lh-accent) !important; color: var(--lh-on-accent) !important; -webkit-text-fill-color: var(--lh-on-accent) !important; } html body #community-main-area #community-layers-home .rv-chip.is-on i, html body #community-main-area #community-layers-home .rv-chip.is-on i::before { color: var(--lh-on-accent) !important; -webkit-text-fill-color: var(--lh-on-accent) !important; } html body #community-main-area #community-layers-home .rv-chip.is-on .fp-dot { background: var(--lh-on-accent) !important; } /* Create a room (owner) */ html body #community-main-area #community-layers-home .rv-create { display: flex !important; align-items: center; gap: 14px; width: calc(100% - 32px) !important; margin: 22px 16px 0 !important; padding: 12px 14px 12px 12px !important; border-radius: 20px !important; border: 1.5px dashed color-mix(in srgb, var(--lh-accent) 70%, transparent) !important; background: transparent !important; } html body #community-main-area #community-layers-home .rv-create__plus { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--lh-accent) !important; } html body #community-main-area #community-layers-home .rv-create__plus i, html body #community-main-area #community-layers-home .rv-create__plus i::before { font-size: 16px; color: var(--lh-on-accent) !important; -webkit-text-fill-color: var(--lh-on-accent) !important; } html body #community-main-area #community-layers-home .rv-create__words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } html body #community-main-area #community-layers-home .rv-create__words b { font-size: 16px; font-weight: 800; } html body #community-main-area #community-layers-home .rv-create__words small { font-size: 12.5px; line-height: 1.3; color: var(--lh-dim) !important; -webkit-text-fill-color: var(--lh-dim) !important; } html body #community-main-area #community-layers-home .rv-create__chev { font-size: 12px; color: var(--lh-faint) !important; -webkit-text-fill-color: var(--lh-faint) !important; } /* the ranked list */ html body #community-main-area #community-layers-home .rv-sort { display: flex; align-items: center; gap: 8px; margin: 0; padding: 28px 20px 4px; font-family: var(--fp-mono) !important; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } html body #community-main-area #community-layers-home .rv-sort span { font-family: var(--fp-mono) !important; color: var(--lh-faint) !important; -webkit-text-fill-color: var(--lh-faint) !important; } html body #community-main-area #community-layers-home .rv-sort b { font-family: var(--fp-mono) !important; font-weight: 700; } html body #community-main-area #community-layers-home .rv-row { display: flex; gap: 8px; padding: 16px 16px 18px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; } html body #community-main-area #community-layers-home .rv-row[hidden] { display: none !important; } html body #community-main-area #community-layers-home .rv-row + .rv-row { border-top: 1px solid var(--lh-line) !important; } html body #community-main-area #community-layers-home .rv-row__main { flex: 1; min-width: 0; } html body #community-main-area #community-layers-home .rv-row__head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } html body #community-main-area #community-layers-home .rv-row__icon { position: relative; flex: none; width: 42px; height: 42px; } html body #community-main-area #community-layers-home .rv-row__name { padding-top: 2px; } html body #community-main-area #community-layers-home .rv-go { margin-top: 5px !important; } html body #community-main-area #community-layers-home .rv-row__av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block; } html body #community-main-area #community-layers-home .rv-row__av.is-initial { display: grid; place-items: center; background: var(--lh-accent) !important; font-size: 20px; font-weight: 900; color: var(--lh-on-accent) !important; -webkit-text-fill-color: var(--lh-on-accent) !important; } html body #community-main-area #community-layers-home .rv-row__av.is-initial i, html body #community-main-area #community-layers-home .rv-row__av.is-initial i::before { font-size: 15px; color: var(--lh-on-accent) !important; -webkit-text-fill-color: var(--lh-on-accent) !important; } html body #community-main-area #community-layers-home .rv-row.is-locked img.rv-row__av { filter: blur(2px) brightness(.6); } html body #community-main-area #community-layers-home .rv-row__name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } html body #community-main-area #community-layers-home .rv-row__name b { font-size: 17px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html body #community-main-area #community-layers-home .rv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; min-width: 0; font-family: var(--fp-mono) !important; font-size: 10.5px; font-weight: 500; line-height: 1.5; color: var(--lh-faint) !important; -webkit-text-fill-color: var(--lh-faint) !important; } html body #community-main-area #community-layers-home .rv-meta * { font-family: var(--fp-mono) !important; color: var(--lh-faint) !important; -webkit-text-fill-color: var(--lh-faint) !important; } html body #community-main-area #community-layers-home .rv-meta__bit { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } html body #community-main-area #community-layers-home .rv-meta .rv-faces { padding-right: 0; margin-right: 1px; } html body #community-main-area #community-layers-home .rv-meta .rv-face { width: 16px; height: 16px; margin-left: -5px; box-shadow: 0 0 0 1.5px var(--lh-page) !important; } html body #community-main-area #community-layers-home .rv-meta .rv-face:first-child { margin-left: 0; } html body #community-main-area #community-layers-home .rv-meta .fp-dot { width: 6px; height: 6px; background: var(--lh-accent) !important; } html body #community-main-area #community-layers-home .rv-row__title { display: flex; align-items: center; gap: 8px; min-width: 0; } html body #community-main-area #community-layers-home .rv-tag { flex: none; display: inline-flex; align-items: center; gap: 4px; font-family: var(--fp-mono) !important; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--lh-accent) !important; -webkit-text-fill-color: var(--lh-accent) !important; } html body #community-main-area #community-layers-home .rv-tag i, html body #community-main-area #community-layers-home .rv-tag i::before { font-size: 9px; color: var(--lh-accent) !important; -webkit-text-fill-color: var(--lh-accent) !important; } html body #community-main-area #community-layers-home .rv-go { flex: none; display: inline-flex !important; align-items: center; gap: 6px; height: 32px; padding: 0 16px !important; border-radius: 999px !important; border: 1.5px solid var(--lh-ink) !important; background: transparent !important; font-size: 13px !important; font-weight: 800 !important; } html body #community-main-area #community-layers-home .rv-go.is-locked { border-color: var(--lh-accent) !important; background: var(--lh-accent) !important; color: var(--lh-on-accent) !important; -webkit-text-fill-color: var(--lh-on-accent) !important; } html body #community-main-area #community-layers-home .rv-go.is-locked i, html body #community-main-area #community-layers-home .rv-go.is-locked i::before { font-size: 10px; color: var(--lh-on-accent) !important; -webkit-text-fill-color: var(--lh-on-accent) !important; } html body #community-main-area #community-layers-home .rv-row__desc { margin: 10px 0 0 54px; font-size: 13.5px; line-height: 1.35; color: var(--lh-dim) !important; -webkit-text-fill-color: var(--lh-dim) !important; } html body #community-main-area #community-layers-home .rv-peek { display: flex !important; align-items: center; gap: 8px; width: calc(100% - 54px) !important; margin: 10px 0 0 54px !important; padding: 0 !important; border: 0 !important; background: transparent !important; font-size: 13.5px !important; min-width: 0; } html body #community-main-area #community-layers-home .rv-peek__face { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; } html body #community-main-area #community-layers-home .rv-peek__words { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html body #community-main-area #community-layers-home .rv-peek__words b { font-weight: 800; } html body #community-main-area #community-layers-home .rv-peek__pic { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; } html body #community-main-area #community-layers-home .rv-peek.is-locked, html body #community-main-area #community-layers-home .rv-peek.is-locked * { font-family: var(--fp-mono) !important; font-size: 11.5px !important; font-weight: 700; color: var(--lh-accent) !important; -webkit-text-fill-color: var(--lh-accent) !important; } html body #community-main-area #community-layers-home .rv-peek.is-locked i, html body #community-main-area #community-layers-home .rv-peek.is-locked i::before { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important; font-weight: 900 !important; font-size: 10px !important; } html body #community-main-area #community-layers-home .rv-none { margin: 24px 20px; font-size: 14px; color: var(--lh-dim) !important; -webkit-text-fill-color: var(--lh-dim) !important; } html body #community-main-area #community-layers-home .rv-none[hidden] { display: none !important; } /* Glass: the search, chips and Create a room are frosted; the list stays open. */ html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .rv-hero { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28) !important; } html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .rv-search, html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .rv-chip:not(.is-on), html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .rv-create { background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.3) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22) !important; } html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .rv-badge, html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .rv-chip__n { background: #ffffff !important; box-shadow: 0 0 0 2px rgba(0,0,0,.35) !important; color: #0b0b0c !important; -webkit-text-fill-color: #0b0b0c !important; } html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .rv-face, html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .rv-meta .rv-face { box-shadow: 0 0 0 2px rgba(0,0,0,.35) !important; } html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .rv-row + .rv-row { border-top-color: rgba(255,255,255,.16) !important; } html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .rv-go:not(.is-locked) { background: #ffffff !important; border-color: #ffffff !important; color: #0b0b0c !important; -webkit-text-fill-color: #0b0b0c !important; } /* Inside a room: mobile-community/room.js draws and styles the room screen. */ /* Front page ALL ROOMS: the doorways in one sideways row, every door the same size (the Lobby keeps its accent, not the full-width arch). */ html body #community-main-area #community-layers-home .fp-doors { display: flex; gap: 14px; overflow-x: auto; padding: 2px 16px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } html body #community-main-area #community-layers-home .fp-doors::-webkit-scrollbar { display: none; } html body #community-main-area #community-layers-home .fp-doors .lh-door { flex: 0 0 156px; scroll-snap-align: start; grid-column: auto; } html body #community-main-area #community-layers-home .fp-doors .lh-door .lh-door__arch, html body #community-main-area #community-layers-home .fp-doors .lh-door.is-lobby .lh-door__arch { height: 196px; border-radius: 999px 999px 18px 18px; } html body #community-main-area #community-layers-home .fp-doors .lh-door.is-lobby .lh-door__arch { border-color: var(--lh-accent) !important; } html body #community-main-area #community-layers-home .fp-doors .lh-door.is-lobby .lh-door__words { align-items: flex-start; text-align: left; } html body #community-main-area #community-layers-home .fp-doors .lh-door.is-lobby .lh-door__name { font-size: inherit; } html body #community-main-area #community-layers-home .fp-doors .lh-door.is-lobby .lh-door__initial { font-size: 64px; } html body #community-main-area #community-layers-home .fp-doors .lh-door__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* The Rooms view: the header reads "Rooms / · N layers" instead of " / Community", and the page's own title steps aside. The name's own text is a bare text node, so it is hidden with font-size 0. */ #mobile-app-header-name .fp-hrooms { display: none; } html.fp-rooms-view body.community-active.community-layers-home-on #mobile-app-header-name { font-size: 0 !important; } html.fp-rooms-view body.community-active.community-layers-home-on #mobile-app-header-name .fp-hname { display: none !important; } html.fp-rooms-view body.community-active.community-layers-home-on #mobile-app-header-name .fp-hrooms { display: flex !important; flex-direction: column; align-items: flex-start; line-height: 1.05; } html.fp-rooms-view body.community-active.community-layers-home-on #mobile-app-header-name .fp-hrooms b { font-size: 17px !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: -0.01em; } html.fp-rooms-view body.community-active.community-layers-home-on #mobile-app-header-name .fp-hrooms small { font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase; opacity: 0.75; margin-top: 2px; } html.fp-rooms-view #community-main-area #community-layers-home .lh-rooms__title, html.fp-rooms-view #community-main-area #community-layers-home .lh-rooms__sub { display: none !important; } /* The doorway row keeps its left gutter when it snaps. */ html body #community-main-area #community-layers-home .fp-doors { scroll-padding-inline: 16px; } /* FROM THE ROOMS: the heading centred, "More live posts" at the foot. */ html body #community-main-area #community-layers-home .fp-sec--feed .fp-sec__head { justify-content: center; } html body #community-main-area #community-layers-home .fp-more { display: flex !important; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; width: calc(100% - 32px) !important; margin: 8px 16px 24px !important; height: 48px; padding: 0 16px !important; border-radius: 999px !important; border: 1.5px solid var(--lh-ink) !important; background: transparent !important; color: var(--lh-ink) !important; -webkit-text-fill-color: var(--lh-ink) !important; font-family: var(--fp-mono) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .12em; text-transform: uppercase; } /* ALL ROOMS on the front page: two doors across, each wider and taller, with more room between them; the row still scrolls sideways. */ html body #community-main-area #community-layers-home .fp-doors { gap: 18px !important; } html body #community-main-area #community-layers-home .fp-doors .lh-door { flex: 0 0 calc((100% - 18px) / 2) !important; } html body #community-main-area #community-layers-home .fp-doors .lh-door .lh-door__arch, html body #community-main-area #community-layers-home .fp-doors .lh-door.is-lobby .lh-door__arch { height: 228px !important; } /* The +1's count: a small ink bubble on the cube's top-right corner. */ html body #community-main-area #community-layers-home .fp-stat--like { position: relative; min-width: 30px; } html body #community-main-area #community-layers-home .fp-stat--like .fp-bubble-count { position: absolute; top: -8px; left: 11px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; box-sizing: border-box !important; background: var(--lh-ink) !important; box-shadow: 0 0 0 2px var(--lh-page) !important; font-family: var(--fp-mono, ui-monospace, monospace) !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; color: var(--lh-page) !important; -webkit-text-fill-color: var(--lh-page) !important; } /* The app's pin to all rooms, leading FROM THE ROOMS. */ html body #community-main-area #community-layers-home .fp-pinned { display: inline-flex; align-items: center; gap: 7px; font-family: var(--fp-mono, ui-monospace, monospace) !important; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: var(--lh-accent) !important; -webkit-text-fill-color: var(--lh-accent) !important; } html body #community-main-area #community-layers-home .fp-pinned i, html body #community-main-area #community-layers-home .fp-pinned i::before { font-size: 10px; transform: rotate(35deg); color: var(--lh-accent) !important; -webkit-text-fill-color: var(--lh-accent) !important; } /* X-style row: the face is its own column on the left, the words and the actions fill the rest, and the actions spread across the row so nothing sits bunched to the left. */ html body #community-main-area #community-layers-home .fp-row .fp-row__face { order: 0; flex: none; width: 44px !important; height: 44px !important; border-radius: 50%; object-fit: cover; margin-top: 2px; } html body #community-main-area #community-layers-home .fp-row__body { order: 1; } html body #community-main-area #community-layers-home .fp-row__meta { flex-wrap: wrap; row-gap: 4px; } html body #community-main-area #community-layers-home .fp-row__meta .fp-row__room { margin-left: 4px; height: 20px; padding: 0 8px; font-size: 9px; } html body #community-main-area #community-layers-home .fp-row__acts { justify-content: space-between !important; gap: 0 !important; padding-right: 4px; } html body #community-main-area #community-layers-home .fp-row__text { font-size: 18px !important; } /* Web addresses in a post are blue links, on the home's FROM THE ROOMS rows and in a room's posts, in every theme. The ids outrank the theme sweeps that paint every descendant black or white. */ html body #community-main-area #community-layers-home .fp-row__text a.fp-url, html body #mobile-community-room .crc .crc__text a.community-room-message__link { color: #3b8bff !important; -webkit-text-fill-color: #3b8bff !important; text-decoration: underline !important; text-underline-offset: 2px; overflow-wrap: anywhere; word-break: break-word; pointer-events: auto !important; } /* ------------------------------------------------------------ under the Lobby */ /* home.js chipsHtml / numbersHtml / timelineHtml: the rooms as chips, three real numbers, and WHAT'S HAPPENING, one timeline split by day. Open space, no cards: the only lines are the timeline's own rule. */ html body #community-main-area #community-layers-home .fp-sec--chips { margin: 22px 0 0; } html body #community-main-area #community-layers-home .fp-chips { display: flex; gap: 8px; padding: 2px 16px 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } html body #community-main-area #community-layers-home .fp-chips::-webkit-scrollbar { display: none; } html body #community-main-area #community-layers-home .fp-chip { flex: none; display: inline-flex !important; align-items: center; gap: 8px; height: 42px !important; min-height: 0 !important; padding: 0 14px 0 4px !important; border: 1.5px solid var(--lh-edge) !important; border-radius: 999px !important; background: transparent !important; font-size: 14px !important; font-weight: 700 !important; white-space: nowrap; transition: transform .14s ease; } html body #community-main-area #community-layers-home .fp-chip:active { transform: scale(.96); } html body #community-main-area #community-layers-home .fp-chip.is-fresh { border-color: var(--lh-accent) !important; } html body #community-main-area #community-layers-home .fp-chip.is-locked b { opacity: .72; } html body #community-main-area #community-layers-home .fp-chip b { font-weight: 700; } html body #community-main-area #community-layers-home .fp-chip__img { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; } html body #community-main-area #community-layers-home .fp-chip__img.is-initial { display: grid; place-items: center; background: var(--lh-accent) !important; font-size: 15px; font-weight: 900; color: var(--lh-on-accent) !important; -webkit-text-fill-color: var(--lh-on-accent) !important; } html body #community-main-area #community-layers-home .fp-chip.is-locked .fp-chip__img.is-initial, html body #community-main-area #community-layers-home .fp-chip--new .fp-chip__img.is-initial { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--lh-edge) !important; color: var(--lh-ink) !important; -webkit-text-fill-color: var(--lh-ink) !important; } html body #community-main-area #community-layers-home .fp-chip i, html body #community-main-area #community-layers-home .fp-chip i::before { font-size: 12px !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; } html body #community-main-area #community-layers-home .fp-chip .fp-chip__lock, html body #community-main-area #community-layers-home .fp-chip .fp-chip__lock::before { font-size: 11px !important; color: var(--lh-dim) !important; -webkit-text-fill-color: var(--lh-dim) !important; } html body #community-main-area #community-layers-home .fp-chip--new { border-style: dashed !important; } html body #community-main-area #community-layers-home .fp-tl__meta time { font-family: var(--fp-mono) !important; } /* MOST ACTIVE ROOMS · 30D and MEMBERS: two compact lists, open space. */ html body #community-main-area #community-layers-home .fp-sec--side { margin: 28px 0 0; padding: 0 20px; } html body #community-main-area #community-layers-home .fp-side__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } html body #community-main-area #community-layers-home .fp-side__sub { color: var(--lh-faint) !important; -webkit-text-fill-color: var(--lh-faint) !important; } html body #community-main-area #community-layers-home .fp-bars { display: flex; flex-direction: column; gap: 12px; } html body #community-main-area #community-layers-home .fp-bar { display: flex !important; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; text-align: left !important; } html body #community-main-area #community-layers-home .fp-bar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } html body #community-main-area #community-layers-home .fp-bar__top b { font-size: 15px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } html body #community-main-area #community-layers-home .fp-bar__top span { flex: none; font-family: var(--fp-mono) !important; font-size: 11px; font-weight: 600; color: var(--lh-dim) !important; -webkit-text-fill-color: var(--lh-dim) !important; } html body #community-main-area #community-layers-home .fp-bar__track { display: block; height: 3px; border-radius: 3px; overflow: hidden; background: var(--lh-line) !important; } html body #community-main-area #community-layers-home .fp-bar__fill { display: block; height: 100%; border-radius: 3px; background: var(--lh-accent) !important; opacity: .5; } html body #community-main-area #community-layers-home .fp-bar.is-lead .fp-bar__fill { opacity: 1; } html body #community-main-area #community-layers-home .fp-bar:active .fp-bar__top b { opacity: .6; } html body #community-main-area #community-layers-home .fp-mem { display: block !important; width: 100%; height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; text-align: left !important; } html body #community-main-area #community-layers-home .fp-mem__all { font-family: var(--fp-mono) !important; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lh-accent) !important; -webkit-text-fill-color: var(--lh-accent) !important; } html body #community-main-area #community-layers-home .fp-mem__faces { display: flex; align-items: center; padding-left: 4px; } html body #community-main-area #community-layers-home .fp-mem__face { width: 38px; height: 38px; margin-left: -9px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--lh-page) !important; background: var(--lh-line) !important; } html body #community-main-area #community-layers-home .fp-mem__face:first-child { margin-left: -4px; } html body #community-main-area #community-layers-home .fp-mem__face.is-owner { box-shadow: 0 0 0 2px var(--lh-page), 0 0 0 4px var(--lh-accent) !important; } html body #community-main-area #community-layers-home .fp-mem__more { margin-left: 10px; font-family: var(--fp-mono) !important; font-size: 12px; font-weight: 700; color: var(--lh-dim) !important; -webkit-text-fill-color: var(--lh-dim) !important; } html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .fp-mem__face { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55) !important; } html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .fp-mem__face.is-owner { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 0 4px var(--lh-accent) !important; } html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .fp-bar__track { background: rgba(255, 255, 255, 0.18) !important; } /* The members sheet (home.js openMembers), on : the home's colours ride in as inline tokens. The ids outrank the page's theme sweeps. */ html body #fp-people-sheet#fp-people-sheet { position: fixed; inset: 0; z-index: 2147480000; display: flex; align-items: flex-end; background: rgba(0, 0, 0, 0.45) !important; font-family: "Archivo", var(--font-family, system-ui), sans-serif !important; } html body #fp-people-sheet#fp-people-sheet * { box-sizing: border-box; font-family: "Archivo", var(--font-family, system-ui), sans-serif !important; color: var(--lh-ink) !important; -webkit-text-fill-color: var(--lh-ink) !important; } html body #fp-people-sheet#fp-people-sheet .fp-ps__card { width: 100%; max-height: 82vh; display: flex; flex-direction: column; padding: 8px 0 calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; background: var(--ps-bg) !important; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25); } html body #fp-people-sheet#fp-people-sheet.is-glass .fp-ps__card { border: 1px solid rgba(255, 255, 255, 0.3) !important; border-bottom: 0 !important; -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); } html body #fp-people-sheet#fp-people-sheet .fp-ps__grip { width: 40px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: var(--lh-edge) !important; } html body #fp-people-sheet#fp-people-sheet .fp-ps__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 20px 12px; } html body #fp-people-sheet#fp-people-sheet .fp-ps__head b { font-size: 20px; font-weight: 850; } html body #fp-people-sheet#fp-people-sheet .fp-ps__x { width: 36px; height: 36px; min-height: 0; padding: 0; margin: 0; border: 0 !important; border-radius: 50% !important; background: var(--lh-line) !important; font-size: 14px; font-weight: 800; line-height: 1; cursor: pointer; } html body #fp-people-sheet#fp-people-sheet .fp-ps__find { display: flex; align-items: center; gap: 10px; margin: 0 20px 8px; padding: 0 14px; height: 42px; border-radius: 999px; border: 1.5px solid var(--lh-edge) !important; background: transparent !important; } html body #fp-people-sheet#fp-people-sheet .fp-ps__find i, html body #fp-people-sheet#fp-people-sheet .fp-ps__find i::before { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important; font-weight: 900 !important; font-size: 13px; color: var(--lh-dim) !important; -webkit-text-fill-color: var(--lh-dim) !important; } html body #fp-people-sheet#fp-people-sheet .fp-ps__find input { flex: 1; min-width: 0; height: 100%; border: 0 !important; outline: 0; background: transparent !important; font-size: 16px; box-shadow: none !important; padding: 0; } html body #fp-people-sheet#fp-people-sheet .fp-ps__list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 0; } html body #fp-people-sheet#fp-people-sheet .fp-ps__row { display: flex; align-items: center; gap: 12px; padding: 10px 20px; text-decoration: none !important; } html body #fp-people-sheet#fp-people-sheet .fp-ps__row[hidden] { display: none !important; } html body #fp-people-sheet#fp-people-sheet .fp-ps__face { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--lh-line) !important; } html body #fp-people-sheet#fp-people-sheet .fp-ps__words { display: flex; flex-direction: column; gap: 2px; min-width: 0; } html body #fp-people-sheet#fp-people-sheet .fp-ps__name { display: flex; align-items: center; gap: 8px; min-width: 0; } html body #fp-people-sheet#fp-people-sheet .fp-ps__name b { font-size: 16px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html body #fp-people-sheet#fp-people-sheet .fp-ps__owner, html body #fp-people-sheet#fp-people-sheet .fp-ps__when, html body #fp-people-sheet#fp-people-sheet .fp-ps__foot { font-family: "JetBrains Mono", ui-monospace, monospace !important; } html body #fp-people-sheet#fp-people-sheet .fp-ps__owner { flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; color: var(--lh-accent) !important; -webkit-text-fill-color: var(--lh-accent) !important; } html body #fp-people-sheet#fp-people-sheet .fp-ps__when { font-size: 11px; color: var(--lh-dim) !important; -webkit-text-fill-color: var(--lh-dim) !important; } html body #fp-people-sheet#fp-people-sheet .fp-ps__foot { padding: 14px 20px 4px; font-size: 11px; letter-spacing: .06em; color: var(--lh-faint) !important; -webkit-text-fill-color: var(--lh-faint) !important; } html body #fp-people-sheet#fp-people-sheet .fp-ps__foot[hidden] { display: none !important; } html body #community-main-area #community-layers-home .fp-sec--happening { margin: 0; } html body #community-main-area #community-layers-home .fp-happening { margin: 0; padding: 34px 20px 6px; font-size: 38px; line-height: .95; font-weight: 900; font-stretch: 66%; font-variation-settings: "wdth" 66; letter-spacing: -.005em; text-transform: uppercase; } html body #community-main-area #community-layers-home .fp-line { position: relative; padding: 0 0 8px; } html body #community-main-area #community-layers-home .fp-line::before { content: ""; position: absolute; left: 37px; top: 14px; bottom: 24px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--lh-accent), var(--lh-line) 240px) !important; } html body #community-main-area #community-layers-home .fp-tl-day { position: relative; padding: 22px 16px 6px 64px; } html body #community-main-area #community-layers-home .fp-tl-day::before { content: ""; position: absolute; left: 31px; top: 23px; width: 14px; height: 14px; box-sizing: border-box !important; border-radius: 50%; border: 2px solid var(--lh-accent) !important; background: var(--lh-page) !important; } html body #community-main-area #community-layers-home .fp-tl-day .fp-eye { color: var(--lh-accent) !important; -webkit-text-fill-color: var(--lh-accent) !important; } html body #community-main-area #community-layers-home .fp-tl { position: relative; display: block; padding: 10px 16px 10px 64px; cursor: pointer; -webkit-tap-highlight-color: transparent; } html body #community-main-area #community-layers-home .fp-tl__face { position: absolute; left: 22px; top: 10px; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--lh-page) !important; } html body #community-main-area #community-layers-home .fp-tl__body { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 3px; } html body #community-main-area #community-layers-home .fp-tl .fp-pinned { margin-bottom: 2px; } html body #community-main-area #community-layers-home .fp-tl .fp-tl__rebyte { display: block; margin-bottom: 1px; font-family: var(--fp-mono, ui-monospace, monospace) !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.35 !important; text-decoration: none !important; color: var(--lh-dim) !important; -webkit-text-fill-color: var(--lh-dim) !important; } html body #community-main-area #community-layers-home .fp-tl__meta { display: flex; align-items: baseline; gap: 5px; min-width: 0; font-size: 13.5px; line-height: 1.3; } html body #community-main-area #community-layers-home .fp-tl__meta b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } html body #community-main-area #community-layers-home .fp-tl__in { flex: none; color: var(--lh-faint) !important; -webkit-text-fill-color: var(--lh-faint) !important; } html body #community-main-area #community-layers-home .fp-tl__room { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; text-decoration: underline; text-decoration-color: var(--lh-accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } html body #community-main-area #community-layers-home .fp-tl__meta time { flex: none; margin-left: auto; padding-left: 8px; font-size: 10.5px; font-weight: 500; color: var(--lh-faint) !important; -webkit-text-fill-color: var(--lh-faint) !important; } html body #community-main-area #community-layers-home .fp-tl__text { margin: 0; font-size: 19px; line-height: 1.24; font-weight: 700; letter-spacing: -.005em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } html body #community-main-area #community-layers-home .fp-tl__media { position: relative; display: block; margin-top: 10px; height: 260px; border-radius: 20px; overflow: hidden; background: var(--lh-night) !important; } html body #community-main-area #community-layers-home .fp-tl__media img, html body #community-main-area #community-layers-home .fp-tl__media video { width: 100%; height: 100%; object-fit: cover; display: block; } html body #community-main-area #community-layers-home .fp-tl__dur { position: absolute; left: 10px; bottom: 10px; padding: 3px 7px; border-radius: 7px; background: var(--lh-scrim) !important; font-family: var(--fp-mono) !important; font-size: 10px; font-weight: 700; color: var(--lh-on-photo) !important; -webkit-text-fill-color: var(--lh-on-photo) !important; } html body #community-main-area #community-layers-home .fp-tl__dur[hidden] { display: none !important; } /* The action row, Reddit-style: soft pills tinted from the ink, left- aligned under the text column, icon and count inline in each. */ html body #community-main-area #community-layers-home .fp-tl__acts { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 6px; margin-top: 6px; } html body #community-main-area #community-layers-home .fp-tl .fp-act { position: static !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px !important; min-width: 0 !important; height: 36px !important; min-height: 0 !important; margin: 0 !important; padding: 0 11px !important; border: 0 !important; border-radius: 999px !important; background: color-mix(in srgb, var(--lh-ink) 8%, transparent) !important; box-shadow: none !important; font-size: 13px !important; line-height: 1 !important; } html body #community-main-area #community-layers-home .fp-tl .fp-act i, html body #community-main-area #community-layers-home .fp-tl .fp-act i::before { width: 16px; text-align: center; font-size: 15px !important; line-height: 1 !important; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important; font-weight: 900 !important; color: var(--lh-dim) !important; -webkit-text-fill-color: var(--lh-dim) !important; } html body #community-main-area #community-layers-home .fp-tl .fp-act { overflow: visible !important; } html body #community-main-area #community-layers-home .fp-tl .fp-act.has-badge { position: relative !important; } html body #community-main-area #community-layers-home .fp-tl .fp-act__ico { position: static; display: inline-flex; align-items: center; } html body #community-main-area #community-layers-home .fp-tl .fp-act__word { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0; color: var(--lh-dim) !important; -webkit-text-fill-color: var(--lh-dim) !important; } /* The signature count: a small bubble on the pill's top-right corner, clear of the icon, the ink on the page (dark on light), ringed in the page colour. */ html body #community-main-area #community-layers-home .fp-tl .fp-badge { position: absolute; top: -9px; right: -4px; left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; box-sizing: border-box !important; background: var(--lh-ink) !important; box-shadow: 0 0 0 2px var(--lh-page) !important; font-family: var(--fp-mono) !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -.02em; white-space: nowrap; color: var(--lh-page) !important; -webkit-text-fill-color: var(--lh-page) !important; } html body #community-main-area #community-layers-home .fp-tl .fp-act.is-on .fp-badge { background: var(--lh-accent) !important; color: var(--lh-on-accent) !important; -webkit-text-fill-color: var(--lh-on-accent) !important; } html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .fp-tl .fp-badge { background: #ffffff !important; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35) !important; color: #0b0b0c !important; -webkit-text-fill-color: #0b0b0c !important; } html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .fp-tl .fp-act.is-on .fp-badge { background: var(--lh-accent) !important; color: var(--lh-on-accent) !important; -webkit-text-fill-color: var(--lh-on-accent) !important; } html body #community-main-area #community-layers-home .fp-tl .fp-act.is-on { background: color-mix(in srgb, var(--lh-accent) 16%, transparent) !important; } html body #community-main-area #community-layers-home .fp-tl .fp-act.is-on i, html body #community-main-area #community-layers-home .fp-tl .fp-act.is-on i::before { color: var(--lh-accent) !important; -webkit-text-fill-color: var(--lh-accent) !important; } html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .fp-tl .fp-act { background: rgba(255, 255, 255, 0.14) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important; } html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .fp-tl .fp-act.is-on { background: color-mix(in srgb, var(--lh-accent) 24%, rgba(255, 255, 255, 0.1)) !important; } /* ··· on the header line, after the time. */ html body #community-main-area #community-layers-home .fp-tl__meta { align-items: center; } html body #community-main-area #community-layers-home .fp-tl__meta time { padding-left: 8px; } html body #community-main-area #community-layers-home .fp-tl__more { flex: none; width: 30px !important; height: 22px !important; min-height: 0 !important; margin: 0 -6px 0 2px !important; padding: 0 !important; border: 0 !important; background: transparent !important; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: .04em; text-align: center !important; color: var(--lh-dim) !important; -webkit-text-fill-color: var(--lh-dim) !important; } html body #community-main-area #community-layers-home .fp-tl__text a.fp-url { color: #3b8bff !important; -webkit-text-fill-color: #3b8bff !important; text-decoration: underline !important; text-underline-offset: 2px; pointer-events: auto !important; } html body #community-main-area #community-layers-home .fp-sec--happening .fp-more { margin-top: 18px !important; } /* Glass: the chips are frosted pills; the timeline stays open on the photo. */ html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .fp-chip { background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; } html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .fp-chip.is-fresh { border: 1.5px solid rgba(255, 255, 255, 0.85) !important; } html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .fp-tl__face, html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .fp-tl-day::before { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35) !important; } html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .fp-tl-day::before { background: rgba(40, 30, 24, 0.9) !important; } html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .fp-tl__media { background: rgba(0, 0, 0, 0.3) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), var(--gl-shadow) !important; } @media (prefers-reduced-motion: reduce) { html body #community-main-area #community-layers-home .fp-chip { transition: none; } } /* Every tab's header pill: "" over the tab's own name (mobile-header-tabname.js). Replaces the Community-only "Community" line. */ #mobile-app-header-name .fp-hname { display: none !important; } #mobile-app-header-name .mah-tabname { display: none; } body.mah-tab-on #mobile-app-header-name { display: inline-flex !important; flex-direction: column !important; align-items: flex-start !important; line-height: 1.05 !important; white-space: nowrap !important; } body.mah-tab-on #mobile-app-header-name .mah-tabname { display: block; font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase; opacity: 0.75; margin-top: 2px; } html.fp-rooms-view body.community-active.community-layers-home-on #mobile-app-header-name .mah-tabname { display: none !important; } /* WHAT'S HAPPENING, the activity stream: everything that is not a post (joins, blips, rebytes, ...) is one compact line on the same rail, a small face or icon, who did what where, the time, and a small picture when there is one, so it never competes with a post's rich row. */ html body #community-main-area #community-layers-home .fp-tl.fp-tl--sys { display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 64px; min-height: 40px; } html body #community-main-area #community-layers-home .fp-tl--sys .fp-tl__body { flex: 1 1 auto; gap: 0; } html body #community-main-area #community-layers-home .fp-tl--sys .fp-tl__face { left: 25px; top: 50%; width: 26px; height: 26px; margin-top: -13px; } html body #community-main-area #community-layers-home .fp-tl--sys .fp-tl__meta { font-size: 13px; } html body #community-main-area #community-layers-home .fp-tl--sys .fp-tl__meta b { font-weight: 750; } html body #community-main-area #community-layers-home .fp-tl__ico { position: absolute; left: 25px; top: 50%; width: 26px; height: 26px; margin-top: -13px; box-sizing: border-box !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--lh-line) !important; background: var(--lh-page) !important; box-shadow: 0 0 0 3px var(--lh-page) !important; } html body #community-main-area #community-layers-home .fp-tl__ico i, html body #community-main-area #community-layers-home .fp-tl__ico i::before, html body #community-main-area #community-layers-home .fp-tl__thumb.is-icon i, html body #community-main-area #community-layers-home .fp-tl__thumb.is-icon i::before { font-size: 11px !important; color: var(--lh-accent) !important; -webkit-text-fill-color: var(--lh-accent) !important; } html body #community-main-area #community-layers-home .fp-tl__faces { flex: none; margin: 0 6px 0 0; } html body #community-main-area #community-layers-home .fp-tl__faces .fp-face { box-shadow: 0 0 0 2px var(--lh-page) !important; } html body #community-main-area #community-layers-home .fp-tl__thumb { flex: none; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--lh-night) !important; } html body #community-main-area #community-layers-home .fp-tl__thumb.is-icon { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--lh-line) !important; } html body #community-main-area #community-layers-home .fp-tl__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* A rebyte on the rebyter's own Home: what was passed along, a quoted line. */ html body #community-main-area #community-layers-home .fp-tl__quote { display: flex; align-items: center; gap: 8px; margin-top: 5px; padding-left: 10px; border-left: 2px solid var(--lh-line) !important; min-width: 0; } html body #community-main-area #community-layers-home .fp-tl__qface { flex: none; width: 18px; height: 18px; border-radius: 50%; object-fit: cover; } html body #community-main-area #community-layers-home .fp-tl__qtext { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.3; color: var(--lh-dim) !important; -webkit-text-fill-color: var(--lh-dim) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html body #community-main-area #community-layers-home .fp-tl__qtext b { color: var(--lh-ink) !important; -webkit-text-fill-color: var(--lh-ink) !important; } html body #community-main-area #community-layers-home .fp-tl__qpic { flex: none; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; } html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .fp-tl__ico { background: rgba(40, 30, 24, 0.9) !important; border-color: rgba(255, 255, 255, 0.3) !important; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35) !important; } html[data-appearance="glass"] body #community-main-area#community-main-area #community-layers-home .fp-tl__faces .fp-face { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35) !important; } /* A compact line never cuts a name short: its pieces wrap instead. */ html body #community-main-area #community-layers-home .fp-tl--sys .fp-tl__meta { flex-wrap: wrap; row-gap: 1px; } html body #community-main-area #community-layers-home .fp-tl--sys .fp-tl__meta b, html body #community-main-area #community-layers-home .fp-tl--sys .fp-tl__meta .fp-tl__room { flex: 0 1 auto; min-width: 0; max-width: 100%; } /* Rooms view: "Name: message" -- the poster reads as the name, the words as the message. */ html body #community-main-area .rv-who { font-weight: 800 !important; } html body #community-main-area .rv-said { font-weight: 400 !important; opacity: .72; } /* With a tab name showing, the verified seal moves onto that second line (mobile-header-tabname.js copies it there), so the app name never shrinks. */ body.mah-tab-on .mobile-app-header__name-wrap > .mobile-app-header__verified { display: none !important; } body.mah-tab-on #mobile-app-header-name .mah-tabname { display: inline-flex !important; align-items: center; gap: 4px; } body.mah-tab-on #mobile-app-header-name .mah-tabname .mobile-app-header__verified { display: inline-flex !important; margin: 0 !important; --nst-verified-size: 11px; } /* mobile-app-header.css forces the Community header name to inline-block with an id+id selector; the two-line layout has to match that weight. */ body.mah-tab-on #mobile-app-header #mobile-app-header-name { display: inline-flex !important; flex-direction: column !important; align-items: flex-start !important; } #mobile-app-header-name .mah-appname { display: block; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Members sits in its own soft card, a break between the room lists and What's happening. Tinted from the page's own ink, so it works in every theme; frosted in Glass. */ html body #community-main-area #community-layers-home .fp-sec--members { margin: 22px 16px 6px !important; padding: 16px 16px 18px !important; border-radius: 22px !important; background: color-mix(in srgb, var(--lh-ink, currentColor) 6%, transparent) !important; border: 1px solid color-mix(in srgb, var(--lh-ink, currentColor) 10%, transparent) !important; } html body #community-main-area #community-layers-home .fp-sec--members .fp-mem { width: 100%; padding: 0 !important; } html[data-appearance="glass"] body #community-main-area #community-layers-home .fp-sec--members { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.26) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); } /* Every timestamp in What's happening ends on the same line: the time sits in the meta row's right edge, and a row's picture or faces hang in their own column past it -- the same width a post's ··· takes -- so posts, joins and Blips all line their times up. */ html body #community-main-area #community-layers-home .fp-tl { position: relative; } html body #community-main-area #community-layers-home .fp-tl__meta time { margin-left: auto !important; flex: none !important; min-width: 64px; text-align: right; } html body #community-main-area #community-layers-home .fp-tl .fp-tl__more { flex: none !important; width: 40px !important; margin-left: 4px !important; text-align: right !important; } html body #community-main-area #community-layers-home .fp-tl--sys .fp-tl__meta { padding-right: 44px; } html body #community-main-area #community-layers-home .fp-tl--sys .fp-tl__side { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: flex-end; } html body #community-main-area #community-layers-home .fp-tl--sys .fp-tl__side { width: 44px; } html body #community-main-area #community-layers-home .fp-tl--sys .fp-tl__side .fp-tl__thumb { width: 40px !important; height: 40px !important; border-radius: 10px !important; flex: none; } html body #community-main-area #community-layers-home .fp-tl--sys .fp-tl__side .fp-tl__faces .fp-face:nth-child(n+2) { display: none; } html body #community-main-area #community-layers-home .fp-tl--sys .fp-tl__side .fp-face { width: 34px !important; height: 34px !important; } /* Rooms view header: "ROOMS" and "FIABAEN · 7 LAYERS" centred on each other and on the screen. */ html.fp-rooms-view body.community-active.community-layers-home-on #mobile-app-header #mobile-app-header-name { align-items: center !important; text-align: center !important; } html.fp-rooms-view body.community-active.community-layers-home-on #mobile-app-header-name .fp-hrooms { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } /* Rooms view, nothing posted: the guest's quiet note in place of the hero. */ html body #community-main-area #community-layers-home .rv-quiet { padding: 4px 0 8px; } /* The picture column sits inside the same right gutter as a post's ···, not against the screen edge. */ html body #community-main-area #community-layers-home .fp-tl--sys .fp-tl__side { right: 10px !important; } /* The pinned post sits in its own soft card above the feed. */ html body #community-main-area #community-layers-home .fp-tl.is-pinned { margin: 0 10px 18px !important; padding: 14px 12px 12px 54px !important; border-radius: 20px !important; background: color-mix(in srgb, var(--lh-hot, #ff6a00) 6%, transparent) !important; border: 1px solid color-mix(in srgb, var(--lh-hot, #ff6a00) 22%, transparent) !important; } html[data-appearance="glass"] body #community-main-area #community-layers-home .fp-tl.is-pinned { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.28) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); } /* Inside the pinned card the face keeps its column (the card is inset 10px), and the timeline rail stops at the card instead of running through it. */ html body #community-main-area #community-layers-home .fp-tl.is-pinned .fp-tl__face { left: 8px !important; top: 14px !important; } html body #community-main-area #community-layers-home .fp-tl.is-pinned::before, html body #community-main-area #community-layers-home .fp-tl.is-pinned::after { display: none !important; }