Wiki/Homepage: Difference between revisions

Created page with " <html> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> <script src="https://cdn.tailwindcss.com"></script> <style> ── Alpha Orange Design System ─────────────────────: :root { --bg: #0D0D0D; --surface: #1A1A1A; --..."
 
No edit summary
 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
[[File:Alpha.wiki logo noBG.png|center|frameless|800]]
<html>
<html>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
Line 33: Line 33:
     h1,h2,h3,h4,h5 { font-family: 'Space Grotesk', sans-serif; }
     h1,h2,h3,h4,h5 { font-family: 'Space Grotesk', sans-serif; }


     /* ── Scrollbar ─────────────────────────────────── */
/* — Card Images ————————————————————————— */
     .card-img { width: 100%; height: auto; display: block; }
    .topic-card { width: 50%; }
 
        /* ── Scrollbar ─────────────────────────────────── */
     ::-webkit-scrollbar { width: 4px; }
     ::-webkit-scrollbar { width: 4px; }
     ::-webkit-scrollbar-track { background: transparent; }
     ::-webkit-scrollbar-track { background: transparent; }
Line 79: Line 83:
     .nav-admin:hover { color:var(--text-2);border-color:rgba(255,106,33,.4); }
     .nav-admin:hover { color:var(--text-2);border-color:rgba(255,106,33,.4); }
     .btn-nav {
     .btn-nav {
       font-size:.83rem;font-weight:700;color:#fff;
       font-size:.83rem;font-weight:700;color:#ffffff !important;-webkit-text-fill-color:#ffffff !important;
       background: var(--grad);
       background: var(--grad);
       padding:8px 20px;border-radius:999px;border:none;cursor:pointer;
       padding:8px 20px;border-radius:999px;border:none;cursor:pointer;
Line 98: Line 102:
     .btn-primary {
     .btn-primary {
       display:inline-flex;align-items:center;gap:8px;
       display:inline-flex;align-items:center;gap:8px;
       font-size:.92rem;font-weight:700;color:#fff;
       font-size:.92rem;font-weight:700;color:#ffffff !important;-webkit-text-fill-color:#ffffff !important;
       background: var(--grad);
       background: var(--grad);
       padding:14px 28px;border-radius:12px;border:none;cursor:pointer;
       padding:14px 28px;border-radius:12px;border:none;cursor:pointer;
Line 451: Line 455:
       <!-- H1 -->
       <!-- H1 -->
       <h1 style="font-size:clamp(2.8rem,6vw,5.2rem);font-weight:900;line-height:1.06;letter-spacing:-.03em;margin-bottom:1.5rem;color:var(--text)">
       <h1 style="font-size:clamp(2.8rem,6vw,5.2rem);font-weight:900;line-height:1.06;letter-spacing:-.03em;margin-bottom:1.5rem;color:var(--text)">
         Everything about gay life.<br>
         Your mentor to the gay scene.<br>
         <span class="ot">In one place. Free.</span>
         <span class="ot">Real knowledge. No judgment. Free.</span>
       </h1>
       </h1>


       <!-- Sub -->
       <!-- Sub -->
       <p style="font-size:clamp(1rem,2vw,1.18rem);color:var(--text-2);line-height:1.75;max-width:560px;margin:0 auto 2.8rem">
       <p style="font-size:clamp(1rem,2vw,1.18rem);color:var(--text-2);line-height:1.75;max-width:560px;margin:0 auto 2.8rem">
         500+ honest, life-saving articles on health, safety, culture, relationships,
         Think of AlphaX as the older, wiser friend you wish you had when you first stepped into the scene. 500+ honest, in-depth articles on health, safety, culture, relationships,
         nightlife and more — written for the gay community, by the gay community.
         nightlife and more — written for the gay community, by the gay community.
       </p>
       </p>
Line 605: Line 609:
           <div class="feat-icon"><svg width="20" height="20" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg></div>
           <div class="feat-icon"><svg width="20" height="20" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg></div>
           <div class="feat-title">Life-Saving Knowledge</div>
           <div class="feat-title">Life-Saving Knowledge</div>
           <div class="feat-body">From HIV prevention to chemsex harm reduction some articles don't just inform, they protect. Written with clinical accuracy and zero shame.</div>
           <div class="feat-body">Viagra + poppers — a risky mix. Know why. Someone drops at your chill. Act fast. HIV prevention — what actually works. Hepatitis vaccines — why they matter.</div>
         </div>
         </div>
         <div class="feat-card fu" data-d="2">
         <div class="feat-card fu" data-d="2">
Line 640: Line 644:
       TOPICS
       TOPICS
   ═══════════════════════════════════════════════════ -->
   ═══════════════════════════════════════════════════ -->
  <section id="topics" style="padding:80px 1rem;" aria-label="Topics">
    <section id="topics" style="padding:80px 1rem;" aria-label="Topics">        
     <div style="max-width:1100px;margin:0 auto;">
     <div style="max-width:1100px;margin:0 auto;">                              
       <div style="text-align:center;margin-bottom:48px;">                       
       <div style="text-align:center;margin-bottom:48px;">                       
         <span style="font-size:.75rem;letter-spacing:.12em;text-transform:upperc
         <span style="font-size:.75rem;letter-spacing:.12em;text-transform:upperc
Line 649: Line 653:
         <p style="color:var(--text-2);margin-top:.75rem;font-size:1rem;">Eight
         <p style="color:var(--text-2);margin-top:.75rem;font-size:1rem;">Eight
   knowledge areas covering every aspect of gay life.</p>                         
   knowledge areas covering every aspect of gay life.</p>                         
       </div>    
       </div>                                                                
       <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240
       <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240
   px,1fr));gap:16px;">
   px,1fr));gap:16px;">                                                        
 
 
         <a href="https://alphax.wiki/wiki/Category:Sexual_Health"               
         <a href="https://alphax.wiki/Category:Sexual_Health"               
   style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
   class="topic-card" style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
   ce);text-decoration:none;border:1px solid var(--border);transition:transform   
   ce);text-decoration:none;border:1px solid var(--border);transition:transform   
   .2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
   .2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
   s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
   s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
   --border)';this.style.transform='none'">
   --border)';this.style.transform='none'">
           <div style="height:150px;overflow:hidden;"><img  
           <img src="https://alphax.wiki/images/c/c2/Sexual_health.png"  
  src="https://alphax.wiki/images/c/c2/Sexual_health.png"                      
   class="card-img" alt="Sexual Health"            
   style="width:100%;height:100%;object-fit:cover;" alt="Sexual Health"  
   loading="lazy">
   loading="lazy"></div>                                                       
           <div style="padding:16px 18px;"><div                                
           <div style="padding:16px 18px;"><div  
   style="font-weight:700;color:var(--text);font-size:.95rem;">Sexual             
   style="font-weight:700;color:var(--text);font-size:.95rem;">Sexual             
   Health</div></div>
   Health</div></div>
         </a>                                                                     
         </a>                                                                     
                 
                                                                             
         <a                                                                       
         <a                                                                       
   href="https://alphax.wiki/wiki/Category:Dating,_Sex_%26_Relationships"  
   href="https://alphax.wiki/Category:Dating,_Sex_%26_Relationships"  
   style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
   class="topic-card" style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
   ce);text-decoration:none;border:1px solid var(--border);transition:transform  
   ce);text-decoration:none;border:1px solid var(--border);transition:transform  
   .2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
   .2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
   s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
   s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
   --border)';this.style.transform='none'">
   --border)';this.style.transform='none'">
           <div style="height:150px;overflow:hidden;"><img  
           <img  
   src="https://alphax.wiki/images/6/6c/Dating_and_relationships.png"             
   src="https://alphax.wiki/images/6/6c/Dating_and_relationships.png"             
   style="width:100%;height:100%;object-fit:cover;" alt="Dating, Sex &  
   class="card-img" alt="Dating, Sex &  
   Relationships" loading="lazy"></div>                                         
   Relationships" loading="lazy">                                              
           <div style="padding:16px 18px;"><div  
           <div style="padding:16px 18px;"><div                              
   style="font-weight:700;color:var(--text);font-size:.95rem;">Dating, Sex &     
   style="font-weight:700;color:var(--text);font-size:.95rem;">Dating, Sex &     
   Relationships</div></div>
   Relationships</div></div>
         </a>                                                                     
         </a>                                                                     
                 
                                                                             
         <a href="https://alphax.wiki/wiki/Category:Kink_%26_BDSM"               
         <a href="https://alphax.wiki/Category:Kink_%26_BDSM"               
   style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
   class="topic-card" style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
   ce);text-decoration:none;border:1px solid var(--border);transition:transform   
   ce);text-decoration:none;border:1px solid var(--border);transition:transform   
   .2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
   .2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
   s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
   s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
   --border)';this.style.transform='none'">
   --border)';this.style.transform='none'">
           <div style="height:150px;overflow:hidden;"><img  
           <img src="https://alphax.wiki/images/a/a1/Chain-image.png"  
  src="https://alphax.wiki/images/a/a1/Chain-image.png"                        
   class="card-img" alt="Kink & BDSM"              
   style="width:100%;height:100%;object-fit:cover;" alt="Kink & BDSM"  
   loading="lazy">
   loading="lazy"></div>                                                       
           <div style="padding:16px 18px;"><div                                
           <div style="padding:16px 18px;"><div  
   style="font-weight:700;color:var(--text);font-size:.95rem;">Kink &          
   style="font-weight:700;color:var(--text);font-size:.95rem;">Kink &
   BDSM</div></div>
   BDSM</div></div>
         </a>
         </a>                                                                  
                                                                               
                                                                             
         <a                                                                       
         <a                                                                       
   href="https://alphax.wiki/wiki/Category:Culture,_History_%26_Politics"      
   href="https://alphax.wiki/Category:Culture,_History_%26_Politics"  
   style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
   class="topic-card" style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
   ce);text-decoration:none;border:1px solid var(--border);transition:transform  
   ce);text-decoration:none;border:1px solid var(--border);transition:transform  
   .2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
   .2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
   s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
   s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
   --border)';this.style.transform='none'">
   --border)';this.style.transform='none'">
           <div style="height:150px;overflow:hidden;"><img  
           <img  
   src="https://alphax.wiki/images/2/25/Culture_History_Politics_Hero.png"       
   src="https://alphax.wiki/images/2/25/Culture_History_Politics_Hero.png"       
   style="width:100%;height:100%;object-fit:cover;" alt="Culture, History &  
   class="card-img" alt="Culture, History &  
   Politics" loading="lazy"></div>                                             
   Politics" loading="lazy">                                                    
           <div style="padding:16px 18px;"><div  
           <div style="padding:16px 18px;"><div                              
   style="font-weight:700;color:var(--text);font-size:.95rem;">Culture, History &
   style="font-weight:700;color:var(--text);font-size:.95rem;">Culture, History &
   Politics</div></div>
   Politics</div></div>
         </a>                                                                     
         </a>                                                                     
                 
                                                                             
         <a href="https://alphax.wiki/wiki/Category:Fashion_%26_Visual_Signaling"
         <a href="https://alphax.wiki/Category:Fashion_%26_Visual_Signaling"
   style="display:block;border-radius:14px;overflow:hidden;background:var(--surf
   class="topic-card" style="display:block;border-radius:14px;overflow:hidden;background:var(--surf
   ace);text-decoration:none;border:1px solid var(--border);transition:transform  
   ace);text-decoration:none;border:1px solid var(--border);transition:transform  
   .2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
   .2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
   s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
   s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
   --border)';this.style.transform='none'">
   --border)';this.style.transform='none'">
           <div style="height:150px;overflow:hidden;"><img  
           <img  
   src="https://alphax.wiki/images/8/86/Screenshot_2026-04-26_at_15.06.46.png"   
   src="https://alphax.wiki/images/8/86/Screenshot_2026-04-26_at_15.06.46.png"   
   style="width:100%;height:100%;object-fit:cover;" alt="Fashion & Visual  
   class="card-img" alt="Fashion & Visual Signaling"
  Signaling" loading="lazy"></div>                                             
  loading="lazy">                                                            
           <div style="padding:16px 18px;"><div  
           <div style="padding:16px 18px;"><div                              
   style="font-weight:700;color:var(--text);font-size:.95rem;">Fashion & Visual   
   style="font-weight:700;color:var(--text);font-size:.95rem;">Fashion & Visual   
   Signaling</div></div>
   Signaling</div></div>
         </a>                                                                     
         </a>                                                                     
                 
                                                                             
         <a href="https://alphax.wiki/wiki/Category:Community_%26_Identity"       
         <a href="https://alphax.wiki/Category:Community_%26_Identity"       
   style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
   class="topic-card" style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
   ce);text-decoration:none;border:1px solid var(--border);transition:transform   
   ce);text-decoration:none;border:1px solid var(--border);transition:transform   
   .2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
   .2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
   s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
   s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
   --border)';this.style.transform='none'">
   --border)';this.style.transform='none'">
           <div style="height:150px;overflow:hidden;"><img  
           <img src="https://alphax.wiki/images/e/ed/Community_Identity_Hero.png"
  src="https://alphax.wiki/images/e/ed/Community_Identity_Hero.png"            
  class="card-img" alt="Community & Identity"    
  style="width:100%;height:100%;object-fit:cover;" alt="Community & Identity"  
   loading="lazy">
   loading="lazy"></div>                                                       
           <div style="padding:16px 18px;"><div                                
           <div style="padding:16px 18px;"><div  
   style="font-weight:700;color:var(--text);font-size:.95rem;">Community &    
   style="font-weight:700;color:var(--text);font-size:.95rem;">Community &      
   Identity</div></div>
   Identity</div></div>
         </a>                                                                  
          <div style="padding:16px 18px;"><div style="font-weight:700;color:var(--text);font-size:.95rem;">Fashion &
                 
  Visual Signaling</div></div>
         <a href="https://alphax.wiki/wiki/Category:Drugs,_Party_Culture_%26_Harm
         </a>
   _Reduction" style="display:block;border-radius:14px;overflow:hidden;background
 
  :var(--surface);text-decoration:none;border:1px solid                       
         <a href="https://alphax.wiki/Category:Community_%26_Identity"
   var(--border);transition:transform .2s,border-color .2s;" onmouseover="this.st
   class="topic-card" style="display:block;border-radius:14px;overflow:hidden;background:var(--surface);text-decoration:none;border:1px
  yle.borderColor='var(--orange)';this.style.transform='translateY(-2px)'" onmou
   solid var(--border);transition:transform .2s,border-color .2s;"  
   seout="this.style.borderColor='var(--border)';this.style.transform='none'">
  onmouseover="this.style.borderColor='var(--orange)';this.style.transform='translateY(-2px)'"  
           <div style="height:150px;overflow:hidden;"><img  
   onmouseout="this.style.borderColor='var(--border)';this.style.transform='none'">
  src="https://alphax.wiki/images/3/38/Drugs_Party_Culture_Hero.png"          
          <img src="https://alphax.wiki/images/e/ed/Community_Identity_Hero.png"
   style="width:100%;height:100%;object-fit:cover;" alt="Drugs, Party Culture &  
  class="card-img" alt="Community & Identity" loading="lazy">
  Harm Reduction" loading="lazy"></div>                                       
           <div style="padding:16px 18px;"><div style="font-weight:700;color:var(--text);font-size:.95rem;">Community
           <div style="padding:16px 18px;"><div  
  & Identity</div></div>
  style="font-weight:700;color:var(--text);font-size:.95rem;">Drugs, Party     
        </a>
   Culture & Harm Reduction</div></div>
 
         </a>                                                                  
        <a href="https://alphax.wiki/Category:Drugs,_Party_Culture_%26_Harm_Reduction"
                 
  class="topic-card" style="display:block;border-radius:14px;overflow:hidden;background:var(--surface);text-decoration:none;border:1px
         <a href="https://alphax.wiki/wiki/Category:Life_Planning"              
  solid var(--border);transition:transform .2s,border-color .2s;"
   style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
  onmouseover="this.style.borderColor='var(--orange)';this.style.transform='translateY(-2px)'"
  ce);text-decoration:none;border:1px solid var(--border);transition:transform
  onmouseout="this.style.borderColor='var(--border)';this.style.transform='none'">
  .2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
          <img src="https://alphax.wiki/images/3/38/Drugs_Party_Culture_Hero.png"  
  s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
   class="card-img" alt="Drugs, Party Culture & Harm Reduction" loading="lazy">
  --border)';this.style.transform='none'">
           <div style="padding:16px 18px;"><div style="font-weight:700;color:var(--text);font-size:.95rem;">Drugs,
           <div style="height:150px;overflow:hidden;"><img  
   Party Culture & Harm Reduction</div></div>
  src="https://alphax.wiki/images/7/74/Life_Planning_Hero.jpg"                
         </a>
   style="width:100%;height:100%;object-fit:cover;" alt="Life Planning"  
 
  loading="lazy"></div>                                                       
         <a href="https://alphax.wiki/Category:Life_Planning"  
           <div style="padding:16px 18px;"><div  
   class="topic-card" style="display:block;border-radius:14px;overflow:hidden;background:var(--surface);text-decoration:none;border:1px
  style="font-weight:700;color:var(--text);font-size:.95rem;">Life            
  solid var(--border);transition:transform .2s,border-color .2s;"  
  onmouseover="this.style.borderColor='var(--orange)';this.style.transform='translateY(-2px)'"  
  onmouseout="this.style.borderColor='var(--border)';this.style.transform='none'">
           <img src="https://alphax.wiki/images/7/74/Life_Planning_Hero.jpg"  
   class="card-img" alt="Life Planning" loading="lazy">
           <div style="padding:16px 18px;"><div style="font-weight:700;color:var(--text);font-size:.95rem;">Life
   Planning</div></div>
   Planning</div></div>
         </a>                                                                  
         </a>
                 
 
       </div>
       </div>
     </div>
     </div>