AlphaX Wiki - User contributions [en]

MediaWiki:Mainpage

2026-05-15T06:34:15Z

Admin:

Homepage

User:Admin

2026-05-12T05:12:55Z

Admin: Fix geo dashboard HTML: remove onclick attrs (JS wires events via Common.js), clean up buttons and layout

MediaWiki:Common.js

2026-05-12T05:10:56Z

Admin: Add geo dashboard script: Users by Country with day/week/month periods, activity chart, world map

// Hero logo image styling - white + orange glow
(function() {
var s = document.createElement('style');
s.textContent = '#ax-hero-logo img { filter: hue-rotate(200deg) saturate(8) brightness(1.6) drop-shadow(0 0 20px rgba(255,120,0,0.9)) drop-shadow(0 0 50px rgba(255,80,0,0.5)); max-width:520px; width:80%; height:auto; display:inline-block; }';
document.head.appendChild(s);
})();

// Knowledge Areas grid layout fixer
(function() {
function fixKnowledgeGrid() {
var heroDiv = document.getElementById('ax-sexual-health-hero');
if (!heroDiv) return;
var firstCard = heroDiv.closest('.ax-card');
if (!firstCard) return;
var gridContainer = firstCard.parentElement;
if (!gridContainer) return;
gridContainer.style.display = 'grid';
gridContainer.style.gridTemplateColumns = 'repeat(2, 1fr)';
gridContainer.style.gap = '14px';
// Collect cards by hero IDs
var heroIds = ['ax-sexual-health-hero','ax-dating-hero','ax-kink-hero','ax-culture-hero','ax-fashion-hero','ax-community-hero','ax-drugs-hero','ax-life-hero'];
var allKnowledgeCards = [];
heroIds.forEach(function(id) {
var h = document.getElementById(id);
if (h) { var c = h.closest('.ax-card'); if (c) allKnowledgeCards.push(c); }
});
// Find remaining 3 knowledge cards by keyword match (Community, Drugs, Life Planning)
// These have no hero images. Identify by checking they are NOT Start Learning or Featured
var keywords = [];
Array.from(document.querySelectorAll('.ax-card')).forEach(function(c) {
if (allKnowledgeCards.indexOf(c) >= 0) return;
var txt = c.innerText || '';
keywords.forEach(function(kw) {
if (txt.indexOf(kw) >= 0 && allKnowledgeCards.indexOf(c) < 0) {
allKnowledgeCards.push(c);
}
});
});
// Move all knowledge cards into grid
allKnowledgeCards.forEach(function(c) {
if (c.parentElement !== gridContainer) gridContainer.appendChild(c);
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', fixKnowledgeGrid);
} else {
fixKnowledgeGrid();
}
})();

// Sexual Health hero image
(function() {
var style = document.createElement('style');
style.textContent = '#ax-sexual-health-hero { background-image: url("https://alphax.wiki/images/c/c2/Sexual_health.png"); background-size: cover; background-position: center center; } #ax-dating-hero { background-image: url("https://alphax.wiki/images/6/6c/Dating_and_relationships.png"); background-size: cover; background-position: center center; } #ax-kink-hero { background-image: url("https://alphax.wiki/images/e/e5/Kink_BDSM_Hero.png"); background-size: cover; background-position: center center; } #ax-culture-hero { background-image: url("https://alphax.wiki/images/2/25/Culture_History_Politics_Hero.png"); background-size: cover; background-position: center center; } #ax-fashion-hero { background-image: url("https://alphax.wiki/images/4/4b/Fashion_Visual_Signaling_Hero.png"); background-size: cover; background-position: center top; } #ax-community-hero { background-image: url("https://alphax.wiki/images/e/ed/Community_Identity_Hero.png"); background-size: cover; background-position: center center; } #ax-drugs-hero { background-image: url("https://alphax.wiki/images/c/c7/Drugs_Party_Culture_Hero.jpg"); background-size: cover; background-position: center center; } #ax-life-hero { background-image: url("https://alphax.wiki/images/7/74/Life_Planning_Hero.jpg"); background-size: cover; background-position: center top; }';
document.head.appendChild(style);
})();

(function () {

const KEY = "alphax_entry_consent";
const ANALYTICS_KEY = "alphax_analytics_consent";
const MAX_AGE = 30 * 24 * 60 * 60 * 1000;
const GA_ID = "G-XXXXXXXXXX";

const saved = localStorage.getItem(KEY);

if (saved && (Date.now() - Number(saved) < MAX_AGE)) {
const analyticsConsent = localStorage.getItem(ANALYTICS_KEY);
if (analyticsConsent === "granted") {
loadGoogleAnalytics();
}
return;
}

const style = document.createElement("style");

style.innerHTML = `
#age-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.85);
backdrop-filter:blur(8px);
display:flex;
align-items:center;
justify-content:center;
z-index:999999;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
}

#age-box{
background:#0f0f12;
border:1px solid rgba(255,255,255,0.08);
border-radius:20px;
padding:40px 34px;
max-width:520px;
width:90%;
color:white;
box-shadow:0 25px 80px rgba(0,0,0,0.6);
text-align:center;
}

#age-box h2{
margin-top:0;
font-size:32px;
margin-bottom:18px;
}

#age-text{
color:#cfcfd6;
line-height:1.6;
margin-bottom:28px;
}

#checks{
text-align:left;
margin-bottom:28px;
}

#checks label{
display:block;
margin:12px 0;
font-size:15px;
color:#e4e4ea;
cursor:pointer;
line-height:1.5;
}

#checks input{
margin-right:10px;
}

#optional-title{
margin-top:22px;
margin-bottom:8px;
font-size:13px;
font-weight:700;
letter-spacing:0.04em;
text-transform:uppercase;
color:#9ca3af;
}

#buttons{
display:flex;
gap:14px;
justify-content:center;
margin-top:10px;
}

#enter{
background:#34d27a;
color:#05110b;
border:none;
padding:14px 26px;
border-radius:10px;
font-size:16px;
font-weight:700;
cursor:pointer;
opacity:0.4;
}

#enter.active{
opacity:1;
}

#exit{
background:#e74c3c;
border:none;
color:white;
padding:14px 22px;
border-radius:10px;
font-size:16px;
cursor:pointer;
}

#links{
margin-top:22px;
font-size:13px;
opacity:0.8;
}

#links a{
color:#bbb;
margin:0 10px;
text-decoration:none;
}

#links a:hover{
color:white;
}
`;

document.head.appendChild(style);

const overlay = document.createElement("div");
overlay.id = "age-overlay";

overlay.innerHTML = `
<div id="age-box">

<h2>18+ Access</h2>

<div id="age-text">
This website contains adult educational content.<br>
You must confirm the following to enter.
</div>

<div id="checks">

<label>
<input type="checkbox" id="c1">
I confirm that I am at least 18 years old
</label>

<label>
<input type="checkbox" id="c2">
I agree to the Terms & Conditions
</label>

<label>
<input type="checkbox" id="c3">
I agree to the Privacy Policy
</label>

<div id="optional-title">Optional</div>

<label>
<input type="checkbox" id="c4">
Allow anonymous analytics to help improve the website
</label>

</div>

<div id="buttons">
<button id="enter">Enter</button>
<button id="exit">Exit</button>
</div>

<div id="links">
<a href="/index.php?title=Terms_and_Conditions">T&C</a>
<a href="/index.php?title=Datenschutz">Privacy Policy</a>
</div>

</div>
`;

document.body.appendChild(overlay);

const c1 = document.getElementById("c1");
const c2 = document.getElementById("c2");
const c3 = document.getElementById("c3");
const c4 = document.getElementById("c4");
const enter = document.getElementById("enter");

function checkAll(){
if (c1.checked && c2.checked && c3.checked) {
enter.classList.add("active");
enter.disabled = false;
} else {
enter.classList.remove("active");
enter.disabled = true;
}
}

c1.onchange = checkAll;
c2.onchange = checkAll;
c3.onchange = checkAll;

enter.disabled = true;

function loadGoogleAnalytics() {
if (window.__gaLoaded) return;
window.__gaLoaded = true;

window.dataLayer = window.dataLayer || [];

function gtag() {
dataLayer.push(arguments);
}

window.gtag = gtag;

gtag("consent", "default", {
analytics_storage: "granted"
});

const script = document.createElement("script");
script.async = true;
script.src = "https://www.googletagmanager.com/gtag/js?id=" + encodeURIComponent(GA_ID);
document.head.appendChild(script);

gtag("js", new Date());
gtag("config", GA_ID, {
anonymize_ip: true
});
}

enter.onclick = function(){
localStorage.setItem(KEY, String(Date.now()));

if (c4.checked) {
localStorage.setItem(ANALYTICS_KEY, "granted");
loadGoogleAnalytics();
} else {
localStorage.setItem(ANALYTICS_KEY, "denied");
}

overlay.remove();
};

document.getElementById("exit").onclick = function(){
window.location.href = "https://google.com";
};

})();

/* ================================================ */
/* ADMIN CONTROL PANEL - AlphaX Wiki */
/* ================================================ */
(function() {
if (mw.config.get('wgPageName') !== 'AlphaX:Admin_Control_Panel') return;

mw.loader.using(['mediawiki.api'], function() {

var css = [
'#axcp-root *{box-sizing:border-box}',
'#axcp-root{font-family:system-ui,-apple-system,sans-serif;background:#0D0D0D;color:#fff;margin:-8px -20px;padding:0;border-radius:12px;overflow:hidden}',
'.axcp-hdr{background:#1A1A1A;border-bottom:1px solid #2E2E2E;padding:24px 28px 20px}',
'.axcp-ttl{font-size:22px;font-weight:700;color:#fff;margin-bottom:3px}',
'.axcp-sub{font-size:11px;color:#555;text-transform:uppercase;letter-spacing:.1em}',
'.axcp-sr{display:flex;gap:12px;margin:16px 0 0;flex-wrap:wrap}',
'.axcp-sc{background:#0D0D0D;border:1px solid #2E2E2E;border-radius:12px;padding:14px 18px;flex:1;min-width:90px}',
'.axcp-sv{font-size:24px;font-weight:700;color:#FF6600;line-height:1}',
'.axcp-sl{font-size:10px;color:#555;text-transform:uppercase;letter-spacing:.08em;margin-top:4px}',
'.axcp-ctrl{display:flex;gap:10px;padding:12px 28px;background:#111;border-bottom:1px solid #2E2E2E;flex-wrap:wrap;align-items:center}',
'.axcp-inp{flex:1;min-width:160px;background:#1A1A1A;border:1px solid #2E2E2E;border-radius:8px;padding:8px 13px;color:#fff;font-size:13px;outline:none}',
'.axcp-inp:focus{border-color:rgba(255,102,0,.5)}',
'.axcp-sel{background:#1A1A1A;border:1px solid #2E2E2E;border-radius:8px;padding:8px 11px;color:#fff;font-size:12px;outline:none;cursor:pointer;max-width:200px}',
'.axcp-sel:focus{border-color:rgba(255,102,0,.5)}',
'.axcp-cnt{background:rgba(255,102,0,.12);border:1px solid rgba(255,102,0,.3);color:#FF6600;border-radius:6px;padding:4px 12px;font-size:12px;font-weight:600;white-space:nowrap}',
'.axcp-rbtn{background:linear-gradient(135deg,#FF6600,#FF8533);border:none;border-radius:8px;color:#fff;padding:9px 16px;font-size:12px;font-weight:700;cursor:pointer}',
'.axcp-rbtn:hover{opacity:.85}',
'.axcp-tw{overflow-x:auto;padding:0 28px 32px;background:#0D0D0D}',
'table.axcp-t{width:100%;border-collapse:collapse;margin-top:14px;font-size:13px}',
'table.axcp-t thead th{background:#111;color:#555;text-transform:uppercase;letter-spacing:.07em;font-size:10px;font-weight:600;padding:10px 12px;border-bottom:1px solid #2E2E2E;cursor:pointer;white-space:nowrap;user-select:none}',
'table.axcp-t thead th:hover{color:#FF6600}',
'table.axcp-t thead th.sa::after{content:" u2191";color:#FF6600}',
'table.axcp-t thead th.sd::after{content:" u2193";color:#FF6600}',
'table.axcp-t td{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.03);vertical-align:middle}',
'table.axcp-t tr:hover td{background:rgba(255,102,0,.04)}',
'table.axcp-t tr:last-child td{border-bottom:none}',
'.axcp-al{color:#fff;text-decoration:none;font-weight:500;font-size:13px}',
'.axcp-al:hover{color:#FF6600}',
'.axcp-cp{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}',
'.axcp-st{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}',
'.s-stu{background:rgba(255,60,60,.15);color:#ff7070;border:1px solid rgba(255,60,60,.25)}',
'.s-sho{background:rgba(255,166,0,.15);color:#ffb020;border:1px solid rgba(255,166,0,.25)}',
'.s-med{background:rgba(61,220,132,.15);color:#3ddc84;border:1px solid rgba(61,220,132,.25)}',
'.s-lon{background:rgba(100,160,255,.15);color:#78b0ff;border:1px solid rgba(100,160,255,.25)}',
'.axcp-n{text-align:right;font-variant-numeric:tabular-nums;color:#777}',
'.axcp-bw{background:#1A1A1A;border-radius:3px;height:5px;width:60px;display:inline-block;vertical-align:middle;margin-left:6px;overflow:hidden}',
'.axcp-bf{height:5px;border-radius:3px;background:linear-gradient(to right,#FF6600,#FF8533)}',
'.axcp-load{text-align:center;padding:80px 40px;color:#555;font-size:15px;background:#0D0D0D}',
'.axcp-prog{color:#FF6600;font-size:13px;margin-top:10px}',
'.axcp-z{color:#333}',
'.axcp-hi{color:#FF6600;font-weight:600}',
'.axcp-wt{color:#3ddc84;font-weight:600}'
].join('');

var sEl = document.createElement('style');
sEl.textContent = css;
document.head.appendChild(sEl);

var contentEl = document.querySelector('#mw-content-text .mw-parser-output') || document.getElementById('mw-content-text');
contentEl.innerHTML = '<div id="axcp-root"><div class="axcp-load"><div style="font-size:28px;margin-bottom:14px">⚙</div><div>Loading article database...</div><div class="axcp-prog" id="axcp-prog">Fetching page list...</div></div></div>';

var root = document.getElementById('axcp-root');
var allData = [];
var sortCol = 'title', sortDir = 1, filterText = '', filterCat = '', filterSt = '';

var CC = {
'Sexual Health': 'rgba(255,100,100,.18)|#ff8080',
'Dating, Sex & Relationships': 'rgba(255,182,60,.18)|#ffb83c',
'Kink & BDSM': 'rgba(180,80,255,.18)|#c864ff',
'Culture, History & Politics': 'rgba(80,140,255,.18)|#6496ff',
'Fashion & Visual Signaling': 'rgba(255,220,60,.18)|#ffdc3c',
'Community & Identity': 'rgba(61,220,132,.18)|#3ddc84',
'Drugs, Party Culture & Harm Reduction':'rgba(255,120,40,.18)|#ff8028',
'Life Planning': 'rgba(80,200,255,.18)|#50c8ff'
};
var KCATS = Object.keys(CC);

function catSty(cat) {
var s = CC[cat] || 'rgba(120,120,120,.18)|#888', p = s.split('|');
return 'background:'+p[0]+';color:'+p[1]+';border:1px solid '+p[1]+';';
}
function wSt(w) {
if (w < 150) return ['stu','Stub'];
if (w < 500) return ['sho','Short'];
if (w < 1500) return ['med','Medium'];
return ['lon','Long'];
}
function fDate(iso) {
if (!iso) return '<span class="axcp-z">-</span>';
var d = new Date(iso);
return d.toLocaleDateString('en-GB',{day:'2-digit',month:'short',year:'numeric'});
}
function fKb(b) {
if (!b) return '<span class="axcp-z">-</span>';
return (b/1024).toFixed(1)+' <span style="color:#444;font-size:10px">KB</span>';
}
function esc(s) {
return String(s||'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
}
function setP(msg) { var el = document.getElementById('axcp-prog'); if (el) el.textContent = msg; }

function render(data) {
var fd = data.filter(function(r) {
var mt = !filterText || r.title.toLowerCase().indexOf(filterText)>=0 || (r.cat||'').toLowerCase().indexOf(filterText)>=0;
var mc = !filterCat || r.cat === filterCat;
var ms = !filterSt || wSt(r.words||0)[0] === filterSt;
return mt && mc && ms;
});
fd.sort(function(a,b) {
var av=a[sortCol]||0, bv=b[sortCol]||0;
if (typeof av==='number'&&typeof bv==='number') return sortDir*(av-bv);
return sortDir*String(av).localeCompare(String(bv));
});
var mxW = Math.max.apply(null,[1].concat(fd.map(function(r){return r.words||0;})));
var totW = fd.reduce(function(s,r){return s+(r.words||0);},0);
var avgW = fd.length ? Math.round(totW/fd.length) : 0;
var totR = fd.reduce(function(s,r){return s+(r.revisions||0);},0);
var nocat = fd.filter(function(r){return !r.cat;}).length;
var cats={};
data.forEach(function(r){if(r.cat)cats[r.cat]=1;});
var catList=Object.keys(cats).sort();

var h='';
h+='<div class="axcp-hdr">';
h+='<div class="axcp-ttl">⚙ Admin Control Panel</div>';
h+='<div class="axcp-sub">AlphaX Wiki • Article Database • Live Data</div>';
h+='<div class="axcp-sr">';
h+='<div class="axcp-sc"><div class="axcp-sv">'+fd.length+'</div><div class="axcp-sl">Articles</div></div>';
h+='<div class="axcp-sc"><div class="axcp-sv">'+avgW.toLocaleString()+'</div><div class="axcp-sl">Avg Words</div></div>';
h+='<div class="axcp-sc"><div class="axcp-sv">'+totW.toLocaleString()+'</div><div class="axcp-sl">Total Words</div></div>';
h+='<div class="axcp-sc"><div class="axcp-sv">'+totR.toLocaleString()+'</div><div class="axcp-sl">Total Revisions</div></div>';
h+='<div class="axcp-sc"><div class="axcp-sv">'+catList.length+'</div><div class="axcp-sl">Categories</div></div>';
h+='<div class="axcp-sc"><div class="axcp-sv" style="color:'+(nocat>0?'#ff7070':'#3ddc84')+'">'+nocat+'</div><div class="axcp-sl">Uncategorised</div></div>';
h+='</div></div>';
h+='<div class="axcp-ctrl">';
h+='<input class="axcp-inp" id="axcps" type="text" placeholder="Search articles or categories..." value="'+esc(filterText)+'">';
h+='<select class="axcp-sel" id="axcpc"><option value="">All Categories</option>';
catList.forEach(function(c){h+='<option value="'+esc(c)+'"'+(filterCat===c?' selected':'')+'>'+esc(c)+'</option>';});
h+='</select>';
h+='<select class="axcp-sel" id="axcpf"><option value="">All Statuses</option>';
[['stu','Stub'],['sho','Short'],['med','Medium'],['lon','Long']].forEach(function(s){
h+='<option value="'+s[0]+'"'+(filterSt===s[0]?' selected':'')+'>'+s[1]+'</option>';
});
h+='</select>';
h+='<span class="axcp-cnt">'+fd.length+' articles</span>';
h+='<button class="axcp-rbtn" id="axcpr">↻ Refresh Data</button>';
h+='</div>';
h+='<div class="axcp-tw"><table class="axcp-t"><thead><tr>';
[{k:'title',l:'Article'},{k:'cat',l:'Category'},{k:'subcat',l:'Subcategory'},
{k:'words',l:'Words'},{k:'size',l:'Size (KB)'},{k:'status',l:'Status'},
{k:'touched',l:'Last Edited'},{k:'revisions',l:'Revisions'},
{k:'watchers',l:'Watchers'},{k:'links',l:'Inbound Links'}
].forEach(function(c){
var cl=sortCol===c.k?(sortDir===1?'sa':'sd'):'';
h+='<th class="'+cl+'" data-col="'+c.k+'">'+c.l+'</th>';
});
h+='</tr></thead><tbody>';
if (!fd.length) {
h+='<tr><td colspan="10" style="text-align:center;padding:50px;color:#333">No articles match your filters.</td></tr>';
}
fd.forEach(function(r){
var st=wSt(r.words||0);
var bp=mxW>0?Math.round(((r.words||0)/mxW)*60):0;
h+='<tr>';
h+='<td><a class="axcp-al" href="/wiki/'+encodeURIComponent((r.title||'').replace(/ /g,'_'))+'" target="_blank">'+esc(r.title)+'</a></td>';
h+='<td>'+(r.cat?'<span class="axcp-cp" style="'+catSty(r.cat)+'">'+esc(r.cat)+'</span>':'<span class="axcp-z">-</span>')+'</td>';
h+='<td style="color:#555;font-size:12px">'+esc(r.subcat||'-')+'</td>';
h+='<td class="axcp-n">'+(r.words||0).toLocaleString()+'<span class="axcp-bw"><span class="axcp-bf" style="width:'+bp+'px"></span></span></td>';
h+='<td class="axcp-n">'+fKb(r.size)+'</td>';
h+='<td><span class="axcp-st s-'+st[0]+'">'+st[1]+'</span></td>';
h+='<td style="color:#555;white-space:nowrap;font-size:12px">'+fDate(r.touched)+'</td>';
h+='<td class="axcp-n '+(r.revisions>20?'axcp-hi':'')+'">'+(r.revisions||0)+'</td>';
h+='<td class="axcp-n '+(r.watchers>0?'axcp-wt':'axcp-z')+'">'+(r.watchers>0?'👁 '+r.watchers:'-')+'</td>';
h+='<td class="axcp-n '+(r.links>5?'axcp-hi':'')+'">'+(r.links||0)+'</td>';
h+='</tr>';
});
h+='</tbody></table></div>';
root.innerHTML=h;

var si=document.getElementById('axcps');
if(si)si.addEventListener('input',function(){filterText=this.value.toLowerCase();render(allData);});
var ci=document.getElementById('axcpc');
if(ci)ci.addEventListener('change',function(){filterCat=this.value;render(allData);});
var fi=document.getElementById('axcpf');
if(fi)fi.addEventListener('change',function(){filterSt=this.value;render(allData);});
var ri=document.getElementById('axcpr');
if(ri)ri.addEventListener('click',function(){allData=[];loadData();});
document.querySelectorAll('table.axcp-t thead th').forEach(function(th){
th.addEventListener('click',function(){
var col=this.getAttribute('data-col');
if(sortCol===col){sortDir*=-1;}else{sortCol=col;sortDir=1;}
render(allData);
});
});
}

function apiFetch(url) {
return fetch(url).then(function(r){return r.json();});
}

function loadData() {
root.innerHTML='<div class="axcp-load"><div style="font-size:28px;margin-bottom:14px">⚙</div><div>Loading article database...</div><div class="axcp-prog" id="axcp-prog">Step 1/4 -- Fetching page list...</div></div>';
var pages=[], map={}, ids=[];

function fetchPages(apc) {
var u='/api.php?action=query&list=allpages&apnamespace=0&aplimit=500&format=json';
if(apc) u+='&apcontinue='+encodeURIComponent(apc);
return apiFetch(u).then(function(d){
if(!d||!d.query)return;
pages=pages.concat(d.query.allpages||[]);
var cont=d.continue&&d.continue.apcontinue;
if(cont)return fetchPages(cont);
});
}

// Step 2: info + categories (no revision params to avoid conflicts)
function fetchInfoChunk(i) {
if(i>=ids.length) return Promise.resolve();
var chunk=ids.slice(i,i+50).join('|');
return apiFetch('/api.php?action=query&pageids='+chunk+'&prop=info|categories&inprop=watchers&cllimit=15&format=json').then(function(d){
if(!d||!d.query||!d.query.pages){return fetchInfoChunk(i+50);}
Object.keys(d.query.pages).forEach(function(pid){
var pg=d.query.pages[pid]; if(!map[pid])return;
map[pid].size=pg.length||0;
map[pid].touched=pg.touched||'';
map[pid].watchers=pg.watchers!=null?Number(pg.watchers):0;
if(pg.categories){pg.categories.forEach(function(c){
var cn=c.title.replace('Category:','');
if(KCATS.indexOf(cn)>=0){if(!map[pid].cat)map[pid].cat=cn;}
else if(cn.length<60&&cn.toLowerCase().indexOf('stub')<0){if(!map[pid].subcat)map[pid].subcat=cn;}
});}
});
return fetchInfoChunk(i+50);
});
}

// Step 3: revision counts
function fetchRevChunk(i) {
if(i>=ids.length) return Promise.resolve();
var chunk=ids.slice(i,i+20).join('|');
return apiFetch('/api.php?action=query&pageids='+chunk+'&prop=revisions&rvprop=ids&rvlimit=max&format=json').then(function(d){
if(!d||!d.query||!d.query.pages){return fetchRevChunk(i+20);}
Object.keys(d.query.pages).forEach(function(pid){
var pg=d.query.pages[pid]; if(!map[pid])return;
map[pid].revisions=(pg.revisions||[]).length;
});
return fetchRevChunk(i+20);
});
}

// Step 4: word counts + inbound links
function fetchContentChunk(i) {
if(i>=ids.length) return Promise.resolve();
var chunk=ids.slice(i,i+8).join('|');
return apiFetch('/api.php?action=query&pageids='+chunk+'&prop=revisions|linkshere&rvprop=content&rvslots=main&lhnamespace=0&lhlimit=max&format=json').then(function(d){
if(!d||!d.query||!d.query.pages){return fetchContentChunk(i+8);}
Object.keys(d.query.pages).forEach(function(pid){
var pg=d.query.pages[pid]; if(!map[pid])return;
map[pid].links=(pg.linkshere||[]).length;
if(!pg.revisions||!pg.revisions[0])return;
if(!pg.revisions||!pg.revisions[0])return;
var slot=pg.revisions[0].slots?pg.revisions[0].slots.main:pg.revisions[0];
var raw=slot['*']||slot.content||'';
// Remove template names but keep parameter text
var c=raw.replace(/\{\{[A-Za-z][^|\}]*\|?/g,'').replace(/\}\}/g,' ');
c=c.replace(/\[\[File:[^\]]+\]\]/gi,' ');
c=c.replace(/\[\[(?:[^\]|]+\|)?([^\]]+)\]\]/g,'$1');
c=c.replace(/<[^>]+>/g,' ').replace(//g,' ');
c=c.replace(/={2,}[^=]+=={2,}/g,' ');
c=c.replace(/[|!=*#;:{}\/\[\]]/g,' ');
c=c.replace(/\s+/g,' ').trim();
map[pid].words=c?c.split(/\s+/).filter(function(w){return w.length>2;}).length:0;
});
return fetchContentChunk(i+8);
});
}

fetchPages(null).then(function(){
setP('Step 2/4 -- Fetching page info & categories for '+pages.length+' articles...');
pages.forEach(function(p){map[p.pageid]={title:p.title,cat:'',subcat:'',words:0,size:0,touched:'',revisions:0,watchers:0,links:0};});
ids=pages.map(function(p){return p.pageid;});
return fetchInfoChunk(0);
}).then(function(){
setP('Step 3/4 -- Counting revisions...');
return fetchRevChunk(0);
}).then(function(){
setP('Step 4/4 -- Calculating word counts & inbound links...');
return fetchContentChunk(0);
}).then(function(){
allData=Object.values(map);
render(allData);
}).catch(function(e){
root.innerHTML='<div class="axcp-load" style="color:#ff7070">⚠ Error: '+e.message+'</div>';
});
}

loadData();
});
})();

// Category Grid Component - background images for ax-cat-grid
(function() {
// Map of card ID -> background image URL and fallback gradient
var catImages = {
'ax-cat-img-1': { url: 'https://alphax.wiki/images/4/43/Sexual_Health_Hero.jpg', pos: 'center center' },
'ax-cat-img-2': { url: 'https://alphax.wiki/images/e/e5/Kink_BDSM_Hero.png', pos: 'center center' },
'ax-cat-img-3': { gradient: 'linear-gradient(135deg, #0D1B2A 0%, #1B3A4B 40%, #0D2B3E 100%)' },
'ax-cat-img-4': { gradient: 'linear-gradient(135deg, #1A0D0D 0%, #3A1A0D 50%, #2B1A0D 100%)' },
'ax-cat-img-5': { url: 'https://alphax.wiki/images/0/0b/Dating_Sex_Relationships_Hero.png', pos: 'center 30%' },
'ax-cat-img-6': { gradient: 'linear-gradient(135deg, #1A0D1A 0%, #2E0D3A 50%, #1A0D2B 100%)' },
'ax-cat-img-7': { url: 'https://alphax.wiki/images/2/25/Culture_History_Politics_Hero.png', pos: 'center center' },
'ax-cat-img-8': { gradient: 'linear-gradient(135deg, #0D1A0D 0%, #0D2B1A 50%, #0D1A2B 100%)' }
};

function applyCatImages() {
Object.keys(catImages).forEach(function(id) {
var el = document.getElementById(id);
if (!el) return;
var cfg = catImages[id];
if (cfg.url) {
el.style.backgroundImage = 'url("' + cfg.url + '")';
el.style.backgroundSize = 'cover';
el.style.backgroundPosition = cfg.pos || 'center center';
} else if (cfg.gradient) {
el.style.backgroundImage = cfg.gradient;
}
});
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', applyCatImages);
} else {
applyCatImages();
}
})();

// Add Impressum link to footer places row
(function() {
function addImpressumToFooter() {
// Find the footer-places list
var footerPlaces = document.getElementById('footer-places');
if (!footerPlaces) return;
// Check if Impressum link already exists
if (document.getElementById('footer-places-impressum')) return;
// Create the new list item
var li = document.createElement('li');
li.id = 'footer-places-impressum';
var a = document.createElement('a');
a.href = '/Impressum';
a.textContent = 'Impressum';
li.appendChild(a);
footerPlaces.appendChild(li);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', addImpressumToFooter);
} else {
addImpressumToFooter();
}
})();

// ===== Permanent Favicon =====
(function() {
document.querySelectorAll('link[rel="icon"], link[rel="shortcut icon"]').forEach(function(el) {
el.parentNode.removeChild(el);
});
var link = document.createElement('link');
link.rel = 'icon';
link.type = 'image/png';
link.href = 'https://alphax.wiki/images/2/26/Favicon.png';
document.head.appendChild(link);
})();

// =====================================================
// Users by Country Counter - Admin Page Widget
// =====================================================
(function() {
'use strict';
if (mw.config.get('wgPageName') !== 'User:Admin') return;

var langToCountry = {
'en': '🇺🇸 English-speaking', 'de': '🇩🇪 Germany / German-speaking',
'fr': '🇫🇷 France / French-speaking', 'es': '🇪🇸 Spain / Spanish-speaking',
'pt': '🇵🇹 Portugal / Portuguese-speaking', 'it': '🇮🇹 Italy / Italian-speaking',
'nl': '🇳🇱 Netherlands / Dutch-speaking', 'pl': '🇵🇱 Poland / Polish-speaking',
'ru': '🇷🇺 Russia / Russian-speaking', 'ja': '🇯🇵 Japan',
'zh': '🇨🇳 China / Chinese-speaking', 'ar': '🇸🇦 Arabic-speaking',
'tr': '🇹🇷 Turkey / Turkish-speaking', 'sv': '🇸🇪 Sweden / Swedish-speaking',
'da': '🇩🇰 Denmark / Danish-speaking', 'fi': '🇫🇮 Finland / Finnish-speaking',
'nb': '🇳🇴 Norway / Norwegian-speaking', 'cs': '🇨🇿 Czech Republic',
'hu': '🇭🇺 Hungary', 'ro': '🇷🇴 Romania', 'el': '🇬🇷 Greece / Greek-speaking',
'ko': '🇰🇷 Korea / Korean-speaking', 'uk': '🇺🇦 Ukraine / Ukrainian-speaking',
'he': '🇮🇱 Israel / Hebrew-speaking', 'id': '🇮🇩 Indonesia',
'vi': '🇻🇳 Vietnam', 'th': '🇹🇭 Thailand', 'hi': '🇮🇳 India / Hindi-speaking',
'bn': '🇧🇩 Bangladesh / Bengali-speaking', 'fa': '🇮🇷 Iran / Persian-speaking'
};

function renderResults(langCounts, totalUsers) {
var container = document.getElementById('country-user-counter');
if (!container) return;

var sorted = Object.keys(langCounts)
.filter(function(l) { return langCounts[l] > 0; })
.sort(function(a, b) { return langCounts[b] - langCounts[a]; });

var html = '<style>';
html += '#cuc-wrap{font-family:sans-serif}';
html += '#cuc-stats{display:flex;gap:20px;margin-bottom:14px;flex-wrap:wrap}';
html += '.cuc-stat-card{background:#222;border:1px solid #444;border-radius:6px;padding:10px 18px;min-width:120px;text-align:center}';
html += '.cuc-stat-num{font-size:1.8em;font-weight:bold;color:#e07000}';
html += '.cuc-stat-lbl{font-size:0.8em;color:#aaa;margin-top:2px}';
html += '#cuc-table{width:100%;border-collapse:collapse;margin-top:4px}';
html += '#cuc-table th{background:#2a2a2a;color:#e07000;padding:8px 12px;text-align:left;border:1px solid #444;font-size:0.9em}';
html += '#cuc-table td{padding:7px 12px;border:1px solid #2e2e2e;color:#ddd;font-size:0.9em}';
html += '#cuc-table tr:nth-child(even) td{background:#1c1c1c}';
html += '#cuc-table tr:hover td{background:#252525}';
html += '.cuc-bar-wrap{background:#111;border-radius:3px;height:14px;overflow:hidden}';
html += '.cuc-bar{height:14px;background:linear-gradient(90deg,#e07000,#ff9a00);border-radius:3px;transition:width 0.4s ease}';
html += '.cuc-no-data{background:#1a1a1a;border:1px dashed #444;border-radius:6px;padding:16px;color:#aaa;line-height:1.6}';
html += '.cuc-no-data code{background:#222;padding:2px 6px;border-radius:3px;color:#e07000;font-size:0.9em}';
html += '#cuc-timestamp{color:#555;font-size:0.8em;margin-top:10px}';
html += '</style>';

html += '<div id="cuc-wrap">';

// Stats cards
html += '<div id="cuc-stats">';
html += '<div class="cuc-stat-card"><div class="cuc-stat-num">' + totalUsers + '</div><div class="cuc-stat-lbl">Total Users</div></div>';
html += '<div class="cuc-stat-card"><div class="cuc-stat-num">' + sorted.length + '</div><div class="cuc-stat-lbl">Countries / Regions</div></div>';
var locatedUsers = sorted.reduce(function(sum, l) { return sum + langCounts[l]; }, 0);
html += '<div class="cuc-stat-card"><div class="cuc-stat-num">' + locatedUsers + '</div><div class="cuc-stat-lbl">Users with Location</div></div>';
html += '</div>';

if (sorted.length === 0) {
html += '<div class="cuc-no-data">';
html += '<strong>📍 No country data available yet.</strong><br>';
html += 'This counter tracks users by country using the <strong>Babel extension</strong> language categories.<br>';
html += 'Users can declare their language/country by adding babel tags to their user page:<br><br>';
html += '<code>{{#babel:en|de|fr}}</code><br><br>';
html += 'Once users add babel tags, this counter will automatically display their country distribution.<br>';
html += 'Currently tracking <strong>' + totalUsers + ' registered users</strong> on this wiki.';
html += '</div>';
} else {
var maxCount = langCounts[sorted[0]] || 1;
html += '<table id="cuc-table"><thead><tr>';
html += '<th style="width:40px">#</th>';
html += '<th>Country / Region</th>';
html += '<th style="width:70px;text-align:center">Users</th>';
html += '<th style="width:200px">Distribution</th>';
html += '</tr></thead><tbody>';
sorted.forEach(function(lang, idx) {
var count = langCounts[lang];
var label = langToCountry[lang] || ('🌐 ' + lang.toUpperCase());
var pct = Math.round((count / locatedUsers) * 100);
var barWidth = Math.round((count / maxCount) * 180);
html += '<tr>';
html += '<td style="color:#666;text-align:center">' + (idx + 1) + '</td>';
html += '<td>' + label + '</td>';
html += '<td style="text-align:center;font-weight:bold;color:#e07000">' + count + '</td>';
html += '<td><div class="cuc-bar-wrap"><div class="cuc-bar" style="width:' + barWidth + 'px"></div></div></td>';
html += '</tr>';
});
html += '</tbody></table>';
}

html += '<div id="cuc-timestamp">Last updated: ' + new Date().toLocaleString() + '</div>';
html += '</div>';

container.innerHTML = html;
}

function buildCounter() {
var container = document.getElementById('country-user-counter');
if (!container) return;
container.innerHTML = '<p style="color:#aaa;font-style:italic">⏳ Loading user statistics by country...</p>';

var allUsers = [];
var langCounts = {};
var langs = Object.keys(langToCountry);

function fetchUsers(aufrom) {
var params = { action: 'query', list: 'allusers', aulimit: 500, format: 'json' };
if (aufrom) params.aufrom = aufrom;
return $.getJSON(mw.util.wikiScript('api'), params).then(function(data) {
var users = (data.query && data.query.allusers) || [];
allUsers = allUsers.concat(users);
if (data['continue'] && data['continue'].aufrom) return fetchUsers(data['continue'].aufrom);
});
}

function fetchLangCat(lang) {
return $.getJSON(mw.util.wikiScript('api'), {
action: 'query', list: 'categorymembers',
cmtitle: 'Category:User_' + lang,
cmtype: 'page', cmnamespace: 2, cmlimit: 500, format: 'json'
}).then(function(data) {
var m = (data.query && data.query.categorymembers) || [];
if (m.length > 0) langCounts[lang] = (langCounts[lang] || 0) + m.length;
}).catch(function() {});
}

fetchUsers().then(function() {
var d = $.Deferred().resolve().promise();
langs.forEach(function(lang) { d = d.then(function() { return fetchLangCat(lang); }); });
return d;
}).then(function() {
renderResults(langCounts, allUsers.length);
}).catch(function(e) {
container.innerHTML = '<p style="color:#f66">⚠️ Error loading data: ' + String(e) + '</p>';
});
}

$(document).ready(function() { buildCounter(); });
})();
// =====================================================
// End: Users by Country Counter
// =====================================================

// ===== Article Overview Page - Category/Subcategory/Title/Words/Focus Table =====
(function() {
if (mw.config.get('wgPageName') !== 'Article_Overview') return;

var apiBase = mw.util.wikiScript('api');
var allRows = [];
var tableBody = null;
var statusSpan = null;

$(document).ready(function() {
var wrapper = document.getElementById('article-overview-wrapper');
if (!wrapper) return;

// Build controls row with button + status
var controls = document.createElement('div');
controls.style.marginBottom = '14px';

var btn = document.createElement('button');
btn.textContent = 'Download CSV';
btn.style.cssText = 'background-color:#e07b00;color:#fff;padding:9px 20px;border:none;border-radius:5px;font-size:14px;font-weight:bold;cursor:pointer;letter-spacing:0.3px;';
btn.addEventListener('click', downloadCSV);
controls.appendChild(btn);

statusSpan = document.createElement('span');
statusSpan.style.cssText = 'margin-left:14px;font-size:13px;color:#aaa;vertical-align:middle;';
statusSpan.textContent = 'Loading…';
controls.appendChild(statusSpan);
wrapper.appendChild(controls);

// Build table
var table = document.createElement('table');
table.style.cssText = 'width:100%;border-collapse:collapse;font-size:13px;';

var thead = document.createElement('thead');
var headerRow = document.createElement('tr');
headerRow.style.cssText = 'background-color:#2a2a2a;color:#f0a500;text-align:left;';
var cols = ['Category', 'Subcategory', 'Title', 'Words', 'Focus'];
cols.forEach(function(colName, i) {
var th = document.createElement('th');
th.textContent = colName;
th.style.cssText = 'padding:9px 12px;border:1px solid #444;' + (colName === 'Words' ? 'text-align:right;' : '');
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);

tableBody = document.createElement('tbody');
tableBody.innerHTML = '<tr><td colspan="5" style="padding:12px;text-align:center;color:#aaa;font-style:italic;">Loading articles… please wait.</td></tr>';
table.appendChild(tableBody);
wrapper.appendChild(table);

buildTable();
});

function getCategoryMembers(catName, cmtype, continueParam, accumulated, callback) {
var params = {
action: 'query', list: 'categorymembers',
cmtitle: 'Category:' + catName,
cmlimit: 500, cmtype: cmtype, format: 'json'
};
if (continueParam) params.cmcontinue = continueParam;
$.getJSON(apiBase, params).done(function(data) {
var members = (data.query && data.query.categorymembers) ? data.query.categorymembers : [];
members.forEach(function(m){ accumulated.push(m); });
if (data.continue && data.continue.cmcontinue) {
getCategoryMembers(catName, cmtype, data.continue.cmcontinue, accumulated, callback);
} else {
callback(accumulated);
}
}).fail(function(){ callback(accumulated); });
}

function escHtml(str) {
return String(str).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
}

function renderTable(rows) {
if (!tableBody) return;
if (!rows || rows.length === 0) {
tableBody.innerHTML = '<tr><td colspan="5" style="padding:10px;text-align:center;color:#aaa;">No articles found.</td></tr>';
return;
}
var html = '';
rows.forEach(function(row, i) {
var bg = i % 2 === 0 ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.07)';
html += '<tr style="background:' + bg + ';">';
html += '<td style="padding:6px 10px;border:1px solid #444;">' + escHtml(row.category) + '</td>';
html += '<td style="padding:6px 10px;border:1px solid #444;">' + escHtml(row.sub) + '</td>';
html += '<td style="padding:6px 10px;border:1px solid #444;"><a href="' + mw.util.getUrl(row.title) + '">' + escHtml(row.title) + '</a></td>';
html += '<td style="padding:6px 10px;border:1px solid #444;text-align:right;">' + escHtml(String(row.words)) + '</td>';
html += '<td style="padding:6px 10px;border:1px solid #444;">' + escHtml(row.focus) + '</td>';
html += '</tr>';
});
tableBody.innerHTML = html;
}

function buildTable() {
if (statusSpan) statusSpan.textContent = 'Fetching categories…';

$.getJSON(apiBase, { action:'query', list:'allcategories', aclimit:500, format:'json' })
.done(function(data) {
var topCats = (data.query && data.query.allcategories) ? data.query.allcategories.map(function(c){ return c['*']; }) : [];
var rows = [];
var totalCats = topCats.length;
var processed = 0;

if (totalCats === 0) {
if (tableBody) tableBody.innerHTML = '<tr><td colspan="5" style="padding:10px;text-align:center;color:#aaa;">No categories found.</td></tr>';
if (statusSpan) statusSpan.textContent = '';
return;
}

function checkDone() {
processed++;
if (statusSpan) statusSpan.textContent = 'Loading… (' + processed + '/' + totalCats + ' categories)';
if (processed === totalCats) {
rows.sort(function(a,b){
var ca = a.category.toLowerCase(), cb = b.category.toLowerCase();
if (ca < cb) return -1; if (ca > cb) return 1;
var sa = a.sub.toLowerCase(), sb = b.sub.toLowerCase();
if (sa < sb) return -1; if (sa > sb) return 1;
return a.title.localeCompare(b.title);
});
allRows = rows;
renderTable(rows);
if (statusSpan) statusSpan.textContent = rows.length + ' article entries loaded.';
}
}

topCats.forEach(function(catName) {
getCategoryMembers(catName, 'page|subcat', null, [], function(members) {
var pages = members.filter(function(m){ return m.ns === 0; });
var subcats = members.filter(function(m){ return m.ns === 14; });

if (pages.length === 0 && subcats.length === 0) {
checkDone(); return;
}

var subTotal = pages.length + subcats.length;
var subProcessed = 0;

function subDone() {
subProcessed++;
if (subProcessed >= subTotal) checkDone();
}

pages.forEach(function(page) {
rows.push({ category: catName, sub: '—', title: page.title, words: 'n/a', focus: catName });
subDone();
});

subcats.forEach(function(subcat) {
var subName = subcat.title.replace('Category:','');
getCategoryMembers(subName, 'page', null, [], function(subPages) {
subPages.filter(function(m){ return m.ns === 0; }).forEach(function(page) {
rows.push({ category: catName, sub: subName, title: page.title, words: 'n/a', focus: catName });
});
subDone();
});
});
});
});
})
.fail(function() {
if (tableBody) tableBody.innerHTML = '<tr><td colspan="5" style="padding:10px;text-align:center;color:#f55;">Error loading data. Check API access.</td></tr>';
});
}

function downloadCSV() {
if (!allRows || allRows.length === 0) {
alert('No data to download yet. Please wait for the table to finish loading.');
return;
}
var csv = 'Category,Subcategory,Title,Words,Focus\n';
allRows.forEach(function(row) {
csv += ['category','sub','title','words','focus'].map(function(k){
return '"' + String(row[k]).replace(/"/g,'""') + '"';
}).join(',') + '\n';
});
var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url; a.download = 'article-overview.csv';
document.body.appendChild(a); a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}

})();

// ═══════════════════════════════════════════════════════════
// GEO DASHBOARD – Users by Country (Day / Week / Month)
// ═══════════════════════════════════════════════════════════
(function () {
if (!document.getElementById('geo-dashboard')) return;

var API = '/api.php';

function isoDate(d) { return d.toISOString().slice(0, 10); }

function startOf(period) {
var now = new Date();
if (period === 'day') return new Date(now.getFullYear(), now.getMonth(), now.getDate());
if (period === 'week') { var d = new Date(now); d.setDate(d.getDate() - d.getDay()); d.setHours(0,0,0,0); return d; }
if (period === 'month') return new Date(now.getFullYear(), now.getMonth(), 1);
return new Date(0);
}

var COUNTRY_MAP = {
'en':'🇺🇸 English / US','de':'🇩🇪 German','fr':'🇫🇷 French','es':'🇪🇸 Spanish',
'it':'🇮🇹 Italian','pt':'🇧🇷 Portuguese','ru':'🇷🇺 Russian','ja':'🇯🇵 Japanese',
'zh':'🇨🇳 Chinese','ko':'🇰🇷 Korean','ar':'🇸🇦 Arabic','nl':'🇳🇱 Dutch',
'pl':'🇵🇱 Polish','sv':'🇸🇪 Swedish','no':'🇳🇴 Norwegian','da':'🇩🇰 Danish',
'fi':'🇫🇮 Finnish','tr':'🇹🇷 Turkish','cs':'🇨🇿 Czech','hu':'🇭🇺 Hungarian',
'ro':'🇷🇴 Romanian','uk':'🇺🇦 Ukrainian','vi':'🇻🇳 Vietnamese','th':'🇹🇭 Thai',
'id':'🇮🇩 Indonesian','ms':'🇲🇾 Malay','he':'🇮🇱 Hebrew','fa':'🇮🇷 Persian',
'hi':'🇮🇳 Hindi','bn':'🇧🇩 Bengali'
};

function fetchUsers() {
return fetch(API + '?action=query&list=allusers&aulimit=500&format=json')
.then(function(r) { return r.json(); })
.then(function(d) { return d.query.allusers || []; });
}

function fetchChanges() {
return fetch(API + '?action=query&list=recentchanges&rclimit=500&rcprop=user%7Ctimestamp&format=json')
.then(function(r) { return r.json(); })
.then(function(d) { return d.query.recentchanges || []; });
}

function fetchBabel(username) {
return fetch(API + '?action=query&titles=User:' + encodeURIComponent(username) + '&prop=categories&format=json')
.then(function(r) { return r.json(); })
.then(function(d) {
var pages = (d.query && d.query.pages) ? d.query.pages : {};
var langs = [];
Object.values(pages).forEach(function(p) {
(p.categories || []).forEach(function(c) {
var m = c.title.match(/Category:User ([a-z]{2,3})/i);
if (m) langs.push(m[1].toLowerCase());
});
});
return langs;
});
}

function drawMap(activeLangs) {
var svg = document.getElementById('geo-world-map');
if (!svg) return;
svg.innerHTML = '';

var bg = document.createElementNS('http://www.w3.org/2000/svg','rect');
bg.setAttribute('width','900'); bg.setAttribute('height','440'); bg.setAttribute('fill','#0d1f33');
svg.appendChild(bg);

var continents = [
'M80,100 L240,95 L255,200 L220,230 L170,235 L110,220 L75,170 Z',
'M155,240 L220,235 L235,360 L195,385 L155,370 L138,320 Z',
'M385,90 L480,85 L490,160 L450,175 L400,170 L378,140 Z',
'M390,175 L460,170 L470,320 L430,345 L388,335 L375,280 Z',
'M490,80 L750,75 L760,230 L700,250 L520,240 L485,180 Z',
'M640,280 L740,275 L748,355 L700,368 L638,355 Z',
'M230,50 L290,45 L295,90 L255,95 L228,82 Z'
];
continents.forEach(function(d) {
var path = document.createElementNS('http://www.w3.org/2000/svg','path');
path.setAttribute('d', d); path.setAttribute('fill','#2a3a2a');
path.setAttribute('stroke','#1a2a1a'); path.setAttribute('stroke-width','1');
svg.appendChild(path);
});

var shapes = {
'de':'M440,145 L455,140 L465,148 L462,165 L448,170 L438,162 Z',
'fr':'M415,152 L430,148 L438,162 L430,175 L415,172 L408,162 Z',
'es':'M390,170 L415,168 L415,185 L395,190 L385,182 Z',
'it':'M450,168 L462,165 L468,180 L460,195 L450,188 L445,178 Z',
'gb':'M418,135 L428,132 L430,145 L420,148 L414,142 Z',
'ru':'M460,120 L560,110 L580,135 L540,145 L465,148 Z',
'us':'M120,150 L220,148 L225,190 L200,200 L115,195 Z',
'cn':'M620,150 L680,145 L685,175 L650,185 L615,178 Z',
'jp':'M695,155 L708,152 L710,165 L700,168 L693,163 Z',
'br':'M195,230 L240,225 L245,275 L215,282 L188,270 Z',
'in':'M580,175 L615,170 L618,210 L595,218 L575,205 Z',
'au':'M660,280 L720,275 L725,320 L690,328 L655,315 Z'
};
Object.keys(shapes).forEach(function(cc) {
var isActive = activeLangs.some(function(l) { return l.startsWith(cc); });
var path = document.createElementNS('http://www.w3.org/2000/svg','path');
path.setAttribute('d', shapes[cc]);
path.setAttribute('fill', isActive ? '#ff6600' : '#3a4a3a');
path.setAttribute('stroke','#555'); path.setAttribute('stroke-width','1');
path.setAttribute('opacity', isActive ? '0.9' : '0.5');
svg.appendChild(path);
});

var labels = [{x:160,y:175,t:'North America'},{x:450,y:130,t:'Europe'},{x:620,y:165,t:'Asia'},
{x:430,y:265,t:'Africa'},{x:192,y:305,t:'South America'},{x:693,y:325,t:'Oceania'}];
labels.forEach(function(loc) {
var text = document.createElementNS('http://www.w3.org/2000/svg','text');
text.setAttribute('x',loc.x); text.setAttribute('y',loc.y);
text.setAttribute('fill','#444'); text.setAttribute('font-size','10');
text.setAttribute('font-family','sans-serif'); text.setAttribute('text-anchor','middle');
text.textContent = loc.t; svg.appendChild(text);
});
}

function renderActivityBars(daily) {
var wrap = document.getElementById('geo-activity-bars');
var labelWrap = document.getElementById('geo-activity-labels');
if (!wrap) return;
var days = [];
for (var i = 29; i >= 0; i--) {
var d = new Date(); d.setDate(d.getDate() - i); days.push(isoDate(d));
}
var max = Math.max.apply(null, days.map(function(d){ return daily[d]||0; }).concat([1]));
var bHtml = '', lHtml = '';
days.forEach(function(day, idx) {
var val = daily[day] || 0;
var h = Math.max(3, Math.round((val/max)*70));
var isToday = idx === 29;
var col = isToday ? '#ff6600' : (val > 0 ? '#cc5500' : '#222');
bHtml += '<div title="' + day + ': ' + val + ' edits" style="flex:1;background:' + col + ';height:' + h + 'px;border-radius:2px 2px 0 0;min-width:4px;"></div>';
lHtml += '<div style="flex:1;text-align:center;white-space:nowrap;">' + (idx%5===0||isToday ? day.slice(5) : '') + '</div>';
});
wrap.innerHTML = bHtml; labelWrap.innerHTML = lHtml;
}

function renderTable(rows, total, period) {
var tbody = document.getElementById('geo-table-body');
var titleEl = document.getElementById('geo-table-title');
if (!tbody) return;
var labels = {day:'Today', week:'This Week', month:'This Month', all:'All Time'};
if (titleEl) titleEl.textContent = 'Users by Country – ' + (labels[period]||'All Time');
if (!rows.length) {
tbody.innerHTML = '<tr><td colspan="5" style="padding:20px;text-align:center;color:#555;">No activity for this period.</td></tr>';
return;
}
var html = '';
rows.forEach(function(row, i) {
var bar = '<div style="display:inline-block;background:#ff6600;height:8px;border-radius:2px;width:' + Math.round(row.pct) + '%;min-width:2px;vertical-align:middle;"></div><span style="color:#666;font-size:0.8em;margin-left:6px;">' + row.pct.toFixed(1) + '%</span>';
html += '<tr style="background:' + (i%2===0?'#1a1a1a':'#1e1e1e') + ';border-top:1px solid #222;">' +
'<td style="padding:10px 16px;color:#666;">' + (i+1) + '</td>' +
'<td style="padding:10px 16px;">' + (COUNTRY_MAP[row.lang]||('🌐 '+row.lang)) + '</td>' +
'<td style="padding:10px 16px;text-align:right;font-weight:bold;color:#ff6600;">' + row.users + '</td>' +
'<td style="padding:10px 16px;">' + bar + '</td>' +
'<td style="padding:10px 16px;text-align:right;color:#aaa;">' + row.edits + '</td></tr>';
});
tbody.innerHTML = html;
}

var cachedUsers = null, cachedChanges = null, cachedBabel = {}, currentPeriod = 'day';

function showPeriod(period) {
currentPeriod = period;
['day','week','month','all'].forEach(function(p) {
var btn = document.getElementById('geo-btn-'+p);
if (!btn) return;
if (p === period) {
btn.style.background='#ff6600'; btn.style.color='#fff';
btn.style.borderColor='#ff6600'; btn.style.fontWeight='bold';
} else {
btn.style.background='#333'; btn.style.color='#eee';
btn.style.borderColor='#555'; btn.style.fontWeight='normal';
}
});
if (!cachedChanges || !cachedUsers) return;
var cutoff = period === 'all' ? '1970-01-01' : startOf(period).toISOString();
var userEdits = {};
cachedChanges.forEach(function(c) {
if (c.timestamp >= cutoff) userEdits[c.user] = (userEdits[c.user]||0)+1;
});
var langUsers = {}, langEdits = {};
cachedUsers.forEach(function(u) {
var langs = cachedBabel[u.name] || [];
if (!langs.length) langs = ['unknown'];
var edits = userEdits[u.name] || 0;
var lang = langs[0];
langUsers[lang] = (langUsers[lang]||0)+1;
langEdits[lang] = (langEdits[lang]||0)+edits;
});
var total = cachedUsers.length;
var cEl = document.getElementById('geo-countries');
if (cEl) cEl.textContent = Object.keys(langUsers).filter(function(l){return l!=='unknown';}).length;
var rows = Object.keys(langUsers).map(function(lang) {
return {lang:lang, users:langUsers[lang], edits:langEdits[lang]||0, pct:total>0?(langUsers[lang]/total*100):0};
}).sort(function(a,b) {
if (a.lang==='unknown') return 1; if (b.lang==='unknown') return -1; return b.users-a.users;
});
renderTable(rows, total, period);
drawMap(rows.filter(function(r){return r.lang!=='unknown';}).map(function(r){return r.lang;}));
}

window.geoShowPeriod = showPeriod;

function boot() {
var el = document.getElementById('geo-dashboard');
if (!el) return;

Promise.all([fetchUsers(), fetchChanges()]).then(function(results) {
cachedUsers = results[0]; cachedChanges = results[1];
var now = new Date();
var tEl = document.getElementById('geo-total');
if (tEl) tEl.textContent = cachedUsers.length;
var updEl = document.getElementById('geo-updated');
if (updEl) updEl.textContent = 'Updated: ' + now.toLocaleTimeString();

var dStart = startOf('day').toISOString();
var wStart = startOf('week').toISOString();
var mStart = startOf('month').toISOString();
var aDay=new Set(), aWeek=new Set(), aMonth=new Set();
var daily = {};
cachedChanges.forEach(function(c) {
if (c.timestamp >= dStart) aDay.add(c.user);
if (c.timestamp >= wStart) aWeek.add(c.user);
if (c.timestamp >= mStart) aMonth.add(c.user);
var day = c.timestamp.slice(0,10);
daily[day] = (daily[day]||0)+1;
});
var adEl = document.getElementById('geo-active-day');
var awEl = document.getElementById('geo-active-week');
var amEl = document.getElementById('geo-active-month');
if (adEl) adEl.textContent = aDay.size;
if (awEl) awEl.textContent = aWeek.size;
if (amEl) amEl.textContent = aMonth.size;
renderActivityBars(daily);

var babelPromises = cachedUsers.map(function(u) {
return fetchBabel(u.name).then(function(langs) { cachedBabel[u.name] = langs; });
});
Promise.all(babelPromises).then(function() { showPeriod('day'); });

// wire up buttons
['day','week','month','all'].forEach(function(p) {
var btn = document.getElementById('geo-btn-'+p);
if (btn) btn.addEventListener('click', function() { showPeriod(p); });
});
}).catch(function(e) { console.error('GEO dashboard error', e); });
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', boot);
} else {
setTimeout(boot, 100);
}
})();

User:Admin

2026-05-12T05:09:04Z

Admin: Enhanced Users by Country dashboard with day/week/month breakdown, activity chart, world map, and country table

== Admin Management Tools ==

This page serves as a quick-reference hub for all administrative tools on AlphaX Wiki.

=== Users & Rights ===
* [[Special:UserRights|User Rights]] – Assign or change user group memberships
* [[Special:Block|Block User]] – Block a user from editing ([[Special:BlockList|View blocked users]])
* [[Special:Unblock|Unblock User]] – Remove a block from a user
* [[Special:AutoblockList|Autoblocks]] – View and manage automatic blocks
* [[Special:RenameUser|Rename User]] – Rename a user account
* [[Special:CreateAccount|Create Account]] – Manually create a new user account
* [[Special:ActiveUsers|Active Users List]] – View recently active users
* [[Special:ListUsers|User List]] – Browse all registered users
* [[Special:Contributions|User Contributions]] – View contributions by a specific user
* [[Special:DeletedContributions|Deleted User Contributions]] – View deleted contributions by a user
* [[Special:ListGroupRights|User Group Rights]] – Overview of all user group permissions
* [[Special:ListGrants|Grants]] – View available OAuth grants
* [[Special:PasswordPolicies|Password Policies]] – View password policy settings

=== Content Management ===
* [[Special:Undelete|View Deleted Pages]] – Browse and restore deleted pages
* [[Special:ChangeContentModel|Change Content Model]] – Change the content model of a page
* [[Special:Import|Import Pages]] – Import pages from another wiki
* [[Special:Export|Export Pages]] – Export page content as XML
* [[Special:MergeHistory|Merge Page Histories]] – Merge the edit histories of two pages
* [[Special:ProtectedPages|Protected Pages]] – View all currently protected pages
* [[Special:ProtectedTitles|Protected Titles]] – View titles protected from creation
* [[Special:ComparePages|Compare Pages]] – Diff two pages or revisions

=== Recent Changes & Logs ===
* [[Special:RecentChanges|Recent Changes]] – View all recent wiki edits
* [[Special:Log|Logs]] – Browse all administrative action logs
* [[Special:NewPages|New Pages]] – View recently created pages
* [[Special:NewFiles|Gallery of New Files]] – View recently uploaded files
* [[Special:Watchlist|Watchlist]] – Your personal watchlist of tracked pages

=== Maintenance Reports ===
* [[Special:BrokenRedirects|Broken Redirects]] – Redirects pointing to non-existent pages
* [[Special:DoubleRedirects|Double Redirects]] – Redirects pointing to other redirects
* [[Special:LonelyPages|Orphaned Pages]] – Pages with no incoming links
* [[Special:UnusedFiles|Unused Files]] – Uploaded files not used in any page
* [[Special:UnusedTemplates|Unused Templates]] – Templates not transcluded anywhere
* [[Special:UnusedCategories|Unused Categories]] – Categories with no members
* [[Special:UncategorizedPages|Uncategorized Pages]] – Pages not assigned to any category
* [[Special:UncategorizedFiles|Uncategorized Files]] – Files not assigned to any category
* [[Special:UncategorizedTemplates|Uncategorized Templates]] – Templates not assigned to any category
* [[Special:UncategorizedCategories|Uncategorized Categories]] – Categories not in a parent category
* [[Special:DeadendPages|Dead-End Pages]] – Pages with no outgoing links
* [[Special:WantedPages|Wanted Pages]] – Non-existent pages with incoming links
* [[Special:WantedFiles|Wanted Files]] – Referenced files that don't exist
* [[Special:WantedCategories|Wanted Categories]] – Categories used but not created
* [[Special:WantedTemplates|Wanted Templates]] – Templates used but not created
* [[Special:UnwatchedPages|Unwatched Pages]] – Pages on no user's watchlist
* [[Special:ShortPages|Short Pages]] – Pages with the least content
* [[Special:LongPages|Long Pages]] – Pages with the most content
* [[Special:AncientPages|Oldest Pages]] – Pages not edited for the longest time
* [[Special:FewestRevisions|Pages with Fewest Revisions]] – Least-edited pages

=== Media & Files ===
* [[Special:Upload|Upload File]] – Upload a new file to the wiki
* [[Special:ListFiles|File List]] – Browse all uploaded files
* [[Special:ListDuplicatedFiles|Files with Duplicates]] – Find files with duplicate content
* [[Special:MIMESearch|MIME Search]] – Search files by MIME type
* [[Special:FileDuplicateSearch|Search for Duplicate Files]] – Find files matching a specific file's content
* [[Special:MediaStatistics|Media Statistics]] – Overview of uploaded file statistics

=== Data & Tools ===
* [[Special:Statistics|Statistics]] – Wiki-wide statistics (pages, edits, users)
* [[Special:Version|Version]] – Installed MediaWiki version and extensions
* [[Special:AllMessages|System Messages]] – View and edit interface messages
* [[Special:Interwiki|View Interwiki Data]] – Browse interwiki link mappings
* [[Special:NamespaceInfo|Namespace Information]] – Details about all namespaces
* [[Special:ApiSandbox|API Sandbox]] – Test the MediaWiki API interactively
* [[Special:ExpandTemplates|Expand Templates]] – Preview template expansion

=== Page Tools ===
* [[Special:WhatLinksHere|What Links Here]] – Find all pages linking to a given page
* [[Special:SpecialPages|All Special Pages]] – Browse the full list of special pages

== Users by Country ==
<div id="geo-dashboard" style="font-family:sans-serif; background:#111; border:1px solid #333; border-radius:8px; padding:20px; color:#eee;">

<div style="display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px;">
<div style="flex:1; min-width:140px; background:#1a1a1a; border:1px solid #ff6600; border-radius:6px; padding:16px; text-align:center;">
<div id="geo-total" style="font-size:2em; font-weight:bold; color:#ff6600;">–</div>
<div style="color:#aaa; font-size:0.85em; margin-top:4px;">Total Users</div>
</div>
<div style="flex:1; min-width:140px; background:#1a1a1a; border:1px solid #444; border-radius:6px; padding:16px; text-align:center;">
<div id="geo-countries" style="font-size:2em; font-weight:bold; color:#ff6600;">–</div>
<div style="color:#aaa; font-size:0.85em; margin-top:4px;">Countries / Regions</div>
</div>
<div style="flex:1; min-width:140px; background:#1a1a1a; border:1px solid #444; border-radius:6px; padding:16px; text-align:center;">
<div id="geo-active-day" style="font-size:2em; font-weight:bold; color:#ff6600;">–</div>
<div style="color:#aaa; font-size:0.85em; margin-top:4px;">Active Today</div>
</div>
<div style="flex:1; min-width:140px; background:#1a1a1a; border:1px solid #444; border-radius:6px; padding:16px; text-align:center;">
<div id="geo-active-week" style="font-size:2em; font-weight:bold; color:#ff6600;">–</div>
<div style="color:#aaa; font-size:0.85em; margin-top:4px;">Active This Week</div>
</div>
<div style="flex:1; min-width:140px; background:#1a1a1a; border:1px solid #444; border-radius:6px; padding:16px; text-align:center;">
<div id="geo-active-month" style="font-size:2em; font-weight:bold; color:#ff6600;">–</div>
<div style="color:#aaa; font-size:0.85em; margin-top:4px;">Active This Month</div>
</div>
</div>

<div style="display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap;">
<button id="geo-btn-day" onclick="geoShowPeriod('day')" style="background:#ff6600; color:#fff; border:none; padding:8px 18px; border-radius:4px; cursor:pointer; font-weight:bold;">Today</button>
<button id="geo-btn-week" onclick="geoShowPeriod('week')" style="background:#333; color:#eee; border:1px solid #555; padding:8px 18px; border-radius:4px; cursor:pointer;">This Week</button>
<button id="geo-btn-month" onclick="geoShowPeriod('month')" style="background:#333; color:#eee; border:1px solid #555; padding:8px 18px; border-radius:4px; cursor:pointer;">This Month</button>
<button id="geo-btn-all" onclick="geoShowPeriod('all')" style="background:#333; color:#eee; border:1px solid #555; padding:8px 18px; border-radius:4px; cursor:pointer;">All Time</button>
<span style="margin-left:auto; color:#666; font-size:0.8em; align-self:center;" id="geo-updated"></span>
</div>

<div id="geo-map-placeholder" style="background:#1a1a1a; border:1px solid #333; border-radius:6px; padding:12px; margin-bottom:16px; min-height:220px; position:relative; overflow:hidden;">
<svg id="geo-world-map" viewBox="0 0 900 440" style="width:100%; height:auto; display:block;"></svg>
</div>

<div id="geo-table-wrap" style="background:#1a1a1a; border:1px solid #333; border-radius:6px; overflow:hidden;">
<div style="padding:12px 16px; border-bottom:1px solid #333; font-weight:bold; color:#ff6600; font-size:0.95em;" id="geo-table-title">Users by Country</div>
<table style="width:100%; border-collapse:collapse; font-size:0.9em;">
<thead>
<tr style="background:#222; color:#aaa; text-align:left;">
<th style="padding:10px 16px;">#</th>
<th style="padding:10px 16px;">Country</th>
<th style="padding:10px 16px; text-align:right;">Users</th>
<th style="padding:10px 16px;">Share</th>
<th style="padding:10px 16px; text-align:right;">Edits</th>
</tr>
</thead>
<tbody id="geo-table-body">
<tr><td colspan="5" style="padding:20px; text-align:center; color:#666;">Loading...</td></tr>
</tbody>
</table>
</div>

<div id="geo-activity-chart-wrap" style="background:#1a1a1a; border:1px solid #333; border-radius:6px; padding:16px; margin-top:16px;">
<div style="font-weight:bold; color:#ff6600; margin-bottom:12px; font-size:0.95em;">Daily Activity (Last 30 Days)</div>
<div id="geo-activity-bars" style="display:flex; align-items:flex-end; gap:3px; height:80px; overflow:hidden;"></div>
<div id="geo-activity-labels" style="display:flex; gap:3px; margin-top:4px; font-size:0.65em; color:#555; overflow:hidden;"></div>
</div>

<div style="margin-top:12px; color:#555; font-size:0.75em;" id="geo-note">
📍 Activity data is derived from wiki edit logs. Country detection uses Babel language tags on user pages. Users without Babel tags are shown as "Unknown".
</div>

</div>

<script>
(function() {
var GEO = window.AlphaXGeo = window.AlphaXGeo || {};
var API = '/api.php';

// ── helpers ──────────────────────────────────────────────────
function isoDate(d) {
return d.toISOString().slice(0,10);
}
function startOf(period) {
var now = new Date();
if (period === 'day') {
return new Date(now.getFullYear(), now.getMonth(), now.getDate());
} else if (period === 'week') {
var d = new Date(now); d.setDate(d.getDate() - d.getDay());
d.setHours(0,0,0,0); return d;
} else if (period === 'month') {
return new Date(now.getFullYear(), now.getMonth(), 1);
}
return new Date(0);
}

// ── country flags & names ─────────────────────────────────────
var COUNTRY_MAP = {
'en':'🇺🇸 English / US','de':'🇩🇪 German','fr':'🇫🇷 French','es':'🇪🇸 Spanish',
'it':'🇮🇹 Italian','pt':'🇧🇷 Portuguese','ru':'🇷🇺 Russian','ja':'🇯🇵 Japanese',
'zh':'🇨🇳 Chinese','ko':'🇰🇷 Korean','ar':'🇸🇦 Arabic','nl':'🇳🇱 Dutch',
'pl':'🇵🇱 Polish','sv':'🇸🇪 Swedish','no':'🇳🇴 Norwegian','da':'🇩🇰 Danish',
'fi':'🇫🇮 Finnish','tr':'🇹🇷 Turkish','cs':'🇨🇿 Czech','hu':'🇭🇺 Hungarian',
'ro':'🇷🇴 Romanian','uk':'🇺🇦 Ukrainian','vi':'🇻🇳 Vietnamese','th':'🇹🇭 Thai',
'id':'🇮🇩 Indonesian','ms':'🇲🇾 Malay','he':'🇮🇱 Hebrew','fa':'🇮🇷 Persian',
'hi':'🇮🇳 Hindi','bn':'🇧🇩 Bengali'
};

// ── fetch all users ───────────────────────────────────────────
function fetchUsers() {
return fetch(API + '?action=query&list=allusers&aulimit=500&format=json&origin=*')
.then(function(r){return r.json();})
.then(function(d){ return d.query.allusers || []; });
}

// ── fetch recent changes for activity ────────────────────────
function fetchRecentChanges(rcstart, rclimit) {
rclimit = rclimit || 500;
var url = API + '?action=query&list=recentchanges&rclimit=' + rclimit +
'&rcprop=user|timestamp&format=json&origin=*';
if (rcstart) url += '&rcstart=' + rcstart;
return fetch(url).then(function(r){return r.json();})
.then(function(d){ return d.query.recentchanges || []; });
}

// ── fetch babel info for a user ───────────────────────────────
function fetchUserBabel(username) {
var url = API + '?action=query&titles=User:' + encodeURIComponent(username) +
'&prop=categories&format=json&origin=*';
return fetch(url).then(function(r){return r.json();})
.then(function(d){
var pages = d.query && d.query.pages ? d.query.pages : {};
var cats = [];
Object.values(pages).forEach(function(p){
(p.categories || []).forEach(function(c){ cats.push(c.title); });
});
// Look for Category:User XX patterns
var langs = [];
cats.forEach(function(cat){
var m = cat.match(/Category:User ([a-z]{2,3})/i);
if (m) langs.push(m[1].toLowerCase());
});
return langs;
});
}

// ── world map SVG (simplified) ────────────────────────────────
var COUNTRY_SHAPES = {
'de': 'M440,145 L455,140 L465,148 L462,165 L448,170 L438,162 Z',
'fr': 'M415,152 L430,148 L438,162 L430,175 L415,172 L408,162 Z',
'es': 'M390,170 L415,168 L415,185 L395,190 L385,182 Z',
'it': 'M450,168 L462,165 L468,180 L460,195 L450,188 L445,178 Z',
'gb': 'M418,135 L428,132 L430,145 L420,148 L414,142 Z',
'ru': 'M460,120 L560,110 L580,135 L540,145 L465,148 Z',
'us': 'M120,150 L220,148 L225,190 L200,200 L115,195 Z',
'cn': 'M620,150 L680,145 L685,175 L650,185 L615,178 Z',
'jp': 'M695,155 L708,152 L710,165 L700,168 L693,163 Z',
'br': 'M195,230 L240,225 L245,275 L215,282 L188,270 Z',
'in': 'M580,175 L615,170 L618,210 L595,218 L575,205 Z',
'au': 'M660,280 L720,275 L725,320 L690,328 L655,315 Z',
};

function drawWorldMap(highlightLangs) {
var svg = document.getElementById('geo-world-map');
if (!svg) return;
// Simple world outline
svg.innerHTML = '<rect width="900" height="440" fill="#1a1a1a"/>' +
'<text x="450" y="30" fill="#444" text-anchor="middle" font-size="12" font-family="sans-serif">World Activity Map (language-based approximation)</text>';

// Draw ocean
var ocean = document.createElementNS('http://www.w3.org/2000/svg','rect');
ocean.setAttribute('width','900'); ocean.setAttribute('height','440');
ocean.setAttribute('fill','#0d1f33'); svg.appendChild(ocean);

// Draw continent blobs
var continents = [
// North America
'M80,100 L240,95 L255,200 L220,230 L170,235 L110,220 L75,170 Z',
// South America
'M155,240 L220,235 L235,360 L195,385 L155,370 L138,320 Z',
// Europe
'M385,90 L480,85 L490,160 L450,175 L400,170 L378,140 Z',
// Africa
'M390,175 L460,170 L470,320 L430,345 L388,335 L375,280 Z',
// Asia
'M490,80 L750,75 L760,230 L700,250 L520,240 L485,180 Z',
// Australia
'M640,280 L740,275 L748,355 L700,368 L638,355 Z',
// Greenland
'M230,50 L290,45 L295,90 L255,95 L228,82 Z',
];
continents.forEach(function(d){
var path = document.createElementNS('http://www.w3.org/2000/svg','path');
path.setAttribute('d', d);
path.setAttribute('fill', '#2a3a2a');
path.setAttribute('stroke', '#1a2a1a');
path.setAttribute('stroke-width', '1');
svg.appendChild(path);
});

// Highlight active countries
if (highlightLangs && highlightLangs.length > 0) {
Object.keys(COUNTRY_SHAPES).forEach(function(cc){
var path = document.createElementNS('http://www.w3.org/2000/svg','path');
path.setAttribute('d', COUNTRY_SHAPES[cc]);
var isActive = highlightLangs.some(function(l){ return l.startsWith(cc); });
path.setAttribute('fill', isActive ? '#ff6600' : '#3a4a3a');
path.setAttribute('stroke', '#555');
path.setAttribute('stroke-width', '1');
path.setAttribute('opacity', isActive ? '0.9' : '0.5');
svg.appendChild(path);
});
}

// Dots for known locations
var locations = [
{x:160, y:165, label:'North America'},
{x:450, y:130, label:'Europe'},
{x:620, y:160, label:'Asia'},
{x:430, y:260, label:'Africa'},
{x:190, y:300, label:'South America'},
{x:690, y:320, label:'Oceania'},
];
locations.forEach(function(loc){
var text = document.createElementNS('http://www.w3.org/2000/svg','text');
text.setAttribute('x', loc.x); text.setAttribute('y', loc.y);
text.setAttribute('fill', '#444'); text.setAttribute('font-size', '10');
text.setAttribute('font-family', 'sans-serif');
text.setAttribute('text-anchor', 'middle');
text.textContent = loc.label;
svg.appendChild(text);
});
}

// ── render table ──────────────────────────────────────────────
function renderTable(rows, total, period) {
var tbody = document.getElementById('geo-table-body');
var titleEl = document.getElementById('geo-table-title');
if (!tbody) return;

var labels = {day:'Today', week:'This Week', month:'This Month', all:'All Time'};
if (titleEl) titleEl.textContent = 'Users by Country – ' + (labels[period] || 'All Time');

if (rows.length === 0) {
tbody.innerHTML = '<tr><td colspan="5" style="padding:20px;text-align:center;color:#555;">No activity data for this period.</td></tr>';
return;
}

var html = '';
rows.forEach(function(row, i) {
var bar = '<div style="background:#ff6600;height:8px;border-radius:2px;width:' +
Math.round(row.pct) + '%;min-width:2px;display:inline-block;"></div>' +
'<span style="color:#666;font-size:0.8em;margin-left:6px;">' + row.pct.toFixed(1) + '%</span>';
var rowBg = i % 2 === 0 ? '#1a1a1a' : '#1e1e1e';
html += '<tr style="background:' + rowBg + '; border-top:1px solid #222;">' +
'<td style="padding:10px 16px;color:#666;">' + (i+1) + '</td>' +
'<td style="padding:10px 16px;">' + (COUNTRY_MAP[row.lang] || ('🌐 ' + row.lang)) + '</td>' +
'<td style="padding:10px 16px;text-align:right;font-weight:bold;color:#ff6600;">' + row.users + '</td>' +
'<td style="padding:10px 16px;">' + bar + '</td>' +
'<td style="padding:10px 16px;text-align:right;color:#aaa;">' + row.edits + '</td>' +
'</tr>';
});
tbody.innerHTML = html;
}

// ── render activity bars ───────────────────────────────────────
function renderActivityBars(dailyData) {
var wrap = document.getElementById('geo-activity-bars');
var labelWrap = document.getElementById('geo-activity-labels');
if (!wrap) return;
var max = Math.max.apply(null, Object.values(dailyData).concat([1]));
var days = [];
for (var i = 29; i >= 0; i--) {
var d = new Date(); d.setDate(d.getDate() - i);
days.push(isoDate(d));
}
var barsHtml = '', labelsHtml = '';
days.forEach(function(day, idx) {
var val = dailyData[day] || 0;
var h = Math.max(3, Math.round((val / max) * 70));
var isToday = idx === 29;
var color = isToday ? '#ff6600' : (val > 0 ? '#cc5500' : '#222');
barsHtml += '<div title="' + day + ': ' + val + ' edits" style="flex:1;background:' + color +
';height:' + h + 'px;border-radius:2px 2px 0 0;min-width:4px;cursor:default;"></div>';
if (idx % 5 === 0 || isToday) {
labelsHtml += '<div style="flex:1;text-align:center;white-space:nowrap;">' + day.slice(5) + '</div>';
} else {
labelsHtml += '<div style="flex:1;"></div>';
}
});
wrap.innerHTML = barsHtml;
labelWrap.innerHTML = labelsHtml;
}

// ── main data load ────────────────────────────────────────────
var cachedUsers = null;
var cachedChanges = null;
var cachedBabel = {};
var currentPeriod = 'day';

function loadDashboard() {
var now = new Date();

Promise.all([
fetchUsers(),
fetchRecentChanges(null, 500)
]).then(function(results) {
var users = results[0];
var changes = results[1];
cachedUsers = users;
cachedChanges = changes;

document.getElementById('geo-total').textContent = users.length;
document.getElementById('geo-updated').textContent = 'Updated: ' + now.toLocaleTimeString();

// Count activity periods
var dayStart = startOf('day').toISOString();
var weekStart = startOf('week').toISOString();
var monthStart = startOf('month').toISOString();

var activeDay = new Set(), activeWeek = new Set(), activeMonth = new Set();
var daily = {};
changes.forEach(function(c) {
if (c.timestamp >= dayStart) activeDay.add(c.user);
if (c.timestamp >= weekStart) activeWeek.add(c.user);
if (c.timestamp >= monthStart) activeMonth.add(c.user);
var day = c.timestamp.slice(0,10);
daily[day] = (daily[day] || 0) + 1;
});

document.getElementById('geo-active-day').textContent = activeDay.size;
document.getElementById('geo-active-week').textContent = activeWeek.size;
document.getElementById('geo-active-month').textContent = activeMonth.size;

renderActivityBars(daily);

// Fetch babel for all real users (skip bots)
var humanUsers = users.filter(function(u){
return !['Lucy','Babel AutoCreate','Delete page script','FuzzyBot','Maintenance script','MediaWiki default'].includes(u.name) || u.name === 'Lucy' || u.name === 'Admin';
});

var babelPromises = humanUsers.map(function(u) {
return fetchUserBabel(u.name).then(function(langs) {
cachedBabel[u.name] = langs;
});
});

Promise.all(babelPromises).then(function() {
geoShowPeriod(currentPeriod);
});

}).catch(function(e) {
console.error('GEO dashboard error:', e);
});
}

window.geoShowPeriod = function(period) {
currentPeriod = period;
var btns = ['day','week','month','all'];
btns.forEach(function(p) {
var btn = document.getElementById('geo-btn-' + p);
if (!btn) return;
if (p === period) {
btn.style.background = '#ff6600'; btn.style.color = '#fff';
btn.style.border = 'none'; btn.style.fontWeight = 'bold';
} else {
btn.style.background = '#333'; btn.style.color = '#eee';
btn.style.border = '1px solid #555'; btn.style.fontWeight = 'normal';
}
});

if (!cachedChanges || !cachedUsers) return;

var cutoff = period === 'all' ? '1970-01-01' : startOf(period).toISOString();

// Build user -> edit count map for period
var userEdits = {};
cachedChanges.forEach(function(c) {
if (c.timestamp >= cutoff) {
userEdits[c.user] = (userEdits[c.user] || 0) + 1;
}
});

// Map languages to user counts
var langUsers = {}, langEdits = {};
var withBabel = 0;

cachedUsers.forEach(function(u) {
var langs = cachedBabel[u.name] || [];
if (langs.length === 0) langs = ['unknown'];
else withBabel++;
var edits = userEdits[u.name] || 0;
langs.slice(0,1).forEach(function(lang) {
langUsers[lang] = (langUsers[lang] || 0) + 1;
langEdits[lang] = (langEdits[lang] || 0) + edits;
});
});

var total = cachedUsers.length;
document.getElementById('geo-countries').textContent = Object.keys(langUsers).filter(function(l){return l!=='unknown';}).length;

var rows = Object.keys(langUsers).map(function(lang) {
return { lang: lang, users: langUsers[lang], edits: langEdits[lang] || 0,
pct: total > 0 ? (langUsers[lang] / total * 100) : 0 };
}).sort(function(a,b){ return b.users - a.users; });

// Move unknown to bottom
rows.sort(function(a,b) {
if (a.lang === 'unknown') return 1;
if (b.lang === 'unknown') return -1;
return b.users - a.users;
});

renderTable(rows, total, period);
drawWorldMap(rows.filter(function(r){return r.lang!=='unknown';}).map(function(r){return r.lang;}));
};

// ── boot ─────────────────────────────────────────────────────
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', loadDashboard);
} else {
loadDashboard();
}
})();
</script>

2026-05-09T05:45:39Z

Admin: Modern homepage redesign: removed languages sidebar menu, added AlphaX banner, modernized hero animations

MediaWiki:Sidebar

2026-05-09T05:43:19Z

Admin:

Homepage/de

2026-05-06T22:25:32Z

Admin: Copied from English version

<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;
--border: #2E2E2E;
--orange: #FF6A21;
--orange2: #FF8C42;
--text: #FFFFFF;
--text-2: #999999;
--text-3: #666666;
--text-4: #888888;
--glow-sm: 0 0 20px rgba(255,106,33,.15);
--glow-md: 0 0 20px rgba(255,106,33,.40);
--glow-lg: 0 0 30px rgba(255,106,33,.60);
--grad: linear-gradient(135deg, #FF6A21, #FF8C42);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
font-family: 'Inter', sans-serif;
color: var(--text);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5 { font-family: 'Space Grotesk', sans-serif; }

/* ── Scrollbar ─────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.05); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,106,33,.20); }

/* ── Skip / focus ──────────────────────────────── */
.skip { position:fixed;top:-60px;left:12px;background:var(--orange);color:#fff;padding:8px 18px;border-radius:8px;font-weight:700;font-size:.85rem;z-index:9999;transition:top .2s; }
.skip:focus { top:12px; }
*:focus-visible { outline:2px solid rgba(255,106,33,.7);outline-offset:3px;border-radius:4px; }

/* ── Progress bar ──────────────────────────────── */
#prog { position:fixed;top:0;left:0;height:2px;z-index:9999;background:var(--grad);width:0;pointer-events:none; }

/* ── Navbar ────────────────────────────────────── */
.nav {
position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
z-index: 50;
background: rgba(13,13,13,.88);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border: 1px solid var(--border);
border-radius: 999px;
display: flex; align-items: center;
padding: 0 6px 0 16px;
height: 52px; gap: 6px;
width: min(calc(100vw - 32px), 800px);
}
.nav-logo { display:flex;align-items:center;flex-shrink:0;margin-right:4px; }
.nav-links { display:flex;align-items:center;gap:2px;flex:1; }
.nav-link {
font-size:.83rem;font-weight:500;color:var(--text-2);
padding:6px 12px;border-radius:999px;text-decoration:none;
transition:color .2s,background .2s;white-space:nowrap;
}
.nav-link:hover { color:var(--text);background:rgba(255,255,255,.05); }
.nav-right { display:flex;align-items:center;gap:6px;flex-shrink:0; }
.nav-admin {
font-size:.76rem;font-weight:600;color:var(--text-3);
padding:6px 12px;border-radius:999px;
border:1px solid var(--border);
text-decoration:none;
transition:color .2s,border-color .2s;white-space:nowrap;
display:inline-flex;align-items:center;gap:5px;
}
.nav-admin:hover { color:var(--text-2);border-color:rgba(255,106,33,.4); }
.btn-nav {
font-size:.83rem;font-weight:700;color:#fff;
background: var(--grad);
padding:8px 20px;border-radius:999px;border:none;cursor:pointer;
text-decoration:none;display:inline-flex;align-items:center;
transition:opacity .2s,box-shadow .2s;
box-shadow: var(--glow-sm);
}
.btn-nav:hover { opacity:.92;box-shadow:var(--glow-md); }
@media(max-width:640px){ .nav-links,.nav-admin{display:none;} }

/* ── Orange text gradient ──────────────────────── */
.ot {
background: var(--grad);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ── Buttons ───────────────────────────────────── */
.btn-primary {
display:inline-flex;align-items:center;gap:8px;
font-size:.92rem;font-weight:700;color:#fff;
background: var(--grad);
padding:14px 28px;border-radius:12px;border:none;cursor:pointer;
text-decoration:none;
transition:transform .2s,box-shadow .2s,opacity .2s;
box-shadow: var(--glow-sm);
}
.btn-primary:hover { transform:translateY(-1px);box-shadow:var(--glow-md);opacity:.93; }
.btn-secondary {
display:inline-flex;align-items:center;gap:8px;
font-size:.92rem;font-weight:600;color:var(--text-2);
background: var(--surface);
border:1px solid var(--border);
padding:14px 28px;border-radius:12px;cursor:pointer;
text-decoration:none;
transition:border-color .2s,color .2s;
}
.btn-secondary:hover { border-color:rgba(255,106,33,.5);color:var(--text); }

/* ── Section eyebrow ───────────────────────────── */
.eyebrow {
display:inline-flex;align-items:center;gap:8px;
font-size:.70rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--orange);
}
.eyebrow::before { content:'';width:18px;height:1px;background:var(--orange);opacity:.55; }

/* ── Divider ───────────────────────────────────── */
.div-line { height:1px;background:var(--border); }

/* ── Noise ─────────────────────────────────────── */
.noise { position:absolute;inset:0;pointer-events:none;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── Glow orbs ─────────────────────────────────── */
.orb { position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none; }
.orb-1 { width:500px;height:500px;background:rgba(255,106,33,.10);top:-160px;left:-80px;animation:drift 20s ease-in-out infinite alternate; }
.orb-2 { width:400px;height:400px;background:rgba(255,140,66,.07);top:-80px;right:-60px;animation:drift 16s ease-in-out infinite alternate-reverse; }
@keyframes drift { from{transform:translate(0,0)} to{transform:translate(30px,24px)} }
@media(prefers-reduced-motion:reduce){ .orb{animation:none!important} }

/* ── Grid lines ────────────────────────────────── */
.grid-bg {
position:absolute;inset:0;pointer-events:none;overflow:hidden;
background-image:
linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
background-size:72px 72px;
mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black 0%,transparent 80%);
}

/* ── Feature cards ─────────────────────────────── */
.feat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px;
display:flex;flex-direction:column;gap:14px;
transition: border-color .2s, box-shadow .2s, transform .2s;
}
.feat-card:hover {
border-color: rgba(255,106,33,.30);
box-shadow: 0 8px 32px rgba(0,0,0,.4), var(--glow-sm);
transform: translateY(-2px);
}
.feat-icon {
width:44px;height:44px;border-radius:10px;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
background: rgba(255,106,33,.10);
border: 1px solid rgba(255,106,33,.20);
}
.feat-title { font-size:1rem;font-weight:700;color:var(--text);line-height:1.3; }
.feat-body { font-size:.855rem;color:var(--text-2);line-height:1.72; }

/* ── Mockup ────────────────────────────────────── */
.mockup-wrap {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04), var(--glow-sm);
}
.mockup-bar {
background: #111111;
border-bottom: 1px solid var(--border);
padding: 12px 16px;
display: flex; align-items: center; gap: 10px;
}
.dot { width:11px;height:11px;border-radius:50%; }
.mockup-url {
flex:1;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:6px;
padding:5px 12px;font-size:.74rem;color:var(--text-3);font-family:monospace;letter-spacing:.02em;
}
.mockup-body { padding:16px;display:flex;flex-direction:column;gap:8px; }
.mock-search {
background:rgba(255,255,255,.04);border:1px solid var(--border);
border-radius:8px;padding:10px 14px;
display:flex;align-items:center;gap:10px;color:var(--text-3);font-size:.82rem;
margin-bottom:4px;
}
.mock-article {
background:rgba(255,255,255,.025);
border:1px solid var(--border);
border-radius:10px;padding:12px 14px;
display:flex;align-items:center;gap:12px;
transition:background .2s,border-color .2s;cursor:default;
}
.mock-article:hover { background:rgba(255,106,33,.06);border-color:rgba(255,106,33,.25); }
.mock-dot { width:34px;height:34px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center; }
.mock-title { font-size:.81rem;font-weight:600;color:rgba(255,255,255,.82);margin-bottom:3px; }
.mock-sub { font-size:.73rem;color:var(--text-3); }
.mock-badge {
margin-left:auto;flex-shrink:0;
font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:3px 9px;border-radius:999px;
background:rgba(255,106,33,.12);border:1px solid rgba(255,106,33,.25);color:#fff;
}
.mock-badge-g {
font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:3px 9px;border-radius:999px;margin-left:auto;flex-shrink:0;
background:rgba(61,220,132,.10);border:1px solid rgba(61,220,132,.22);color:#3DDC84;
}

/* ── Stats ─────────────────────────────────────── */
.stat-strip { display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:16px;overflow:hidden; }
@media(max-width:600px){ .stat-strip{grid-template-columns:repeat(2,1fr);} }
.stat-cell { padding:2rem 1.5rem;text-align:center;border-right:1px solid var(--border);transition:background .2s; }
.stat-cell:last-child { border-right:none; }
.stat-cell:hover { background:rgba(255,106,33,.04); }
.stat-n { font-family:'Space Grotesk',sans-serif;font-size:clamp(2rem,3.5vw,3rem);font-weight:900;line-height:1;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }

/* ── Topic tiles ───────────────────────────────── */
.topic-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px; }
.topic-tile {
background:var(--surface);border:1px solid var(--border);border-radius:12px;
padding:18px 20px;text-decoration:none;display:flex;flex-direction:column;gap:8px;
transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;cursor:pointer;
}
.topic-tile:hover {
background:rgba(255,106,33,.05);border-color:rgba(255,106,33,.30);
transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4),var(--glow-sm);
}
.topic-icon { width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center; }
.topic-name { font-size:.88rem;font-weight:600;color:var(--text); }
.topic-count { font-size:.75rem;color:var(--text-3); }

