Fluidity pack: CSS

What it does

Files

Change log

• Sep 14, 2026 v2.9: sticky blog TOC. Bullet's Astral template renders an empty .blog-nav-container on posts, so the v2.3 Body script now builds the links from post headings. This CSS restores the two-column blog layout on desktop, pins the TOC with position:sticky below the floating navbar and progress bar, styles it to match the dark theme (cyan active state), and hides it below 1024px where the single centred column stays. File: fluidity-sticky-blog-toc-v2.9.css in Pack files, paste at the end of the Bullet custom CSS field.
• Sep 14, 2026 v2.8: gallery caption fix. Credential cards in the tabbed views (Partners & Certs) were shrinking inside the fixed-height view container: grid rows split the container height, and because cards use overflow:hidden they clipped their own captions mid-line. Rows now size to content, covers and bodies can no longer be squashed, and captions wrap in full instead of truncating to one ellipsis line. File: fluidity-gallery-caption-fix-v2.8.css in Pack files, paste at the end of the Bullet custom CSS field, then republish.
• Sep 13, 2026 v2.7: restyled the community hero-link as a cohesive dark glass section with cyan-indigo accents, balanced copy and image columns, benefit markers, a stronger CTA, responsive stacking, and restrained image interaction. File: fluidity-community-hero-link-v2.7.css in Pack files.
• Sep 13, 2026 v2.6.1: expanded the shader navigation from two to three equal columns so Credentials stays alongside Blog and BuildinPublic. Added the third sliding-highlight position. File: fluidity-thread-shader-nav-v2.6.1.css in Pack files.
• Sep 13, 2026 v2.6: introduced the centred shader navigation bar with an animated connected-dot web and soft colour sweep.
• Sep 13, 2026 v2.5.1: centred individual frosted view pills.
• Sep 13, 2026 v2.5: initial frosted database view tabs.
• Sep 13, 2026 v2.6 (progress bar): 6px gradient pill (cyan to indigo) with glow, floating just below the glass navbar, mobile inset. Replaces the old .bullet-blog-scroll{background:#22d3ee} one-liner. File: fluidity-reading-progress.css in Pack files.
• Sep 12, 2026 v2.4: floating glass navbar: detached rounded bar, translucent blur, cyan hairline, soft shadow, mobile tightening. Requires the v2.3.1 sticky fix. File: fluidity-glass-navbar.css in Pack files.
• Sep 12, 2026 v2.3.1: sticky navbar fix. Bullet's navbar is sticky by default, but body { overflow-x: hidden } (from the Vanta hero CSS) turns body into a scroll container and silently breaks position: sticky. Use overflow-x: clip instead, or drop the rule. Added optional .bullet-navbar { z-index: 999 } so the bar stays above the hero canvas.
• Sep 12, 2026 v2.3: webeeui-hero-link glowing image component: pulsing cyan glow, hover scale + quickened glow, reduced-motion fallback. Pairs with the hero-link body script which adds the Skool link. File: fluidity-hero-link.css in Pack files.
• Sep 12, 2026 v2.2: FAQ arrow-toggle accordion restored (component styling was lost in the v2.0 reset): chevron rotation, row dividers, cyan hover, smooth height animation, reduced-motion fallback. File: fluidity-faq-toggle.css in Pack files.
• Sep 12, 2026 v2.1: blog card fluidity pack (inspired by threadandstack.com/journal): entrance cascade, hover lift + shadow, image zoom, sheen sweep, title colour drift. File: fluidity-blog-cards.css in Pack files.
• Sep 10, 2026 v1.2: stats count-up styles, blog card cascade, card border hover
• Sep 10, 2026 v1.1: full-width hero (100vw), text aligned to 1061px content column
• Sep 10, 2026 v1.0: initial pack (fog hero, scroll reveals, card lift, FAQ hover)
• Sep 12, 2026 v2.0: site CSS reset to Astral defaults. Pack reduced to hero/Vanta (three.js) support styles only; scroll reveals, card hover, FAQ hover, count-up and cascade removed. Unused webeeui component library also cleared from the Bullet CSS field (pre-reset backup on the Current page)

v2.9 snippet

/* ============================================================
   Fluidity pack v2.9 : Sticky blog TOC
   Restores a table of contents on blog posts as a sticky
   sidebar that follows the scroll. Needs the v2.3 TOC builder
   script (Bullet Body field) which populates the links.
   Paste at the END of the Bullet custom CSS field.
   ============================================================ */

@media (min-width: 1024px) {
  /* two-column layout: TOC rail + article */
  .blog_main {
    grid-template-columns: 250px minmax(0, 760px) !important;
    justify-content: center;
    gap: 3.5rem !important;
    max-width: 1100px !important;
  }

  .blog-nav-container { display: block !important; }

  /* the sticky bit */
  .blog-nav-container .blog_navigator {
    position: sticky;
    top: calc(var(--navbar-height) + 48px); /* clears floating navbar + progress bar */
    align-items: flex-start;
  }

  .blog_navigator .blog_navigator_inner_container {
    padding: 4px 0 4px 16px !important;
    border-left: 1px solid rgba(148, 163, 184, .18);
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    max-height: calc(100vh - var(--navbar-height) - 110px) !important;
    overflow: auto;
  }

  .blog_navigator_title {
    padding: 0 0 12px !important;
    font-size: 11px !important;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, .7) !important;
  }

  .blog_navigator .toc { margin-bottom: 9px; }

  .blog_navigator .toc a {
    display: block;
    color: rgba(226, 232, 240, .6) !important;
    font-size: 13px;
    line-height: 1.45;
    text-decoration: none;
    transition: color .2s ease;
  }

  .blog_navigator .toc a:hover,
  .blog_navigator .toc a.active-toc { color: #22d3ee !important; }
  .blog_navigator .toc a.active-toc { font-weight: 600; }

  .blog_navigator .toc-indent-1 { padding-left: 14px; }
  .blog_navigator .toc-indent-1 a { font-size: 12.5px; color: rgba(148, 163, 184, .55) !important; }
  .blog_navigator .toc-indent-2 { padding-left: 28px; }
}

/* mobile and tablet: keep the single centred column, no TOC */
@media (max-width: 1023px) {
  .blog-nav-container { display: none !important; }
}

v2.8 snippet

/* ============================================================
   Fluidity pack v2.8 : Gallery caption fix
   Fixes clipped captions on gallery cards (Partners & Certs /
   Credentials) when the view container has a fixed height.
   Paste at the END of the Bullet custom CSS field.
   ============================================================ */

/* rows size to each card's content, never to a share of a fixed container */
.notion-gallery-grid {
  grid-auto-rows: auto !important;
}

/* cards may grow, but never shrink below their content */
.notion-gallery-grid .notion-collection-card {
  min-height: min-content;
}

/* cover and body keep their natural height inside the flex card */
.notion-gallery-grid .notion-collection-card-cover,
.notion-gallery-grid .notion-collection-card-body {
  flex-shrink: 0;
}

/* captions wrap and show in full (no more single-line ellipsis cut) */
.notion-gallery-grid .notion-collection-card-property {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
}

Preview