/* 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: every room as a doorway (home.js doorsHtml). */ html body #community-main-area #community-layers-home .lh-rooms { padding: 14px 16px 0; } html body #community-main-area #community-layers-home .lh-rooms__title { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 44px; line-height: .95; font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; letter-spacing: -.01em; } html body #community-main-area #community-layers-home .lh-rooms__title .lh-layer, html body #community-main-area #community-layers-home .lh-rooms__title .lh-layer::before { font-size: 26px; } html body #community-main-area #community-layers-home .lh-rooms__sub { margin: 8px 0 20px; padding-bottom: 14px; border-bottom: 2px solid var(--lh-ink) !important; font-family: var(--fp-mono) !important; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } html body #community-main-area #community-layers-home .lh-layer, html body #community-main-area #community-layers-home .lh-layer::before { color: var(--lh-accent) !important; -webkit-text-fill-color: var(--lh-accent) !important; } html body #community-main-area #community-layers-home .lh-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; } html body #community-main-area #community-layers-home .lh-door { display: flex !important; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; text-align: left !important; -webkit-tap-highlight-color: transparent; } html body #community-main-area #community-layers-home .lh-door.is-lobby { grid-column: 1 / -1; } html body #community-main-area #community-layers-home .lh-door__arch { position: relative; display: grid; place-items: center; height: 214px; border-radius: 999px 999px 18px 18px; border: 2px solid var(--lh-ink) !important; overflow: hidden; background: var(--lh-page) !important; transition: transform .16s ease; } html body #community-main-area #community-layers-home .lh-door.is-lobby .lh-door__arch { height: 270px; border-radius: 180px 180px 22px 22px; } html body #community-main-area #community-layers-home .lh-door.is-accent .lh-door__arch { border-color: var(--lh-accent) !important; } html body #community-main-area #community-layers-home .lh-door:active .lh-door__arch { transform: scale(.97); } html body #community-main-area #community-layers-home .lh-door__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } html body #community-main-area #community-layers-home .lh-door__initial { font-size: 64px; font-weight: 900; line-height: 1; } html body #community-main-area #community-layers-home .lh-door.is-lobby .lh-door__initial { font-size: 88px; } html body #community-main-area #community-layers-home .lh-door__lock { position: absolute; top: 44%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; display: grid; place-items: center; background: var(--lh-night) !important; } html body #community-main-area #community-layers-home .lh-door .lh-door__lock i, html body #community-main-area #community-layers-home .lh-door .lh-door__lock i::before { font-size: 16px; color: var(--lh-snow) !important; -webkit-text-fill-color: var(--lh-snow) !important; } html body #community-main-area #community-layers-home .lh-door__price { position: absolute; left: 8px; right: 8px; bottom: 10px; padding: 6px 8px; border-radius: 999px; background: var(--lh-snow) !important; font-size: 11px; font-weight: 800; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html body #community-main-area #community-layers-home .lh-door .lh-door__price { color: var(--lh-night) !important; -webkit-text-fill-color: var(--lh-night) !important; } html body #community-main-area #community-layers-home .lh-door__words { display: flex; flex-direction: column; gap: 4px; min-width: 0; } html body #community-main-area #community-layers-home .lh-door.is-lobby .lh-door__words { align-items: center; text-align: center; } html body #community-main-area #community-layers-home .lh-door__name { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 17px; font-weight: 850; line-height: 1.15; letter-spacing: -.01em; } html body #community-main-area #community-layers-home .lh-door.is-lobby .lh-door__name { font-size: 24px; } html body #community-main-area #community-layers-home .lh-door__name span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html body #community-main-area #community-layers-home .lh-door__name .lh-layer, html body #community-main-area #community-layers-home .lh-door__name .lh-layer::before { font-size: 13px; flex: none; } html body #community-main-area #community-layers-home .lh-door__desc { 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 .lh-door__access { font-family: var(--fp-mono) !important; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } html body #community-main-area #community-layers-home .lh-door__access--paid { color: var(--lh-accent) !important; -webkit-text-fill-color: var(--lh-accent) !important; } html body #community-main-area #community-layers-home .lh-door__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; min-width: 0; } html body #community-main-area #community-layers-home .lh-door.is-lobby .lh-door__meta { justify-content: center; } html body #community-main-area #community-layers-home .lh-door__act { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html body #community-main-area #community-layers-home .lh-door__act.is-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--lh-live) !important; -webkit-text-fill-color: var(--lh-live) !important; } html body #community-main-area #community-layers-home .lh-door__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--lh-live) !important; animation: lh-pulse 1.6s ease-in-out infinite; } html body #community-main-area #community-layers-home .lh-door__people { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; } html body #community-main-area #community-layers-home .lh-door__people i, html body #community-main-area #community-layers-home .lh-door__people i::before { font-size: 11px; } html body #community-main-area #community-layers-home .lh-door__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } html body #community-main-area #community-layers-home .lh-door .fp-faces { margin-top: 2px; } html body #community-main-area #community-layers-home .lh-door .fp-face { box-shadow: 0 0 0 2px var(--lh-page) !important; } html body #community-main-area #community-layers-home .lh-door--new .lh-door__arch { border-style: dashed !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } html body #community-main-area #community-layers-home .lh-door__plus { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--lh-ink) !important; } html body #community-main-area #community-layers-home .lh-door__new-word { font-size: 16px; font-weight: 900; } html body #community-main-area #community-layers-home .lh-door--new .lh-door__words { align-items: center; } @keyframes lh-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } } @media (prefers-reduced-motion: reduce) { html body #community-main-area #community-layers-home .lh-door__pulse { animation: none; } html body #community-main-area #community-layers-home .lh-door__arch { transition: none; } } /* 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; }