View source for Homepage Preview

<html>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Anton&display=swap" rel="stylesheet">
<style>
:root{--bg:#0D0D0D;--bg2:#141414;--panel:#1A1A1A;--card:#161616;--cb:#2A2A2A;--line:#2A2A2A;--chov:rgba(255,121,0,.06);--chb:rgba(255,121,0,.5);--or:#FF7900;--or2:#FFA24A;--tx:#FFFFFF;--tx2:#9A9A9A;--tx3:#666666;--grad:linear-gradient(135deg,#FF7900 0%,#FFA24A 100%);--disp:'Anton',sans-serif;--head:'Archivo',sans-serif;}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--tx);font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.6;overflow-x:hidden;}
h1,h2,h3,h4{font-family:var(--head),sans-serif;}
a{color:inherit;}
#prog{position:fixed;top:0;left:0;right:0;height:2px;background:var(--grad);z-index:9999;transform-origin:left;transform:scaleX(0);transition:transform .1s;}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 1.75rem;height:58px;background:rgba(13,13,13,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06);}
.nav a{text-decoration:none;}
.nl{color:var(--tx2)!important;text-decoration:none;font-size:.86rem;font-weight:600;transition:color .15s;}
.nl:hover{color:var(--tx)!important;}
.nav-right{display:flex;align-items:center;gap:.6rem;}
.btn-p{background:var(--grad);color:#0D0D0D!important;padding:.5rem 1.2rem;border-radius:9px;font-size:.84rem;font-weight:800;text-decoration:none;transition:box-shadow .18s,transform .18s;}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 12px 34px -12px rgba(255,121,0,.7);}
.lsw{display:flex;gap:2px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:3px;}
.lb{padding:3px 7px;border-radius:5px;font-size:11px;font-weight:800;text-decoration:none;letter-spacing:.05em;transition:all .15s;color:#666!important;}
.lb.on{background:var(--or);color:#0D0D0D!important;}
.lb.av:hover{color:#aaa!important;}
.tbtn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:5px 9px;cursor:pointer;font-size:14px;line-height:1;transition:background .15s;color:var(--tx2);}
.tbtn:hover{background:rgba(255,255,255,.09);}

/* ---------- HERO (single, dense screen) ---------- */
.hero{position:relative;overflow:hidden;padding:104px 1.25rem 0;text-align:center;}
.h-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 0%,rgba(255,121,0,.16) 0%,transparent 60%),radial-gradient(ellipse 50% 60% at 15% 40%,rgba(255,121,0,.07) 0%,transparent 60%),radial-gradient(ellipse 50% 60% at 85% 35%,rgba(255,162,74,.06) 0%,transparent 60%);pointer-events:none;animation:breathe 9s ease-in-out infinite;}
@keyframes breathe{0%,100%{opacity:.85}50%{opacity:1}}
.h-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 75% 65% at 50% 30%,black 10%,transparent 90%);-webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 30%,black 10%,transparent 90%);pointer-events:none;}
.h-in{position:relative;z-index:2;max-width:820px;margin:0 auto;display:flex;flex-direction:column;align-items:center;}
.h-logo{width:min(340px,74vw);height:auto;margin-bottom:1.1rem;filter:drop-shadow(0 8px 40px rgba(255,121,0,.25));}
.h-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,121,0,.1);border:1px solid rgba(255,121,0,.28);border-radius:100px;padding:.32rem .95rem;margin-bottom:1.4rem;font-size:.74rem;font-weight:700;color:var(--or);letter-spacing:.04em;}
.h-dot{width:6px;height:6px;border-radius:50%;background:var(--or);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.h-title{font-family:var(--disp)!important;font-weight:400;text-transform:uppercase;font-size:clamp(2.6rem,7vw,5.2rem);line-height:.94;letter-spacing:.01em;margin-bottom:1.15rem;}
.gt{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.h-sub{font-size:clamp(1rem,1.7vw,1.12rem);color:var(--tx2);line-height:1.65;max-width:540px;margin:0 auto 1.9rem;}
/* search */
.hsearch{width:100%;max-width:560px;margin:0 auto 1.1rem;position:relative;}
.hsearch input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,121,0,.3);border-radius:14px;padding:1.05rem 5.5rem 1.05rem 3.15rem;color:#fff!important;font-size:1.05rem;font-family:var(--head);outline:none;transition:border-color .2s,box-shadow .2s,background .2s;box-shadow:0 0 45px -14px rgba(255,121,0,.45);}
.hsearch input::placeholder{color:#777;}
.hsearch input:focus{border-color:var(--or);background:rgba(255,255,255,.09);box-shadow:0 0 60px -10px rgba(255,121,0,.7);}
.hsearch .si{position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.6;}
.hsearch button{position:absolute;right:7px;top:7px;bottom:7px;background:var(--grad);color:#0D0D0D!important;border:none;border-radius:9px;padding:0 1.1rem;font-family:var(--head);font-weight:800;font-size:.85rem;cursor:pointer;transition:transform .15s,box-shadow .15s;}
.hsearch button:hover{transform:translateY(-1px);box-shadow:0 8px 24px -8px rgba(255,121,0,.7);}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;max-width:640px;margin:0 auto 2rem;}
.chip{background:rgba(255,255,255,.045);border:1px solid var(--cb);border-radius:100px;padding:.38rem 1rem;font-size:.8rem;color:var(--tx2)!important;text-decoration:none;transition:all .18s;}
.chip:hover{border-color:var(--chb);color:var(--tx)!important;background:var(--chov);transform:translateY(-1px);}

/* marquee */
.mq-wrap{overflow:hidden;padding:.7rem 0;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);background:var(--bg2);}
.mq-track{display:flex;width:max-content;animation:mq 40s linear infinite;}
.mq-track:hover{animation-play-state:paused;}
.mq-item{flex-shrink:0;padding:.3rem 1.7rem;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.mq-item a{color:var(--tx3)!important;text-decoration:none;transition:color .15s;}
.mq-item a:hover{color:var(--or)!important;}
.mq-dot{flex-shrink:0;width:3px;height:3px;border-radius:50%;background:var(--or);margin:auto;opacity:.4;}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- SECTION SHELL ---------- */
.sec{padding:76px 1.25rem;}
.sec-in{max-width:1120px;margin:0 auto;}
.sec-hd{margin-bottom:38px;}
.sec-hd.ctr{text-align:center;}
.stag{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or);font-weight:800;}
.stitle{font-family:var(--disp)!important;font-weight:400;text-transform:uppercase;font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:.01em;margin-top:.45rem;line-height:1.02;}
.ssub{color:var(--tx2);margin-top:.6rem;font-size:1rem;max-width:560px;}
.sec-hd.ctr .ssub{margin-left:auto;margin-right:auto;}

/* ---------- TIERS (the centerpiece) ---------- */
.tiers{display:flex;flex-direction:column;gap:12px;}
.tier{position:relative;display:flex;align-items:center;gap:1.5rem;background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:1.5rem 1.9rem;text-decoration:none;overflow:hidden;transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .25s;}
.tier::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);opacity:.45;transition:opacity .25s,width .25s;}
.tier::after{content:'';position:absolute;top:0;left:-70%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,121,0,.10),transparent);transform:skewX(-18deg);transition:left .6s;pointer-events:none;}
.tier:hover{transform:translateX(7px);border-color:var(--chb);box-shadow:0 26px 70px -34px rgba(255,121,0,.75);}
.tier:hover::before{opacity:1;width:6px;}
.tier:hover::after{left:130%;}
.tier-num{font-family:var(--disp);font-size:clamp(2.4rem,5vw,3.5rem);line-height:1;color:var(--tx3);opacity:.4;min-width:1.9ch;text-align:center;transition:color .25s,opacity .25s,text-shadow .25s;}
.tier:hover .tier-num{color:var(--or);opacity:1;text-shadow:0 0 26px rgba(255,121,0,.6);}
.tier-ic{flex-shrink:0;width:52px;height:52px;border-radius:14px;background:rgba(255,121,0,.1);border:1px solid rgba(255,121,0,.3);display:flex;align-items:center;justify-content:center;transition:background .25s,box-shadow .25s;}
.tier:hover .tier-ic{background:rgba(255,121,0,.18);box-shadow:inset 0 0 0 1px rgba(255,121,0,.4);}
.tier-body{flex:1;min-width:0;}
.tier-t{font-family:var(--head)!important;font-weight:800;font-size:1.12rem;color:var(--tx);letter-spacing:-.01em;}
.tier-d{color:var(--tx2);font-size:.9rem;margin-top:.15rem;line-height:1.45;}
.tier-go{flex-shrink:0;font-family:var(--disp);color:var(--or);font-size:1.6rem;line-height:1;transition:transform .25s;opacity:.7;}
.tier:hover .tier-go{transform:translateX(5px);opacity:1;}