/* ── Article cards ─────────────────────────────── */
.art-card {
background:var(--surface);border:1px solid var(--border);border-radius:16px;
padding:26px;text-decoration:none;display:flex;flex-direction:column;gap:12px;
transition:border-color .2s,box-shadow .2s,transform .2s;cursor:pointer;
}
.art-card:hover {
border-color:rgba(255,106,33,.30);
box-shadow:0 12px 40px rgba(0,0,0,.5),var(--glow-sm);
transform:translateY(-2px);
}
.art-title { font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;color:var(--text);line-height:1.35;transition:color .2s; }
.art-card:hover .art-title { color:var(--orange2); }
.art-body { font-size:.845rem;color:var(--text-2);line-height:1.70; }
.art-cta { display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;color:rgba(255,106,33,.65);margin-top:auto; }
.art-card:hover .art-cta { color:var(--orange); }

/* ── Tag pills ─────────────────────────────────── */
.tag {
display:inline-flex;align-items:center;
font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
padding:3px 10px;border-radius:999px;
}
.t-orange { background:rgba(255,106,33,.12);border:1px solid rgba(255,106,33,.25);color:var(--orange); }
.t-green { background:rgba(61,220,132,.10);border:1px solid rgba(61,220,132,.22);color:#3DDC84; }
.t-white { background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.65); }

