/* ==================================================================== Browse Groups — slate redesign page styles. Ported from design_handoff_browse_groups/browse-groups.css. Tokens come from extensions/index_new/styles.css (theme-light / theme-dark), which is linked alongside this file. Bare .bg-*/.bglo-* classes are page-unique (no collision with index_new/styles.css). Loaded for both the logged-in grid and the logged-out marketing hero; $user_id picks which renders. ==================================================================== */ .mv-root.bg-root { background: var(--bg); color: var(--text-1); min-height: 60vh; } .mv-root.bg-root *, .mv-root.bg-root *::before, .mv-root.bg-root *::after { box-sizing: border-box; } /* ---------- Local theme props ---------- --bg-on-fill: white text that sits on a colored fill (the dark image scrim on cover pills) — stays white in BOTH themes, so no dark override (do NOT use --brand-fg, which flips in dark). */ .mv-root.bg-root { --bg-on-fill: #FFFFFF; } /* Clear the fixed 68px app top bar on the logged-in shell only. Done here (not via the pt68px utility) because that class isn't in any stylesheet this redesign links — it only lives in the per-page compiled css_style, which hasn't been scanned for the browse_groups redesign yet, so the header tucked under the bar. The marker class keeps this off the logged-out marketing page. Same fix Friends shipped in a97edaf1. --pastor-h is the live height of the fixed pastor banner (0 when absent / dismissed); JS sets it on . We add it to the 68px top-bar clearance so the content drops below both the banner and the bar. */ .mv-root.bg-root-in { padding-top: calc(68px + var(--pastor-h, 0px)); } /* The shared pastor banner (extensions/pastor_banner/) pins itself above the fixed app top bar on the logged-in shell and publishes its live height as --pastor-h on . We just push the shared chrome down by that height; these collapse to the originals when --pastor-h is 0px (banner absent). */ body .js-site-top-bar { top: var(--pastor-h, 0px); } body .left-nav-condensed { top: calc(68px + var(--pastor-h, 0px)); } body .hl-nav { top: calc(68px + var(--pastor-h, 0px)); } /* ---------- Page wrap (logged-in) ---------- */ .bg-page { display: flex; flex-direction: column; gap: 28px; max-width: 1440px; margin: 0 auto; padding: 36px 64px 96px; flex: 1; min-width: 0; } /* ---------- Page head ---------- */ .bg-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-8); align-items: end; padding-bottom: var(--sp-6); border-bottom: 1px solid var(--border); } .bg-head-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; } .bg-head-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .bg-head h1 { font-family: var(--font-serif); font-size: 44px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.04; color: var(--text-1); margin: 0; } .bg-head h1 em { font-style: italic; font-weight: 500; color: var(--accent); } .bg-head .sub { margin-top: 10px; font-size: 14.5px; color: var(--text-2); max-width: 540px; line-height: 1.55; } .bg-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .bg-head-cap { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); letter-spacing: .02em; } /* ---------- Toolbar: search + chips + sort ---------- */ .bg-toolbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .bg-search { flex: 1; min-width: 280px; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-3); transition: border-color .15s, background .15s; } .bg-search:focus-within { border-color: var(--accent); background: var(--surface-elev); } .bg-search input { flex: 1; background: transparent; border: 0; outline: 0; font-family: var(--font-sans); font-size: 14px; color: var(--text-1); } .bg-search input::placeholder { color: var(--text-3); } .bg-filter-chips { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); } .bg-chip { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--text-3); padding: 7px 14px; border-radius: var(--radius-pill); cursor: pointer; transition: all .15s; border: 0; background: transparent; display: inline-flex; align-items: center; gap: 6px; } .bg-chip:hover { color: var(--text-1); } .bg-chip.active { color: var(--text-1); background: var(--surface-2); font-weight: 600; } .bg-sort { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: 13px; color: var(--text-2); cursor: pointer; } .bg-sort .lbl { color: var(--text-3); } .bg-sort .val { color: var(--text-1); font-weight: 600; } .bg-sort-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-elev); padding: 6px; display: none; } .bg-sort-menu.open { display: block; } .bg-sort-menu a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 13px; color: var(--text-2); text-decoration: none; } .bg-sort-menu a:hover { background: var(--surface-2); color: var(--text-1); } .bg-sort-menu a.active { color: var(--text-1); font-weight: 600; background: var(--surface-2); } .bg-create-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--accent); color: white; border: 0; border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 6px 18px -8px var(--accent); } .bg-create-btn:hover { filter: brightness(1.05); } /* ---------- Group grid ---------- */ .bg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } .bg-empty { grid-column: 1 / -1; text-align: center; padding: 48px 24px; font-size: 14.5px; color: var(--text-2); } .bg-card.is-hidden, .bglo-row.is-hidden { display: none !important; } /* ---------- Group card ---------- */ .bg-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; cursor: pointer; position: relative; text-decoration: none; } .bg-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-elev); } .bg-cover { position: relative; height: 132px; display: flex; align-items: flex-end; justify-content: space-between; padding: 14px; overflow: hidden; background: var(--surface-2); } .bg-cover::before, .bg-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; } /* Real group image (when group_settings.small_picture is a CDN path) */ .bg-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .bg-cover.has-img::before { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.45) 100%); } .bg-cover.has-img::after { background: none; } .bg-cover.has-img .bg-cover-mark { display: none; } /* Tone covers — quiet color washes for groups with no image */ .bg-cover.tone-meadow { background: radial-gradient(120% 80% at 30% 100%, color-mix(in oklab, var(--success) 28%, var(--surface)) 0%, var(--surface-2) 70%); } .bg-cover.tone-meadow::before { background: radial-gradient(60% 80% at 50% 120%, color-mix(in oklab, var(--success) 22%, transparent), transparent 60%), radial-gradient(40% 60% at 80% 90%, color-mix(in oklab, var(--brand) 14%, transparent), transparent 60%); } .bg-cover.tone-dawn { background: radial-gradient(120% 80% at 70% 100%, color-mix(in oklab, var(--warning) 22%, var(--surface)) 0%, var(--surface-2) 70%); } .bg-cover.tone-dawn::before { background: radial-gradient(60% 80% at 30% 110%, color-mix(in oklab, var(--pink) 16%, transparent), transparent 60%), radial-gradient(50% 60% at 80% 90%, color-mix(in oklab, var(--warning) 22%, transparent), transparent 60%); } .bg-cover.tone-sea { background: radial-gradient(120% 80% at 20% 110%, color-mix(in oklab, var(--brand) 22%, var(--surface)) 0%, var(--surface-2) 70%); } .bg-cover.tone-sea::before { background: radial-gradient(60% 80% at 50% 120%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 60%), radial-gradient(40% 60% at 90% 90%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%); } .bg-cover.tone-violet { background: radial-gradient(120% 80% at 60% 100%, color-mix(in oklab, var(--accent) 22%, var(--surface)) 0%, var(--surface-2) 70%); } .bg-cover.tone-violet::before { background: radial-gradient(60% 80% at 30% 110%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%), radial-gradient(50% 60% at 80% 90%, color-mix(in oklab, var(--pink) 12%, transparent), transparent 60%); } .bg-cover.tone-stone { background: var(--surface-2); } .bg-cover-mark { position: relative; z-index: 1; font-family: var(--font-serif); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-1); opacity: .25; line-height: 1; } .bg-cover-pill { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: color-mix(in oklab, var(--bg) 80%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-2); } .bg-cover.has-img .bg-cover-pill { color: var(--bg-on-fill); background: rgba(0,0,0,.4); border-color: rgba(255,255,255,.2); } .bg-cover-pill .pulse { width: 5px; height: 5px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 color-mix(in oklab, var(--success) 60%, transparent); animation: bg-pulse 1.6s ease-in-out infinite; } @keyframes bg-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--success) 60%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--success) 0%, transparent); } } .bg-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .bg-card-name { font-family: var(--font-serif); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-1); line-height: 1.2; } .bg-card-desc { font-size: 13.5px; color: var(--text-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bg-card-meta { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .bg-card-meta-l { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); letter-spacing: 0.02em; } .bg-card-meta-l .item { display: inline-flex; align-items: center; gap: 5px; } .bg-card-meta-l .item strong { color: var(--text-1); font-weight: 600; } .bg-join { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; background: transparent; color: var(--text-2); border: 1px solid var(--border); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; text-decoration: none; white-space: nowrap; } .bg-join:hover { color: var(--text-1); border-color: var(--text-1); } .bg-join.joined { background: var(--success-soft); color: var(--success); border-color: color-mix(in oklab, var(--success) 30%, transparent); } /* Featured card */ .bg-card.featured { grid-column: span 2; } .bg-card.featured .bg-cover { height: 196px; padding: 18px; } .bg-card.featured .bg-card-body { padding: 24px 24px 26px; } .bg-card.featured .bg-card-name { font-size: 26px; } .bg-card.featured .bg-card-desc { -webkit-line-clamp: 3; font-size: 14px; } .bg-card.featured .bg-cover-mark { font-size: 44px; opacity: .22; } /* "Create your own" tile */ .bg-card.create { background: transparent; border: 1px dashed var(--border-strong); box-shadow: none; align-items: center; justify-content: center; padding: 36px 24px; text-align: center; gap: 14px; } .bg-card.create:hover { border-color: var(--accent); background: var(--accent-soft); transform: none; } .bg-card.create .ic { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); } .bg-card.create .title { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--text-1); } .bg-card.create .desc { font-size: 13.5px; color: var(--text-2); max-width: 240px; line-height: 1.5; } /* ==================================================================== Logged-OUT page (marketing variant) ==================================================================== */ .bg-breadcrumb { display: flex; align-items: center; gap: 8px; padding: 28px 0 0; font-family: var(--font-sans); font-size: 13px; } .bg-breadcrumb a { color: var(--text-3); text-decoration: none; } .bg-breadcrumb a:hover { color: var(--text-1); } .bg-breadcrumb .sep { color: var(--text-muted); display: inline-flex; } .bg-breadcrumb .cur { color: var(--text-1); font-weight: 600; } .bglo-hero { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 80px; padding: 56px 0 80px; align-items: start; } .bglo-left { position: sticky; top: 32px; } .bglo-left h1 { font-family: var(--font-serif); font-size: 64px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.02; color: var(--text-1); margin: 16px 0 0; } .bglo-left h1 em { font-style: italic; font-weight: 500; color: var(--accent); } .bglo-intro { margin-top: 24px; font-size: 15.5px; color: var(--text-2); line-height: 1.6; } .bglo-divider { margin: 36px 0 28px; border: 0; border-top: 1px solid var(--border); } .bglo-sub-h { font-family: var(--font-serif); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-1); } .bglo-sub-p { margin-top: 12px; font-size: 14.5px; color: var(--text-2); line-height: 1.6; } .bglo-create { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; background: var(--accent); color: white; border: 0; border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; cursor: pointer; text-decoration: none; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 10px 24px -10px var(--accent); } .bglo-create:hover { filter: brightness(1.05); } .bglo-sub-meta { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); letter-spacing: 0.02em; } .bglo-sub-meta .check { width: 14px; height: 14px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: inline-flex; align-items: center; justify-content: center; } .bglo-toolbar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: 18px; flex-wrap: wrap; } .bglo-toolbar .bg-search { min-width: 220px; } .bglo-sortbar { display: flex; justify-content: flex-end; } .bglo-list { display: flex; flex-direction: column; gap: 14px; } .bglo-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 22px; align-items: stretch; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); cursor: pointer; text-decoration: none; transition: transform .15s ease, border-color .15s, box-shadow .15s; } .bglo-row:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: var(--shadow-elev); } .bglo-thumb { width: 96px; height: 96px; border-radius: var(--radius-md); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; color: var(--text-3); flex-shrink: 0; } .bglo-thumb.tone-meadow { background: radial-gradient(120% 80% at 30% 100%, color-mix(in oklab, var(--success) 30%, var(--surface)) 0%, var(--surface-2) 70%); } .bglo-thumb.tone-dawn { background: radial-gradient(120% 80% at 70% 100%, color-mix(in oklab, var(--warning) 26%, var(--surface)) 0%, var(--surface-2) 70%); } .bglo-thumb.tone-sea { background: radial-gradient(120% 80% at 20% 110%, color-mix(in oklab, var(--brand) 26%, var(--surface)) 0%, var(--surface-2) 70%); } .bglo-thumb.tone-violet { background: radial-gradient(120% 80% at 60% 100%, color-mix(in oklab, var(--accent) 26%, var(--surface)) 0%, var(--surface-2) 70%); } .bglo-thumb.tone-stone { background: var(--surface-2); } .bglo-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .bglo-thumb-mark { font-family: var(--font-serif); font-size: 32px; font-weight: 600; color: var(--text-1); opacity: .28; letter-spacing: -0.02em; } .bglo-thumb.tone-stone .bglo-thumb-mark { color: var(--text-3); opacity: .55; } .bglo-row-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; justify-content: center; } .bglo-row-title { font-family: var(--font-serif); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-1); line-height: 1.15; } .bglo-row-desc { font-size: 13.5px; color: var(--text-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bglo-row-meta { margin-top: 4px; display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--text-3); flex-wrap: wrap; } .bglo-row-meta .item { display: inline-flex; align-items: center; gap: 5px; } .bglo-row-meta .item strong { color: var(--text-1); font-weight: 600; } .bglo-row-meta .live { color: var(--success); } .bglo-row-arrow { align-self: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; } .bglo-row:hover .bglo-row-arrow { background: var(--accent); border-color: var(--accent); color: white; } .bglo-row.featured { grid-template-columns: 140px minmax(0, 1fr) auto; padding: 20px; } .bglo-row.featured .bglo-thumb { width: 140px; height: 140px; } .bglo-row.featured .bglo-thumb-mark { font-size: 44px; } .bglo-row.featured .bglo-row-title { font-size: 26px; } .bglo-row.featured .bglo-row-desc { -webkit-line-clamp: 3; } .bglo-pager { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 4px; margin-top: 12px; border-top: 1px solid var(--border); } .bglo-pager-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); letter-spacing: 0.02em; } .bglo-pager-count strong { color: var(--text-1); font-weight: 700; } .bglo-pager-more { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-1); cursor: pointer; } .bglo-pager-more:hover { border-color: var(--border-strong); } /* ==================================================================== Responsive — collapse to 2 cols / 1 col ==================================================================== */ @media (max-width: 1180px) { .bg-page { padding: 32px 40px 80px; } .bg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bg-card.featured { grid-column: span 2; } .bglo-hero { grid-template-columns: 1fr; gap: 40px; } .bglo-left { position: static; } } @media (max-width: 720px) { .bg-page { padding: 24px 18px 60px; } .bg-head { grid-template-columns: 1fr; } .bg-head-right { align-items: flex-start; } .bg-grid { grid-template-columns: 1fr; } .bg-card.featured { grid-column: span 1; } .bglo-left h1 { font-size: 50px; } .bglo-row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 14px; } .bglo-thumb { width: 64px; height: 64px; } .bglo-thumb-mark { font-size: 22px; } .bglo-row.featured { grid-template-columns: 80px minmax(0, 1fr) auto; } .bglo-row.featured .bglo-thumb { width: 80px; height: 80px; } } /* Phone portrait: hide the hero eyebrow/pill above the main H1 (section eyebrows stay). */ @media (max-width: 560px) { .mv-root .bg-head-eyebrow { display: none !important; } }