openvibers/openvibe.live Commits

About section: sub-headings that actually separate the sections

OP OpenVibers committed 16 Sept 2026 · 88ca12fae3 · 2 files, +36 −4

Three sub-sections inside one long panel, each introduced by the same small grey line of capitals
— scrolling it there was nothing to tell you you had moved from "three ways to go live" to "stuff
you won't find elsewhere" to "where the money goes". They carry the same signal the page's other
section headers use now: a tinted tile round the icon, a tinted title, and a rule running out to
the edge and fading, with a different colour for each. Spacing tightened at the same time; the
old margins left a dead band above each heading, and the cards go one-up on a phone instead of
being squeezed into three columns.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01CMxJm1dB8rdsaMSgNjVa82

Changes

ddiff --git a/public/css/style.css b/public/css/style.css
iindex 6127d4b1..f7f4cbf3 100644
---- a/public/css/style.css
++++ b/public/css/style.css
@@@ -15247,3 +15247,35 @@ a .arena-thread:hover { color: var(--text-primary); background: color-mix(in srg
          min-width: 0; width: min(290px, calc(100vw - 16px));
      }
  }
++
++/* ── About section sub-headings ──────────────────────────────────────────────
++   Three sub-sections inside one long panel, all introduced by the same small grey line of caps —
++   scrolling through it there was nothing to tell you that you had moved from "ways to go live"
++   to "what you get" to "where the money goes". They now carry the same signal the page's other
++   section headers use: a tinted tile round the icon, a tinted title, and a rule that runs out and
++   fades. Spacing is tightened at the same time; the old margins left a dead band above each one. */
++.cta-section-label {
++    --sc: var(--accent);
++    display: flex; align-items: center; gap: 10px; width: 100%;
++    margin: 26px 0 12px; font-size: 0.8rem; letter-spacing: 0.05em;
++    color: color-mix(in srgb, var(--sc) 62%, var(--text-primary)) !important;
++}
++.cta-section-label > i:first-child {
++    width: 28px; height: 28px; flex: none; border-radius: 50%;
++    display: grid; place-items: center; line-height: 1; font-size: 0.76rem;
++    color: var(--sc);
++    background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--sc) 24%, transparent), color-mix(in srgb, var(--sc) 10%, transparent));
++    border: 1px solid color-mix(in srgb, var(--sc) 30%, transparent);
++}
++.cta-section-label::after {
++    content: ''; flex: 1 1 auto; height: 1px; min-width: 16px;
++    background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 42%, transparent), transparent 88%);
++}
++.home-cta-features { margin: 2px 0 6px; gap: 12px; }
++.cta-lede { margin: 0 0 12px; }
++@media (max-width: 640px) {
++    .cta-section-label { margin: 20px 0 10px; font-size: 0.72rem; gap: 8px; }
++    .cta-section-label > i:first-child { width: 25px; height: 25px; font-size: 0.7rem; }
++    .home-cta-features { grid-template-columns: 1fr; gap: 9px; }
++    .home-cta-feature { padding: 13px 14px; }
++}
ddiff --git a/public/index.html b/public/index.html
iindex 3de0080c..2a3f17b4 100644
---- a/public/index.html
++++ b/public/index.html
@@@ -88,7 +88,7 @@
           overlay) and is fetched without blocking the first paint: media="print" makes the browser
           treat it as non-critical, and the onload flips it back to all once it has arrived. -->
      <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
--    <link rel="stylesheet" href="/css/style.css?v=192">
++    <link rel="stylesheet" href="/css/style.css?v=193">
      <link rel="stylesheet" href="/css/home-fx.css?v=13">
      <link rel="stylesheet" href="/css/home-tour.css?v=7">
      <link rel="stylesheet" href="/css/i18n-star.css?v=5">
@@@ -414,7 +414,7 @@
  
                      <div class="home-about-body" id="home-about-body">
                      <!-- Three ways to go live -->
--                    <div class="cta-section-label"><i class="fa-solid fa-tower-broadcast"></i> Three ways to go live — pick your vibe</div>
++                    <div class="cta-section-label" style="--sc:#60a5fa"><i class="fa-solid fa-tower-broadcast"></i> Three ways to go live — pick your vibe</div>
                      <div class="cta-methods">
                          <div class="cta-method">
                              <div class="cta-method-num">01</div>
@@@ -450,7 +450,7 @@
                      </div>
  
                      <!-- Differentiators -->
--                    <div class="cta-section-label cta-diff-label"><i class="fa-solid fa-crown"></i> Stuff you won't find on Twitch, Kick or YouTube</div>
++                    <div class="cta-section-label cta-diff-label" style="--sc:#fbbf24"><i class="fa-solid fa-crown"></i> Stuff you won't find on Twitch, Kick or YouTube</div>
                      <div class="home-cta-features">
                          <div class="home-cta-feature feat-star">
                              <i class="fa-solid fa-robot"></i>
@@@ -522,7 +522,7 @@
                      </div>
  
                      <!-- Where the money goes — part of the same About section -->
--                    <div class="cta-section-label cta-diff-label"><i class="fa-solid fa-seedling"></i> Where the money goes</div>
++                    <div class="cta-section-label cta-diff-label" style="--sc:#4ade80"><i class="fa-solid fa-seedling"></i> Where the money goes</div>
                      <p class="cta-lede">Open source, run in the open, and built to stay that way. Whatever the network earns goes back into it &mdash; keeping the servers on, paying for the storage and bandwidth that free streaming actually costs, funding new features, and putting money into the creators and events that make this place worth showing up to.</p>
                      <div class="home-cta-features">
                          <div class="home-cta-feature">