/* ── Quote cards ───────────────────────────────── */
.q-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
@media(max-width:900px){ .q-grid{grid-template-columns:1fr;} }
.q-card {
background:var(--surface);border:1px solid var(--border);border-radius:16px;
padding:28px;display:flex;flex-direction:column;gap:20px;
}
.q-text { font-size:.895rem;color:var(--text-2);line-height:1.78;font-style:italic; }

/* ── CTA band ──────────────────────────────────── */
.cta-band {
position:relative;overflow:hidden;
background:#111111;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}
.cta-band::before {
content:'';position:absolute;right:-100px;top:-100px;
width:400px;height:400px;border-radius:50%;
background:radial-gradient(circle,rgba(255,106,33,.12) 0%,transparent 65%);
pointer-events:none;
}
.cta-band::after {
content:'';position:absolute;left:-80px;bottom:-80px;
width:300px;height:300px;border-radius:50%;
background:radial-gradient(circle,rgba(255,140,66,.08) 0%,transparent 65%);
pointer-events:none;
}

/* ── Marquee ───────────────────────────────────── */
.mq-wrap { overflow:hidden; }
.mq-track { display:flex;width:max-content;animation:mq 40s linear infinite; }
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media(prefers-reduced-motion:reduce){ .mq-track{animation:none} }

/* ── Newsletter input ──────────────────────────── */
.nl-in {
background:var(--surface);border:1px solid var(--border);
color:var(--text);outline:none;border-radius:10px;
padding:13px 18px;font-size:.9rem;width:100%;
transition:border-color .2s,box-shadow .2s;font-family:'Inter',sans-serif;
}
.nl-in:focus { border-color:rgba(255,106,33,.55);box-shadow:0 0 0 3px rgba(255,106,33,.12); }
.nl-in::placeholder { color:var(--text-3); }

/* ── Fade-up ───────────────────────────────────── */
.fu { opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease; }
.fu.in { opacity:1;transform:none; }
.fu[data-d="1"]{transition-delay:.10s}
.fu[data-d="2"]{transition-delay:.18s}
.fu[data-d="3"]{transition-delay:.26s}
.fu[data-d="4"]{transition-delay:.34s}
.fu[data-d="5"]{transition-delay:.42s}
.fu[data-d="6"]{transition-delay:.50s}
@media(prefers-reduced-motion:reduce){ .fu{opacity:1!important;transform:none!important;transition:none!important} }

/* ── Path cards (Choose Your Path) ────────────── */
.path-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px 26px;
text-decoration: none;
display: flex; flex-direction: column; gap: 10px;
transition: border-color .2s, box-shadow .2s, transform .2s;
cursor: pointer; position: relative; overflow: hidden;
}
.path-card::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(255,106,33,.04) 0%, transparent 60%);
opacity: 0; transition: opacity .2s;
}
.path-card:hover { border-color: rgba(255,106,33,.40); box-shadow: 0 8px 32px rgba(0,0,0,.4), var(--glow-sm); transform: translateY(-2px); }
.path-card:hover::before { opacity: 1; }
.path-card-wide { flex-direction: row; align-items: center; gap: 20px; }
.path-card-wide .path-desc { margin-right: auto; }
.path-num { font-size: .68rem; font-weight: 800; letter-spacing: .12em; color: var(--text-3); font-family: 'Space Grotesk', sans-serif; }
.path-icon-wrap { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,106,33,.08); border: 1px solid rgba(255,106,33,.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.path-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.path-desc { font-size: .855rem; color: var(--text-2); line-height: 1.65; }
.path-cta { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; color: rgba(255,106,33,.55); margin-top: 4px; transition: color .2s; }
.path-card:hover .path-cta { color: var(--orange); }
@media(max-width:700px) { .path-card-wide { flex-direction: column; align-items: flex-start; } }

/* ── Latest articles card ──────────────────────── */
.latest-card {
flex-shrink: 0; width: 240px; scroll-snap-align: start;
background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
padding: 20px; text-decoration: none;
display: flex; flex-direction: column; gap: 10px;
transition: border-color .2s, transform .2s, box-shadow .2s;
}
.latest-card:hover { border-color: rgba(255,106,33,.30); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.4), var(--glow-sm); }
.latest-title { font-family: 'Space Grotesk', sans-serif; font-size: .9rem; font-weight: 700; color: var(--text); line-height: 1.35; transition: color .2s; }
.latest-card:hover .latest-title { color: var(--orange2); }
.latest-date { font-size: .72rem; color: var(--text-3); margin-top: auto; }
#latest-deck::-webkit-scrollbar { display: none; }