/* ---------- TOPICS (image grid) ---------- */
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.tc{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/10;text-decoration:none;border:1px solid rgba(255,255,255,.06);transition:transform .25s,border-color .25s,box-shadow .25s;}
.tc:hover{transform:translateY(-4px);border-color:rgba(255,121,0,.35);box-shadow:0 20px 50px -24px rgba(255,121,0,.55);}
.tc img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.tc:hover img{transform:scale(1.06);}
.to{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.15) 58%,transparent 100%);display:flex;align-items:flex-end;padding:1.2rem;}
.tn{font-family:var(--head)!important;font-weight:800;font-size:1rem;color:#fff;letter-spacing:-.01em;}

/* ---------- TRUST STRIP ---------- */
.trust{border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);background:var(--bg2);}
.trust-in{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.6rem;padding:1.4rem 1.25rem;}
.tru{display:flex;align-items:center;gap:.6rem;color:var(--tx2);font-size:.9rem;font-weight:500;}
.tru b{color:var(--tx);font-weight:800;font-family:var(--head);}
.tru svg{color:var(--or);flex-shrink:0;}

/* ---------- ARTICLE RAILS ---------- */
.rail{display:flex;gap:14px;overflow-x:auto;padding-bottom:1rem;scrollbar-width:none;scroll-snap-type:x mandatory;}
.rail::-webkit-scrollbar{display:none;}
.ac{scroll-snap-align:start;flex-shrink:0;width:290px;background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:1.5rem;text-decoration:none;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;}
.ac:hover{border-color:var(--chb);background:var(--chov);transform:translateY(-3px);box-shadow:0 20px 50px -26px rgba(255,121,0,.5);}
.atag{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--or);font-weight:800;margin-bottom:.7rem;}
.ati{font-family:var(--head)!important;font-weight:800;color:var(--tx);font-size:.98rem;line-height:1.35;margin-bottom:.5rem;letter-spacing:-.01em;}
.ade{color:var(--tx2);font-size:.83rem;line-height:1.5;}
.rail-hint{color:var(--tx3);font-size:.75rem;margin-top:.25rem;}

