|
|
| (2 intermediate revisions by one other user not shown) |
| Line 2: |
Line 2: |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | | <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"> | | <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> | | <style> |
| /* ── Alpha Orange Design System ───────────────────── */
| | :root{--bg:#080808;--bg2:#0C0C0C;--card:rgba(255,255,255,.03);--cb:rgba(255,255,255,.07);--chov:rgba(255,106,33,.05);--chb:rgba(255,106,33,.35);--or:#FF6A21;--or2:#FF8C42;--tx:#FFFFFF;--tx2:#888888;--tx3:#444444;--grad:linear-gradient(135deg,#FF6A21,#FF8C42);} |
| :root {
| | *{margin:0;padding:0;box-sizing:border-box;} |
| --bg: #0D0D0D;
| | html{scroll-behavior:smooth;} |
| --surface: #1A1A1A;
| | body{background:var(--bg);color:var(--tx);font-family:'Inter',sans-serif;line-height:1.6;overflow-x:hidden;} |
| --border: #2E2E2E;
| | h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;} |
| --orange: #FF6A21;
| | #prog{position:fixed;top:0;left:0;right:0;height:2px;background:var(--grad);z-index:9999;transform-origin:left;transform:scaleX(0);transition:transform .1s;} |
| --orange2: #FF8C42;
| | .nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 2.5rem;height:60px;background:rgba(8,8,8,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.05);} |
| --text: #FFFFFF;
| | .nl{color:var(--tx2);text-decoration:none;font-size:.875rem;font-weight:500;transition:color .15s;} |
| --text-2: #999999;
| | .nl:hover{color:var(--tx);} |
| --text-3: #666666;
| | .nav-right{display:flex;align-items:center;gap:.75rem;} |
| --text-4: #888888;
| | .btn-p{background:var(--grad);color:#fff;padding:.5rem 1.25rem;border-radius:8px;font-size:.875rem;font-weight:700;text-decoration:none;transition:opacity .15s,transform .15s;} |
| --glow-sm: 0 0 20px rgba(255,106,33,.15);
| | .btn-p:hover{opacity:.9;transform:translateY(-1px);} |
| --glow-md: 0 0 20px rgba(255,106,33,.40);
| | .lsw{display:flex;gap:2px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:3px;} |
| --glow-lg: 0 0 30px rgba(255,106,33,.60);
| | .lb{padding:3px 8px;border-radius:5px;font-size:11px;font-weight:700;text-decoration:none;letter-spacing:.05em;transition:all .15s;} |
| --grad: linear-gradient(135deg, #FF6A21, #FF8C42);
| | .lb.on{background:var(--or);color:#fff;} |
| }
| | .lb.av{color:#555;} |
| *, *::before, *::after { box-sizing: border-box; margin: 0; }
| | .lb.av:hover{color:#aaa;} |
| html { scroll-behavior: smooth; }
| | .lb.dim{color:#222;cursor:default;} |
| body {
| | .tbtn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:5px 9px;cursor:pointer;font-size:14px;line-height:1;transition:background .15s;color:var(--tx2);} |
| background: var(--bg);
| | .tbtn:hover{background:rgba(255,255,255,.09);} |
| font-family: 'Inter', sans-serif;
| | .hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 1rem 80px;position:relative;overflow:hidden;} |
| color: var(--text);
| | .h-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 50%,rgba(255,106,33,.08) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 80% 20%,rgba(255,140,66,.06) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 50% 80%,rgba(255,80,0,.07) 0%,transparent 60%);pointer-events:none;} |
| overflow-x: hidden;
| | .h-grid{position:absolute;inset:0;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:64px 64px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 20%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 20%,transparent 100%);pointer-events:none;} |
| -webkit-font-smoothing: antialiased;
| | .h-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,106,33,.1);border:1px solid rgba(255,106,33,.25);border-radius:100px;padding:.35rem 1rem;margin-bottom:2rem;font-size:.78rem;font-weight:600;color:var(--or);letter-spacing:.03em;} |
| }
| | .h-dot{width:6px;height:6px;border-radius:50%;background:var(--or);animation:pulse 2s infinite;} |
| h1,h2,h3,h4,h5 { font-family: 'Space Grotesk', sans-serif; }
| | @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}} |
| | | .h-title{font-size:clamp(3rem,7.5vw,6rem);font-weight:900;line-height:.98;letter-spacing:-.04em;margin-bottom:1.5rem;} |
| /* ── Scrollbar ─────────────────────────────────── */
| | .gt{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} |
| ::-webkit-scrollbar { width: 4px; }
| | .h-sub{font-size:clamp(1rem,2vw,1.15rem);color:var(--tx2);line-height:1.75;max-width:520px;margin:0 auto 2.5rem;} |
| ::-webkit-scrollbar-track { background: transparent; }
| | .h-ctas{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;} |
| ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.05); border-radius: 2px; }
| | .hcp{background:var(--grad);color:#fff;padding:.85rem 2.25rem;border-radius:12px;font-weight:700;font-size:1rem;text-decoration:none;box-shadow:0 0 40px rgba(255,106,33,.35);transition:transform .2s,box-shadow .2s;} |
| ::-webkit-scrollbar-thumb:hover { background: rgba(255,106,33,.20); }
| | .hcp:hover{transform:translateY(-2px);box-shadow:0 0 60px rgba(255,106,33,.5);} |
| | | .hcs{background:rgba(255,255,255,.07);color:#fff;padding:.85rem 2.25rem;border-radius:12px;font-weight:600;font-size:1rem;text-decoration:none;border:1px solid rgba(255,255,255,.1);transition:background .2s;} |
| /* ── Skip / focus ──────────────────────────────── */
| | .hcs:hover{background:rgba(255,255,255,.11);} |
| .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; }
| | .mq-wrap{overflow:hidden;padding:.75rem 0;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);} |
| .skip:focus { top:12px; }
| | .mq-track{display:flex;animation:mq 35s linear infinite;} |
| *:focus-visible { outline:2px solid rgba(255,106,33,.7);outline-offset:3px;border-radius:4px; }
| | .mq-track:hover{animation-play-state:paused;} |
| | | .mq-item{flex-shrink:0;padding:.4rem 2rem;font-size:.78rem;font-weight:600;color:var(--tx3);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;} |
| /* ── Progress bar ──────────────────────────────── */
| | .mq-dot{flex-shrink:0;width:3px;height:3px;border-radius:50%;background:var(--or);margin:auto;opacity:.35;} |
| #prog { position:fixed;top:0;left:0;height:2px;z-index:9999;background:var(--grad);width:0;pointer-events:none; }
| | @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}} |
| | | .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.05);} |
| /* ── Navbar ────────────────────────────────────── */
| | .stat{background:var(--bg);padding:2.5rem 2rem;text-align:center;} |
| .nav {
| | .stat-n{font-size:2.8rem;font-weight:900;font-family:'Space Grotesk',sans-serif;} |
| position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
| | .stat-l{color:var(--tx2);font-size:.875rem;margin-top:.25rem;} |
| z-index: 50;
| | .sec{padding:100px 1rem;} |
| background: rgba(13,13,13,.88);
| | .sec-in{max-width:1100px;margin:0 auto;} |
| backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
| | .sec-hd{text-align:center;margin-bottom:56px;} |
| border: 1px solid var(--border);
| | .stag{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or);font-weight:700;} |
| border-radius: 999px;
| | .stitle{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;letter-spacing:-.03em;margin-top:.4rem;} |
| display: flex; align-items: center;
| | .ssub{color:var(--tx2);margin-top:.75rem;font-size:1rem;} |
| padding: 0 6px 0 16px;
| | .bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.05);border-radius:20px;overflow:hidden;} |
| height: 52px; gap: 6px;
| | .bc{background:var(--bg2);padding:2.25rem;transition:background .2s;} |
| width: min(calc(100vw - 32px), 800px);
| | .bc:hover{background:rgba(255,106,33,.04);} |
| }
| | .bw{grid-column:span 2;} |
| .nav-logo { display:flex;align-items:center;flex-shrink:0;margin-right:4px; }
| | .b-ic{font-size:2rem;margin-bottom:1rem;} |
| .nav-links { display:flex;align-items:center;gap:2px;flex:1; }
| | .b-ti{font-size:1.05rem;font-weight:700;margin-bottom:.5rem;font-family:'Space Grotesk',sans-serif;} |
| .nav-link {
| | .b-de{color:var(--tx2);font-size:.875rem;line-height:1.65;} |
| font-size:.83rem;font-weight:500;color:var(--text-2);
| | .tg{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;} |
| padding:6px 12px;border-radius:999px;text-decoration:none;
| | .tc{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9;text-decoration:none;border:1px solid rgba(255,255,255,.06);transition:transform .25s,border-color .25s;} |
| transition:color .2s,background .2s;white-space:nowrap;
| | .tc:hover{transform:translateY(-4px);border-color:rgba(255,106,33,.3);} |
| }
| | .tc img{width:100%;height:100%;object-fit:cover;transition:transform .4s;} |
| .nav-link:hover { color:var(--text);background:rgba(255,255,255,.05); }
| | .tc:hover img{transform:scale(1.05);} |
| .nav-right { display:flex;align-items:center;gap:6px;flex-shrink:0; }
| | .to{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.15) 55%,transparent 100%);display:flex;align-items:flex-end;padding:1.25rem;} |
| .nav-admin {
| | .tn{font-weight:700;font-size:1rem;color:#fff;font-family:'Space Grotesk',sans-serif;} |
| font-size:.76rem;font-weight:600;color:var(--text-3);
| | .art-sc{display:flex;gap:14px;overflow-x:auto;padding-bottom:1rem;scrollbar-width:none;} |
| padding:6px 12px;border-radius:999px;
| | .art-sc::-webkit-scrollbar{display:none;} |
| border:1px solid var(--border);
| | .ac{flex-shrink:0;width:280px;background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:1.5rem;text-decoration:none;transition:border-color .2s,background .2s,transform .2s;} |
| text-decoration:none;
| | .ac:hover{border-color:var(--chb);background:var(--chov);transform:translateY(-2px);} |
| transition:color .2s,border-color .2s;white-space:nowrap;
| | .atag{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--or);font-weight:700;margin-bottom:.75rem;} |
| display:inline-flex;align-items:center;gap:5px;
| | .ati{font-weight:700;color:var(--tx);font-size:.95rem;line-height:1.4;margin-bottom:.5rem;font-family:'Space Grotesk',sans-serif;} |
| }
| | .ade{color:var(--tx2);font-size:.82rem;line-height:1.5;} |
| .nav-admin:hover { color:var(--text-2);border-color:rgba(255,106,33,.4); }
| | .edg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;} |
| .btn-nav {
| | .ec{background:var(--card);border:1px solid var(--cb);border-radius:12px;padding:1.25rem;text-decoration:none;transition:border-color .2s,background .2s;display:flex;flex-direction:column;gap:.5rem;} |
| font-size:.83rem;font-weight:700;color:#fff;
| | .ec:hover{border-color:var(--chb);background:var(--chov);} |
| background: var(--grad);
| | .etag{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--or);font-weight:700;} |
| padding:8px 20px;border-radius:999px;border:none;cursor:pointer;
| | .eti{font-weight:700;color:var(--tx);font-size:.95rem;line-height:1.4;font-family:'Space Grotesk',sans-serif;} |
| text-decoration:none;display:inline-flex;align-items:center;
| | .pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;} |
| transition:opacity .2s,box-shadow .2s;
| | .pc{background:var(--card);border:1px solid var(--cb);border-radius:14px;padding:1.5rem;text-decoration:none;display:block;transition:border-color .2s,background .2s,transform .2s;} |
| box-shadow: var(--glow-sm);
| | .pc:hover{border-color:var(--chb);background:var(--chov);transform:translateY(-2px);} |
| }
| | .pi{font-size:1.5rem;margin-bottom:.75rem;} |
| .btn-nav:hover { opacity:.92;box-shadow:var(--glow-md); }
| | .pt{font-weight:700;color:var(--tx);font-size:.9rem;margin-bottom:.3rem;font-family:'Space Grotesk',sans-serif;} |
| @media(max-width:640px){ .nav-links,.nav-admin{display:none;} }
| | .ps{color:var(--tx3);font-size:.78rem;line-height:1.4;} |
| | | .ctab{background:linear-gradient(135deg,rgba(255,106,33,.12) 0%,rgba(255,80,0,.05) 100%);border-top:1px solid rgba(255,106,33,.15);border-bottom:1px solid rgba(255,106,33,.15);padding:80px 1rem;text-align:center;} |
| /* ── Orange text gradient ──────────────────────── */
| | .tsg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;} |
| .ot {
| | .tsc{background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:2rem;} |
| background: var(--grad);
| | .tsq{font-size:3.5rem;line-height:.8;color:rgba(255,106,33,.2);font-family:'Space Grotesk',sans-serif;font-weight:900;margin-bottom:.5rem;} |
| -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
| | .tst{color:var(--tx2);font-size:.95rem;line-height:1.75;margin-bottom:1.5rem;} |
| }
| | .tsa{display:flex;align-items:center;gap:.75rem;} |
| | | .tsav{width:40px;height:40px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;flex-shrink:0;} |
| /* ── Buttons ───────────────────────────────────── */
| | .tsn{font-weight:700;font-size:.9rem;} |
| .btn-primary {
| | .tsc2{color:var(--tx3);font-size:.8rem;} |
| display:inline-flex;align-items:center;gap:8px;
| | .nls{padding:100px 1rem;text-align:center;} |
| font-size:.92rem;font-weight:700;color:#fff;
| | .nlf{display:flex;gap:.75rem;max-width:440px;margin:2rem auto 0;} |
| background: var(--grad);
| | .nli{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:.8rem 1.1rem;color:#fff;font-size:.95rem;outline:none;transition:border-color .2s;} |
| padding:14px 28px;border-radius:12px;border:none;cursor:pointer;
| | .nli:focus{border-color:rgba(255,106,33,.4);} |
| text-decoration:none;
| | .nlb{background:var(--grad);color:#fff;border:none;padding:.8rem 1.4rem;border-radius:10px;font-weight:700;font-size:.95rem;cursor:pointer;transition:opacity .15s;} |
| transition:transform .2s,box-shadow .2s,opacity .2s;
| | .nlb:hover{opacity:.9;} |
| box-shadow: var(--glow-sm);
| | .foot{border-top:1px solid rgba(255,255,255,.05);padding:4rem 1rem 2rem;background:var(--bg);} |
| }
| | .fg{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:2fr repeat(3,1fr);gap:3rem;margin-bottom:3rem;} |
| .btn-primary:hover { transform:translateY(-1px);box-shadow:var(--glow-md);opacity:.93; }
| | .fbp{color:var(--tx2);font-size:.875rem;line-height:1.6;max-width:240px;margin-top:.75rem;} |
| .btn-secondary {
| | .fct{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);font-weight:700;margin-bottom:1rem;} |
| display:inline-flex;align-items:center;gap:8px;
| | .fl{display:flex;flex-direction:column;gap:.6rem;} |
| font-size:.92rem;font-weight:600;color:var(--text-2);
| | .fl a{color:var(--tx2);text-decoration:none;font-size:.875rem;transition:color .15s;} |
| background: var(--surface);
| | .fl a:hover{color:var(--tx);} |
| border:1px solid var(--border);
| | .fb{max-width:1100px;margin:0 auto;border-top:1px solid rgba(255,255,255,.05);padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;} |
| padding:14px 28px;border-radius:12px;cursor:pointer;
| | .fb span{color:var(--tx3);font-size:.8rem;} |
| text-decoration:none;
| | .fade-up{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s;} |
| transition:border-color .2s,color .2s;
| | .fade-up.in{opacity:1;transform:none;} |
| }
| | body.light-mode{--bg:#F4F4F2;--bg2:#ECECEA;--card:rgba(0,0,0,.03);--cb:rgba(0,0,0,.08);--chov:rgba(255,106,33,.04);--chb:rgba(255,106,33,.3);--tx:#111;--tx2:#555;--tx3:#999;} |
| .btn-secondary:hover { border-color:rgba(255,106,33,.5);color:var(--text); }
| | body.light-mode .nav{background:rgba(244,244,242,.88);} |
| | body.light-mode .stat{background:var(--bg);} |
| | body.light-mode .bc{background:var(--bg2);} |
| | body.light-mode .bento,.light-mode .stats{background:rgba(0,0,0,.07);} |
| | body.light-mode .h-grid{background-image:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);} |
| | body.light-mode .foot{background:var(--bg);} |
| | @media(max-width:900px){.bento{grid-template-columns:1fr;}.bw{grid-column:span 1;}.stats{grid-template-columns:repeat(2,1fr);}.fg{grid-template-columns:1fr 1fr;}} |
| | @media(max-width:600px){.nav-links-wrap{display:none;}.fg{grid-template-columns:1fr;}} |
|
| |
|
| /* ── Section eyebrow ───────────────────────────── */
| | /* AlphaX Banner */ |
| .eyebrow {
| | .alphax-banner{width:100%;background:linear-gradient(135deg,#0D0D0D 0%,#1a0800 50%,#0D0D0D 100%);border-bottom:1px solid rgba(255,106,33,.2);padding:80px 2rem 80px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-top:60px;} |
| display:inline-flex;align-items:center;gap:8px;
| | .alphax-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(255,106,33,.12) 0%,transparent 70%);pointer-events:none;} |
| font-size:.70rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
| | .alphax-banner::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 10%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 10%,transparent 100%);pointer-events:none;} |
| color:var(--orange);
| | .ab-inner{position:relative;z-index:1;text-align:center;max-width:900px;} |
| }
| | .ab-eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,106,33,.1);border:1px solid rgba(255,106,33,.3);border-radius:100px;padding:.3rem .9rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--or);margin-bottom:1.5rem;} |
| .eyebrow::before { content:'';width:18px;height:1px;background:var(--orange);opacity:.55; }
| | .ab-dot{width:6px;height:6px;border-radius:50%;background:var(--or);animation:pulse 2s infinite;} |
| | .ab-logo{font-family:'Space Grotesk',sans-serif;font-size:clamp(3.5rem,8vw,6.5rem);font-weight:900;letter-spacing:-.05em;line-height:.9;margin-bottom:1rem;} |
| | .ab-logo-a{background:linear-gradient(135deg,#FF6A21,#FF8C42,#FFB347);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} |
| | .ab-logo-x{color:#fff;} |
| | .ab-tagline{font-size:clamp(1rem,2.5vw,1.3rem);color:rgba(255,255,255,.55);font-weight:400;letter-spacing:.02em;margin-bottom:2rem;line-height:1.5;} |
| | .ab-cta{display:inline-flex;align-items:center;gap:.6rem;background:var(--grad);color:#fff;padding:.7rem 1.8rem;border-radius:10px;font-weight:700;font-size:.95rem;text-decoration:none;box-shadow:0 0 30px rgba(255,106,33,.3);transition:transform .2s,box-shadow .2s;} |
| | .ab-cta:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(255,106,33,.5);} |
| | .ab-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,33,.08) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;} |
|
| |
|
| /* ── Divider ───────────────────────────────────── */
| | /* Enhanced modern styles */ |
| .div-line { height:1px;background:var(--border); }
| | .hero{padding-top:0 !important;} |
| | | .h-badge{animation:float 3s ease-in-out infinite;} |
| /* ── Noise ─────────────────────────────────────── */
| | @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} |
| .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"); }
| | .hcp{position:relative;overflow:hidden;} |
| | | .hcp::after{content:'';position:absolute;top:-50%;left:-60%;width:200%;height:200%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-100%);transition:transform .6s;} |
| /* ── Glow orbs ─────────────────────────────────── */
| | .hcp:hover::after{transform:translateX(60%);} |
| .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> | | </style> |
|
| |
|
| | <div id="prog"></div> |
|
| |
|
| <div id="prog" aria-hidden="true"></div>
| | <nav class="nav"> |
| <a href="#main" class="skip">Skip to content</a>
| | <a href="https://alphax.wiki/wiki/Homepage"> |
| | | <img src="https://alphax.wiki/images/7/7a/Alphax_Wiki_logo_new.png" alt="AlphaX Wiki" style="height:32px;width:auto;"> |
| <!-- ═══════════════════════════════════════════════════
| |
| NAVBAR
| |
| ═══════════════════════════════════════════════════ -->
| |
| <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> | | </a> |
| <div class="nav-links"> | | <div class="nav-links-wrap" style="display:flex;gap:2.5rem;"> |
| <a href="#features" class="nav-link">Features</a> | | <a href="#features" class="nl">Features</a> |
| <a href="#topics" class="nav-link">Topics</a> | | <a href="#topics" class="nl">Topics</a> |
| <a href="#articles" class="nav-link">Articles</a> | | <a href="#articles" class="nl">Articles</a> |
| <a href="#about" class="nav-link">About</a> | | <a href="#about" class="nl">About</a> |
| </div> | | </div> |
| <div class="nav-right"> | | <div class="nav-right"> |
| <a href="https://alphax.wiki/radmin" class="nav-admin" aria-label="Admin login"> | | <div class="lsw"> |
| <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"> | | <a href="https://alphax.wiki/ wiki/Homepage" class=" lb on">EN</a> |
| <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"/>
| | <a href="https://alphax.wiki/wiki/Homepage/de" class="lb av">DE</a> |
| </svg>
| | <span class="lb dim">FR</span> |
| Admin
| | <span class="lb dim">ES</span> |
| </a>
| | <span class="lb dim">PT</span> |
| <a href="https://alphax.wiki" class="btn-nav">Explore Free</a> | | </div> |
| | <button class="tbtn" id="tbtn" onclick="toggleTheme()">🌙</button> |
| | <a href="https://alphax.wiki/radmin" style="color:var(--tx3);text-decoration:none;font-size:.8rem;">Admin</a> |
| | <a href="#topics" class="btn-p">Explore Free</a> |
| </div> | | </div> |
| </nav> | | </nav> |
|
| |
|
|
| |
|
| <main id="main"> | | <div class="alphax-banner"> |
| | <div class="ab-glow"></div> |
| | <div class="ab-inner"> |
| | <div class="ab-eyebrow"><span class="ab-dot"></span> Free · Independent · Always Open</div> |
| | <div class="ab-logo"><span class="ab-logo-a">Alpha</span><span class="ab-logo-x">X</span></div> |
| | <p class="ab-tagline">The free knowledge platform for gay communities worldwide</p> |
| | <a href="/wiki/Start_Here" class="ab-cta">Explore AlphaX →</a> |
| | </div> |
| | </div> |
|
| |
|
| <!-- ═══════════════════════════════════════════════════
| | <section class="hero"> |
| HERO
| | <div class="h-bg"></div> |
| ═══════════════════════════════════════════════════ --> | | <div class="h-grid"></div> |
| <section style="position:relative;padding:180px 1rem 100px;overflow:hidden" aria-label="Hero"> | | <div class=" h- badge" ><span class=" h-dot"> </span>500+ articles · Always free</div> |
| <div class=" orb orb- 1" aria-hidden=" true"></div> | | <h1 class="h-title">Everything about<br>gay life.<br><span class="gt">In one place. Free.</span></h1> |
| <div class="orb orb-2" aria-hidden="true"></div>
| | <p class="h-sub">Honest, life-saving articles on health, safety, culture, relationships, nightlife and more — written for the gay community, by the gay community.</p> |
| <div class=" grid- bg" aria-hidden=" true"></ div> | | |
| <div class="noise" aria-hidden="true"></div> | | <a href="#articles" class="hcp">Start Reading</a> |
| | <a href="#topics" class="hcs">Browse Topics</a> |
| | </div> |
| | </section> |
|
| |
|
| <div style=" max-width:860px;margin:0 auto;text- align:center;position:relative"> | | <div class="mq-wrap"> |
| | | <div class="mq-track"> |
| <!-- Chip -->
| | <span class="mq-item">Sexual Health</span><span class="mq-dot"></span><span class="mq-item">Kink & BDSM</span><span class="mq-dot"></span><span class="mq-item">Dating & Relationships</span><span class="mq-dot"></span><span class="mq-item">Community & Identity</span><span class="mq-dot"></span><span class="mq-item">Culture & History</span><span class="mq-dot"></span><span class="mq-item">Fashion & Style</span><span class="mq-dot"></span><span class="mq-item">Life Planning</span><span class="mq-dot"></span><span class="mq-item">Harm Reduction</span><span class="mq-dot"></span><span class="mq-item">HIV Prevention</span><span class="mq-dot"></span><span class="mq-item">PrEP & STI Testing</span><span class="mq-dot"></span><span class="mq-item">Mental Health</span><span class="mq-dot"></span><span class="mq-item">Chemsex</span><span class="mq-dot"></span> |
| <a href="https://alphax.wiki/prep-complete-guide"
| | <span class="mq-item">Sexual Health</span><span class="mq-dot"></span><span class="mq-item">Kink & BDSM</span><span class="mq-dot"></span><span class="mq-item">Dating & Relationships</span><span class="mq-dot"></span><span class="mq-item">Community & Identity</span><span class="mq-dot"></span><span class="mq-item">Culture & History</span><span class="mq-dot"></span><span class="mq-item">Fashion & Style</span><span class="mq-dot"></span><span class="mq-item">Life Planning</span><span class="mq-dot"></span><span class="mq-item">Harm Reduction</span><span class="mq-dot"></span><span class="mq-item">HIV Prevention</span><span class="mq-dot"></span><span class="mq-item">PrEP & STI Testing</span><span class="mq-dot"></span><span class="mq-item">Mental Health</span><span class="mq-dot"></span><span class="mq-item">Chemsex</span><span class="mq-dot"></span> |
| 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"
| | </div> |
| onmouseover="this.style.background='rgba(255,106,33,.14)'" onmouseout="this.style.background='rgba(255,106,33,.08)'"
| | </div> |
| 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 -->
| |
| <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>
| |
| | |
| <!-- Sub -->
| |
| <p style="font-size:clamp(1rem,2vw,1.18rem);color:var(--text-2);line-height:1.75;max-width:560px;margin:0 auto 2.8rem">
| |
| 500+ honest, life-saving articles on health, safety, culture, relationships,
| |
| nightlife and more — written for the gay community, by the gay community.
| |
| </p>
| |
|
| |
|
| <!-- CTAs -->
| | <div class="stats"> |
| <div style=" display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:3.5rem"> | | <div class=" stat">< div class=" stat-n gt">500+</ div><div class=" stat- l" >Articles</div></div> |
| <a href="https://alphax.wiki" class="btn-primary">
| | <div class="stat"><div class="stat-n gt">2M+</div><div class="stat-l">Monthly Readers</div></div> |
| Start Reading Free
| | <div class="stat"><div class="stat-n gt">80+</div><div class="stat-l">Topics</div></div> |
| <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>
| | <div class="stat"><div class="stat-n gt">∞</div><div class="stat-l">Always Free</div></div> |
| </a>
| | </div> |
| <a href="#topics" class="btn-secondary">Browse Topics</a>
| |
| </div>
| |
|
| |
|
| <!-- Trust row -->
| | <section class="sec" id="features"> |
| <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"> | | <div class=" sec- hd fade- up"> |
| <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>
| | <div class=" stag"> Why AlphaX. Wiki</div> |
| <span style="font-size:.8rem;color:var(--text-3)">No account required</span>
| | <h2 class="stitle">Knowledge that actually matters</h2> |
| </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> |
| | | <div class="bento"> |
| <!-- Product mockup -->
| | <div class=" bc bw fade- up"><div class=" b- ic"> 🛡️</div><div class=" b-ti"> Life-saving knowledge</div><div class=" b- de"> From PrEP and STI testing to consent and mental health — information that makes a real difference in real life, written with care and precision by people who understand the community.</div></div> |
| <div style="max-width:760px;margin:5rem auto 0;position:relative" class="fu"> | | <div class=" bc fade- up"><div class=" b- ic"> 📖</ div>< div class=" b- ti"> Deep, honest articles</div><div class=" b- de"> No clickbait. No headlines. Real, thorough articles that treat complex topics with the respect they deserve.</ div></div> |
| <!-- Orange glow behind mockup -->
| | <div class=" bc fade- up"><div class=" b- ic"> 🔒</div><div class=" b- ti"> Private by default</div><div class=" b- de"> No account. No tracking. No judgment. Read what you need — completely privately.</ div></div> |
| <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=" bc fade- up"><div class=" b- ic"> ✍️</div><div class=" b- ti"> Community authors</div><div class=" b- de"> Written by people who live this life. Reviewed for accuracy. Never by outside journalists.</ div></div> |
| <div class="mockup-wrap" style="position:relative"> | | <div class=" bc fade- up"><div class=" b- ic"> 🔍</div><div class=" b- ti"> Fully searchable</div><div class=" b- de"> Find exactly what you need across all 500+ articles in seconds.</ div></div> |
| | | <div class=" bc fade- up"><div class=" b- ic"> 💙</div><div class=" b- ti"> Always free</div><div class=" b- de"> No paywall. No premium tier. AlphaX. Wiki is free and will always be free.</ div></ div> |
| <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>
| |
| | |
| | |
| <!-- ═══════════════════════════════════════════════════
| |
| MARQUEE
| |
| ═══════════════════════════════════════════════════ -->
| |
| <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> |
| </div> | | </div> |
| | </section> |
|
| |
|
| | | <section class="sec" id="topics" style="background:var(--bg2);border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);"> |
| <!-- ═══════════════════════════════════════════════════
| | |
| STATS
| | <div class=" sec- hd fade- up"> |
| ═══════════════════════════════════════════════════ -->
| | <div class=" stag"> Knowledge Areas</div> |
| <section style="padding:80px 1rem" aria-label="Statistics">
| | <h2 class="stitle">Explore by category</h2> |
| <div style="max-width:900px;margin:0 auto">
| | <p class="ssub">Eight areas covering every aspect of gay life.</p> |
| <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> | | </div> |
| </section>
| | <div class="tg"> |
| | | < a href=" https: //alphax.wiki/wiki/Category: Sexual_Health" class=" tc">< img src="https://alphax.wiki/images/c/c2/Sexual_health.png" alt=" Sexual Health" loading=" lazy"><div class=" to"><span class=" tn"> Sexual Health</span></ div></ a> |
| | | < a href=" https: //alphax.wiki/wiki/Category: Dating, _Sex_%26_Relationships" class=" tc" ><img src=" https://alphax.wiki/images/6/6c/Dating_and_relationships.png" alt=" Dating, Sex & Relationships" loading=" lazy"><div class=" to">< span class=" tn" >Dating, Sex & Relationships</span></div></a> |
| <!-- ═══════════════════════════════════════════════════
| | <a href=" https://alphax.wiki/wiki/Category:Kink_%26_BDSM" class=" tc">< img src=" https://alphax.wiki/images/a/a1/Chain- image.png" alt=" Kink & BDSM" loading=" lazy"><div class=" to">< span class=" tn"> Kink & BDSM</span></div></ a> |
| FEATURES
| | <a href="https://alphax.wiki/wiki/Category:Culture,_History_%26_Politics" class="tc"><img src="https://alphax.wiki/images/2/25/Culture_History_Politics_Hero.png" alt="Culture, History & Politics" loading="lazy"><div class="to"><span class="tn">Culture, History & Politics</span></div></a> |
| ═══════════════════════════════════════════════════ -->
| | <a href="https://alphax.wiki/wiki/Category:Fashion_%26_Visual_Signaling" class="tc"><img src="https://alphax.wiki/images/8/86/Screenshot_2026-04-26_at_15.06.46.png" alt="Fashion & Visual Signaling" loading="lazy"><div class="to"><span class="tn">Fashion & Visual Signaling</span></div></a> |
| <section style="padding:80px 1rem" id="features" aria-labelledby="feat-h">
| | <a href="https://alphax.wiki/wiki/Category:Community_%26_Identity" class="tc"><img src="https://alphax.wiki/images/e/ed/Community_Identity_Hero.png" alt="Community & Identity" loading="lazy"><div class="to"><span class="tn">Community & Identity</span></div></a> |
| <div style="max-width:1100px;margin:0 auto"> | | < a href=" https://alphax.wiki/wiki/Category:Drugs,_Party_Culture_%26_Harm_Reduction" class=" tc">< img src=" https://alphax.wiki/images/3/38/Drugs_Party_Culture_Hero.png" alt=" Drugs, Party Culture & Harm Reduction" loading=" lazy"><div class=" to">< span class=" tn"> Drugs, Party Culture & Harm Reduction</ span></div>< /a> |
| <div style="text-align:center;margin-bottom:56px" class="fu"> | | < a href=" https://alphax.wiki/wiki/Category:Life_Planning" class=" tc">< img src=" https://alphax.wiki/images/7/74/Life_Planning_Hero.jpg" alt=" Life Planning" loading=" lazy"><div class=" to">< span class=" tn"> Life Planning</ span></div></ a> |
| <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> | | </div> |
| </section> | | </div> |
| | </section> |
|
| |
|
| | <div class="ctab"> |
| | <div style="max-width:600px;margin:0 auto;"> |
| | <h2 style="font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;letter-spacing:-.03em;margin-bottom:.75rem;">Knowledge that saves lives</h2> |
| | <p style="color:var(--tx2);font-size:1.05rem;margin-bottom:2rem;">Everyone deserves access to honest, life-saving information about their own life.</p> |
| | <a href="#articles" class="hcp">Explore Articles</a> |
| | </div> |
| | </div> |
|
| |
|
| <!-- ═══════════════════════════════════════════════════
| | <section class="sec"> |
| TOPICS
| | |
| ═══════════════════════════════════════════════════ -->
| | <div class=" sec- hd fade- up"> |
| <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 class="stag">Entry Points</div> |
| <div style="max-width:1100px;margin:0 auto">
| | <h2 class="stitle">Choose your path</h2> |
| <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> | | </div> |
| </section>
| | <div class="pg"> |
| | | <a href=" https://alphax.wiki/wiki/Category: Sexual_Health" class=" pc" ><div class=" pi"> 🏥</div><div class=" pt" >I want to stay healthy</div><div class=" ps" >Health, PrEP, STI testing, mental health</div></a> |
| | | <a href="https://alphax.wiki/wiki/Category:Dating,_Sex_%26_Relationships" class="pc"><div class="pi">💬</div><div class="pt">I'm navigating relationships</div><div class="ps">Dating, intimacy, communication, boundaries</div></a> |
| <!-- ═══════════════════════════════════════════════════
| | < a href=" https://alphax.wiki/wiki/Category:Kink_%26_BDSM" class=" pc" ><div class=" pi"> 🔗</ div><div class=" pt"> I'm exploring kink</ div>< div class=" ps"> Consent, safety, roles, practices</div></ a> |
| LIFE-SAVING CALLOUT
| | <a href="https://alphax.wiki/wiki/Category:Community_%26_Identity" class="pc"><div class="pi">🏳️🌈</div><div class="pt">I'm finding community</div><div class="ps">Identity, belonging, visibility</div></a> |
| ═══════════════════════════════════════════════════ -->
| | <a href="https://alphax.wiki/wiki/Category:Drugs,_Party_Culture_%26_Harm_Reduction" class="pc"><div class="pi">🌙</div><div class="pt">I'm going out</div><div class="ps">Nightlife, harm reduction, chemsex</div></a> |
| <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> | | </div> |
| </section> | | </div> |
| | | </section> |
| | |
| <!-- ═══════════════════════════════════════════════════
| |
| CHOOSE YOUR PATH
| |
| ═══════════════════════════════════════════════════ -->
| |
| <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>
| |
| | |
| <!-- 5 path cards: 3 top + 2 bottom -->
| |
| <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">
| | <section class="sec" id="articles" style="background:var(--bg2);border-top:1px solid rgba(255,255,255,.04);"> |
| | | |
| <a href="https://alphax.wiki/Safety_%26_Consent" class="path-card path-card-wide" aria-label="I Care About Safety">
| | <div class=" fade- up" style=" margin- bottom:32px;"> |
| <div class="path-num">04</div>
| | <div class=" stag"> Latest</div> |
| <div class="path-icon-wrap">
| | <h2 class="stitle" style="text-align:left;">Recent articles</h2> |
| <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> | | </div> |
| </section>
| | <div class="art-sc"> |
| | | <a href="https://alphax.wiki/ wiki/Entering_the_Gay_Scene_for_the_First_Time" class=" ac"><div class=" atag"> Community</div><div class=" ati"> Entering the Gay Scene for the First Time</div><div class=" ade"> What to expect, how to prepare, and where to start.</div></a> |
| | | <a href="https://alphax.wiki/wiki/ Understanding_PrEP_and_Modern_HIV_Prevention" class=" ac"><div class=" atag"> Health</div><div class=" ati"> Understanding PrEP and Modern HIV Prevention</div><div class=" ade"> A complete guide to PrEP, how it works, and how to access it.</div></a> |
| <!-- ═══════════════════════════════════════════════════
| | <a href="https://alphax.wiki/wiki/ Body_Image_Pressure_in_Gay_Communities" class=" ac"><div class=" atag"> Identity</div><div class=" ati"> Body Image Pressure in Gay Communities</div><div class=" ade"> Beauty ideals, self- perception, and navigating expectations.</div></a> |
| LATEST ARTICLES – horizontal scroll
| | <a href="https://alphax.wiki/wiki/ Understanding_Consent_in_Power_Exchange" class=" ac"><div class=" atag"> Kink & BDSM</div><div class=" ati"> Understanding Consent in Power Exchange</div><div class=" ade"> What consent truly means and how it's practiced.</div></a> |
| ═══════════════════════════════════════════════════ -->
| | <a href="https://alphax.wiki/ wiki/ Loneliness,_Hookup_Culture,_and_Emotional_Well- Being" class=" ac"><div class=" atag"> Relationships</div><div class=" ati"> Loneliness, Hookup Culture, and Emotional Well- Being</div><div class=" ade"> The tension between sexual freedom and connection.</div></a> |
| <section style="padding:80px 1rem;background:#111111;border-top:1px solid var(--border);border-bottom:1px solid var(--border)" aria-labelledby="latest-h">
| | <a href="https://alphax.wiki/wiki/ Navigating_Intimacy_After_Sexual_Trauma" class=" ac"><div class=" atag"> Health</div><div class=" ati"> Navigating Intimacy After Sexual Trauma</div><div class=" ade"> Processing, healing, and the path back to connection.</div></a> |
| <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> | | </div> |
| </section> | | </div> |
| | | </section> |
| | |
| <!-- ═══════════════════════════════════════════════════
| |
| EDITOR'S SELECTION
| |
| ═══════════════════════════════════════════════════ -->
| |
| <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">
| | <section class="sec"> |
| <div>
| | |
| <div class="eyebrow" style="margin-bottom:14px">Curated Reads</div>
| | <div class=" sec- hd fade- up"> |
| <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 class=" stag"> Curated</div> |
| </div>
| | <h2 class="stitle">Editor's selection</h2> |
| <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> | | </div> |
| </section>
| | <div class="edg"> |
| | | <a href="https://alphax.wiki/ wiki/Sexual_Health_in_the_Gay_Community" class=" ec"><div class=" etag"> Health</div><div class=" eti"> Sexual Health in the Gay Community</div></a> |
| | | <a href="https://alphax.wiki/ wiki/What_Is_BDSM" class=" ec"><div class=" etag"> Kink & BDSM</div><div class=" eti"> What Is BDSM ?</div></a> |
| <!-- ═══════════════════════════════════════════════════
| | <a href="https://alphax.wiki/wiki/ Body_Diversity_and_Attraction_in_Gay_Communities" class=" ec"><div class=" etag">Identity</div><div class=" eti"> Body Diversity and Attraction in Gay Communities</div></a> |
| EXPLORE ALL KNOWLEDGE AREAS
| | <a href="https://alphax.wiki/ wiki/Understanding_Routine_STI_Testing_in_Gay_Communities" class=" ec"><div class=" etag"> Health</div><div class=" eti"> Understanding Routine STI Testing</div></a> |
| ═══════════════════════════════════════════════════ -->
| | <a href="https://alphax.wiki/ wiki/First_Time_at_a_Private_Gay_Sex_Party" class=" ec"><div class=" etag">Nightlife</div><div class=" eti"> First Time at a Private Gay Sex Party</div></a> |
| <section style="padding:80px 1rem;background:#111111;border-top:1px solid var(--border);border-bottom:1px solid var(--border)" aria-labelledby="areas-h">
| | <a href="https://alphax.wiki/wiki/ Recovering_Sexual_Confidence_After_Relationship_Breakups" class=" ec"><div class=" etag"> Relationships</div><div class=" eti"> Recovering Sexual Confidence After Breakups</div></a> |
| <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> | | </div> |
| </section> | | </div> |
| | | </section> |
|
| |
|
| <!-- ═══════════════════════════════════════════════════
| | <section class="sec" style="background:var(--bg2);border-top:1px solid rgba(255,255,255,.04);"> |
| TESTIMONIALS
| | |
| ═══════════════════════════════════════════════════ -->
| | <div class="sec-hd fade-up"> |
| <section style="padding:80px 1rem;background:#111111;border-top:1px solid var(--border);border-bottom:1px solid var(--border)" aria-labelledby="voices-h">
| | <div class=" stag"> Readers</div> |
| <div style="max-width:1100px;margin:0 auto">
| | <h2 class="stitle">What people say</h2> |
| <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> | | </div> |
| </section>
| | <div class="tsg"> |
| | | < div class="tsc fade- up">< div class=" tsq" >" </div><div class=" tst" >The PrEP article literally saved my life. I didn't even know what it was before I found AlphaX.Wiki. Now I'm on it and feel safe.</div><div class=" tsa"><div class=" tsav" >J</div><div><div class=" tsn"> James</div><div class=" tsc2"> Manchester, UK</div></div></div></div> |
| | | <div class="tsc fade-up"><div class="tsq">"</div><div class="tst">When I came out I had no idea where to start. The articles on identity and community made me feel less alone — and actually helped me find my people.</div><div class="tsa"><div class="tsav">D</div><div><div class="tsn">Daniel</div><div class="tsc2">Berlin, Germany</div></div></div></div> |
| <!-- ═══════════════════════════════════════════════════
| | <div class="tsc fade-up"><div class="tsq">"</div><div class="tst">Finally honest information about chemsex and harm reduction — no judgment, no moralising, just practical knowledge that actually helps.</div><div class="tsa"><div class="tsav">A</div><div><div class="tsn">Aviv</div><div class="tsc2">Tel Aviv, Israel</div></div></div></div> |
| NEWSLETTER
| |
| ═══════════════════════════════════════════════════ -->
| |
| <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> | | </div> |
| </section> | | </div> |
| | | </section> |
| </main> | |
|
| |
|
| | <section class="nls" id="about"> |
| | <div style="max-width:500px;margin:0 auto;"> |
| | <div class="stag">Newsletter</div> |
| | <h2 style="font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;letter-spacing:-.03em;margin-top:.5rem;">Stay informed.</h2> |
| | <p style="color:var(--tx2);margin-top:.75rem;">Join 50,000+ readers. Weekly highlights, no spam, always free.</p> |
| | <form class="nlf" onsubmit="return false;"> |
| | <input type="email" placeholder="your@email.com" class="nli"> |
| | <button type="submit" class="nlb">Subscribe</button> |
| | </form> |
| | </div> |
| | </section> |
|
| |
|
| <!-- ═══════════════════════════════════════════════════
| | <footer class="foot"> |
| FOOTER
| | <div class="fg"> |
| ═══════════════════════════════════════════════════ -->
| | <div> |
| <footer style="border-top:1px solid var(--border);padding:3rem 1rem 2rem;background:#0D0D0D" aria-label="Footer"> | | <img src="https://alphax.wiki/images/7/7a/Alphax_Wiki_logo_new.png" alt="AlphaX Wiki" style="height:28px;"> |
| <div style="max-width:1100px;margin:0 auto"> | | <p class=" fbp"> A free, independent knowledge platform for gay communities worldwide.</p> |
| <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> |
| | <div><div class="fct">Health</div><div class="fl"><a href="https://alphax.wiki/wiki/Category:Sexual_Health">Sexual Health</a><a href="https://alphax.wiki/wiki/Category:HIV_Prevention_%26_Treatment">HIV Prevention</a><a href="https://alphax.wiki/wiki/Category:STI_Awareness_%26_Testing">STI Testing</a><a href="https://alphax.wiki/wiki/Category:Sexual_Function_%26_Mental_Health">Mental Health</a></div></div> |
| | <div><div class="fct">Lifestyle</div><div class="fl"><a href="https://alphax.wiki/wiki/Category:Dating,_Sex_%26_Relationships">Dating & Relationships</a><a href="https://alphax.wiki/wiki/Category:Kink_%26_BDSM">Kink & BDSM</a><a href="https://alphax.wiki/wiki/Category:Culture,_History_%26_Politics">Culture & History</a><a href="https://alphax.wiki/wiki/Category:Fashion_%26_Visual_Signaling">Fashion & Style</a></div></div> |
| | <div><div class="fct">Site</div><div class="fl"><a href="https://alphax.wiki/wiki/Homepage">Home</a><a href="https://alphax.wiki/wiki/Topics">All Topics</a><a href="https://alphax.wiki/wiki/Special:AllPages">All Articles</a><a href="https://alphax.wiki/radmin">Admin</a></div></div> |
| | </div> |
| | <div class="fb"> |
| | <span>© 2024 AlphaX.Wiki · All content is for educational purposes only.</span> |
| | <span>No account · No tracking · Always free</span> |
| </div> | | </div> |
| </footer> | | </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> | | <script> |
| /* Progress bar */
| | window.addEventListener('scroll',()=>{const p=window.scrollY/(document.body.scrollHeight-window.innerHeight);document.getElementById('prog').style.transform=`scaleX(${p})`;}); |
| const prog = document.getElementById('prog');
| | const obs=new IntersectionObserver(e=>e.forEach(i=>{if(i.isIntersecting){i.target.classList.add('in');obs.unobserve(i.target);}}),{threshold:.1}); |
| window.addEventListener('scroll', () => {
| | document.querySelectorAll('.fade-up').forEach(el=>obs.observe(el)); |
| const h = document.documentElement;
| | function toggleTheme(){const l=document.body.classList.toggle('light-mode');document.body.classList.toggle('dark-mode',!l);localStorage.setItem('theme',l?'light':'dark');document.getElementById('tbtn').textContent=l?'☀️':'🌙';} |
| prog.style.width = (h.scrollTop / (h.scrollHeight - h.clientHeight) * 100) + '%';
| | (function(){const s=localStorage.getItem('theme');const pl=window.matchMedia('(prefers-color-scheme:light)').matches;const ul=s?s==='light':pl;document.body.classList.add(ul?'light-mode':'dark-mode');document.addEventListener('DOMContentLoaded',()=>{const b=document.getElementById('tbtn');if(b)b.textContent=ul?'☀️':'🌙';});})(); |
| }, { 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> | | </script> |
| </html> | | </html> |