/* ── Knowledge area cards ──────────────────────── */
.area-card {
background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
padding: 22px 20px; text-decoration: none;
display: flex; flex-direction: column; gap: 6px;
transition: border-color .2s, transform .2s, box-shadow .2s, background .2s;
cursor: pointer; position: relative;
}
.area-card:hover { border-color: rgba(255,106,33,.35); background: rgba(255,106,33,.03); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.4), var(--glow-sm); }
.area-icon { font-size: 1.5rem; line-height: 1; margin-bottom: 4px; }
.area-name { font-family: 'Space Grotesk', sans-serif; font-size: .92rem; font-weight: 700; color: var(--text); }
.area-desc { font-size: .78rem; color: var(--text-3); line-height: 1.55; }
.area-arrow { position: absolute; top: 20px; right: 18px; font-size: 1rem; color: var(--text-3); transition: color .2s, transform .2s; }
.area-card:hover .area-arrow { color: var(--orange); transform: translateX(3px); }

/* ── Responsive grids ──────────────────────────── */
@media(max-width:900px){.g3{grid-template-columns:1fr 1fr!important}}
@media(max-width:560px){.g3,.g2{grid-template-columns:1fr!important}}
@media(max-width:800px){.gfooter{grid-template-columns:1fr 1fr!important}}
@media(max-width:460px){.gfooter{grid-template-columns:1fr!important}}
</style>
<style>@media(max-width:900px){#areas-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){#areas-grid{grid-template-columns:1fr}}</style>
<style>
.ft-link { font-size:.84rem;color:var(--text-3);text-decoration:none;transition:color .2s; }
.ft-link:hover { color:var(--orange); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }
</style>

<div id="prog" aria-hidden="true"></div>
<a href="#main" class="skip">Skip to content</a>


<nav class="nav" role="navigation" aria-label="Main navigation">
<a href="https://alphax.wiki" class="nav-logo" aria-label="AlphaX Wiki home">
<img src="https://alphax.wiki/images/7/7a/Alphax_Wiki_logo_new.png" alt="AlphaX Wiki" style="height:34px;width:auto;object-fit:contain">
</a>
<div class="nav-links">
<a href="#features" class="nav-link">Features</a>
<a href="#topics" class="nav-link">Topics</a>
<a href="#articles" class="nav-link">Articles</a>
<a href="#about" class="nav-link">About</a>
</div>
<div class="nav-right">
<a href="https://alphax.wiki/radmin" class="nav-admin" aria-label="Admin login">
<svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
Admin
</a>
<a href="https://alphax.wiki" class="btn-nav">Explore Free</a>
</div>
</nav>

<main id="main">


<section style="position:relative;padding:180px 1rem 100px;overflow:hidden" aria-label="Hero">
<div class="orb orb-1" aria-hidden="true"></div>
<div class="orb orb-2" aria-hidden="true"></div>
<div class="grid-bg" aria-hidden="true"></div>
<div class="noise" aria-hidden="true"></div>

<div style="max-width:860px;margin:0 auto;text-align:center;position:relative">


<a href="https://alphax.wiki/prep-complete-guide"
style="display:inline-flex;align-items:center;gap:8px;background:rgba(255,106,33,.08);border:1px solid rgba(255,106,33,.22);border-radius:999px;padding:6px 14px 6px 8px;text-decoration:none;margin-bottom:2.5rem;transition:background .2s"
onmouseover="this.style.background='rgba(255,106,33,.14)'" onmouseout="this.style.background='rgba(255,106,33,.08)'"
aria-label="New: Understanding PrEP: Role, Impact, and Considerations">
<span style="background:var(--grad);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:3px 10px;border-radius:999px">New</span>
<span style="font-size:.82rem;color:var(--text-2)">Understanding PrEP: Role, Impact, and Considerations — just published</span>
<svg width="13" height="13" fill="none" stroke="var(--text-3)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
</a>


<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>
<span class="ot">In one place. Free.</span>
</h1>


<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,
nightlife and more — written for the gay community, by the gay community.
</p>


<div style="display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:3.5rem">
<a href="https://alphax.wiki" class="btn-primary">
Start Reading Free
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
<a href="#topics" class="btn-secondary">Browse Topics</a>
</div>


<div style="display:flex;flex-wrap:wrap;justify-content:center;gap:28px" role="list" aria-label="Trust indicators">
<div style="display:flex;align-items:center;gap:7px" role="listitem">
<svg width="14" height="14" fill="none" stroke="#3DDC84" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
<span style="font-size:.8rem;color:var(--text-3)">No account required</span>
</div>
<div style="display:flex;align-items:center;gap:7px" role="listitem">
<svg width="14" height="14" fill="none" stroke="#3DDC84" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
<span style="font-size:.8rem;color:var(--text-3)">Always free</span>
</div>
<div style="display:flex;align-items:center;gap:7px" role="listitem">
<svg width="14" height="14" fill="none" stroke="#3DDC84" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
<span style="font-size:.8rem;color:var(--text-3)">No judgment</span>
</div>
<div style="display:flex;align-items:center;gap:7px" role="listitem">
<svg width="14" height="14" fill="none" stroke="#3DDC84" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
<span style="font-size:.8rem;color:var(--text-3)">2M+ monthly readers</span>
</div>
</div>
</div>


<div style="max-width:760px;margin:5rem auto 0;position:relative" class="fu">

<div style="position:absolute;inset:-30px;background:radial-gradient(ellipse 60% 40% at 50% 100%,rgba(255,106,33,.12) 0%,transparent 70%);pointer-events:none" aria-hidden="true"></div>
<div class="mockup-wrap" style="position:relative">
<div class="mockup-bar">
<div class="dot" style="background:#FF5F56"></div>
<div class="dot" style="background:#FFBD2E"></div>
<div class="dot" style="background:#27C93F"></div>
<div class="mockup-url">alphax.wiki</div>
<svg width="14" height="14" fill="none" stroke="var(--text-3)" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
</div>
<div class="mockup-body">
<div class="mock-search">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
Search: PrEP, coming out, darkroom, chemsex…
</div>
<div class="mock-article">
<div class="mock-dot" style="background:rgba(255,106,33,.10);border:1px solid rgba(255,106,33,.20)">
<svg width="15" height="15" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
</div>
<div><div class="mock-title">Understanding PrEP: Role, Impact, and Considerations</div><div class="mock-sub">12 min · Health & Safety</div></div>
<div class="mock-badge-g">Life-Saving</div>
</div>
<div class="mock-article">
<div class="mock-dot" style="background:rgba(255,255,255,.04);border:1px solid var(--border)">
<svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
</div>
<div><div class="mock-title">Darkroom Etiquette: How to Survive (and Thrive)</div><div class="mock-sub">7 min · Nightlife & Culture</div></div>
<div class="mock-badge">Culture</div>
</div>
<div class="mock-article">
<div class="mock-dot" style="background:rgba(255,255,255,.04);border:1px solid var(--border)">
<svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
</div>
<div><div class="mock-title">Chemsex: Risks, Support & Getting Help</div><div class="mock-sub">15 min · Harm Reduction</div></div>
<div class="mock-badge">Safety</div>
</div>
<div class="mock-article">
<div class="mock-dot" style="background:rgba(255,255,255,.04);border:1px solid var(--border)">
<svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
</div>
<div><div class="mock-title">Coming Out to Family: A Practical, Honest Guide</div><div class="mock-sub">10 min · Coming Out</div></div>
<div class="mock-badge">Guide</div>
</div>
</div>
</div>
</div>
</section>


<div class="mq-wrap" style="border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0" aria-hidden="true">
<div class="mq-track">
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Health & Safety</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">PrEP & HIV Prevention</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Darkroom Culture</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Coming Out</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Gay Relationships</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Mental Wellness</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Chemsex Safety</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">LGBTQ+ Rights</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Nightlife & Saunas</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Identity & Community</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Dating & Hookups</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Gay Travel</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Health & Safety</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">PrEP & HIV Prevention</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Darkroom Culture</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Coming Out</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Gay Relationships</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Mental Wellness</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Chemsex Safety</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">LGBTQ+ Rights</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Nightlife & Saunas</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Identity & Community</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Dating & Hookups</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Gay Travel</span><span style="color:rgba(255,255,255,.06)">·</span>
</div>
</div>


<section style="padding:80px 1rem" aria-label="Statistics">
<div style="max-width:900px;margin:0 auto">
<div class="stat-strip fu" role="list">
<div class="stat-cell" role="listitem"><div class="stat-n">500+</div><div style="font-size:.74rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.10em;margin-top:.5rem">Articles</div></div>
<div class="stat-cell" role="listitem"><div class="stat-n">2M+</div><div style="font-size:.74rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.10em;margin-top:.5rem">Monthly Readers</div></div>
<div class="stat-cell" role="listitem"><div class="stat-n">80+</div><div style="font-size:.74rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.10em;margin-top:.5rem">Topics</div></div>
<div class="stat-cell" role="listitem"><div class="stat-n">Free</div><div style="font-size:.74rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.10em;margin-top:.5rem">Always</div></div>
</div>
</div>
</section>


<section style="padding:80px 1rem" id="features" aria-labelledby="feat-h">
<div style="max-width:1100px;margin:0 auto">
<div style="text-align:center;margin-bottom:56px" class="fu">
<div class="eyebrow" style="justify-content:center;margin-bottom:16px">Why AlphaX Wiki</div>
<h2 id="feat-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:800;color:var(--text);letter-spacing:-.025em;line-height:1.15">
Built for the community.<br><span class="ot">Not an afterthought.</span>
</h2>
</div>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px" class="g3 fu" data-d="1">
<div class="feat-card fu" data-d="1">
<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-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>
<div class="feat-card fu" data-d="2">
<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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg></div>
<div class="feat-title">Deep, Honest Articles</div>
<div class="feat-body">No watered-down advice. Rich long-form articles that treat the reader as an intelligent adult navigating a real life — without heteronormative assumptions.</div>
</div>
<div class="feat-card fu" data-d="3">
<div class="feat-icon"><svg width="20" height="20" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-4.35-4.35"/></svg></div>
<div class="feat-title">Find What You Need Fast</div>
<div class="feat-body">Search 500+ articles instantly. From PrEP to polyamory, darkroom etiquette to coming out at 40 — it's all indexed and searchable.</div>
</div>
<div class="feat-card fu" data-d="4">
<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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div>
<div class="feat-title">Built for the Community</div>
<div class="feat-body">Written by people who live this life. No journalists parachuting in. Real knowledge from real experience, reviewed for accuracy.</div>
</div>
<div class="feat-card fu" data-d="5">
<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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div>
<div class="feat-title">Private by Default</div>
<div class="feat-body">No account. No tracking your reads. No social logins. Come, read what you need, and leave. Your business stays your business.</div>
</div>
<div class="feat-card fu" data-d="6">
<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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div>
<div class="feat-title">Forever Free</div>
<div class="feat-body">No paywalls. No premium tiers. No "unlock for $9/month." Every article, available to everyone — because this knowledge shouldn't have a price tag.</div>
</div>
</div>
</div>
</section>


<section style="padding:80px 1rem;background:#111111;border-top:1px solid var(--border);border-bottom:1px solid var(--border)" id="topics" aria-labelledby="top-h">
<div style="max-width:1100px;margin:0 auto">
<div style="display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:44px" class="fu">
<div>
<div class="eyebrow" style="margin-bottom:14px">Browse Topics</div>
<h2 id="top-h" style="font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;color:var(--text);letter-spacing:-.025em">80+ subjects covered</h2>
</div>
<a href="https://alphax.wiki/topics" style="font-size:.85rem;color:var(--text-3);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .2s"
onmouseover="this.style.color='var(--orange)'" onmouseout="this.style.color='var(--text-3)'">
View all topics <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
<div class="topic-grid fu" data-d="1">
<a href="https://alphax.wiki/health-safety" class="topic-tile" aria-label="Health and Safety — 68 articles">
<div class="topic-icon" style="background:rgba(255,106,33,.10);border:1px solid rgba(255,106,33,.20)"><svg width="15" height="15" fill="none" stroke="var(--orange)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
<div class="topic-name">Health & Safety</div><div class="topic-count">68 articles</div>
</a>
<a href="https://alphax.wiki/relationships" class="topic-tile" aria-label="Relationships — 54 articles">
<div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><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="topic-name">Relationships & Dating</div><div class="topic-count">54 articles</div>
</a>
<a href="https://alphax.wiki/nightlife" class="topic-tile" aria-label="Nightlife — 41 articles">
<div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg></div>
<div class="topic-name">Nightlife & Culture</div><div class="topic-count">41 articles</div>
</a>
<a href="https://alphax.wiki/coming-out" class="topic-tile" aria-label="Coming Out — 37 articles">
<div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg></div>
<div class="topic-name">Coming Out</div><div class="topic-count">37 articles</div>
</a>
<a href="https://alphax.wiki/mental-health" class="topic-tile" aria-label="Mental Wellness — 48 articles">
<div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
<div class="topic-name">Mental Wellness</div><div class="topic-count">48 articles</div>
</a>
<a href="https://alphax.wiki/identity" class="topic-tile" aria-label="Community and Identity — 44 articles">
<div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div>
<div class="topic-name">Community & Identity</div><div class="topic-count">44 articles</div>
</a>
<a href="https://alphax.wiki/chemsex" class="topic-tile" aria-label="Chemsex — 31 articles">
<div class="topic-icon" style="background:rgba(255,106,33,.08);border:1px solid rgba(255,106,33,.18)"><svg width="15" height="15" fill="none" stroke="var(--orange)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg></div>
<div class="topic-name">Chemsex & Harm Reduction</div><div class="topic-count">31 articles</div>
</a>
<a href="https://alphax.wiki/rights" class="topic-tile" aria-label="Legal Rights — 29 articles">
<div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/></svg></div>
<div class="topic-name">Legal & Rights</div><div class="topic-count">29 articles</div>
</a>
<a href="https://alphax.wiki/dating-apps" class="topic-tile"><div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg></div><div class="topic-name">Dating Apps</div><div class="topic-count">22 articles</div></a>
<a href="https://alphax.wiki/sex-education" class="topic-tile"><div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg></div><div class="topic-name">Sex Education</div><div class="topic-count">35 articles</div></a>
<a href="https://alphax.wiki/travel" class="topic-tile"><div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div class="topic-name">Gay Travel</div><div class="topic-count">19 articles</div></a>
<a href="https://alphax.wiki/found-family" class="topic-tile"><div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg></div><div class="topic-name">Found Family</div><div class="topic-count">17 articles</div></a>
</div>
</div>
</section>


<section class="cta-band" style="padding:80px 1rem" id="about" aria-labelledby="ls-h">
<div style="max-width:820px;margin:0 auto;text-align:center;position:relative" class="fu">
<div style="width:52px;height:52px;border-radius:14px;background:rgba(255,106,33,.12);border:1px solid rgba(255,106,33,.22);display:flex;align-items:center;justify-content:center;margin:0 auto 22px">
<svg width="22" height="22" 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>
<h2 id="ls-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;color:var(--text);letter-spacing:-.025em;margin-bottom:14px;line-height:1.15">
Knowledge that saves lives.
</h2>
<p style="font-size:1.05rem;color:var(--text-2);max-width:540px;margin:0 auto 34px;line-height:1.75">
From HIV prevention to recognising the risks of chemsex — some of these articles can change the course of a night, a relationship, or a life. No account. No judgment. Ever.
</p>
<a href="https://alphax.wiki/articles" class="btn-primary" style="margin:0 auto">
Start Reading Free
<svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
</section>


<section style="padding:80px 1rem" id="articles" aria-labelledby="path-h">
<div style="max-width:1100px;margin:0 auto">

<div style="text-align:center;margin-bottom:56px" class="fu">
<div class="eyebrow" style="justify-content:center;margin-bottom:16px">Start Here</div>
<h2 id="path-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;color:var(--text);letter-spacing:-.025em;margin-bottom:12px">
Choose Your Path
</h2>
<p style="color:var(--text-2);font-size:1rem;max-width:480px;margin:0 auto;line-height:1.7">
Not sure where to begin? Pick the path that fits where you are right now.
</p>
</div>


<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px" class="g3 fu" data-d="1">

<a href="https://alphax.wiki/Entering_the_Gay_Scene_for_the_First_Time" class="path-card" aria-label="I'm New — Just Curious">
<div class="path-num">01</div>
<div class="path-icon-wrap">
<svg width="22" height="22" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
</div>
<div class="path-title">I'm New / Just Curious</div>
<div class="path-desc">Community basics, health, consent & finding your people.</div>
<div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Fetish_%26_Kink_Library" class="path-card" aria-label="I Want to Explore Kink">
<div class="path-num">02</div>
<div class="path-icon-wrap">
<svg width="22" height="22" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"/></svg>
</div>
<div class="path-title">I Want to Explore Kink</div>
<div class="path-desc">BDSM, fetishes, leather culture & power dynamics.</div>
<div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Dynamics_%26_Relationships" class="path-card" aria-label="Improve My Relationship">
<div class="path-num">03</div>
<div class="path-icon-wrap">
<svg width="22" height="22" 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="path-title">Improve My Relationship</div>
<div class="path-desc">Communication, trust, non-monogamy & intimacy.</div>
<div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

</div>

<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:14px" class="g2 fu" data-d="2">

<a href="https://alphax.wiki/Safety_%26_Consent" class="path-card path-card-wide" aria-label="I Care About Safety">
<div class="path-num">04</div>
<div class="path-icon-wrap">
<svg width="22" height="22" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
</div>
<div class="path-title">I Care About Safety</div>
<div class="path-desc">Harm reduction, safe sex, PrEP, BDSM safety & consent.</div>
<div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Advanced_Practices" class="path-card path-card-wide" aria-label="I Want Advanced Knowledge">
<div class="path-num">05</div>
<div class="path-icon-wrap">
<svg width="22" height="22" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
</div>
<div class="path-title">I Want Advanced Knowledge</div>
<div class="path-desc">Psychology, advanced BDSM, identity & queer history.</div>
<div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

</div>
</div>
</section>


<section style="padding:80px 1rem;background:#111111;border-top:1px solid var(--border);border-bottom:1px solid var(--border)" aria-labelledby="latest-h">
<div style="max-width:1100px;margin:0 auto">

<div style="display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px">
<div>
<div style="font-size:.73rem;font-weight:700;color:var(--orange);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px">— Fresh & Recent</div>
<h2 id="latest-h" style="font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;color:var(--text);letter-spacing:-.025em">Latest Articles</h2>
</div>
<div style="display:flex;align-items:center;gap:8px">
<div style="position:relative">
<input id="latest-search-input" type="text" placeholder="Search latest…" style="background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 14px 9px 36px;color:var(--text);font-size:.88rem;width:200px;outline:none" />
<svg style="position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.5" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35"/></svg>
</div>
<button onclick="scrollLatest(-1)" style="width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center">‹</button>
<button onclick="scrollLatest(1)" style="width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center">›</button>
</div>
</div>

<div id="latest-deck" style="display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:none">
<a href="https://alphax.wiki/Impact_of_Dating_Apps_on_Gay_Life" class="latest-card">
<div class="latest-title">Impact of Dating Apps on Gay Life</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Dating</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/The_Loneliness_Epidemic_No_One_Talks_About_%E2%80%94_and_Why_It%E2%80%99s_Killing_Us" class="latest-card">
<div class="latest-title">The Loneliness Epidemic No One Talks About — and Why It’s Killing Us</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Identity</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Food_Play" class="latest-card">
<div class="latest-title">Food Play</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Kink</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Neoprene_Fetish" class="latest-card">
<div class="latest-title">Neoprene Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Watersports" class="latest-card">
<div class="latest-title">Watersports</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Boots_Fetish" class="latest-card">
<div class="latest-title">Boots Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Tattoos_Fetish" class="latest-card">
<div class="latest-title">Tattoos Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Piercings_Fetish" class="latest-card">
<div class="latest-title">Piercings Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Spandex_and_Lycra_Fetish" class="latest-card">
<div class="latest-title">Spandex and Lycra Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Masks_Fetish" class="latest-card">
<div class="latest-title">Masks Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Uniforms_Fetish" class="latest-card">
<div class="latest-title">Uniforms Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Socks_and_Used_Clothing_Fetish" class="latest-card">
<div class="latest-title">Socks and Used Clothing Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Hands_and_Gloves_Fetish" class="latest-card">
<div class="latest-title">Hands and Gloves Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Muscle_Worship" class="latest-card">
<div class="latest-title">Muscle Worship</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Armpits_Fetish" class="latest-card">
<div class="latest-title">Armpits Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Hair_Fetish" class="latest-card">
<div class="latest-title">Hair Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Sneakers_and_Sportswear_Fetish" class="latest-card">
<div class="latest-title">Sneakers and Sportswear Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Underwear_Fetish" class="latest-card">
<div class="latest-title">Underwear Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Sweat_and_Musk_Fetish" class="latest-card">
<div class="latest-title">Sweat and Musk Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Latex_and_Rubber_Fetish" class="latest-card">
<div class="latest-title">Latex and Rubber Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
</div>

</div>
</section>


<section style="padding:80px 1rem" aria-labelledby="editor-h">
<div style="max-width:1100px;margin:0 auto">

<div style="display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:44px" class="fu">
<div>
<div class="eyebrow" style="margin-bottom:14px">Curated Reads</div>
<h2 id="editor-h" style="font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;color:var(--text);letter-spacing:-.025em">Editor's Selection</h2>
</div>
<a href="https://alphax.wiki/Start_Here" style="font-size:.85rem;color:var(--text-3);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .2s"
onmouseover="this.style.color='var(--orange)'" onmouseout="this.style.color='var(--text-3)'">
View all <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>

<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px" class="g3 fu" data-d="1">

<a href="https://alphax.wiki/Aftercare_in_BDSM" class="art-card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
<span class="tag t-orange">Editor's Pick</span>
<span style="font-size:.73rem;color:var(--text-3)">Safety</span>
</div>
<div class="art-title">Aftercare in BDSM</div>
<div class="art-body">Why aftercare matters, what it looks like in practice, and how to give and receive it properly.</div>
<div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Hookup_Culture_in_Gay_Communities" class="art-card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
<span class="tag t-orange">Editor's Pick</span>
<span style="font-size:.73rem;color:var(--text-3)">Culture</span>
</div>
<div class="art-title">Hookup Culture in Gay Communities</div>
<div class="art-body">The sociology, the psychology, and the real-world dynamics of hookup culture in gay life.</div>
<div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Leather_Culture_%26_Community" class="art-card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
<span class="tag t-orange">Editor's Pick</span>
<span style="font-size:.73rem;color:var(--text-3)">Culture</span>
</div>
<div class="art-title">Leather Culture & Community</div>
<div class="art-body">History, codes, events and how leather culture shaped gay identity across decades.</div>
<div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Chosen_Family" class="art-card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
<span class="tag t-orange">Editor's Pick</span>
<span style="font-size:.73rem;color:var(--text-3)">Community</span>
</div>
<div class="art-title">Chosen Family</div>
<div class="art-body">What chosen family means, how to build one, and why it's one of the most powerful forces in queer life.</div>
<div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Chemsex_%E2%80%94_A_Complete_Guide" class="art-card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
<span class="tag t-orange">Editor's Pick</span>
<span style="font-size:.73rem;color:var(--text-3)">Harm Reduction</span>
</div>
<div class="art-title">Chemsex — A Complete Guide</div>
<div class="art-body">Everything you need to know about chemsex: the substances, the risks, the scene, and how to get help.</div>
<div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Why_Most_%E2%80%9CSubs%E2%80%9D_Fail_%E2%80%94_And_What_Real_Submission_Actually_Looks_Like" class="art-card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
<span class="tag t-orange">Editor's Pick</span>
<span style="font-size:.73rem;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em">BDSM</span>
</div>
<div class="art-title">Why Most "Subs" Fail — And What Real Submission Actually Looks Like</div>
<div class="art-body">Most guys who call themselves "submissive" aren't submissive at all. What real submission actually requires — and why most people avoid it.</div>
<div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

</div>
</div>
</section>


<section style="padding:80px 1rem;background:#111111;border-top:1px solid var(--border);border-bottom:1px solid var(--border)" aria-labelledby="areas-h">
<div style="max-width:1100px;margin:0 auto">

<div style="text-align:center;margin-bottom:52px" class="fu">
<div class="eyebrow" style="justify-content:center;margin-bottom:16px">Full Library</div>
<h2 id="areas-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;color:var(--text);letter-spacing:-.025em;margin-bottom:12px">
Explore All Knowledge Areas
</h2>
<p style="color:var(--text-2);font-size:1rem;max-width:440px;margin:0 auto;line-height:1.7">
Eight pillars covering every corner of gay life — from safety to culture, kink to identity.
</p>
</div>

<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px" class="fu" data-d="1" id="areas-grid">
<style>@media(max-width:900px){#areas-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){#areas-grid{grid-template-columns:1fr}}</style>

<a href="https://alphax.wiki/Safety_%26_Consent" class="area-card">
<div class="area-icon">🛡️</div>
<div class="area-name">Safety & Consent</div>
<div class="area-desc">PrEP, harm reduction, safe sex, consent frameworks</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Fetish_%26_Kink_Library" class="area-card">
<div class="area-icon">🔥</div>
<div class="area-name">Fetish & Kink Library</div>
<div class="area-desc">BDSM, leather, fetishes, gear and play</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Dynamics_%26_Relationships" class="area-card">
<div class="area-icon">💑</div>
<div class="area-name">Dynamics & Relationships</div>
<div class="area-desc">Non-monogamy, communication, intimacy, trust</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Psychology_%26_Identity" class="area-card">
<div class="area-icon">🧠</div>
<div class="area-name">Psychology & Identity</div>
<div class="area-desc">Mental health, shame, self-acceptance, coming out</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Advanced_Practices" class="area-card">
<div class="area-icon">⚡</div>
<div class="area-name">Advanced Practices</div>
<div class="area-desc">Deep BDSM, edge play, queer theory, history</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Culture_%26_Nightlife" class="area-card">
<div class="area-icon">🌃</div>
<div class="area-name">Culture & Nightlife</div>
<div class="area-desc">Bars, saunas, darkrooms, pride, gay scenes</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Drugs_%26_Harm_Reduction" class="area-card">
<div class="area-icon">💊</div>
<div class="area-name">Drugs & Harm Reduction</div>
<div class="area-desc">Chemsex, substance risks, support resources</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Fashion_%26_Visual_Signaling" class="area-card">
<div class="area-icon">👗</div>
<div class="area-name">Fashion & Visual Signaling</div>
<div class="area-desc">Dress codes, hanky codes, identity through style</div>
<div class="area-arrow">→</div>
</a>

</div>

<div style="text-align:center;margin-top:36px" class="fu" data-d="1">
<a href="https://alphax.wiki/Start_Here" class="btn-primary" style="margin:0 auto">
Browse the Full Library
<svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
</div>
</section>


<section style="padding:80px 1rem;background:#111111;border-top:1px solid var(--border);border-bottom:1px solid var(--border)" aria-labelledby="voices-h">
<div style="max-width:1100px;margin:0 auto">
<div style="text-align:center;margin-bottom:48px" class="fu">
<div class="eyebrow" style="justify-content:center;margin-bottom:14px">Community Voices</div>
<h2 id="voices-h" style="font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;color:var(--text);letter-spacing:-.025em">What readers say</h2>
</div>
<div class="q-grid fu" data-d="1">
<figure class="q-card">
<blockquote><p class="q-text">"The PrEP article was the first time I fully understood how it worked. I started taking it the following week. This site genuinely changed how I protect myself."</p></blockquote>
<figcaption style="display:flex;align-items:center;gap:12px">
<div style="width:36px;height:36px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:800;color:#fff;flex-shrink:0;box-shadow:var(--glow-sm)" aria-hidden="true">M</div>
<div><div style="font-weight:700;font-size:.87rem;color:var(--text)">Marco, 24</div><div style="font-size:.75rem;color:var(--text-3)">Berlin</div></div>
</figcaption>
</figure>
<figure class="q-card">
<blockquote><p class="q-text">"When I first came out I was completely lost. AlphaX gave me the vocabulary, the context, and the confidence to start building my life in the gay community."</p></blockquote>
<figcaption style="display:flex;align-items:center;gap:12px">
<div style="width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:800;color:var(--text-2);flex-shrink:0" aria-hidden="true">J</div>
<div><div style="font-weight:700;font-size:.87rem;color:var(--text)">James, 19</div><div style="font-size:.75rem;color:var(--text-3)">Manchester</div></div>
</figcaption>
</figure>
<figure class="q-card">
<blockquote><p class="q-text">"I sent the chemsex article to a friend who was struggling. He called the next day to say he'd booked a support session. No other resource did that for us."</p></blockquote>
<figcaption style="display:flex;align-items:center;gap:12px">
<div style="width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:800;color:var(--text-2);flex-shrink:0" aria-hidden="true">R</div>
<div><div style="font-weight:700;font-size:.87rem;color:var(--text)">Rafi, 31</div><div style="font-size:.75rem;color:var(--text-3)">Tel Aviv</div></div>
</figcaption>
</figure>
</div>
</div>
</section>


<section style="padding:100px 1rem" aria-labelledby="nl-h">
<div style="max-width:480px;margin:0 auto;text-align:center" class="fu">
<div style="width:2px;height:40px;background:var(--grad);margin:0 auto 28px;border-radius:1px;box-shadow:var(--glow-sm)" aria-hidden="true"></div>
<div class="eyebrow" style="justify-content:center;margin-bottom:16px">Weekly Newsletter</div>
<h2 id="nl-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;color:var(--text);letter-spacing:-.025em;line-height:1.12;margin-bottom:12px">
Stay in the <span class="ot">know.</span>
</h2>
<p style="color:var(--text-2);font-size:.95rem;line-height:1.72;margin-bottom:30px">
New articles every week. Health guides, deep-dives, community stories. No spam, unsubscribe anytime.
</p>
<form onsubmit="handleSub(event)" novalidate style="display:flex;flex-direction:column;gap:10px">
<label for="nl" class="sr-only">Email address</label>
<input id="nl" type="email" placeholder="your@email.com" class="nl-in" required aria-required="true" autocomplete="email">
<button type="submit" class="btn-primary" style="justify-content:center;width:100%">
<span id="nl-span">Subscribe Free</span>
</button>
</form>
<p style="font-size:.74rem;color:var(--text-3);margin-top:12px">Join 50,000+ readers. Free forever.</p>
</div>
</section>

</main>


<footer style="border-top:1px solid var(--border);padding:3rem 1rem 2rem;background:#0D0D0D" aria-label="Footer">
<div style="max-width:1100px;margin:0 auto">
<div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem" class="gfooter">
<div>
<a href="https://alphax.wiki" style="display:inline-flex;margin-bottom:16px" aria-label="AlphaX Wiki">
<img src="https://alphax.wiki/images/7/7a/Alphax_Wiki_logo_new.png" alt="AlphaX Wiki" style="height:42px;width:auto;object-fit:contain">
</a>
<p style="font-size:.82rem;color:var(--text-3);line-height:1.7;max-width:240px">
The world's biggest free gay lifestyle knowledge hub. Life-saving articles for everyone, always free.
</p>
</div>
<nav aria-label="Health">
<div style="font-size:.68rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px">Health</div>
<ul style="list-style:none;display:flex;flex-direction:column;gap:9px">
<li><a href="https://alphax.wiki/prep" class="ft-link">PrEP Guide</a></li>
<li><a href="https://alphax.wiki/hiv" class="ft-link">HIV & AIDS</a></li>
<li><a href="https://alphax.wiki/sti" class="ft-link">STI Prevention</a></li>
<li><a href="https://alphax.wiki/chemsex" class="ft-link">Chemsex Safety</a></li>
<li><a href="https://alphax.wiki/mental-health" class="ft-link">Mental Health</a></li>
</ul>
</nav>
<nav aria-label="Lifestyle">
<div style="font-size:.68rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px">Lifestyle</div>
<ul style="list-style:none;display:flex;flex-direction:column;gap:9px">
<li><a href="https://alphax.wiki/coming-out" class="ft-link">Coming Out</a></li>
<li><a href="https://alphax.wiki/relationships" class="ft-link">Relationships</a></li>
<li><a href="https://alphax.wiki/nightlife" class="ft-link">Nightlife</a></li>
<li><a href="https://alphax.wiki/dating-apps" class="ft-link">Dating Apps</a></li>
<li><a href="https://alphax.wiki/travel" class="ft-link">Gay Travel</a></li>
</ul>
</nav>
<nav aria-label="Site">
<div style="font-size:.68rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px">Site</div>
<ul style="list-style:none;display:flex;flex-direction:column;gap:9px">
<li><a href="https://alphax.wiki/about" class="ft-link">Our Mission</a></li>
<li><a href="https://alphax.wiki/write" class="ft-link">Contribute</a></li>
<li><a href="https://alphax.wiki/privacy" class="ft-link">Privacy</a></li>
<li><a href="https://alphax.wiki/sitemap" class="ft-link">Sitemap</a></li>
<li><a href="https://alphax.wiki/radmin" class="ft-link">Admin Login</a></li>
</ul>
</nav>
</div>
<div class="div-line" style="margin-bottom:20px"></div>
<div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px">
<p style="font-size:.78rem;color:var(--text-3)">© 2025 AlphaX Wiki. Free knowledge for everyone. Always.</p>
<p style="font-size:.78rem;color:var(--text-3)">Made with love for the community</p>
</div>
</div>
</footer>

<style>
.ft-link { font-size:.84rem;color:var(--text-3);text-decoration:none;transition:color .2s; }
.ft-link:hover { color:var(--orange); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }
</style>

<script>
/* Progress bar */
const prog = document.getElementById('prog');
window.addEventListener('scroll', () => {
const h = document.documentElement;
prog.style.width = (h.scrollTop / (h.scrollHeight - h.clientHeight) * 100) + '%';
}, { passive: true });

/* Fade-up */
const io = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
}, { threshold: 0.06, rootMargin: '0px 0px -36px 0px' });
document.querySelectorAll('.fu').forEach(el => io.observe(el));