/* ---------- TESTIMONIALS ---------- */
.tsg{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.tsc{background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:1.9rem;}
.tsq{font-family:var(--disp);font-size:3rem;line-height:.6;color:rgba(255,121,0,.28);margin-bottom:.7rem;}
.tst{color:var(--tx2);font-size:.94rem;line-height:1.7;margin-bottom:1.4rem;}
.tsa{display:flex;align-items:center;gap:.7rem;}
.tsav{width:38px;height:38px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;color:#0D0D0D;flex-shrink:0;}
.tsn{font-weight:800;font-size:.88rem;font-family:var(--head);}
.tsc2{color:var(--tx3);font-size:.78rem;}

/* ---------- CLOSING CTA ---------- */
.close{position:relative;overflow:hidden;text-align:center;padding:88px 1.25rem;background:linear-gradient(135deg,rgba(255,121,0,.14) 0%,rgba(255,121,0,.03) 60%);border-top:1px solid rgba(255,121,0,.16);border-bottom:1px solid rgba(255,121,0,.16);}
.close h2{font-family:var(--disp)!important;font-weight:400;text-transform:uppercase;font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:.01em;line-height:1;margin-bottom:.8rem;}
.close p{color:var(--tx2);font-size:1.05rem;max-width:520px;margin:0 auto 2rem;}
.close .row{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;}
.hcp{background:var(--grad);color:#0D0D0D!important;padding:.9rem 2.1rem;border-radius:12px;font-family:var(--head);font-weight:800;font-size:1rem;text-decoration:none;box-shadow:0 0 40px -8px rgba(255,121,0,.5);transition:transform .2s,box-shadow .2s;}
.hcp:hover{transform:translateY(-2px);box-shadow:0 18px 60px -10px rgba(255,121,0,.75);}
.hcs{background:rgba(255,255,255,.07);color:#fff!important;padding:.9rem 2.1rem;border-radius:12px;font-family:var(--head);font-weight:700;font-size:1rem;text-decoration:none;border:1px solid rgba(255,255,255,.12);transition:background .2s,border-color .2s;}
.hcs:hover{background:rgba(255,255,255,.11);border-color:rgba(255,121,0,.5);}

/* ---------- FOOTER ---------- */
.foot{border-top:1px solid rgba(255,255,255,.05);padding:3.5rem 1.25rem 2rem;background:var(--bg);}
.fg{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:2fr repeat(3,1fr);gap:2.5rem;margin-bottom:2.5rem;}
.fbp{color:var(--tx2);font-size:.86rem;line-height:1.6;max-width:250px;margin-top:.9rem;}
.fct{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);font-weight:800;margin-bottom:1rem;}
.fl{display:flex;flex-direction:column;gap:.55rem;}
.fl a{color:var(--tx2)!important;text-decoration:none;font-size:.86rem;transition:color .15s;}
.fl a:hover{color:var(--or)!important;}
.fb{max-width:1120px;margin:0 auto;border-top:1px solid rgba(255,255,255,.05);padding-top:1.4rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
.fb span{color:var(--tx3);font-size:.78rem;}

/* ---------- ANIM ---------- */
.fade-up{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s;}
.fade-up.in{opacity:1;transform:none;}

/* ---------- LIGHT MODE ---------- */
body.light-mode{--bg:#F5F5F3;--bg2:#ECECEA;--card:#fff;--cb:rgba(0,0,0,.1);--chov:rgba(255,121,0,.05);--chb:rgba(255,121,0,.35);--tx:#111;--tx2:#555;--tx3:#999;}
body.light-mode .nav{background:rgba(245,245,243,.86);}
body.light-mode .tsav{color:#fff;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .tg{grid-template-columns:repeat(2,1fr);}
  .tsg{grid-template-columns:1fr;}
  .fg{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .nav-mid{display:none!important;}
  .nav{padding:0 1rem;}
  .sec{padding:56px 1.1rem;}
  .tier{gap:1rem;padding:1.15rem 1.15rem;border-radius:14px;}
  .tier-num{min-width:1.4ch;font-size:2.1rem;}
  .tier-ic{width:44px;height:44px;}
  .tier-d{font-size:.84rem;}
  .tg{grid-template-columns:1fr;}
  .fg{grid-template-columns:1fr;gap:2rem;}
  .hero{padding-top:88px;}
}

/* =====================================================================
   PREVIEW-ONLY: hide Vector skin chrome on this staging page.
   (The real Homepage gets this from MediaWiki:Common.css via
   body.page-Homepage — remove this block when promoting.)
   ===================================================================== */
#mw-head,#mw-head-base,#mw-page-base,#mw-panel,#left-navigation,#right-navigation,#p-logo,.mw-indicators,#siteSub,#contentSub,#contentSub2,.mw-first-heading,h1.firstHeading,#jump-to-nav,.mw-jump-link,#footer,#mw-footer,.printfooter,.catlinks,#catlinks,#mw-data-after-content,#mw-navigation-heading{display:none!important;}
body,#content,.mw-body,#mw-content,#mw-content-text,#bodyContent,.mw-content-ltr,.mw-parser-output{margin:0!important;padding:0!important;border:0!important;background:#0D0D0D!important;max-width:none!important;width:auto!important;}
#content,.mw-body{margin-left:0!important;box-shadow:none!important;}
body{overflow-x:hidden!important;}
</style>

<div id="prog"></div>

<nav class="nav">
  <a href="/Homepage" aria-label="BigBro Know home"><img src="/images/8/80/BigBro_mark.png" alt="BigBro Know" style="height:34px;width:auto;display:block;"></a>
  <div class="nav-mid" style="display:flex;gap:2.2rem;">
    <a href="#paths" class="nl">Paths</a>
    <a href="#topics" class="nl">Topics</a>
    <a href="#start" class="nl">Start Here</a>
    <a href="#about" class="nl">About</a>
  </div>
  <div class="nav-right">
    <div class="lsw">
      <a href="/Homepage" class="lb on">EN</a>
      <a href="/Homepage/de" class="lb av">DE</a>
      <a href="/Homepage/fr" class="lb av">FR</a>
      <a href="/Homepage/es" class="lb av">ES</a>
      <a href="/Homepage/pt" class="lb av">PT</a>
    </div>
    <button class="tbtn" id="tbtn" onclick="toggleTheme()">🌙</button>
    <a href="#paths" class="btn-p">Explore Free</a>
  </div>
</nav>

<!-- ================= HERO (single dense screen: logo + headline + search + entry) ================= -->
<section class="hero">
  <div class="h-bg"></div>
  <div class="h-grid"></div>
  <div class="h-in">
    <img class="h-logo" src="/images/f/f9/BigBro_Know_logo_new.png" alt="BigBro Know">
    <div class="h-badge"><span class="h-dot"></span>500+ articles · No account · Always free</div>
    <h1 class="h-title">Everything about<br>gay life. <span class="gt">In one place.</span></h1>
    <p class="h-sub">Honest, life-saving knowledge on health, safety, kink, culture and relationships — written for the community, by the community.</p>
    <form class="hsearch" action="/index.php" method="get" role="search">
      <svg class="si" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FF7900" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
      <input type="search" name="search" placeholder="Search 500+ articles…" autocomplete="off">
      <button type="submit">Search</button>
    </form>
    <div class="chips">
      <a href="/Category:Sexual_Health" class="chip">Sexual Health</a>
      <a href="/Understanding_PrEP_and_Modern_HIV_Prevention" class="chip">PrEP</a>
      <a href="/Category:Kink_%26_BDSM" class="chip">Kink &amp; BDSM</a>
      <a href="/Safety_and_Consent" class="chip">Consent</a>
      <a href="/Category:Drugs,_Party_Culture_%26_Harm_Reduction" class="chip">Harm Reduction</a>
      <a href="/Category:Community_%26_Identity" class="chip">Community</a>
    </div>
  </div>
</section>

<div class="mq-wrap">
  <div class="mq-track">
    <span class="mq-item"><a href="/Category:HIV_Prevention_%26_Treatment">HIV Prevention &amp; Treatment</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Consent_%26_Negotiation">Consent &amp; Negotiation</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Communication_%26_Boundaries">Communication &amp; Boundaries</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Power_Dynamics">Power Dynamics</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Roles_%26_Archetypes">Roles &amp; Archetypes</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:STI_Awareness_%26_Testing">STI Awareness &amp; Testing</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Sex,_Intimacy_%26_Connection">Sex, Intimacy &amp; Connection</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Party_Drugs">Party Drugs</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Trauma_%26_Recovery">Trauma &amp; Recovery</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Body_Image_%26_Self-Perception">Body Image &amp; Self-Perception</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Culture">Culture</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:History">History</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Digital_Kink_Culture">Digital Kink Culture</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Chosen_Family_and_Social_Belonging">Chosen Family &amp; Belonging</a></span><span class="mq-dot"></span>
    <span class="mq-item"><a href="/Category:HIV_Prevention_%26_Treatment">HIV Prevention &amp; Treatment</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Consent_%26_Negotiation">Consent &amp; Negotiation</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Communication_%26_Boundaries">Communication &amp; Boundaries</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Power_Dynamics">Power Dynamics</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Roles_%26_Archetypes">Roles &amp; Archetypes</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:STI_Awareness_%26_Testing">STI Awareness &amp; Testing</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Sex,_Intimacy_%26_Connection">Sex, Intimacy &amp; Connection</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Party_Drugs">Party Drugs</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Trauma_%26_Recovery">Trauma &amp; Recovery</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Body_Image_%26_Self-Perception">Body Image &amp; Self-Perception</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Culture">Culture</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:History">History</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Digital_Kink_Culture">Digital Kink Culture</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Chosen_Family_and_Social_Belonging">Chosen Family &amp; Belonging</a></span><span class="mq-dot"></span>
  </div>
</div>

<!-- ================= TIERS — the centerpiece ================= -->
<section class="sec" id="paths">
  <div class="sec-in">
    <div class="sec-hd ctr fade-up">
      <div class="stag">Choose Your Path</div>
      <h2 class="stitle">Start where you stand</h2>
      <p class="ssub">Five paths, from first steps to deep expertise. Pick the one that fits where you are right now.</p>
    </div>
    <div class="tiers">
      <a href="/New_and_Just_Curious" class="tier fade-up">
        <div class="tier-num">01</div>
        <span class="tier-ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF7900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg></span>
        <div class="tier-body"><div class="tier-t">New / Just Curious</div><div class="tier-d">Community basics, health, consent &amp; finding your people.</div></div>
        <div class="tier-go">&rarr;</div>
      </a>
      <a href="/Exploring_Kink" class="tier fade-up">
        <div class="tier-num">02</div>
        <span class="tier-ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF7900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg></span>
        <div class="tier-body"><div class="tier-t">Explore Kink</div><div class="tier-d">BDSM, fetishes, leather culture &amp; power dynamics.</div></div>
        <div class="tier-go">&rarr;</div>
      </a>
      <a href="/Improving_Your_Relationship" class="tier fade-up">
        <div class="tier-num">03</div>
        <span class="tier-ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF7900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg></span>
        <div class="tier-body"><div class="tier-t">Improve My Relationship</div><div class="tier-d">Communication, trust, non-monogamy &amp; intimacy.</div></div>
        <div class="tier-go">&rarr;</div>
      </a>
      <a href="/Safety_and_Consent" class="tier fade-up">
        <div class="tier-num">04</div>
        <span class="tier-ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF7900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg></span>
        <div class="tier-body"><div class="tier-t">I Care About Safety</div><div class="tier-d">Harm reduction, safer sex, PrEP, BDSM safety &amp; consent.</div></div>
        <div class="tier-go">&rarr;</div>
      </a>
      <a href="/Advanced_Knowledge" class="tier fade-up">
        <div class="tier-num">05</div>
        <span class="tier-ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF7900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6M10 22h4"/></svg></span>
        <div class="tier-body"><div class="tier-t">Advanced Knowledge</div><div class="tier-d">Psychology, advanced BDSM, identity &amp; queer history.</div></div>
        <div class="tier-go">&rarr;</div>
      </a>
    </div>
  </div>
</section>

<!-- ================= TRUST STRIP ================= -->
<div class="trust">
  <div class="trust-in fade-up">
    <div class="tru"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><b>500+</b> in-depth articles</div>
    <div class="tru"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>Private — <b>no account, no tracking</b></div>
    <div class="tru"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>Written <b>by the community</b></div>
    <div class="tru"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M2 12h20"/></svg><b>Always free</b> — no paywall</div>
  </div>
</div>

<!-- ================= TOPICS ================= -->
<section class="sec" id="topics" style="background:var(--bg2);border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);">
  <div class="sec-in">
    <div class="sec-hd ctr fade-up">
      <div class="stag">Knowledge Areas</div>
      <h2 class="stitle">Explore by category</h2>
      <p class="ssub">Nine areas covering every corner of gay life.</p>
    </div>
    <div class="tg">
      <a href="/Category:Sexual_Health" class="tc fade-up"><img src="/images/c/c2/Sexual_health.png" alt="Sexual Health" loading="lazy"><div class="to"><span class="tn">Sexual Health</span></div></a>
      <a href="/Category:Dating,_Sex_%26_Relationships" class="tc fade-up"><img src="/images/6/6c/Dating_and_relationships.png" alt="Dating, Sex &amp; Relationships" loading="lazy"><div class="to"><span class="tn">Dating, Sex &amp; Relationships</span></div></a>
      <a href="/Category:Kink_%26_BDSM" class="tc fade-up"><img src="/images/a/a1/Chain-image.png" alt="Kink &amp; BDSM" loading="lazy"><div class="to"><span class="tn">Kink &amp; BDSM</span></div></a>
      <a href="/Category:Culture,_History_%26_Politics" class="tc fade-up"><img src="/images/2/25/Culture_History_Politics_Hero.png" alt="Culture, History &amp; Politics" loading="lazy"><div class="to"><span class="tn">Culture, History &amp; Politics</span></div></a>
      <a href="/Category:Fashion_%26_Visual_Signaling" class="tc fade-up"><img src="/images/8/86/Screenshot_2026-04-26_at_15.06.46.png" alt="Fashion &amp; Visual Signaling" loading="lazy"><div class="to"><span class="tn">Fashion &amp; Visual Signaling</span></div></a>
      <a href="/Category:Community_%26_Identity" class="tc fade-up"><img src="/images/e/ed/Community_Identity_Hero.png" alt="Community &amp; Identity" loading="lazy"><div class="to"><span class="tn">Community &amp; Identity</span></div></a>
      <a href="/Category:Drugs,_Party_Culture_%26_Harm_Reduction" class="tc fade-up"><img src="/images/3/38/Drugs_Party_Culture_Hero.png" alt="Drugs, Party Culture &amp; Harm Reduction" loading="lazy"><div class="to"><span class="tn">Drugs, Party Culture &amp; Harm Reduction</span></div></a>
      <a href="/Category:Life_Planning" class="tc fade-up"><img src="/images/7/74/Life_Planning_Hero.jpg" alt="Life Planning" loading="lazy"><div class="to"><span class="tn">Life Planning</span></div></a>
      <a href="/Category:Connections" class="tc fade-up"><img src="/images/c/c0/Connecions.png" alt="Connections" loading="lazy"><div class="to"><span class="tn">Connections</span></div></a>
    </div>
  </div>
</section>

<!-- ================= START HERE (essential reads rail) ================= -->
<section class="sec" id="start">
  <div class="sec-in">
    <div class="sec-hd fade-up">
      <div class="stag">Start Here</div>
      <h2 class="stitle">Life-saving essentials</h2>
      <p class="ssub">If you read nothing else, read these. <span class="rail-hint">← swipe →</span></p>
    </div>
    <div class="rail">
      <a href="/Understanding_PrEP_and_Modern_HIV_Prevention" class="ac"><div class="atag">Health</div><div class="ati">Understanding PrEP &amp; Modern HIV Prevention</div><div class="ade">A complete guide to PrEP, how it works, and how to access it.</div></a>
      <a href="/Understanding_U%3DU_(Undetectable_%3D_Untransmittable)" class="ac"><div class="atag">Health</div><div class="ati">Understanding U=U</div><div class="ade">What undetectable status really means for transmission.</div></a>
      <a href="/Understanding_Routine_STI_Testing_in_Gay_Communities" class="ac"><div class="atag">Health</div><div class="ati">Routine STI Testing</div><div class="ade">Why regular testing matters and how it works.</div></a>
      <a href="/Chemsex,_Party_Drugs,_and_Harm_Reduction_in_Gay_Communities" class="ac"><div class="atag">Harm Reduction</div><div class="ati">Chemsex, Party Drugs &amp; Harm Reduction</div><div class="ade">Balanced, non-judgmental harm-reduction information.</div></a>
      <a href="/Overdose_Awareness" class="ac"><div class="atag">Harm Reduction</div><div class="ati">Overdose Awareness</div><div class="ade">Recognizing and responding to overdose risk.</div></a>
      <a href="/Understanding_Consent_in_Power_Exchange" class="ac"><div class="atag">Kink &amp; BDSM</div><div class="ati">Consent in Power Exchange</div><div class="ade">What consent truly means and how it's practiced.</div></a>
      <a href="/Risk_in_Consensual_Kink" class="ac"><div class="atag">Kink &amp; BDSM</div><div class="ati">Risk in Consensual Kink</div><div class="ade">Safety and harm-awareness in kink practices.</div></a>
    </div>
  </div>
</section>

<!-- ================= RECENT (rail) ================= -->
<section class="sec" style="background:var(--bg2);border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);">
  <div class="sec-in">
    <div class="sec-hd fade-up">
      <div class="stag">Latest</div>
      <h2 class="stitle">Fresh from the community</h2>
      <p class="ssub">New and recently updated reads. <span class="rail-hint">← swipe →</span></p>
    </div>
    <div class="rail">
      <a href="/Entering_the_Gay_Scene_for_the_First_Time" class="ac"><div class="atag">Community</div><div class="ati">Entering the Gay Scene for the First Time</div><div class="ade">What to expect, how to prepare, and where to start.</div></a>
      <a href="/Body_Image_Pressure_in_Gay_Communities" class="ac"><div class="atag">Identity</div><div class="ati">Body Image Pressure in Gay Communities</div><div class="ade">Beauty ideals, self-perception, and navigating expectations.</div></a>
      <a href="/Loneliness,_Hookup_Culture,_and_Emotional_Well-Being" class="ac"><div class="atag">Relationships</div><div class="ati">Loneliness, Hookup Culture &amp; Emotional Well-Being</div><div class="ade">The tension between sexual freedom and connection.</div></a>
      <a href="/Navigating_Intimacy_After_Sexual_Trauma" class="ac"><div class="atag">Health</div><div class="ati">Navigating Intimacy After Sexual Trauma</div><div class="ade">Processing, healing, and the path back to connection.</div></a>
      <a href="/First_Time_at_a_Private_Gay_Sex_Party" class="ac"><div class="atag">Nightlife</div><div class="ati">First Time at a Private Gay Sex Party</div><div class="ade">What to expect and how to feel comfortable.</div></a>
      <a href="/What_Is_BDSM" class="ac"><div class="atag">Kink &amp; BDSM</div><div class="ati">What Is BDSM?</div><div class="ade">A grounded introduction to power, play and trust.</div></a>
    </div>
  </div>
</section>

<!-- ================= TESTIMONIALS ================= -->
<section class="sec" id="about">
  <div class="sec-in">
    <div class="sec-hd ctr fade-up">
      <div class="stag">Readers</div>
      <h2 class="stitle">Why it matters</h2>
    </div>
    <div class="tsg">
      <div class="tsc fade-up"><div class="tsq">"</div><div class="tst">The PrEP article literally saved my life. I didn't even know what it was before I found BigBro Know. Now I'm on it and feel safe.</div><div class="tsa"><div class="tsav">J</div><div><div class="tsn">James</div><div class="tsc2">Manchester, UK</div></div></div></div>
      <div class="tsc fade-up"><div class="tsq">"</div><div class="tst">When I came out I had no idea where to start. The articles on identity and community made me feel less alone — and helped me find my people.</div><div class="tsa"><div class="tsav">D</div><div><div class="tsn">Daniel</div><div class="tsc2">Berlin, Germany</div></div></div></div>
      <div class="tsc fade-up"><div class="tsq">"</div><div class="tst">Finally honest information about chemsex and harm reduction — no judgment, no moralising, just practical knowledge that actually helps.</div><div class="tsa"><div class="tsav">A</div><div><div class="tsn">Aviv</div><div class="tsc2">Tel Aviv, Israel</div></div></div></div>
    </div>
  </div>
</section>

<!-- ================= CLOSING CTA ================= -->
<div class="close">
  <div style="position:relative;z-index:2;">
    <h2>Knowledge that saves lives</h2>
    <p>Everyone deserves honest, life-saving information about their own life. Start reading — free, private, no account.</p>
    <div class="row">
      <a href="/Start_Here" class="hcp">Explore BigBro Know &rarr;</a>
      <a href="#topics" class="hcs">Browse Topics</a>
    </div>
  </div>
</div>

<!-- ================= FOOTER ================= -->
<footer class="foot">
  <div class="fg">
    <div>
      <img src="/images/f/f9/BigBro_Know_logo_new.png" alt="BigBro Know" style="height:26px;">
      <p class="fbp">A free, independent knowledge platform for gay communities worldwide.</p>
    </div>
    <div><div class="fct">Health</div><div class="fl"><a href="/Category:Sexual_Health">Sexual Health</a><a href="/Category:HIV_Prevention_%26_Treatment">HIV Prevention</a><a href="/Category:STI_Awareness_%26_Testing">STI Testing</a><a href="/Category:Sexual_Function_%26_Mental_Health">Mental Health</a></div></div>
    <div><div class="fct">Lifestyle</div><div class="fl"><a href="/Category:Dating,_Sex_%26_Relationships">Dating &amp; Relationships</a><a href="/Category:Kink_%26_BDSM">Kink &amp; BDSM</a><a href="/Category:Culture,_History_%26_Politics">Culture &amp; History</a><a href="/Category:Fashion_%26_Visual_Signaling">Fashion &amp; Style</a></div></div>
    <div><div class="fct">Site</div><div class="fl"><a href="/Homepage">Home</a><a href="/Topics">All Topics</a><a href="/Special:AllPages">All Articles</a><a href="/radmin">Admin</a></div></div>
  </div>
  <div class="fb">
    <span>© 2026 Karussell Labs OÜ, operating BigBro and BigBro Know · All content is for educational purposes only.</span>
    <span>No account · No tracking · Always free</span>
  </div>
</footer>

<script>
window.addEventListener('scroll',()=>{const h=document.body.scrollHeight-window.innerHeight;const p=h>0?window.scrollY/h:0;const el=document.getElementById('prog');if(el)el.style.transform='scaleX('+p+')';});
const obs=new IntersectionObserver(e=>e.forEach(i=>{if(i.isIntersecting){i.target.classList.add('in');obs.unobserve(i.target);}}),{threshold:.12});
document.querySelectorAll('.fade-up').forEach(el=>obs.observe(el));
function toggleTheme(){const l=document.body.classList.toggle('light-mode');localStorage.setItem('theme',l?'light':'dark');const b=document.getElementById('tbtn');if(b)b.textContent=l?'☀️':'🌙';}
(function(){const s=localStorage.getItem('theme');const pl=window.matchMedia('(prefers-color-scheme:light)').matches;const ul=s?s==='light':pl;if(ul)document.body.classList.add('light-mode');document.addEventListener('DOMContentLoaded',()=>{const b=document.getElementById('tbtn');if(b)b.textContent=ul?'☀️':'🌙';});})();
</script>
</html>