/* Smooth anchor scroll */
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', e => {
const t = document.querySelector(a.getAttribute('href'));
if (!t) return;
e.preventDefault();
window.scrollTo({ top: t.getBoundingClientRect().top + scrollY - 80, behavior: 'smooth' });
});
});

/* Newsletter */
function handleSub(e) {
e.preventDefault();
const inp = document.getElementById('nl');
const span = document.getElementById('nl-span');
if (!inp.value) return;
span.textContent = 'Subscribed!';
e.target.querySelector('button').style.background = 'linear-gradient(135deg,#3DDC84,#2BB870)';
e.target.querySelector('button').style.boxShadow = '0 0 20px rgba(61,220,132,.3)';
inp.value = '';
setTimeout(() => {
span.textContent = 'Subscribe Free';
e.target.querySelector('button').style.background = '';
e.target.querySelector('button').style.boxShadow = '';
}, 3500);
}

/* Latest deck scroll */
function scrollLatest(dir) {
document.getElementById('latest-deck').scrollBy({ left: dir * 520, behavior: 'smooth' }

function filterLatestCards(query) {
const q = query.toLowerCase().trim();
const cards = document.querySelectorAll('#latest-deck .latest-card');
cards.forEach(function(card) {
const title = card.querySelector('.latest-title');
const text = title ? title.textContent.toLowerCase() : '';
card.style.display = (!q || text.includes(q)) ? '' : 'none';
});

// Attach search to latest input
document.addEventListener('DOMContentLoaded', function() {
var inp = document.getElementById('latest-search-input');
if (inp) inp.addEventListener('input', function() { filterLatestCards(this.value); });
});
});
}

</script>

<script>
/* Progress bar */
const prog = document.getElementById('prog');
window.addEventListener('scroll', () => {
const h = document.documentElement;
prog.style.width = (h.scrollTop / (h.scrollHeight - h.clientHeight) * 100) + '%';
}, { passive: true });

/* Fade-up */
const io = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
}, { threshold: 0.06, rootMargin: '0px 0px -36px 0px' });
document.querySelectorAll('.fu').forEach(el => io.observe(el));

/* Smooth anchor scroll */
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', e => {
const t = document.querySelector(a.getAttribute('href'));
if (!t) return;
e.preventDefault();
window.scrollTo({ top: t.getBoundingClientRect().top + scrollY - 80, behavior: 'smooth' });
});
});

/* Newsletter */
function handleSub(e) {
e.preventDefault();
const inp = document.getElementById('nl');
const span = document.getElementById('nl-span');
if (!inp.value) return;
span.textContent = 'Subscribed!';
e.target.querySelector('button').style.background = 'linear-gradient(135deg,#3DDC84,#2BB870)';
e.target.querySelector('button').style.boxShadow = '0 0 20px rgba(61,220,132,.3)';
inp.value = '';
setTimeout(() => {
span.textContent = 'Subscribe Free';
e.target.querySelector('button').style.background = '';
e.target.querySelector('button').style.boxShadow = '';
}, 3500);
}

/* Latest deck scroll */
function scrollLatest(dir) {
document.getElementById('latest-deck').scrollBy({ left: dir * 520, behavior: 'smooth' });
}

</script>
</html>

2026-05-04T07:13:28Z

Admin:

Wiki/Homepage

2026-05-04T04:18:24Z

Admin:

<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;
--border: #2E2E2E;
--orange: #FF6A21;
--orange2: #FF8C42;
--text: #FFFFFF;
--text-2: #999999;
--text-3: #666666;
--text-4: #888888;
--glow-sm: 0 0 20px rgba(255,106,33,.15);
--glow-md: 0 0 20px rgba(255,106,33,.40);
--glow-lg: 0 0 30px rgba(255,106,33,.60);
--grad: linear-gradient(135deg, #FF6A21, #FF8C42);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
font-family: 'Inter', sans-serif;
color: var(--text);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5 { font-family: 'Space Grotesk', sans-serif; }

/* ── Scrollbar ─────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.05); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,106,33,.20); }

/* ── Skip / focus ──────────────────────────────── */
.skip { position:fixed;top:-60px;left:12px;background:var(--orange);color:#fff;padding:8px 18px;border-radius:8px;font-weight:700;font-size:.85rem;z-index:9999;transition:top .2s; }
.skip:focus { top:12px; }
*:focus-visible { outline:2px solid rgba(255,106,33,.7);outline-offset:3px;border-radius:4px; }

/* ── Progress bar ──────────────────────────────── */
#prog { position:fixed;top:0;left:0;height:2px;z-index:9999;background:var(--grad);width:0;pointer-events:none; }

/* ── Navbar ────────────────────────────────────── */
.nav {
position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
z-index: 50;
background: rgba(13,13,13,.88);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border: 1px solid var(--border);
border-radius: 999px;
display: flex; align-items: center;
padding: 0 6px 0 16px;
height: 52px; gap: 6px;
width: min(calc(100vw - 32px), 800px);
}
.nav-logo { display:flex;align-items:center;flex-shrink:0;margin-right:4px; }
.nav-links { display:flex;align-items:center;gap:2px;flex:1; }
.nav-link {
font-size:.83rem;font-weight:500;color:var(--text-2);
padding:6px 12px;border-radius:999px;text-decoration:none;
transition:color .2s,background .2s;white-space:nowrap;
}
.nav-link:hover { color:var(--text);background:rgba(255,255,255,.05); }
.nav-right { display:flex;align-items:center;gap:6px;flex-shrink:0; }
.nav-admin {
font-size:.76rem;font-weight:600;color:var(--text-3);
padding:6px 12px;border-radius:999px;
border:1px solid var(--border);
text-decoration:none;
transition:color .2s,border-color .2s;white-space:nowrap;
display:inline-flex;align-items:center;gap:5px;
}
.nav-admin:hover { color:var(--text-2);border-color:rgba(255,106,33,.4); }
.btn-nav {
font-size:.83rem;font-weight:700;color:#fff;
background: var(--grad);
padding:8px 20px;border-radius:999px;border:none;cursor:pointer;
text-decoration:none;display:inline-flex;align-items:center;
transition:opacity .2s,box-shadow .2s;
box-shadow: var(--glow-sm);
}
.btn-nav:hover { opacity:.92;box-shadow:var(--glow-md); }
@media(max-width:640px){ .nav-links,.nav-admin{display:none;} }

/* ── Orange text gradient ──────────────────────── */
.ot {
background: var(--grad);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ── Buttons ───────────────────────────────────── */
.btn-primary {
display:inline-flex;align-items:center;gap:8px;
font-size:.92rem;font-weight:700;color:#fff;
background: var(--grad);
padding:14px 28px;border-radius:12px;border:none;cursor:pointer;
text-decoration:none;
transition:transform .2s,box-shadow .2s,opacity .2s;
box-shadow: var(--glow-sm);
}
.btn-primary:hover { transform:translateY(-1px);box-shadow:var(--glow-md);opacity:.93; }
.btn-secondary {
display:inline-flex;align-items:center;gap:8px;
font-size:.92rem;font-weight:600;color:var(--text-2);
background: var(--surface);
border:1px solid var(--border);
padding:14px 28px;border-radius:12px;cursor:pointer;
text-decoration:none;
transition:border-color .2s,color .2s;
}
.btn-secondary:hover { border-color:rgba(255,106,33,.5);color:var(--text); }

/* ── Section eyebrow ───────────────────────────── */
.eyebrow {
display:inline-flex;align-items:center;gap:8px;
font-size:.70rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--orange);
}
.eyebrow::before { content:'';width:18px;height:1px;background:var(--orange);opacity:.55; }

/* ── Divider ───────────────────────────────────── */
.div-line { height:1px;background:var(--border); }

/* ── Noise ─────────────────────────────────────── */
.noise { position:absolute;inset:0;pointer-events:none;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── Glow orbs ─────────────────────────────────── */
.orb { position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none; }
.orb-1 { width:500px;height:500px;background:rgba(255,106,33,.10);top:-160px;left:-80px;animation:drift 20s ease-in-out infinite alternate; }
.orb-2 { width:400px;height:400px;background:rgba(255,140,66,.07);top:-80px;right:-60px;animation:drift 16s ease-in-out infinite alternate-reverse; }
@keyframes drift { from{transform:translate(0,0)} to{transform:translate(30px,24px)} }
@media(prefers-reduced-motion:reduce){ .orb{animation:none!important} }

/* ── Grid lines ────────────────────────────────── */
.grid-bg {
position:absolute;inset:0;pointer-events:none;overflow:hidden;
background-image:
linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
background-size:72px 72px;
mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black 0%,transparent 80%);
}

/* ── Feature cards ─────────────────────────────── */
.feat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px;
display:flex;flex-direction:column;gap:14px;
transition: border-color .2s, box-shadow .2s, transform .2s;
}
.feat-card:hover {
border-color: rgba(255,106,33,.30);
box-shadow: 0 8px 32px rgba(0,0,0,.4), var(--glow-sm);
transform: translateY(-2px);
}
.feat-icon {
width:44px;height:44px;border-radius:10px;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
background: rgba(255,106,33,.10);
border: 1px solid rgba(255,106,33,.20);
}
.feat-title { font-size:1rem;font-weight:700;color:var(--text);line-height:1.3; }
.feat-body { font-size:.855rem;color:var(--text-2);line-height:1.72; }

/* ── Mockup ────────────────────────────────────── */
.mockup-wrap {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04), var(--glow-sm);
}
.mockup-bar {
background: #111111;
border-bottom: 1px solid var(--border);
padding: 12px 16px;
display: flex; align-items: center; gap: 10px;
}
.dot { width:11px;height:11px;border-radius:50%; }
.mockup-url {
flex:1;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:6px;
padding:5px 12px;font-size:.74rem;color:var(--text-3);font-family:monospace;letter-spacing:.02em;
}
.mockup-body { padding:16px;display:flex;flex-direction:column;gap:8px; }
.mock-search {
background:rgba(255,255,255,.04);border:1px solid var(--border);
border-radius:8px;padding:10px 14px;
display:flex;align-items:center;gap:10px;color:var(--text-3);font-size:.82rem;
margin-bottom:4px;
}
.mock-article {
background:rgba(255,255,255,.025);
border:1px solid var(--border);
border-radius:10px;padding:12px 14px;
display:flex;align-items:center;gap:12px;
transition:background .2s,border-color .2s;cursor:default;
}
.mock-article:hover { background:rgba(255,106,33,.06);border-color:rgba(255,106,33,.25); }
.mock-dot { width:34px;height:34px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center; }
.mock-title { font-size:.81rem;font-weight:600;color:rgba(255,255,255,.82);margin-bottom:3px; }
.mock-sub { font-size:.73rem;color:var(--text-3); }
.mock-badge {
margin-left:auto;flex-shrink:0;
font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:3px 9px;border-radius:999px;
background:rgba(255,106,33,.12);border:1px solid rgba(255,106,33,.25);color:#fff;
}
.mock-badge-g {
font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:3px 9px;border-radius:999px;margin-left:auto;flex-shrink:0;
background:rgba(61,220,132,.10);border:1px solid rgba(61,220,132,.22);color:#3DDC84;
}

/* ── Stats ─────────────────────────────────────── */
.stat-strip { display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:16px;overflow:hidden; }
@media(max-width:600px){ .stat-strip{grid-template-columns:repeat(2,1fr);} }
.stat-cell { padding:2rem 1.5rem;text-align:center;border-right:1px solid var(--border);transition:background .2s; }
.stat-cell:last-child { border-right:none; }
.stat-cell:hover { background:rgba(255,106,33,.04); }
.stat-n { font-family:'Space Grotesk',sans-serif;font-size:clamp(2rem,3.5vw,3rem);font-weight:900;line-height:1;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }

/* ── Topic tiles ───────────────────────────────── */
.topic-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px; }
.topic-tile {
background:var(--surface);border:1px solid var(--border);border-radius:12px;
padding:18px 20px;text-decoration:none;display:flex;flex-direction:column;gap:8px;
transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;cursor:pointer;
}
.topic-tile:hover {
background:rgba(255,106,33,.05);border-color:rgba(255,106,33,.30);
transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4),var(--glow-sm);
}
.topic-icon { width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center; }
.topic-name { font-size:.88rem;font-weight:600;color:var(--text); }
.topic-count { font-size:.75rem;color:var(--text-3); }

/* ── Article cards ─────────────────────────────── */
.art-card {
background:var(--surface);border:1px solid var(--border);border-radius:16px;
padding:26px;text-decoration:none;display:flex;flex-direction:column;gap:12px;
transition:border-color .2s,box-shadow .2s,transform .2s;cursor:pointer;
}
.art-card:hover {
border-color:rgba(255,106,33,.30);
box-shadow:0 12px 40px rgba(0,0,0,.5),var(--glow-sm);
transform:translateY(-2px);
}
.art-title { font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;color:var(--text);line-height:1.35;transition:color .2s; }
.art-card:hover .art-title { color:var(--orange2); }
.art-body { font-size:.845rem;color:var(--text-2);line-height:1.70; }
.art-cta { display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;color:rgba(255,106,33,.65);margin-top:auto; }
.art-card:hover .art-cta { color:var(--orange); }

/* ── Tag pills ─────────────────────────────────── */
.tag {
display:inline-flex;align-items:center;
font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
padding:3px 10px;border-radius:999px;
}
.t-orange { background:rgba(255,106,33,.12);border:1px solid rgba(255,106,33,.25);color:var(--orange); }
.t-green { background:rgba(61,220,132,.10);border:1px solid rgba(61,220,132,.22);color:#3DDC84; }
.t-white { background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.65); }

/* ── Quote cards ───────────────────────────────── */
.q-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
@media(max-width:900px){ .q-grid{grid-template-columns:1fr;} }
.q-card {
background:var(--surface);border:1px solid var(--border);border-radius:16px;
padding:28px;display:flex;flex-direction:column;gap:20px;
}
.q-text { font-size:.895rem;color:var(--text-2);line-height:1.78;font-style:italic; }

/* ── CTA band ──────────────────────────────────── */
.cta-band {
position:relative;overflow:hidden;
background:#111111;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}
.cta-band::before {
content:'';position:absolute;right:-100px;top:-100px;
width:400px;height:400px;border-radius:50%;
background:radial-gradient(circle,rgba(255,106,33,.12) 0%,transparent 65%);
pointer-events:none;
}
.cta-band::after {
content:'';position:absolute;left:-80px;bottom:-80px;
width:300px;height:300px;border-radius:50%;
background:radial-gradient(circle,rgba(255,140,66,.08) 0%,transparent 65%);
pointer-events:none;
}

/* ── Marquee ───────────────────────────────────── */
.mq-wrap { overflow:hidden; }
.mq-track { display:flex;width:max-content;animation:mq 40s linear infinite; }
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media(prefers-reduced-motion:reduce){ .mq-track{animation:none} }

/* ── Newsletter input ──────────────────────────── */
.nl-in {
background:var(--surface);border:1px solid var(--border);
color:var(--text);outline:none;border-radius:10px;
padding:13px 18px;font-size:.9rem;width:100%;
transition:border-color .2s,box-shadow .2s;font-family:'Inter',sans-serif;
}
.nl-in:focus { border-color:rgba(255,106,33,.55);box-shadow:0 0 0 3px rgba(255,106,33,.12); }
.nl-in::placeholder { color:var(--text-3); }

/* ── Fade-up ───────────────────────────────────── */
.fu { opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease; }
.fu.in { opacity:1;transform:none; }
.fu[data-d="1"]{transition-delay:.10s}
.fu[data-d="2"]{transition-delay:.18s}
.fu[data-d="3"]{transition-delay:.26s}
.fu[data-d="4"]{transition-delay:.34s}
.fu[data-d="5"]{transition-delay:.42s}
.fu[data-d="6"]{transition-delay:.50s}
@media(prefers-reduced-motion:reduce){ .fu{opacity:1!important;transform:none!important;transition:none!important} }

/* ── Path cards (Choose Your Path) ────────────── */
.path-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px 26px;
text-decoration: none;
display: flex; flex-direction: column; gap: 10px;
transition: border-color .2s, box-shadow .2s, transform .2s;
cursor: pointer; position: relative; overflow: hidden;
}
.path-card::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(255,106,33,.04) 0%, transparent 60%);
opacity: 0; transition: opacity .2s;
}
.path-card:hover { border-color: rgba(255,106,33,.40); box-shadow: 0 8px 32px rgba(0,0,0,.4), var(--glow-sm); transform: translateY(-2px); }
.path-card:hover::before { opacity: 1; }
.path-card-wide { flex-direction: row; align-items: center; gap: 20px; }
.path-card-wide .path-desc { margin-right: auto; }
.path-num { font-size: .68rem; font-weight: 800; letter-spacing: .12em; color: var(--text-3); font-family: 'Space Grotesk', sans-serif; }
.path-icon-wrap { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,106,33,.08); border: 1px solid rgba(255,106,33,.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.path-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.path-desc { font-size: .855rem; color: var(--text-2); line-height: 1.65; }
.path-cta { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; color: rgba(255,106,33,.55); margin-top: 4px; transition: color .2s; }
.path-card:hover .path-cta { color: var(--orange); }
@media(max-width:700px) { .path-card-wide { flex-direction: column; align-items: flex-start; } }

/* ── Latest articles card ──────────────────────── */
.latest-card {
flex-shrink: 0; width: 240px; scroll-snap-align: start;
background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
padding: 20px; text-decoration: none;
display: flex; flex-direction: column; gap: 10px;
transition: border-color .2s, transform .2s, box-shadow .2s;
}
.latest-card:hover { border-color: rgba(255,106,33,.30); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.4), var(--glow-sm); }
.latest-title { font-family: 'Space Grotesk', sans-serif; font-size: .9rem; font-weight: 700; color: var(--text); line-height: 1.35; transition: color .2s; }
.latest-card:hover .latest-title { color: var(--orange2); }
.latest-date { font-size: .72rem; color: var(--text-3); margin-top: auto; }
#latest-deck::-webkit-scrollbar { display: none; }

/* ── Knowledge area cards ──────────────────────── */
.area-card {
background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
padding: 22px 20px; text-decoration: none;
display: flex; flex-direction: column; gap: 6px;
transition: border-color .2s, transform .2s, box-shadow .2s, background .2s;
cursor: pointer; position: relative;
}
.area-card:hover { border-color: rgba(255,106,33,.35); background: rgba(255,106,33,.03); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.4), var(--glow-sm); }
.area-icon { font-size: 1.5rem; line-height: 1; margin-bottom: 4px; }
.area-name { font-family: 'Space Grotesk', sans-serif; font-size: .92rem; font-weight: 700; color: var(--text); }
.area-desc { font-size: .78rem; color: var(--text-3); line-height: 1.55; }
.area-arrow { position: absolute; top: 20px; right: 18px; font-size: 1rem; color: var(--text-3); transition: color .2s, transform .2s; }
.area-card:hover .area-arrow { color: var(--orange); transform: translateX(3px); }

/* ── Responsive grids ──────────────────────────── */
@media(max-width:900px){.g3{grid-template-columns:1fr 1fr!important}}
@media(max-width:560px){.g3,.g2{grid-template-columns:1fr!important}}
@media(max-width:800px){.gfooter{grid-template-columns:1fr 1fr!important}}
@media(max-width:460px){.gfooter{grid-template-columns:1fr!important}}
</style>
<style>@media(max-width:900px){#areas-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){#areas-grid{grid-template-columns:1fr}}</style>
<style>
.ft-link { font-size:.84rem;color:var(--text-3);text-decoration:none;transition:color .2s; }
.ft-link:hover { color:var(--orange); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }
</style>

<div id="prog" aria-hidden="true"></div>
<a href="#main" class="skip">Skip to content</a>


<nav class="nav" role="navigation" aria-label="Main navigation">
<a href="https://alphax.wiki" class="nav-logo" aria-label="AlphaX Wiki home">
<img src="https://alphax.wiki/images/7/7a/Alphax_Wiki_logo_new.png" alt="AlphaX Wiki" style="height:34px;width:auto;object-fit:contain">
</a>
<div class="nav-links">
<a href="#features" class="nav-link">Features</a>
<a href="#topics" class="nav-link">Topics</a>
<a href="#articles" class="nav-link">Articles</a>
<a href="#about" class="nav-link">About</a>
</div>
<div class="nav-right">
<a href="https://alphax.wiki/radmin" class="nav-admin" aria-label="Admin login">
<svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
Admin
</a>
<a href="https://alphax.wiki" class="btn-nav">Explore Free</a>
</div>
</nav>

<main id="main">


<section style="position:relative;padding:180px 1rem 100px;overflow:hidden" aria-label="Hero">
<div class="orb orb-1" aria-hidden="true"></div>
<div class="orb orb-2" aria-hidden="true"></div>
<div class="grid-bg" aria-hidden="true"></div>
<div class="noise" aria-hidden="true"></div>

<div style="max-width:860px;margin:0 auto;text-align:center;position:relative">


<a href="https://alphax.wiki/prep-complete-guide"
style="display:inline-flex;align-items:center;gap:8px;background:rgba(255,106,33,.08);border:1px solid rgba(255,106,33,.22);border-radius:999px;padding:6px 14px 6px 8px;text-decoration:none;margin-bottom:2.5rem;transition:background .2s"
onmouseover="this.style.background='rgba(255,106,33,.14)'" onmouseout="this.style.background='rgba(255,106,33,.08)'"
aria-label="New: Understanding PrEP: Role, Impact, and Considerations">
<span style="background:var(--grad);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:3px 10px;border-radius:999px">New</span>
<span style="font-size:.82rem;color:var(--text-2)">Understanding PrEP: Role, Impact, and Considerations — just published</span>
<svg width="13" height="13" fill="none" stroke="var(--text-3)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
</a>


<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>
<span class="ot">In one place. Free.</span>
</h1>


<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,
nightlife and more — written for the gay community, by the gay community.
</p>


<div style="display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:3.5rem">
<a href="https://alphax.wiki" class="btn-primary">
Start Reading Free
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
<a href="#topics" class="btn-secondary">Browse Topics</a>
</div>


<div style="display:flex;flex-wrap:wrap;justify-content:center;gap:28px" role="list" aria-label="Trust indicators">
<div style="display:flex;align-items:center;gap:7px" role="listitem">
<svg width="14" height="14" fill="none" stroke="#3DDC84" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
<span style="font-size:.8rem;color:var(--text-3)">No account required</span>
</div>
<div style="display:flex;align-items:center;gap:7px" role="listitem">
<svg width="14" height="14" fill="none" stroke="#3DDC84" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
<span style="font-size:.8rem;color:var(--text-3)">Always free</span>
</div>
<div style="display:flex;align-items:center;gap:7px" role="listitem">
<svg width="14" height="14" fill="none" stroke="#3DDC84" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
<span style="font-size:.8rem;color:var(--text-3)">No judgment</span>
</div>
<div style="display:flex;align-items:center;gap:7px" role="listitem">
<svg width="14" height="14" fill="none" stroke="#3DDC84" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
<span style="font-size:.8rem;color:var(--text-3)">2M+ monthly readers</span>
</div>
</div>
</div>


<div style="max-width:760px;margin:5rem auto 0;position:relative" class="fu">

<div style="position:absolute;inset:-30px;background:radial-gradient(ellipse 60% 40% at 50% 100%,rgba(255,106,33,.12) 0%,transparent 70%);pointer-events:none" aria-hidden="true"></div>
<div class="mockup-wrap" style="position:relative">
<div class="mockup-bar">
<div class="dot" style="background:#FF5F56"></div>
<div class="dot" style="background:#FFBD2E"></div>
<div class="dot" style="background:#27C93F"></div>
<div class="mockup-url">alphax.wiki</div>
<svg width="14" height="14" fill="none" stroke="var(--text-3)" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
</div>
<div class="mockup-body">
<div class="mock-search">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
Search: PrEP, coming out, darkroom, chemsex…
</div>
<div class="mock-article">
<div class="mock-dot" style="background:rgba(255,106,33,.10);border:1px solid rgba(255,106,33,.20)">
<svg width="15" height="15" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
</div>
<div><div class="mock-title">Understanding PrEP: Role, Impact, and Considerations</div><div class="mock-sub">12 min · Health & Safety</div></div>
<div class="mock-badge-g">Life-Saving</div>
</div>
<div class="mock-article">
<div class="mock-dot" style="background:rgba(255,255,255,.04);border:1px solid var(--border)">
<svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
</div>
<div><div class="mock-title">Darkroom Etiquette: How to Survive (and Thrive)</div><div class="mock-sub">7 min · Nightlife & Culture</div></div>
<div class="mock-badge">Culture</div>
</div>
<div class="mock-article">
<div class="mock-dot" style="background:rgba(255,255,255,.04);border:1px solid var(--border)">
<svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
</div>
<div><div class="mock-title">Chemsex: Risks, Support & Getting Help</div><div class="mock-sub">15 min · Harm Reduction</div></div>
<div class="mock-badge">Safety</div>
</div>
<div class="mock-article">
<div class="mock-dot" style="background:rgba(255,255,255,.04);border:1px solid var(--border)">
<svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
</div>
<div><div class="mock-title">Coming Out to Family: A Practical, Honest Guide</div><div class="mock-sub">10 min · Coming Out</div></div>
<div class="mock-badge">Guide</div>
</div>
</div>
</div>
</div>
</section>


<div class="mq-wrap" style="border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0" aria-hidden="true">
<div class="mq-track">
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Health & Safety</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">PrEP & HIV Prevention</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Darkroom Culture</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Coming Out</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Gay Relationships</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Mental Wellness</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Chemsex Safety</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">LGBTQ+ Rights</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Nightlife & Saunas</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Identity & Community</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Dating & Hookups</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Gay Travel</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Health & Safety</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">PrEP & HIV Prevention</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Darkroom Culture</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Coming Out</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Gay Relationships</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Mental Wellness</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Chemsex Safety</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">LGBTQ+ Rights</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Nightlife & Saunas</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Identity & Community</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Dating & Hookups</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Gay Travel</span><span style="color:rgba(255,255,255,.06)">·</span>
</div>
</div>


<section style="padding:80px 1rem" aria-label="Statistics">
<div style="max-width:900px;margin:0 auto">
<div class="stat-strip fu" role="list">
<div class="stat-cell" role="listitem"><div class="stat-n">500+</div><div style="font-size:.74rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.10em;margin-top:.5rem">Articles</div></div>
<div class="stat-cell" role="listitem"><div class="stat-n">2M+</div><div style="font-size:.74rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.10em;margin-top:.5rem">Monthly Readers</div></div>
<div class="stat-cell" role="listitem"><div class="stat-n">80+</div><div style="font-size:.74rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.10em;margin-top:.5rem">Topics</div></div>
<div class="stat-cell" role="listitem"><div class="stat-n">Free</div><div style="font-size:.74rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.10em;margin-top:.5rem">Always</div></div>
</div>
</div>
</section>


<section style="padding:80px 1rem" id="features" aria-labelledby="feat-h">
<div style="max-width:1100px;margin:0 auto">
<div style="text-align:center;margin-bottom:56px" class="fu">
<div class="eyebrow" style="justify-content:center;margin-bottom:16px">Why AlphaX Wiki</div>
<h2 id="feat-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:800;color:var(--text);letter-spacing:-.025em;line-height:1.15">
Built for the community.<br><span class="ot">Not an afterthought.</span>
</h2>
</div>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px" class="g3 fu" data-d="1">
<div class="feat-card fu" data-d="1">
<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-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>
<div class="feat-card fu" data-d="2">
<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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg></div>
<div class="feat-title">Deep, Honest Articles</div>
<div class="feat-body">No watered-down advice. Rich long-form articles that treat the reader as an intelligent adult navigating a real life — without heteronormative assumptions.</div>
</div>
<div class="feat-card fu" data-d="3">
<div class="feat-icon"><svg width="20" height="20" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-4.35-4.35"/></svg></div>
<div class="feat-title">Find What You Need Fast</div>
<div class="feat-body">Search 500+ articles instantly. From PrEP to polyamory, darkroom etiquette to coming out at 40 — it's all indexed and searchable.</div>
</div>
<div class="feat-card fu" data-d="4">
<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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div>
<div class="feat-title">Built for the Community</div>
<div class="feat-body">Written by people who live this life. No journalists parachuting in. Real knowledge from real experience, reviewed for accuracy.</div>
</div>
<div class="feat-card fu" data-d="5">
<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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div>
<div class="feat-title">Private by Default</div>
<div class="feat-body">No account. No tracking your reads. No social logins. Come, read what you need, and leave. Your business stays your business.</div>
</div>
<div class="feat-card fu" data-d="6">
<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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div>
<div class="feat-title">Forever Free</div>
<div class="feat-body">No paywalls. No premium tiers. No "unlock for $9/month." Every article, available to everyone — because this knowledge shouldn't have a price tag.</div>
</div>
</div>
</div>
</section>


<section id="topics" style="padding:80px 1rem;" aria-label="Topics">
<div style="max-width:1100px;margin:0 auto;">
<div style="text-align:center;margin-bottom:48px;">
<span style="font-size:.75rem;letter-spacing:.12em;text-transform:upperc
ase;color:var(--orange);font-weight:700;">Knowledge Areas</span>
<h2 style="font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spa
cing:-.02em;margin-top:.5rem;color:var(--text);">Explore by Category</h2>
<p style="color:var(--text-2);margin-top:.75rem;font-size:1rem;">Eight
knowledge areas covering every aspect of gay life.</p>
</div>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240
px,1fr));gap:16px;">

<a href="https://alphax.wiki/wiki/Category:Sexual_Health"
style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
ce);text-decoration:none;border:1px solid var(--border);transition:transform
.2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
--border)';this.style.transform='none'">
<img src="https://alphax.wiki/images/c/c2/Sexual_health.png"
style="width:100%;height:auto;display:block;" alt="Sexual Health"
loading="lazy">
<div style="padding:16px 18px;"><div
style="font-weight:700;color:var(--text);font-size:.95rem;">Sexual
Health</div></div>
</a>

<a
href="https://alphax.wiki/wiki/Category:Dating,_Sex_%26_Relationships"
style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
ce);text-decoration:none;border:1px solid var(--border);transition:transform
.2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
--border)';this.style.transform='none'">
<img
src="https://alphax.wiki/images/6/6c/Dating_and_relationships.png"
style="width:100%;height:auto;display:block;" alt="Dating, Sex &
Relationships" loading="lazy">
<div style="padding:16px 18px;"><div
style="font-weight:700;color:var(--text);font-size:.95rem;">Dating, Sex &
Relationships</div></div>
</a>

<a href="https://alphax.wiki/wiki/Category:Kink_%26_BDSM"
style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
ce);text-decoration:none;border:1px solid var(--border);transition:transform
.2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
--border)';this.style.transform='none'">
<img src="https://alphax.wiki/images/a/a1/Chain-image.png"
style="width:100%;height:auto;display:block;" alt="Kink & BDSM"
loading="lazy">
<div style="padding:16px 18px;"><div
style="font-weight:700;color:var(--text);font-size:.95rem;">Kink &
BDSM</div></div>
</a>

<a
href="https://alphax.wiki/wiki/Category:Culture,_History_%26_Politics"
style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
ce);text-decoration:none;border:1px solid var(--border);transition:transform
.2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
--border)';this.style.transform='none'">
<img
src="https://alphax.wiki/images/2/25/Culture_History_Politics_Hero.png"
style="width:100%;height:auto;display:block;" alt="Culture, History &
Politics" loading="lazy">
<div style="padding:16px 18px;"><div
style="font-weight:700;color:var(--text);font-size:.95rem;">Culture, History &
Politics</div></div>
</a>

<a href="https://alphax.wiki/wiki/Category:Fashion_%26_Visual_Signaling"
style="display:block;border-radius:14px;overflow:hidden;background:var(--surf
ace);text-decoration:none;border:1px solid var(--border);transition:transform
.2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
--border)';this.style.transform='none'">
<img
src="https://alphax.wiki/images/8/86/Screenshot_2026-04-26_at_15.06.46.png"
style="width:100%;height:auto;display:block;" alt="Fashion & Visual Signaling"
loading="lazy">
<div style="padding:16px 18px;"><div
style="font-weight:700;color:var(--text);font-size:.95rem;">Fashion & Visual
Signaling</div></div>
</a>

<a href="https://alphax.wiki/wiki/Category:Community_%26_Identity"
style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
ce);text-decoration:none;border:1px solid var(--border);transition:transform
.2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
--border)';this.style.transform='none'">
<img src="https://alphax.wiki/images/e/ed/Community_Identity_Hero.png"
style="width:100%;height:auto;display:block;" alt="Community & Identity"
loading="lazy">
<div style="padding:16px 18px;"><div
style="font-weight:700;color:var(--text);font-size:.95rem;">Community &
Identity</div></div>
</a>

<a href="https://alphax.wiki/wiki/Category:Drugs,_Party_Culture_%26_Harm
_Reduction" style="display:block;border-radius:14px;overflow:hidden;background
:var(--surface);text-decoration:none;border:1px solid
var(--border);transition:transform .2s,border-color .2s;" onmouseover="this.st
yle.borderColor='var(--orange)';this.style.transform='translateY(-2px)'" onmou
seout="this.style.borderColor='var(--border)';this.style.transform='none'">
<img
src="https://alphax.wiki/images/3/38/Drugs_Party_Culture_Hero.png"
style="width:100%;height:auto;display:block;" alt="Drugs, Party Culture & Harm
Reduction" loading="lazy">
<div style="padding:16px 18px;"><div
style="font-weight:700;color:var(--text);font-size:.95rem;">Drugs, Party
Culture & Harm Reduction</div></div>
</a>

<a href="https://alphax.wiki/wiki/Category:Life_Planning"
style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
ce);text-decoration:none;border:1px solid var(--border);transition:transform
.2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
s.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"
style="width:100%;height:auto;display:block;" 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>
</a>

</div>
</div>
</section>


<section class="cta-band" style="padding:80px 1rem" id="about" aria-labelledby="ls-h">
<div style="max-width:820px;margin:0 auto;text-align:center;position:relative" class="fu">
<div style="width:52px;height:52px;border-radius:14px;background:rgba(255,106,33,.12);border:1px solid rgba(255,106,33,.22);display:flex;align-items:center;justify-content:center;margin:0 auto 22px">
<svg width="22" height="22" 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>
<h2 id="ls-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;color:var(--text);letter-spacing:-.025em;margin-bottom:14px;line-height:1.15">
Knowledge that saves lives.
</h2>
<p style="font-size:1.05rem;color:var(--text-2);max-width:540px;margin:0 auto 34px;line-height:1.75">
From HIV prevention to recognising the risks of chemsex — some of these articles can change the course of a night, a relationship, or a life. No account. No judgment. Ever.
</p>
<a href="https://alphax.wiki/articles" class="btn-primary" style="margin:0 auto">
Start Reading Free
<svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
</section>


<section style="padding:80px 1rem" id="articles" aria-labelledby="path-h">
<div style="max-width:1100px;margin:0 auto">

<div style="text-align:center;margin-bottom:56px" class="fu">
<div class="eyebrow" style="justify-content:center;margin-bottom:16px">Start Here</div>
<h2 id="path-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;color:var(--text);letter-spacing:-.025em;margin-bottom:12px">
Choose Your Path
</h2>
<p style="color:var(--text-2);font-size:1rem;max-width:480px;margin:0 auto;line-height:1.7">
Not sure where to begin? Pick the path that fits where you are right now.
</p>
</div>


<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px" class="g3 fu" data-d="1">

<a href="https://alphax.wiki/Entering_the_Gay_Scene_for_the_First_Time" class="path-card" aria-label="I'm New — Just Curious">
<div class="path-num">01</div>
<div class="path-icon-wrap">
<svg width="22" height="22" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
</div>
<div class="path-title">I'm New / Just Curious</div>
<div class="path-desc">Community basics, health, consent & finding your people.</div>
<div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Fetish_%26_Kink_Library" class="path-card" aria-label="I Want to Explore Kink">
<div class="path-num">02</div>
<div class="path-icon-wrap">
<svg width="22" height="22" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"/></svg>
</div>
<div class="path-title">I Want to Explore Kink</div>
<div class="path-desc">BDSM, fetishes, leather culture & power dynamics.</div>
<div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Dynamics_%26_Relationships" class="path-card" aria-label="Improve My Relationship">
<div class="path-num">03</div>
<div class="path-icon-wrap">
<svg width="22" height="22" 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="path-title">Improve My Relationship</div>
<div class="path-desc">Communication, trust, non-monogamy & intimacy.</div>
<div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

</div>

<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:14px" class="g2 fu" data-d="2">

<a href="https://alphax.wiki/Safety_%26_Consent" class="path-card path-card-wide" aria-label="I Care About Safety">
<div class="path-num">04</div>
<div class="path-icon-wrap">
<svg width="22" height="22" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
</div>
<div class="path-title">I Care About Safety</div>
<div class="path-desc">Harm reduction, safe sex, PrEP, BDSM safety & consent.</div>
<div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Advanced_Practices" class="path-card path-card-wide" aria-label="I Want Advanced Knowledge">
<div class="path-num">05</div>
<div class="path-icon-wrap">
<svg width="22" height="22" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
</div>
<div class="path-title">I Want Advanced Knowledge</div>
<div class="path-desc">Psychology, advanced BDSM, identity & queer history.</div>
<div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

</div>
</div>
</section>


<section style="padding:80px 1rem;background:#111111;border-top:1px solid var(--border);border-bottom:1px solid var(--border)" aria-labelledby="latest-h">
<div style="max-width:1100px;margin:0 auto">

<div style="display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px">
<div>
<div style="font-size:.73rem;font-weight:700;color:var(--orange);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px">— Fresh & Recent</div>
<h2 id="latest-h" style="font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;color:var(--text);letter-spacing:-.025em">Latest Articles</h2>
</div>
<div style="display:flex;align-items:center;gap:8px">
<div style="position:relative">
<input id="latest-search-input" type="text" placeholder="Search latest…" style="background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 14px 9px 36px;color:var(--text);font-size:.88rem;width:200px;outline:none" />
<svg style="position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.5" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35"/></svg>
</div>
<button onclick="scrollLatest(-1)" style="width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center">‹</button>
<button onclick="scrollLatest(1)" style="width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center">›</button>
</div>
</div>

<div id="latest-deck" style="display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:none">
<a href="https://alphax.wiki/Impact_of_Dating_Apps_on_Gay_Life" class="latest-card">
<div class="latest-title">Impact of Dating Apps on Gay Life</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Dating</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/The_Loneliness_Epidemic_No_One_Talks_About_%E2%80%94_and_Why_It%E2%80%99s_Killing_Us" class="latest-card">
<div class="latest-title">The Loneliness Epidemic No One Talks About — and Why It’s Killing Us</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Identity</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Food_Play" class="latest-card">
<div class="latest-title">Food Play</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Kink</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Neoprene_Fetish" class="latest-card">
<div class="latest-title">Neoprene Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Watersports" class="latest-card">
<div class="latest-title">Watersports</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Boots_Fetish" class="latest-card">
<div class="latest-title">Boots Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Tattoos_Fetish" class="latest-card">
<div class="latest-title">Tattoos Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Piercings_Fetish" class="latest-card">
<div class="latest-title">Piercings Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Spandex_and_Lycra_Fetish" class="latest-card">
<div class="latest-title">Spandex and Lycra Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Masks_Fetish" class="latest-card">
<div class="latest-title">Masks Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Uniforms_Fetish" class="latest-card">
<div class="latest-title">Uniforms Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Socks_and_Used_Clothing_Fetish" class="latest-card">
<div class="latest-title">Socks and Used Clothing Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Hands_and_Gloves_Fetish" class="latest-card">
<div class="latest-title">Hands and Gloves Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Muscle_Worship" class="latest-card">
<div class="latest-title">Muscle Worship</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Armpits_Fetish" class="latest-card">
<div class="latest-title">Armpits Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Hair_Fetish" class="latest-card">
<div class="latest-title">Hair Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Sneakers_and_Sportswear_Fetish" class="latest-card">
<div class="latest-title">Sneakers and Sportswear Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Underwear_Fetish" class="latest-card">
<div class="latest-title">Underwear Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Sweat_and_Musk_Fetish" class="latest-card">
<div class="latest-title">Sweat and Musk Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Latex_and_Rubber_Fetish" class="latest-card">
<div class="latest-title">Latex and Rubber Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
</div>

</div>
</section>


<section style="padding:80px 1rem" aria-labelledby="editor-h">
<div style="max-width:1100px;margin:0 auto">

<div style="display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:44px" class="fu">
<div>
<div class="eyebrow" style="margin-bottom:14px">Curated Reads</div>
<h2 id="editor-h" style="font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;color:var(--text);letter-spacing:-.025em">Editor's Selection</h2>
</div>
<a href="https://alphax.wiki/Start_Here" style="font-size:.85rem;color:var(--text-3);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .2s"
onmouseover="this.style.color='var(--orange)'" onmouseout="this.style.color='var(--text-3)'">
View all <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>

<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px" class="g3 fu" data-d="1">

<a href="https://alphax.wiki/Aftercare_in_BDSM" class="art-card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
<span class="tag t-orange">Editor's Pick</span>
<span style="font-size:.73rem;color:var(--text-3)">Safety</span>
</div>
<div class="art-title">Aftercare in BDSM</div>
<div class="art-body">Why aftercare matters, what it looks like in practice, and how to give and receive it properly.</div>
<div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Hookup_Culture_in_Gay_Communities" class="art-card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
<span class="tag t-orange">Editor's Pick</span>
<span style="font-size:.73rem;color:var(--text-3)">Culture</span>
</div>
<div class="art-title">Hookup Culture in Gay Communities</div>
<div class="art-body">The sociology, the psychology, and the real-world dynamics of hookup culture in gay life.</div>
<div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Leather_Culture_%26_Community" class="art-card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
<span class="tag t-orange">Editor's Pick</span>
<span style="font-size:.73rem;color:var(--text-3)">Culture</span>
</div>
<div class="art-title">Leather Culture & Community</div>
<div class="art-body">History, codes, events and how leather culture shaped gay identity across decades.</div>
<div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Chosen_Family" class="art-card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
<span class="tag t-orange">Editor's Pick</span>
<span style="font-size:.73rem;color:var(--text-3)">Community</span>
</div>
<div class="art-title">Chosen Family</div>
<div class="art-body">What chosen family means, how to build one, and why it's one of the most powerful forces in queer life.</div>
<div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Chemsex_%E2%80%94_A_Complete_Guide" class="art-card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
<span class="tag t-orange">Editor's Pick</span>
<span style="font-size:.73rem;color:var(--text-3)">Harm Reduction</span>
</div>
<div class="art-title">Chemsex — A Complete Guide</div>
<div class="art-body">Everything you need to know about chemsex: the substances, the risks, the scene, and how to get help.</div>
<div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Why_Most_%E2%80%9CSubs%E2%80%9D_Fail_%E2%80%94_And_What_Real_Submission_Actually_Looks_Like" class="art-card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
<span class="tag t-orange">Editor's Pick</span>
<span style="font-size:.73rem;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em">BDSM</span>
</div>
<div class="art-title">Why Most "Subs" Fail — And What Real Submission Actually Looks Like</div>
<div class="art-body">Most guys who call themselves "submissive" aren't submissive at all. What real submission actually requires — and why most people avoid it.</div>
<div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

</div>
</div>
</section>


<section style="padding:80px 1rem;background:#111111;border-top:1px solid var(--border);border-bottom:1px solid var(--border)" aria-labelledby="areas-h">
<div style="max-width:1100px;margin:0 auto">

<div style="text-align:center;margin-bottom:52px" class="fu">
<div class="eyebrow" style="justify-content:center;margin-bottom:16px">Full Library</div>
<h2 id="areas-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;color:var(--text);letter-spacing:-.025em;margin-bottom:12px">
Explore All Knowledge Areas
</h2>
<p style="color:var(--text-2);font-size:1rem;max-width:440px;margin:0 auto;line-height:1.7">
Eight pillars covering every corner of gay life — from safety to culture, kink to identity.
</p>
</div>

<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px" class="fu" data-d="1" id="areas-grid">
<style>@media(max-width:900px){#areas-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){#areas-grid{grid-template-columns:1fr}}</style>

<a href="https://alphax.wiki/Safety_%26_Consent" class="area-card">
<div class="area-icon">🛡️</div>
<div class="area-name">Safety & Consent</div>
<div class="area-desc">PrEP, harm reduction, safe sex, consent frameworks</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Fetish_%26_Kink_Library" class="area-card">
<div class="area-icon">🔥</div>
<div class="area-name">Fetish & Kink Library</div>
<div class="area-desc">BDSM, leather, fetishes, gear and play</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Dynamics_%26_Relationships" class="area-card">
<div class="area-icon">💑</div>
<div class="area-name">Dynamics & Relationships</div>
<div class="area-desc">Non-monogamy, communication, intimacy, trust</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Psychology_%26_Identity" class="area-card">
<div class="area-icon">🧠</div>
<div class="area-name">Psychology & Identity</div>
<div class="area-desc">Mental health, shame, self-acceptance, coming out</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Advanced_Practices" class="area-card">
<div class="area-icon">⚡</div>
<div class="area-name">Advanced Practices</div>
<div class="area-desc">Deep BDSM, edge play, queer theory, history</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Culture_%26_Nightlife" class="area-card">
<div class="area-icon">🌃</div>
<div class="area-name">Culture & Nightlife</div>
<div class="area-desc">Bars, saunas, darkrooms, pride, gay scenes</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Drugs_%26_Harm_Reduction" class="area-card">
<div class="area-icon">💊</div>
<div class="area-name">Drugs & Harm Reduction</div>
<div class="area-desc">Chemsex, substance risks, support resources</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Fashion_%26_Visual_Signaling" class="area-card">
<div class="area-icon">👗</div>
<div class="area-name">Fashion & Visual Signaling</div>
<div class="area-desc">Dress codes, hanky codes, identity through style</div>
<div class="area-arrow">→</div>
</a>

</div>

<div style="text-align:center;margin-top:36px" class="fu" data-d="1">
<a href="https://alphax.wiki/Start_Here" class="btn-primary" style="margin:0 auto">
Browse the Full Library
<svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
</div>
</section>


<section style="padding:80px 1rem;background:#111111;border-top:1px solid var(--border);border-bottom:1px solid var(--border)" aria-labelledby="voices-h">
<div style="max-width:1100px;margin:0 auto">
<div style="text-align:center;margin-bottom:48px" class="fu">
<div class="eyebrow" style="justify-content:center;margin-bottom:14px">Community Voices</div>
<h2 id="voices-h" style="font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;color:var(--text);letter-spacing:-.025em">What readers say</h2>
</div>
<div class="q-grid fu" data-d="1">
<figure class="q-card">
<blockquote><p class="q-text">"The PrEP article was the first time I fully understood how it worked. I started taking it the following week. This site genuinely changed how I protect myself."</p></blockquote>
<figcaption style="display:flex;align-items:center;gap:12px">
<div style="width:36px;height:36px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:800;color:#fff;flex-shrink:0;box-shadow:var(--glow-sm)" aria-hidden="true">M</div>
<div><div style="font-weight:700;font-size:.87rem;color:var(--text)">Marco, 24</div><div style="font-size:.75rem;color:var(--text-3)">Berlin</div></div>
</figcaption>
</figure>
<figure class="q-card">
<blockquote><p class="q-text">"When I first came out I was completely lost. AlphaX gave me the vocabulary, the context, and the confidence to start building my life in the gay community."</p></blockquote>
<figcaption style="display:flex;align-items:center;gap:12px">
<div style="width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:800;color:var(--text-2);flex-shrink:0" aria-hidden="true">J</div>
<div><div style="font-weight:700;font-size:.87rem;color:var(--text)">James, 19</div><div style="font-size:.75rem;color:var(--text-3)">Manchester</div></div>
</figcaption>
</figure>
<figure class="q-card">
<blockquote><p class="q-text">"I sent the chemsex article to a friend who was struggling. He called the next day to say he'd booked a support session. No other resource did that for us."</p></blockquote>
<figcaption style="display:flex;align-items:center;gap:12px">
<div style="width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:800;color:var(--text-2);flex-shrink:0" aria-hidden="true">R</div>
<div><div style="font-weight:700;font-size:.87rem;color:var(--text)">Rafi, 31</div><div style="font-size:.75rem;color:var(--text-3)">Tel Aviv</div></div>
</figcaption>
</figure>
</div>
</div>
</section>


<section style="padding:100px 1rem" aria-labelledby="nl-h">
<div style="max-width:480px;margin:0 auto;text-align:center" class="fu">
<div style="width:2px;height:40px;background:var(--grad);margin:0 auto 28px;border-radius:1px;box-shadow:var(--glow-sm)" aria-hidden="true"></div>
<div class="eyebrow" style="justify-content:center;margin-bottom:16px">Weekly Newsletter</div>
<h2 id="nl-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;color:var(--text);letter-spacing:-.025em;line-height:1.12;margin-bottom:12px">
Stay in the <span class="ot">know.</span>
</h2>
<p style="color:var(--text-2);font-size:.95rem;line-height:1.72;margin-bottom:30px">
New articles every week. Health guides, deep-dives, community stories. No spam, unsubscribe anytime.
</p>
<form onsubmit="handleSub(event)" novalidate style="display:flex;flex-direction:column;gap:10px">
<label for="nl" class="sr-only">Email address</label>
<input id="nl" type="email" placeholder="your@email.com" class="nl-in" required aria-required="true" autocomplete="email">
<button type="submit" class="btn-primary" style="justify-content:center;width:100%">
<span id="nl-span">Subscribe Free</span>
</button>
</form>
<p style="font-size:.74rem;color:var(--text-3);margin-top:12px">Join 50,000+ readers. Free forever.</p>
</div>
</section>

</main>


<footer style="border-top:1px solid var(--border);padding:3rem 1rem 2rem;background:#0D0D0D" aria-label="Footer">
<div style="max-width:1100px;margin:0 auto">
<div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem" class="gfooter">
<div>
<a href="https://alphax.wiki" style="display:inline-flex;margin-bottom:16px" aria-label="AlphaX Wiki">
<img src="https://alphax.wiki/images/7/7a/Alphax_Wiki_logo_new.png" alt="AlphaX Wiki" style="height:42px;width:auto;object-fit:contain">
</a>
<p style="font-size:.82rem;color:var(--text-3);line-height:1.7;max-width:240px">
The world's biggest free gay lifestyle knowledge hub. Life-saving articles for everyone, always free.
</p>
</div>
<nav aria-label="Health">
<div style="font-size:.68rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px">Health</div>
<ul style="list-style:none;display:flex;flex-direction:column;gap:9px">
<li><a href="https://alphax.wiki/prep" class="ft-link">PrEP Guide</a></li>
<li><a href="https://alphax.wiki/hiv" class="ft-link">HIV & AIDS</a></li>
<li><a href="https://alphax.wiki/sti" class="ft-link">STI Prevention</a></li>
<li><a href="https://alphax.wiki/chemsex" class="ft-link">Chemsex Safety</a></li>
<li><a href="https://alphax.wiki/mental-health" class="ft-link">Mental Health</a></li>
</ul>
</nav>
<nav aria-label="Lifestyle">
<div style="font-size:.68rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px">Lifestyle</div>
<ul style="list-style:none;display:flex;flex-direction:column;gap:9px">
<li><a href="https://alphax.wiki/coming-out" class="ft-link">Coming Out</a></li>
<li><a href="https://alphax.wiki/relationships" class="ft-link">Relationships</a></li>
<li><a href="https://alphax.wiki/nightlife" class="ft-link">Nightlife</a></li>
<li><a href="https://alphax.wiki/dating-apps" class="ft-link">Dating Apps</a></li>
<li><a href="https://alphax.wiki/travel" class="ft-link">Gay Travel</a></li>
</ul>
</nav>
<nav aria-label="Site">
<div style="font-size:.68rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px">Site</div>
<ul style="list-style:none;display:flex;flex-direction:column;gap:9px">
<li><a href="https://alphax.wiki/about" class="ft-link">Our Mission</a></li>
<li><a href="https://alphax.wiki/write" class="ft-link">Contribute</a></li>
<li><a href="https://alphax.wiki/privacy" class="ft-link">Privacy</a></li>
<li><a href="https://alphax.wiki/sitemap" class="ft-link">Sitemap</a></li>
<li><a href="https://alphax.wiki/radmin" class="ft-link">Admin Login</a></li>
</ul>
</nav>
</div>
<div class="div-line" style="margin-bottom:20px"></div>
<div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px">
<p style="font-size:.78rem;color:var(--text-3)">© 2025 AlphaX Wiki. Free knowledge for everyone. Always.</p>
<p style="font-size:.78rem;color:var(--text-3)">Made with love for the community</p>
</div>
</div>
</footer>

<style>
.ft-link { font-size:.84rem;color:var(--text-3);text-decoration:none;transition:color .2s; }
.ft-link:hover { color:var(--orange); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }
</style>

<script>
/* Progress bar */
const prog = document.getElementById('prog');
window.addEventListener('scroll', () => {
const h = document.documentElement;
prog.style.width = (h.scrollTop / (h.scrollHeight - h.clientHeight) * 100) + '%';
}, { passive: true });

/* Fade-up */
const io = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
}, { threshold: 0.06, rootMargin: '0px 0px -36px 0px' });
document.querySelectorAll('.fu').forEach(el => io.observe(el));

/* Smooth anchor scroll */
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', e => {
const t = document.querySelector(a.getAttribute('href'));
if (!t) return;
e.preventDefault();
window.scrollTo({ top: t.getBoundingClientRect().top + scrollY - 80, behavior: 'smooth' });
});
});

/* Newsletter */
function handleSub(e) {
e.preventDefault();
const inp = document.getElementById('nl');
const span = document.getElementById('nl-span');
if (!inp.value) return;
span.textContent = 'Subscribed!';
e.target.querySelector('button').style.background = 'linear-gradient(135deg,#3DDC84,#2BB870)';
e.target.querySelector('button').style.boxShadow = '0 0 20px rgba(61,220,132,.3)';
inp.value = '';
setTimeout(() => {
span.textContent = 'Subscribe Free';
e.target.querySelector('button').style.background = '';
e.target.querySelector('button').style.boxShadow = '';
}, 3500);
}

/* Latest deck scroll */
function scrollLatest(dir) {
document.getElementById('latest-deck').scrollBy({ left: dir * 520, behavior: 'smooth' }

function filterLatestCards(query) {
const q = query.toLowerCase().trim();
const cards = document.querySelectorAll('#latest-deck .latest-card');
cards.forEach(function(card) {
const title = card.querySelector('.latest-title');
const text = title ? title.textContent.toLowerCase() : '';
card.style.display = (!q || text.includes(q)) ? '' : 'none';
});

// Attach search to latest input
document.addEventListener('DOMContentLoaded', function() {
var inp = document.getElementById('latest-search-input');
if (inp) inp.addEventListener('input', function() { filterLatestCards(this.value); });
});
});
}

</script>

<script>
/* Progress bar */
const prog = document.getElementById('prog');
window.addEventListener('scroll', () => {
const h = document.documentElement;
prog.style.width = (h.scrollTop / (h.scrollHeight - h.clientHeight) * 100) + '%';
}, { passive: true });

/* Fade-up */
const io = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
}, { threshold: 0.06, rootMargin: '0px 0px -36px 0px' });
document.querySelectorAll('.fu').forEach(el => io.observe(el));

/* Smooth anchor scroll */
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', e => {
const t = document.querySelector(a.getAttribute('href'));
if (!t) return;
e.preventDefault();
window.scrollTo({ top: t.getBoundingClientRect().top + scrollY - 80, behavior: 'smooth' });
});
});

/* Newsletter */
function handleSub(e) {
e.preventDefault();
const inp = document.getElementById('nl');
const span = document.getElementById('nl-span');
if (!inp.value) return;
span.textContent = 'Subscribed!';
e.target.querySelector('button').style.background = 'linear-gradient(135deg,#3DDC84,#2BB870)';
e.target.querySelector('button').style.boxShadow = '0 0 20px rgba(61,220,132,.3)';
inp.value = '';
setTimeout(() => {
span.textContent = 'Subscribe Free';
e.target.querySelector('button').style.background = '';
e.target.querySelector('button').style.boxShadow = '';
}, 3500);
}

/* Latest deck scroll */
function scrollLatest(dir) {
document.getElementById('latest-deck').scrollBy({ left: dir * 520, behavior: 'smooth' });
}

</script>
</html>

Wiki/Homepage

2026-05-04T04:10:32Z

Admin: 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; --..."

<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;
--border: #2E2E2E;
--orange: #FF6A21;
--orange2: #FF8C42;
--text: #FFFFFF;
--text-2: #999999;
--text-3: #666666;
--text-4: #888888;
--glow-sm: 0 0 20px rgba(255,106,33,.15);
--glow-md: 0 0 20px rgba(255,106,33,.40);
--glow-lg: 0 0 30px rgba(255,106,33,.60);
--grad: linear-gradient(135deg, #FF6A21, #FF8C42);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
font-family: 'Inter', sans-serif;
color: var(--text);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5 { font-family: 'Space Grotesk', sans-serif; }

/* ── Scrollbar ─────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.05); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,106,33,.20); }

/* ── Skip / focus ──────────────────────────────── */
.skip { position:fixed;top:-60px;left:12px;background:var(--orange);color:#fff;padding:8px 18px;border-radius:8px;font-weight:700;font-size:.85rem;z-index:9999;transition:top .2s; }
.skip:focus { top:12px; }
*:focus-visible { outline:2px solid rgba(255,106,33,.7);outline-offset:3px;border-radius:4px; }

/* ── Progress bar ──────────────────────────────── */
#prog { position:fixed;top:0;left:0;height:2px;z-index:9999;background:var(--grad);width:0;pointer-events:none; }

/* ── Navbar ────────────────────────────────────── */
.nav {
position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
z-index: 50;
background: rgba(13,13,13,.88);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border: 1px solid var(--border);
border-radius: 999px;
display: flex; align-items: center;
padding: 0 6px 0 16px;
height: 52px; gap: 6px;
width: min(calc(100vw - 32px), 800px);
}
.nav-logo { display:flex;align-items:center;flex-shrink:0;margin-right:4px; }
.nav-links { display:flex;align-items:center;gap:2px;flex:1; }
.nav-link {
font-size:.83rem;font-weight:500;color:var(--text-2);
padding:6px 12px;border-radius:999px;text-decoration:none;
transition:color .2s,background .2s;white-space:nowrap;
}
.nav-link:hover { color:var(--text);background:rgba(255,255,255,.05); }
.nav-right { display:flex;align-items:center;gap:6px;flex-shrink:0; }
.nav-admin {
font-size:.76rem;font-weight:600;color:var(--text-3);
padding:6px 12px;border-radius:999px;
border:1px solid var(--border);
text-decoration:none;
transition:color .2s,border-color .2s;white-space:nowrap;
display:inline-flex;align-items:center;gap:5px;
}
.nav-admin:hover { color:var(--text-2);border-color:rgba(255,106,33,.4); }
.btn-nav {
font-size:.83rem;font-weight:700;color:#fff;
background: var(--grad);
padding:8px 20px;border-radius:999px;border:none;cursor:pointer;
text-decoration:none;display:inline-flex;align-items:center;
transition:opacity .2s,box-shadow .2s;
box-shadow: var(--glow-sm);
}
.btn-nav:hover { opacity:.92;box-shadow:var(--glow-md); }
@media(max-width:640px){ .nav-links,.nav-admin{display:none;} }

/* ── Orange text gradient ──────────────────────── */
.ot {
background: var(--grad);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ── Buttons ───────────────────────────────────── */
.btn-primary {
display:inline-flex;align-items:center;gap:8px;
font-size:.92rem;font-weight:700;color:#fff;
background: var(--grad);
padding:14px 28px;border-radius:12px;border:none;cursor:pointer;
text-decoration:none;
transition:transform .2s,box-shadow .2s,opacity .2s;
box-shadow: var(--glow-sm);
}
.btn-primary:hover { transform:translateY(-1px);box-shadow:var(--glow-md);opacity:.93; }
.btn-secondary {
display:inline-flex;align-items:center;gap:8px;
font-size:.92rem;font-weight:600;color:var(--text-2);
background: var(--surface);
border:1px solid var(--border);
padding:14px 28px;border-radius:12px;cursor:pointer;
text-decoration:none;
transition:border-color .2s,color .2s;
}
.btn-secondary:hover { border-color:rgba(255,106,33,.5);color:var(--text); }

/* ── Section eyebrow ───────────────────────────── */
.eyebrow {
display:inline-flex;align-items:center;gap:8px;
font-size:.70rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--orange);
}
.eyebrow::before { content:'';width:18px;height:1px;background:var(--orange);opacity:.55; }

/* ── Divider ───────────────────────────────────── */
.div-line { height:1px;background:var(--border); }

/* ── Noise ─────────────────────────────────────── */
.noise { position:absolute;inset:0;pointer-events:none;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── Glow orbs ─────────────────────────────────── */
.orb { position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none; }
.orb-1 { width:500px;height:500px;background:rgba(255,106,33,.10);top:-160px;left:-80px;animation:drift 20s ease-in-out infinite alternate; }
.orb-2 { width:400px;height:400px;background:rgba(255,140,66,.07);top:-80px;right:-60px;animation:drift 16s ease-in-out infinite alternate-reverse; }
@keyframes drift { from{transform:translate(0,0)} to{transform:translate(30px,24px)} }
@media(prefers-reduced-motion:reduce){ .orb{animation:none!important} }

/* ── Grid lines ────────────────────────────────── */
.grid-bg {
position:absolute;inset:0;pointer-events:none;overflow:hidden;
background-image:
linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
background-size:72px 72px;
mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black 0%,transparent 80%);
}

/* ── Feature cards ─────────────────────────────── */
.feat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px;
display:flex;flex-direction:column;gap:14px;
transition: border-color .2s, box-shadow .2s, transform .2s;
}
.feat-card:hover {
border-color: rgba(255,106,33,.30);
box-shadow: 0 8px 32px rgba(0,0,0,.4), var(--glow-sm);
transform: translateY(-2px);
}
.feat-icon {
width:44px;height:44px;border-radius:10px;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
background: rgba(255,106,33,.10);
border: 1px solid rgba(255,106,33,.20);
}
.feat-title { font-size:1rem;font-weight:700;color:var(--text);line-height:1.3; }
.feat-body { font-size:.855rem;color:var(--text-2);line-height:1.72; }

/* ── Mockup ────────────────────────────────────── */
.mockup-wrap {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04), var(--glow-sm);
}
.mockup-bar {
background: #111111;
border-bottom: 1px solid var(--border);
padding: 12px 16px;
display: flex; align-items: center; gap: 10px;
}
.dot { width:11px;height:11px;border-radius:50%; }
.mockup-url {
flex:1;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:6px;
padding:5px 12px;font-size:.74rem;color:var(--text-3);font-family:monospace;letter-spacing:.02em;
}
.mockup-body { padding:16px;display:flex;flex-direction:column;gap:8px; }
.mock-search {
background:rgba(255,255,255,.04);border:1px solid var(--border);
border-radius:8px;padding:10px 14px;
display:flex;align-items:center;gap:10px;color:var(--text-3);font-size:.82rem;
margin-bottom:4px;
}
.mock-article {
background:rgba(255,255,255,.025);
border:1px solid var(--border);
border-radius:10px;padding:12px 14px;
display:flex;align-items:center;gap:12px;
transition:background .2s,border-color .2s;cursor:default;
}
.mock-article:hover { background:rgba(255,106,33,.06);border-color:rgba(255,106,33,.25); }
.mock-dot { width:34px;height:34px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center; }
.mock-title { font-size:.81rem;font-weight:600;color:rgba(255,255,255,.82);margin-bottom:3px; }
.mock-sub { font-size:.73rem;color:var(--text-3); }
.mock-badge {
margin-left:auto;flex-shrink:0;
font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:3px 9px;border-radius:999px;
background:rgba(255,106,33,.12);border:1px solid rgba(255,106,33,.25);color:#fff;
}
.mock-badge-g {
font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:3px 9px;border-radius:999px;margin-left:auto;flex-shrink:0;
background:rgba(61,220,132,.10);border:1px solid rgba(61,220,132,.22);color:#3DDC84;
}

/* ── Stats ─────────────────────────────────────── */
.stat-strip { display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:16px;overflow:hidden; }
@media(max-width:600px){ .stat-strip{grid-template-columns:repeat(2,1fr);} }
.stat-cell { padding:2rem 1.5rem;text-align:center;border-right:1px solid var(--border);transition:background .2s; }
.stat-cell:last-child { border-right:none; }
.stat-cell:hover { background:rgba(255,106,33,.04); }
.stat-n { font-family:'Space Grotesk',sans-serif;font-size:clamp(2rem,3.5vw,3rem);font-weight:900;line-height:1;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }

/* ── Topic tiles ───────────────────────────────── */
.topic-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px; }
.topic-tile {
background:var(--surface);border:1px solid var(--border);border-radius:12px;
padding:18px 20px;text-decoration:none;display:flex;flex-direction:column;gap:8px;
transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;cursor:pointer;
}
.topic-tile:hover {
background:rgba(255,106,33,.05);border-color:rgba(255,106,33,.30);
transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4),var(--glow-sm);
}
.topic-icon { width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center; }
.topic-name { font-size:.88rem;font-weight:600;color:var(--text); }
.topic-count { font-size:.75rem;color:var(--text-3); }

/* ── Article cards ─────────────────────────────── */
.art-card {
background:var(--surface);border:1px solid var(--border);border-radius:16px;
padding:26px;text-decoration:none;display:flex;flex-direction:column;gap:12px;
transition:border-color .2s,box-shadow .2s,transform .2s;cursor:pointer;
}
.art-card:hover {
border-color:rgba(255,106,33,.30);
box-shadow:0 12px 40px rgba(0,0,0,.5),var(--glow-sm);
transform:translateY(-2px);
}
.art-title { font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;color:var(--text);line-height:1.35;transition:color .2s; }
.art-card:hover .art-title { color:var(--orange2); }
.art-body { font-size:.845rem;color:var(--text-2);line-height:1.70; }
.art-cta { display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;color:rgba(255,106,33,.65);margin-top:auto; }
.art-card:hover .art-cta { color:var(--orange); }

/* ── Tag pills ─────────────────────────────────── */
.tag {
display:inline-flex;align-items:center;
font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
padding:3px 10px;border-radius:999px;
}
.t-orange { background:rgba(255,106,33,.12);border:1px solid rgba(255,106,33,.25);color:var(--orange); }
.t-green { background:rgba(61,220,132,.10);border:1px solid rgba(61,220,132,.22);color:#3DDC84; }
.t-white { background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.65); }

/* ── Quote cards ───────────────────────────────── */
.q-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
@media(max-width:900px){ .q-grid{grid-template-columns:1fr;} }
.q-card {
background:var(--surface);border:1px solid var(--border);border-radius:16px;
padding:28px;display:flex;flex-direction:column;gap:20px;
}
.q-text { font-size:.895rem;color:var(--text-2);line-height:1.78;font-style:italic; }

/* ── CTA band ──────────────────────────────────── */
.cta-band {
position:relative;overflow:hidden;
background:#111111;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}
.cta-band::before {
content:'';position:absolute;right:-100px;top:-100px;
width:400px;height:400px;border-radius:50%;
background:radial-gradient(circle,rgba(255,106,33,.12) 0%,transparent 65%);
pointer-events:none;
}
.cta-band::after {
content:'';position:absolute;left:-80px;bottom:-80px;
width:300px;height:300px;border-radius:50%;
background:radial-gradient(circle,rgba(255,140,66,.08) 0%,transparent 65%);
pointer-events:none;
}

/* ── Marquee ───────────────────────────────────── */
.mq-wrap { overflow:hidden; }
.mq-track { display:flex;width:max-content;animation:mq 40s linear infinite; }
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media(prefers-reduced-motion:reduce){ .mq-track{animation:none} }

/* ── Newsletter input ──────────────────────────── */
.nl-in {
background:var(--surface);border:1px solid var(--border);
color:var(--text);outline:none;border-radius:10px;
padding:13px 18px;font-size:.9rem;width:100%;
transition:border-color .2s,box-shadow .2s;font-family:'Inter',sans-serif;
}
.nl-in:focus { border-color:rgba(255,106,33,.55);box-shadow:0 0 0 3px rgba(255,106,33,.12); }
.nl-in::placeholder { color:var(--text-3); }

/* ── Fade-up ───────────────────────────────────── */
.fu { opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease; }
.fu.in { opacity:1;transform:none; }
.fu[data-d="1"]{transition-delay:.10s}
.fu[data-d="2"]{transition-delay:.18s}
.fu[data-d="3"]{transition-delay:.26s}
.fu[data-d="4"]{transition-delay:.34s}
.fu[data-d="5"]{transition-delay:.42s}
.fu[data-d="6"]{transition-delay:.50s}
@media(prefers-reduced-motion:reduce){ .fu{opacity:1!important;transform:none!important;transition:none!important} }

/* ── Path cards (Choose Your Path) ────────────── */
.path-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px 26px;
text-decoration: none;
display: flex; flex-direction: column; gap: 10px;
transition: border-color .2s, box-shadow .2s, transform .2s;
cursor: pointer; position: relative; overflow: hidden;
}
.path-card::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(255,106,33,.04) 0%, transparent 60%);
opacity: 0; transition: opacity .2s;
}
.path-card:hover { border-color: rgba(255,106,33,.40); box-shadow: 0 8px 32px rgba(0,0,0,.4), var(--glow-sm); transform: translateY(-2px); }
.path-card:hover::before { opacity: 1; }
.path-card-wide { flex-direction: row; align-items: center; gap: 20px; }
.path-card-wide .path-desc { margin-right: auto; }
.path-num { font-size: .68rem; font-weight: 800; letter-spacing: .12em; color: var(--text-3); font-family: 'Space Grotesk', sans-serif; }
.path-icon-wrap { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,106,33,.08); border: 1px solid rgba(255,106,33,.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.path-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.path-desc { font-size: .855rem; color: var(--text-2); line-height: 1.65; }
.path-cta { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; color: rgba(255,106,33,.55); margin-top: 4px; transition: color .2s; }
.path-card:hover .path-cta { color: var(--orange); }
@media(max-width:700px) { .path-card-wide { flex-direction: column; align-items: flex-start; } }

/* ── Latest articles card ──────────────────────── */
.latest-card {
flex-shrink: 0; width: 240px; scroll-snap-align: start;
background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
padding: 20px; text-decoration: none;
display: flex; flex-direction: column; gap: 10px;
transition: border-color .2s, transform .2s, box-shadow .2s;
}
.latest-card:hover { border-color: rgba(255,106,33,.30); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.4), var(--glow-sm); }
.latest-title { font-family: 'Space Grotesk', sans-serif; font-size: .9rem; font-weight: 700; color: var(--text); line-height: 1.35; transition: color .2s; }
.latest-card:hover .latest-title { color: var(--orange2); }
.latest-date { font-size: .72rem; color: var(--text-3); margin-top: auto; }
#latest-deck::-webkit-scrollbar { display: none; }

/* ── Knowledge area cards ──────────────────────── */
.area-card {
background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
padding: 22px 20px; text-decoration: none;
display: flex; flex-direction: column; gap: 6px;
transition: border-color .2s, transform .2s, box-shadow .2s, background .2s;
cursor: pointer; position: relative;
}
.area-card:hover { border-color: rgba(255,106,33,.35); background: rgba(255,106,33,.03); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.4), var(--glow-sm); }
.area-icon { font-size: 1.5rem; line-height: 1; margin-bottom: 4px; }
.area-name { font-family: 'Space Grotesk', sans-serif; font-size: .92rem; font-weight: 700; color: var(--text); }
.area-desc { font-size: .78rem; color: var(--text-3); line-height: 1.55; }
.area-arrow { position: absolute; top: 20px; right: 18px; font-size: 1rem; color: var(--text-3); transition: color .2s, transform .2s; }
.area-card:hover .area-arrow { color: var(--orange); transform: translateX(3px); }

/* ── Responsive grids ──────────────────────────── */
@media(max-width:900px){.g3{grid-template-columns:1fr 1fr!important}}
@media(max-width:560px){.g3,.g2{grid-template-columns:1fr!important}}
@media(max-width:800px){.gfooter{grid-template-columns:1fr 1fr!important}}
@media(max-width:460px){.gfooter{grid-template-columns:1fr!important}}
</style>
<style>@media(max-width:900px){#areas-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){#areas-grid{grid-template-columns:1fr}}</style>
<style>
.ft-link { font-size:.84rem;color:var(--text-3);text-decoration:none;transition:color .2s; }
.ft-link:hover { color:var(--orange); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }
</style>

<div id="prog" aria-hidden="true"></div>
<a href="#main" class="skip">Skip to content</a>


<nav class="nav" role="navigation" aria-label="Main navigation">
<a href="https://alphax.wiki" class="nav-logo" aria-label="AlphaX Wiki home">
<img src="https://alphax.wiki/images/7/7a/Alphax_Wiki_logo_new.png" alt="AlphaX Wiki" style="height:34px;width:auto;object-fit:contain">
</a>
<div class="nav-links">
<a href="#features" class="nav-link">Features</a>
<a href="#topics" class="nav-link">Topics</a>
<a href="#articles" class="nav-link">Articles</a>
<a href="#about" class="nav-link">About</a>
</div>
<div class="nav-right">
<a href="https://alphax.wiki/radmin" class="nav-admin" aria-label="Admin login">
<svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
Admin
</a>
<a href="https://alphax.wiki" class="btn-nav">Explore Free</a>
</div>
</nav>

<main id="main">


<section style="position:relative;padding:180px 1rem 100px;overflow:hidden" aria-label="Hero">
<div class="orb orb-1" aria-hidden="true"></div>
<div class="orb orb-2" aria-hidden="true"></div>
<div class="grid-bg" aria-hidden="true"></div>
<div class="noise" aria-hidden="true"></div>

<div style="max-width:860px;margin:0 auto;text-align:center;position:relative">


<a href="https://alphax.wiki/prep-complete-guide"
style="display:inline-flex;align-items:center;gap:8px;background:rgba(255,106,33,.08);border:1px solid rgba(255,106,33,.22);border-radius:999px;padding:6px 14px 6px 8px;text-decoration:none;margin-bottom:2.5rem;transition:background .2s"
onmouseover="this.style.background='rgba(255,106,33,.14)'" onmouseout="this.style.background='rgba(255,106,33,.08)'"
aria-label="New: Understanding PrEP: Role, Impact, and Considerations">
<span style="background:var(--grad);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:3px 10px;border-radius:999px">New</span>
<span style="font-size:.82rem;color:var(--text-2)">Understanding PrEP: Role, Impact, and Considerations — just published</span>
<svg width="13" height="13" fill="none" stroke="var(--text-3)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
</a>


<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>
<span class="ot">In one place. Free.</span>
</h1>


<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,
nightlife and more — written for the gay community, by the gay community.
</p>


<div style="display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:3.5rem">
<a href="https://alphax.wiki" class="btn-primary">
Start Reading Free
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
<a href="#topics" class="btn-secondary">Browse Topics</a>
</div>


<div style="display:flex;flex-wrap:wrap;justify-content:center;gap:28px" role="list" aria-label="Trust indicators">
<div style="display:flex;align-items:center;gap:7px" role="listitem">
<svg width="14" height="14" fill="none" stroke="#3DDC84" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
<span style="font-size:.8rem;color:var(--text-3)">No account required</span>
</div>
<div style="display:flex;align-items:center;gap:7px" role="listitem">
<svg width="14" height="14" fill="none" stroke="#3DDC84" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
<span style="font-size:.8rem;color:var(--text-3)">Always free</span>
</div>
<div style="display:flex;align-items:center;gap:7px" role="listitem">
<svg width="14" height="14" fill="none" stroke="#3DDC84" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
<span style="font-size:.8rem;color:var(--text-3)">No judgment</span>
</div>
<div style="display:flex;align-items:center;gap:7px" role="listitem">
<svg width="14" height="14" fill="none" stroke="#3DDC84" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
<span style="font-size:.8rem;color:var(--text-3)">2M+ monthly readers</span>
</div>
</div>
</div>


<div style="max-width:760px;margin:5rem auto 0;position:relative" class="fu">

<div style="position:absolute;inset:-30px;background:radial-gradient(ellipse 60% 40% at 50% 100%,rgba(255,106,33,.12) 0%,transparent 70%);pointer-events:none" aria-hidden="true"></div>
<div class="mockup-wrap" style="position:relative">
<div class="mockup-bar">
<div class="dot" style="background:#FF5F56"></div>
<div class="dot" style="background:#FFBD2E"></div>
<div class="dot" style="background:#27C93F"></div>
<div class="mockup-url">alphax.wiki</div>
<svg width="14" height="14" fill="none" stroke="var(--text-3)" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
</div>
<div class="mockup-body">
<div class="mock-search">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
Search: PrEP, coming out, darkroom, chemsex…
</div>
<div class="mock-article">
<div class="mock-dot" style="background:rgba(255,106,33,.10);border:1px solid rgba(255,106,33,.20)">
<svg width="15" height="15" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
</div>
<div><div class="mock-title">Understanding PrEP: Role, Impact, and Considerations</div><div class="mock-sub">12 min · Health & Safety</div></div>
<div class="mock-badge-g">Life-Saving</div>
</div>
<div class="mock-article">
<div class="mock-dot" style="background:rgba(255,255,255,.04);border:1px solid var(--border)">
<svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
</div>
<div><div class="mock-title">Darkroom Etiquette: How to Survive (and Thrive)</div><div class="mock-sub">7 min · Nightlife & Culture</div></div>
<div class="mock-badge">Culture</div>
</div>
<div class="mock-article">
<div class="mock-dot" style="background:rgba(255,255,255,.04);border:1px solid var(--border)">
<svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
</div>
<div><div class="mock-title">Chemsex: Risks, Support & Getting Help</div><div class="mock-sub">15 min · Harm Reduction</div></div>
<div class="mock-badge">Safety</div>
</div>
<div class="mock-article">
<div class="mock-dot" style="background:rgba(255,255,255,.04);border:1px solid var(--border)">
<svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
</div>
<div><div class="mock-title">Coming Out to Family: A Practical, Honest Guide</div><div class="mock-sub">10 min · Coming Out</div></div>
<div class="mock-badge">Guide</div>
</div>
</div>
</div>
</div>
</section>


<div class="mq-wrap" style="border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0" aria-hidden="true">
<div class="mq-track">
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Health & Safety</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">PrEP & HIV Prevention</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Darkroom Culture</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Coming Out</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Gay Relationships</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Mental Wellness</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Chemsex Safety</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">LGBTQ+ Rights</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Nightlife & Saunas</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Identity & Community</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Dating & Hookups</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Gay Travel</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Health & Safety</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">PrEP & HIV Prevention</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Darkroom Culture</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Coming Out</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Gay Relationships</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Mental Wellness</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Chemsex Safety</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">LGBTQ+ Rights</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Nightlife & Saunas</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Identity & Community</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Dating & Hookups</span><span style="color:rgba(255,255,255,.06)">·</span>
<span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Gay Travel</span><span style="color:rgba(255,255,255,.06)">·</span>
</div>
</div>


<section style="padding:80px 1rem" aria-label="Statistics">
<div style="max-width:900px;margin:0 auto">
<div class="stat-strip fu" role="list">
<div class="stat-cell" role="listitem"><div class="stat-n">500+</div><div style="font-size:.74rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.10em;margin-top:.5rem">Articles</div></div>
<div class="stat-cell" role="listitem"><div class="stat-n">2M+</div><div style="font-size:.74rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.10em;margin-top:.5rem">Monthly Readers</div></div>
<div class="stat-cell" role="listitem"><div class="stat-n">80+</div><div style="font-size:.74rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.10em;margin-top:.5rem">Topics</div></div>
<div class="stat-cell" role="listitem"><div class="stat-n">Free</div><div style="font-size:.74rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.10em;margin-top:.5rem">Always</div></div>
</div>
</div>
</section>


<section style="padding:80px 1rem" id="features" aria-labelledby="feat-h">
<div style="max-width:1100px;margin:0 auto">
<div style="text-align:center;margin-bottom:56px" class="fu">
<div class="eyebrow" style="justify-content:center;margin-bottom:16px">Why AlphaX Wiki</div>
<h2 id="feat-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:800;color:var(--text);letter-spacing:-.025em;line-height:1.15">
Built for the community.<br><span class="ot">Not an afterthought.</span>
</h2>
</div>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px" class="g3 fu" data-d="1">
<div class="feat-card fu" data-d="1">
<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-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>
<div class="feat-card fu" data-d="2">
<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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg></div>
<div class="feat-title">Deep, Honest Articles</div>
<div class="feat-body">No watered-down advice. Rich long-form articles that treat the reader as an intelligent adult navigating a real life — without heteronormative assumptions.</div>
</div>
<div class="feat-card fu" data-d="3">
<div class="feat-icon"><svg width="20" height="20" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-4.35-4.35"/></svg></div>
<div class="feat-title">Find What You Need Fast</div>
<div class="feat-body">Search 500+ articles instantly. From PrEP to polyamory, darkroom etiquette to coming out at 40 — it's all indexed and searchable.</div>
</div>
<div class="feat-card fu" data-d="4">
<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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div>
<div class="feat-title">Built for the Community</div>
<div class="feat-body">Written by people who live this life. No journalists parachuting in. Real knowledge from real experience, reviewed for accuracy.</div>
</div>
<div class="feat-card fu" data-d="5">
<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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div>
<div class="feat-title">Private by Default</div>
<div class="feat-body">No account. No tracking your reads. No social logins. Come, read what you need, and leave. Your business stays your business.</div>
</div>
<div class="feat-card fu" data-d="6">
<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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div>
<div class="feat-title">Forever Free</div>
<div class="feat-body">No paywalls. No premium tiers. No "unlock for $9/month." Every article, available to everyone — because this knowledge shouldn't have a price tag.</div>
</div>
</div>
</div>
</section>


<section id="topics" style="padding:80px 1rem;" aria-label="Topics">
<div style="max-width:1100px;margin:0 auto;">
<div style="text-align:center;margin-bottom:48px;">
<span style="font-size:.75rem;letter-spacing:.12em;text-transform:upperc
ase;color:var(--orange);font-weight:700;">Knowledge Areas</span>
<h2 style="font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spa
cing:-.02em;margin-top:.5rem;color:var(--text);">Explore by Category</h2>
<p style="color:var(--text-2);margin-top:.75rem;font-size:1rem;">Eight
knowledge areas covering every aspect of gay life.</p>
</div>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240
px,1fr));gap:16px;">

<a href="https://alphax.wiki/wiki/Category:Sexual_Health"
style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
ce);text-decoration:none;border:1px solid var(--border);transition:transform
.2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
--border)';this.style.transform='none'">
<div style="height:150px;overflow:hidden;"><img
src="https://alphax.wiki/images/c/c2/Sexual_health.png"
style="width:100%;height:100%;object-fit:cover;" alt="Sexual Health"
loading="lazy"></div>
<div style="padding:16px 18px;"><div
style="font-weight:700;color:var(--text);font-size:.95rem;">Sexual
Health</div></div>
</a>

<a
href="https://alphax.wiki/wiki/Category:Dating,_Sex_%26_Relationships"
style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
ce);text-decoration:none;border:1px solid var(--border);transition:transform
.2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
--border)';this.style.transform='none'">
<div style="height:150px;overflow:hidden;"><img
src="https://alphax.wiki/images/6/6c/Dating_and_relationships.png"
style="width:100%;height:100%;object-fit:cover;" alt="Dating, Sex &
Relationships" loading="lazy"></div>
<div style="padding:16px 18px;"><div
style="font-weight:700;color:var(--text);font-size:.95rem;">Dating, Sex &
Relationships</div></div>
</a>

<a href="https://alphax.wiki/wiki/Category:Kink_%26_BDSM"
style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
ce);text-decoration:none;border:1px solid var(--border);transition:transform
.2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
--border)';this.style.transform='none'">
<div style="height:150px;overflow:hidden;"><img
src="https://alphax.wiki/images/a/a1/Chain-image.png"
style="width:100%;height:100%;object-fit:cover;" alt="Kink & BDSM"
loading="lazy"></div>
<div style="padding:16px 18px;"><div
style="font-weight:700;color:var(--text);font-size:.95rem;">Kink &
BDSM</div></div>
</a>

<a
href="https://alphax.wiki/wiki/Category:Culture,_History_%26_Politics"
style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
ce);text-decoration:none;border:1px solid var(--border);transition:transform
.2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
--border)';this.style.transform='none'">
<div style="height:150px;overflow:hidden;"><img
src="https://alphax.wiki/images/2/25/Culture_History_Politics_Hero.png"
style="width:100%;height:100%;object-fit:cover;" alt="Culture, History &
Politics" loading="lazy"></div>
<div style="padding:16px 18px;"><div
style="font-weight:700;color:var(--text);font-size:.95rem;">Culture, History &
Politics</div></div>
</a>

<a href="https://alphax.wiki/wiki/Category:Fashion_%26_Visual_Signaling"
style="display:block;border-radius:14px;overflow:hidden;background:var(--surf
ace);text-decoration:none;border:1px solid var(--border);transition:transform
.2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
--border)';this.style.transform='none'">
<div style="height:150px;overflow:hidden;"><img
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
Signaling" loading="lazy"></div>
<div style="padding:16px 18px;"><div
style="font-weight:700;color:var(--text);font-size:.95rem;">Fashion & Visual
Signaling</div></div>
</a>

<a href="https://alphax.wiki/wiki/Category:Community_%26_Identity"
style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
ce);text-decoration:none;border:1px solid var(--border);transition:transform
.2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
--border)';this.style.transform='none'">
<div style="height:150px;overflow:hidden;"><img
src="https://alphax.wiki/images/e/ed/Community_Identity_Hero.png"
style="width:100%;height:100%;object-fit:cover;" alt="Community & Identity"
loading="lazy"></div>
<div style="padding:16px 18px;"><div
style="font-weight:700;color:var(--text);font-size:.95rem;">Community &
Identity</div></div>
</a>

<a href="https://alphax.wiki/wiki/Category:Drugs,_Party_Culture_%26_Harm
_Reduction" style="display:block;border-radius:14px;overflow:hidden;background
:var(--surface);text-decoration:none;border:1px solid
var(--border);transition:transform .2s,border-color .2s;" onmouseover="this.st
yle.borderColor='var(--orange)';this.style.transform='translateY(-2px)'" onmou
seout="this.style.borderColor='var(--border)';this.style.transform='none'">
<div style="height:150px;overflow:hidden;"><img
src="https://alphax.wiki/images/3/38/Drugs_Party_Culture_Hero.png"
style="width:100%;height:100%;object-fit:cover;" alt="Drugs, Party Culture &
Harm Reduction" loading="lazy"></div>
<div style="padding:16px 18px;"><div
style="font-weight:700;color:var(--text);font-size:.95rem;">Drugs, Party
Culture & Harm Reduction</div></div>
</a>

<a href="https://alphax.wiki/wiki/Category:Life_Planning"
style="display:block;border-radius:14px;overflow:hidden;background:var(--surfa
ce);text-decoration:none;border:1px solid var(--border);transition:transform
.2s,border-color .2s;" onmouseover="this.style.borderColor='var(--orange)';thi
s.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(
--border)';this.style.transform='none'">
<div style="height:150px;overflow:hidden;"><img
src="https://alphax.wiki/images/7/74/Life_Planning_Hero.jpg"
style="width:100%;height:100%;object-fit:cover;" alt="Life Planning"
loading="lazy"></div>
<div style="padding:16px 18px;"><div
style="font-weight:700;color:var(--text);font-size:.95rem;">Life
Planning</div></div>
</a>

</div>
</div>
</section>


<section class="cta-band" style="padding:80px 1rem" id="about" aria-labelledby="ls-h">
<div style="max-width:820px;margin:0 auto;text-align:center;position:relative" class="fu">
<div style="width:52px;height:52px;border-radius:14px;background:rgba(255,106,33,.12);border:1px solid rgba(255,106,33,.22);display:flex;align-items:center;justify-content:center;margin:0 auto 22px">
<svg width="22" height="22" 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>
<h2 id="ls-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;color:var(--text);letter-spacing:-.025em;margin-bottom:14px;line-height:1.15">
Knowledge that saves lives.
</h2>
<p style="font-size:1.05rem;color:var(--text-2);max-width:540px;margin:0 auto 34px;line-height:1.75">
From HIV prevention to recognising the risks of chemsex — some of these articles can change the course of a night, a relationship, or a life. No account. No judgment. Ever.
</p>
<a href="https://alphax.wiki/articles" class="btn-primary" style="margin:0 auto">
Start Reading Free
<svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
</section>


<section style="padding:80px 1rem" id="articles" aria-labelledby="path-h">
<div style="max-width:1100px;margin:0 auto">

<div style="text-align:center;margin-bottom:56px" class="fu">
<div class="eyebrow" style="justify-content:center;margin-bottom:16px">Start Here</div>
<h2 id="path-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;color:var(--text);letter-spacing:-.025em;margin-bottom:12px">
Choose Your Path
</h2>
<p style="color:var(--text-2);font-size:1rem;max-width:480px;margin:0 auto;line-height:1.7">
Not sure where to begin? Pick the path that fits where you are right now.
</p>
</div>


<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px" class="g3 fu" data-d="1">

<a href="https://alphax.wiki/Entering_the_Gay_Scene_for_the_First_Time" class="path-card" aria-label="I'm New — Just Curious">
<div class="path-num">01</div>
<div class="path-icon-wrap">
<svg width="22" height="22" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
</div>
<div class="path-title">I'm New / Just Curious</div>
<div class="path-desc">Community basics, health, consent & finding your people.</div>
<div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Fetish_%26_Kink_Library" class="path-card" aria-label="I Want to Explore Kink">
<div class="path-num">02</div>
<div class="path-icon-wrap">
<svg width="22" height="22" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"/></svg>
</div>
<div class="path-title">I Want to Explore Kink</div>
<div class="path-desc">BDSM, fetishes, leather culture & power dynamics.</div>
<div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Dynamics_%26_Relationships" class="path-card" aria-label="Improve My Relationship">
<div class="path-num">03</div>
<div class="path-icon-wrap">
<svg width="22" height="22" 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="path-title">Improve My Relationship</div>
<div class="path-desc">Communication, trust, non-monogamy & intimacy.</div>
<div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

</div>

<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:14px" class="g2 fu" data-d="2">

<a href="https://alphax.wiki/Safety_%26_Consent" class="path-card path-card-wide" aria-label="I Care About Safety">
<div class="path-num">04</div>
<div class="path-icon-wrap">
<svg width="22" height="22" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
</div>
<div class="path-title">I Care About Safety</div>
<div class="path-desc">Harm reduction, safe sex, PrEP, BDSM safety & consent.</div>
<div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Advanced_Practices" class="path-card path-card-wide" aria-label="I Want Advanced Knowledge">
<div class="path-num">05</div>
<div class="path-icon-wrap">
<svg width="22" height="22" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
</div>
<div class="path-title">I Want Advanced Knowledge</div>
<div class="path-desc">Psychology, advanced BDSM, identity & queer history.</div>
<div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

</div>
</div>
</section>


<section style="padding:80px 1rem;background:#111111;border-top:1px solid var(--border);border-bottom:1px solid var(--border)" aria-labelledby="latest-h">
<div style="max-width:1100px;margin:0 auto">

<div style="display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px">
<div>
<div style="font-size:.73rem;font-weight:700;color:var(--orange);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px">— Fresh & Recent</div>
<h2 id="latest-h" style="font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;color:var(--text);letter-spacing:-.025em">Latest Articles</h2>
</div>
<div style="display:flex;align-items:center;gap:8px">
<div style="position:relative">
<input id="latest-search-input" type="text" placeholder="Search latest…" style="background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 14px 9px 36px;color:var(--text);font-size:.88rem;width:200px;outline:none" />
<svg style="position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.5" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35"/></svg>
</div>
<button onclick="scrollLatest(-1)" style="width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center">‹</button>
<button onclick="scrollLatest(1)" style="width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center">›</button>
</div>
</div>

<div id="latest-deck" style="display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:none">
<a href="https://alphax.wiki/Impact_of_Dating_Apps_on_Gay_Life" class="latest-card">
<div class="latest-title">Impact of Dating Apps on Gay Life</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Dating</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/The_Loneliness_Epidemic_No_One_Talks_About_%E2%80%94_and_Why_It%E2%80%99s_Killing_Us" class="latest-card">
<div class="latest-title">The Loneliness Epidemic No One Talks About — and Why It’s Killing Us</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Identity</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Food_Play" class="latest-card">
<div class="latest-title">Food Play</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Kink</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Neoprene_Fetish" class="latest-card">
<div class="latest-title">Neoprene Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Watersports" class="latest-card">
<div class="latest-title">Watersports</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Boots_Fetish" class="latest-card">
<div class="latest-title">Boots Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Tattoos_Fetish" class="latest-card">
<div class="latest-title">Tattoos Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Piercings_Fetish" class="latest-card">
<div class="latest-title">Piercings Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Spandex_and_Lycra_Fetish" class="latest-card">
<div class="latest-title">Spandex and Lycra Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Masks_Fetish" class="latest-card">
<div class="latest-title">Masks Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Uniforms_Fetish" class="latest-card">
<div class="latest-title">Uniforms Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Socks_and_Used_Clothing_Fetish" class="latest-card">
<div class="latest-title">Socks and Used Clothing Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Hands_and_Gloves_Fetish" class="latest-card">
<div class="latest-title">Hands and Gloves Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Muscle_Worship" class="latest-card">
<div class="latest-title">Muscle Worship</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Armpits_Fetish" class="latest-card">
<div class="latest-title">Armpits Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Hair_Fetish" class="latest-card">
<div class="latest-title">Hair Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Sneakers_and_Sportswear_Fetish" class="latest-card">
<div class="latest-title">Sneakers and Sportswear Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Underwear_Fetish" class="latest-card">
<div class="latest-title">Underwear Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Sweat_and_Musk_Fetish" class="latest-card">
<div class="latest-title">Sweat and Musk Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
<a href="https://alphax.wiki/Latex_and_Rubber_Fetish" class="latest-card">
<div class="latest-title">Latex and Rubber Fetish</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
<span class="tag t-white">Fetish</span>
<div class="latest-date">2026</div>
</div>
</a>
</div>

</div>
</section>


<section style="padding:80px 1rem" aria-labelledby="editor-h">
<div style="max-width:1100px;margin:0 auto">

<div style="display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:44px" class="fu">
<div>
<div class="eyebrow" style="margin-bottom:14px">Curated Reads</div>
<h2 id="editor-h" style="font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;color:var(--text);letter-spacing:-.025em">Editor's Selection</h2>
</div>
<a href="https://alphax.wiki/Start_Here" style="font-size:.85rem;color:var(--text-3);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .2s"
onmouseover="this.style.color='var(--orange)'" onmouseout="this.style.color='var(--text-3)'">
View all <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>

<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px" class="g3 fu" data-d="1">

<a href="https://alphax.wiki/Aftercare_in_BDSM" class="art-card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
<span class="tag t-orange">Editor's Pick</span>
<span style="font-size:.73rem;color:var(--text-3)">Safety</span>
</div>
<div class="art-title">Aftercare in BDSM</div>
<div class="art-body">Why aftercare matters, what it looks like in practice, and how to give and receive it properly.</div>
<div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Hookup_Culture_in_Gay_Communities" class="art-card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
<span class="tag t-orange">Editor's Pick</span>
<span style="font-size:.73rem;color:var(--text-3)">Culture</span>
</div>
<div class="art-title">Hookup Culture in Gay Communities</div>
<div class="art-body">The sociology, the psychology, and the real-world dynamics of hookup culture in gay life.</div>
<div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Leather_Culture_%26_Community" class="art-card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
<span class="tag t-orange">Editor's Pick</span>
<span style="font-size:.73rem;color:var(--text-3)">Culture</span>
</div>
<div class="art-title">Leather Culture & Community</div>
<div class="art-body">History, codes, events and how leather culture shaped gay identity across decades.</div>
<div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Chosen_Family" class="art-card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
<span class="tag t-orange">Editor's Pick</span>
<span style="font-size:.73rem;color:var(--text-3)">Community</span>
</div>
<div class="art-title">Chosen Family</div>
<div class="art-body">What chosen family means, how to build one, and why it's one of the most powerful forces in queer life.</div>
<div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Chemsex_%E2%80%94_A_Complete_Guide" class="art-card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
<span class="tag t-orange">Editor's Pick</span>
<span style="font-size:.73rem;color:var(--text-3)">Harm Reduction</span>
</div>
<div class="art-title">Chemsex — A Complete Guide</div>
<div class="art-body">Everything you need to know about chemsex: the substances, the risks, the scene, and how to get help.</div>
<div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

<a href="https://alphax.wiki/Why_Most_%E2%80%9CSubs%E2%80%9D_Fail_%E2%80%94_And_What_Real_Submission_Actually_Looks_Like" class="art-card">
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
<span class="tag t-orange">Editor's Pick</span>
<span style="font-size:.73rem;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em">BDSM</span>
</div>
<div class="art-title">Why Most "Subs" Fail — And What Real Submission Actually Looks Like</div>
<div class="art-body">Most guys who call themselves "submissive" aren't submissive at all. What real submission actually requires — and why most people avoid it.</div>
<div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
</a>

</div>
</div>
</section>


<section style="padding:80px 1rem;background:#111111;border-top:1px solid var(--border);border-bottom:1px solid var(--border)" aria-labelledby="areas-h">
<div style="max-width:1100px;margin:0 auto">

<div style="text-align:center;margin-bottom:52px" class="fu">
<div class="eyebrow" style="justify-content:center;margin-bottom:16px">Full Library</div>
<h2 id="areas-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;color:var(--text);letter-spacing:-.025em;margin-bottom:12px">
Explore All Knowledge Areas
</h2>
<p style="color:var(--text-2);font-size:1rem;max-width:440px;margin:0 auto;line-height:1.7">
Eight pillars covering every corner of gay life — from safety to culture, kink to identity.
</p>
</div>

<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px" class="fu" data-d="1" id="areas-grid">
<style>@media(max-width:900px){#areas-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){#areas-grid{grid-template-columns:1fr}}</style>

<a href="https://alphax.wiki/Safety_%26_Consent" class="area-card">
<div class="area-icon">🛡️</div>
<div class="area-name">Safety & Consent</div>
<div class="area-desc">PrEP, harm reduction, safe sex, consent frameworks</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Fetish_%26_Kink_Library" class="area-card">
<div class="area-icon">🔥</div>
<div class="area-name">Fetish & Kink Library</div>
<div class="area-desc">BDSM, leather, fetishes, gear and play</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Dynamics_%26_Relationships" class="area-card">
<div class="area-icon">💑</div>
<div class="area-name">Dynamics & Relationships</div>
<div class="area-desc">Non-monogamy, communication, intimacy, trust</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Psychology_%26_Identity" class="area-card">
<div class="area-icon">🧠</div>
<div class="area-name">Psychology & Identity</div>
<div class="area-desc">Mental health, shame, self-acceptance, coming out</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Advanced_Practices" class="area-card">
<div class="area-icon">⚡</div>
<div class="area-name">Advanced Practices</div>
<div class="area-desc">Deep BDSM, edge play, queer theory, history</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Culture_%26_Nightlife" class="area-card">
<div class="area-icon">🌃</div>
<div class="area-name">Culture & Nightlife</div>
<div class="area-desc">Bars, saunas, darkrooms, pride, gay scenes</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Drugs_%26_Harm_Reduction" class="area-card">
<div class="area-icon">💊</div>
<div class="area-name">Drugs & Harm Reduction</div>
<div class="area-desc">Chemsex, substance risks, support resources</div>
<div class="area-arrow">→</div>
</a>

<a href="https://alphax.wiki/Fashion_%26_Visual_Signaling" class="area-card">
<div class="area-icon">👗</div>
<div class="area-name">Fashion & Visual Signaling</div>
<div class="area-desc">Dress codes, hanky codes, identity through style</div>
<div class="area-arrow">→</div>
</a>

</div>

<div style="text-align:center;margin-top:36px" class="fu" data-d="1">
<a href="https://alphax.wiki/Start_Here" class="btn-primary" style="margin:0 auto">
Browse the Full Library
<svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
</div>
</section>


<section style="padding:80px 1rem;background:#111111;border-top:1px solid var(--border);border-bottom:1px solid var(--border)" aria-labelledby="voices-h">
<div style="max-width:1100px;margin:0 auto">
<div style="text-align:center;margin-bottom:48px" class="fu">
<div class="eyebrow" style="justify-content:center;margin-bottom:14px">Community Voices</div>
<h2 id="voices-h" style="font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;color:var(--text);letter-spacing:-.025em">What readers say</h2>
</div>
<div class="q-grid fu" data-d="1">
<figure class="q-card">
<blockquote><p class="q-text">"The PrEP article was the first time I fully understood how it worked. I started taking it the following week. This site genuinely changed how I protect myself."</p></blockquote>
<figcaption style="display:flex;align-items:center;gap:12px">
<div style="width:36px;height:36px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:800;color:#fff;flex-shrink:0;box-shadow:var(--glow-sm)" aria-hidden="true">M</div>
<div><div style="font-weight:700;font-size:.87rem;color:var(--text)">Marco, 24</div><div style="font-size:.75rem;color:var(--text-3)">Berlin</div></div>
</figcaption>
</figure>
<figure class="q-card">
<blockquote><p class="q-text">"When I first came out I was completely lost. AlphaX gave me the vocabulary, the context, and the confidence to start building my life in the gay community."</p></blockquote>
<figcaption style="display:flex;align-items:center;gap:12px">
<div style="width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:800;color:var(--text-2);flex-shrink:0" aria-hidden="true">J</div>
<div><div style="font-weight:700;font-size:.87rem;color:var(--text)">James, 19</div><div style="font-size:.75rem;color:var(--text-3)">Manchester</div></div>
</figcaption>
</figure>
<figure class="q-card">
<blockquote><p class="q-text">"I sent the chemsex article to a friend who was struggling. He called the next day to say he'd booked a support session. No other resource did that for us."</p></blockquote>
<figcaption style="display:flex;align-items:center;gap:12px">
<div style="width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:800;color:var(--text-2);flex-shrink:0" aria-hidden="true">R</div>
<div><div style="font-weight:700;font-size:.87rem;color:var(--text)">Rafi, 31</div><div style="font-size:.75rem;color:var(--text-3)">Tel Aviv</div></div>
</figcaption>
</figure>
</div>
</div>
</section>


<section style="padding:100px 1rem" aria-labelledby="nl-h">
<div style="max-width:480px;margin:0 auto;text-align:center" class="fu">
<div style="width:2px;height:40px;background:var(--grad);margin:0 auto 28px;border-radius:1px;box-shadow:var(--glow-sm)" aria-hidden="true"></div>
<div class="eyebrow" style="justify-content:center;margin-bottom:16px">Weekly Newsletter</div>
<h2 id="nl-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;color:var(--text);letter-spacing:-.025em;line-height:1.12;margin-bottom:12px">
Stay in the <span class="ot">know.</span>
</h2>
<p style="color:var(--text-2);font-size:.95rem;line-height:1.72;margin-bottom:30px">
New articles every week. Health guides, deep-dives, community stories. No spam, unsubscribe anytime.
</p>
<form onsubmit="handleSub(event)" novalidate style="display:flex;flex-direction:column;gap:10px">
<label for="nl" class="sr-only">Email address</label>
<input id="nl" type="email" placeholder="your@email.com" class="nl-in" required aria-required="true" autocomplete="email">
<button type="submit" class="btn-primary" style="justify-content:center;width:100%">
<span id="nl-span">Subscribe Free</span>
</button>
</form>
<p style="font-size:.74rem;color:var(--text-3);margin-top:12px">Join 50,000+ readers. Free forever.</p>
</div>
</section>

</main>


<footer style="border-top:1px solid var(--border);padding:3rem 1rem 2rem;background:#0D0D0D" aria-label="Footer">
<div style="max-width:1100px;margin:0 auto">
<div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem" class="gfooter">
<div>
<a href="https://alphax.wiki" style="display:inline-flex;margin-bottom:16px" aria-label="AlphaX Wiki">
<img src="https://alphax.wiki/images/7/7a/Alphax_Wiki_logo_new.png" alt="AlphaX Wiki" style="height:42px;width:auto;object-fit:contain">
</a>
<p style="font-size:.82rem;color:var(--text-3);line-height:1.7;max-width:240px">
The world's biggest free gay lifestyle knowledge hub. Life-saving articles for everyone, always free.
</p>
</div>
<nav aria-label="Health">
<div style="font-size:.68rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px">Health</div>
<ul style="list-style:none;display:flex;flex-direction:column;gap:9px">
<li><a href="https://alphax.wiki/prep" class="ft-link">PrEP Guide</a></li>
<li><a href="https://alphax.wiki/hiv" class="ft-link">HIV & AIDS</a></li>
<li><a href="https://alphax.wiki/sti" class="ft-link">STI Prevention</a></li>
<li><a href="https://alphax.wiki/chemsex" class="ft-link">Chemsex Safety</a></li>
<li><a href="https://alphax.wiki/mental-health" class="ft-link">Mental Health</a></li>
</ul>
</nav>
<nav aria-label="Lifestyle">
<div style="font-size:.68rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px">Lifestyle</div>
<ul style="list-style:none;display:flex;flex-direction:column;gap:9px">
<li><a href="https://alphax.wiki/coming-out" class="ft-link">Coming Out</a></li>
<li><a href="https://alphax.wiki/relationships" class="ft-link">Relationships</a></li>
<li><a href="https://alphax.wiki/nightlife" class="ft-link">Nightlife</a></li>
<li><a href="https://alphax.wiki/dating-apps" class="ft-link">Dating Apps</a></li>
<li><a href="https://alphax.wiki/travel" class="ft-link">Gay Travel</a></li>
</ul>
</nav>
<nav aria-label="Site">
<div style="font-size:.68rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px">Site</div>
<ul style="list-style:none;display:flex;flex-direction:column;gap:9px">
<li><a href="https://alphax.wiki/about" class="ft-link">Our Mission</a></li>
<li><a href="https://alphax.wiki/write" class="ft-link">Contribute</a></li>
<li><a href="https://alphax.wiki/privacy" class="ft-link">Privacy</a></li>
<li><a href="https://alphax.wiki/sitemap" class="ft-link">Sitemap</a></li>
<li><a href="https://alphax.wiki/radmin" class="ft-link">Admin Login</a></li>
</ul>
</nav>
</div>
<div class="div-line" style="margin-bottom:20px"></div>
<div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px">
<p style="font-size:.78rem;color:var(--text-3)">© 2025 AlphaX Wiki. Free knowledge for everyone. Always.</p>
<p style="font-size:.78rem;color:var(--text-3)">Made with love for the community</p>
</div>
</div>
</footer>

<style>
.ft-link { font-size:.84rem;color:var(--text-3);text-decoration:none;transition:color .2s; }
.ft-link:hover { color:var(--orange); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }
</style>

<script>
/* Progress bar */
const prog = document.getElementById('prog');
window.addEventListener('scroll', () => {
const h = document.documentElement;
prog.style.width = (h.scrollTop / (h.scrollHeight - h.clientHeight) * 100) + '%';
}, { passive: true });

/* Fade-up */
const io = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
}, { threshold: 0.06, rootMargin: '0px 0px -36px 0px' });
document.querySelectorAll('.fu').forEach(el => io.observe(el));

/* Smooth anchor scroll */
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', e => {
const t = document.querySelector(a.getAttribute('href'));
if (!t) return;
e.preventDefault();
window.scrollTo({ top: t.getBoundingClientRect().top + scrollY - 80, behavior: 'smooth' });
});
});

/* Newsletter */
function handleSub(e) {
e.preventDefault();
const inp = document.getElementById('nl');
const span = document.getElementById('nl-span');
if (!inp.value) return;
span.textContent = 'Subscribed!';
e.target.querySelector('button').style.background = 'linear-gradient(135deg,#3DDC84,#2BB870)';
e.target.querySelector('button').style.boxShadow = '0 0 20px rgba(61,220,132,.3)';
inp.value = '';
setTimeout(() => {
span.textContent = 'Subscribe Free';
e.target.querySelector('button').style.background = '';
e.target.querySelector('button').style.boxShadow = '';
}, 3500);
}

/* Latest deck scroll */
function scrollLatest(dir) {
document.getElementById('latest-deck').scrollBy({ left: dir * 520, behavior: 'smooth' }

function filterLatestCards(query) {
const q = query.toLowerCase().trim();
const cards = document.querySelectorAll('#latest-deck .latest-card');
cards.forEach(function(card) {
const title = card.querySelector('.latest-title');
const text = title ? title.textContent.toLowerCase() : '';
card.style.display = (!q || text.includes(q)) ? '' : 'none';
});

// Attach search to latest input
document.addEventListener('DOMContentLoaded', function() {
var inp = document.getElementById('latest-search-input');
if (inp) inp.addEventListener('input', function() { filterLatestCards(this.value); });
});
});
}

</script>

<script>
/* Progress bar */
const prog = document.getElementById('prog');
window.addEventListener('scroll', () => {
const h = document.documentElement;
prog.style.width = (h.scrollTop / (h.scrollHeight - h.clientHeight) * 100) + '%';
}, { passive: true });

/* Fade-up */
const io = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
}, { threshold: 0.06, rootMargin: '0px 0px -36px 0px' });
document.querySelectorAll('.fu').forEach(el => io.observe(el));

/* Smooth anchor scroll */
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', e => {
const t = document.querySelector(a.getAttribute('href'));
if (!t) return;
e.preventDefault();
window.scrollTo({ top: t.getBoundingClientRect().top + scrollY - 80, behavior: 'smooth' });
});
});

/* Newsletter */
function handleSub(e) {
e.preventDefault();
const inp = document.getElementById('nl');
const span = document.getElementById('nl-span');
if (!inp.value) return;
span.textContent = 'Subscribed!';
e.target.querySelector('button').style.background = 'linear-gradient(135deg,#3DDC84,#2BB870)';
e.target.querySelector('button').style.boxShadow = '0 0 20px rgba(61,220,132,.3)';
inp.value = '';
setTimeout(() => {
span.textContent = 'Subscribe Free';
e.target.querySelector('button').style.background = '';
e.target.querySelector('button').style.boxShadow = '';
}, 3500);
}

/* Latest deck scroll */
function scrollLatest(dir) {
document.getElementById('latest-deck').scrollBy({ left: dir * 520, behavior: 'smooth' });
}

</script>
</html>