Homepage: Difference between revisions
Replace text logo with new BigBro Know logo image |
Header: restore B mark (now centered asset) Tag: Manual revert |
||
| (14 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<html> | <html> | ||
<link rel="preconnect" href="https://fonts.googleapis.com"> | <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
<link href="https://fonts.googleapis.com/css2?family= | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Anton&display=swap" rel="stylesheet"> | |||
<style> | <style> | ||
:root{--bg:# | :root{--bg:#0D0D0D;--bg2:#1A1A1A;--panel:#1A1A1A;--card:#1A1A1A;--cb:#2E2E2E;--line:#2E2E2E;--chov:rgba(255,121,0,.06);--chb:rgba(255,121,0,.45);--or:#FF7900;--or2:#FFA24A;--tx:#FFFFFF;--tx2:#999999;--tx3:#666666;--grad:linear-gradient(135deg,#FF7900 0%,#FFA24A 100%);--glow:0 0 20px rgba(255,121,0,.4);--disp:'Anton',sans-serif;--head:'Archivo',sans-serif;} | ||
*{margin:0;padding:0;box-sizing:border-box;} | *{margin:0;padding:0;box-sizing:border-box;} | ||
html{scroll-behavior:smooth;} | html{scroll-behavior:smooth;} | ||
body{background:var(--bg);color:var(--tx);font-family:' | body{background:var(--bg);color:var(--tx);font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.6;overflow-x:hidden;} | ||
h1,h2,h3,h4{font-family: | h1,h2,h3,h4{font-family:var(--head),sans-serif;} | ||
#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;} | #prog{position:fixed;top:0;left:0;right:0;height:2px;background:var(--grad);z-index:9999;transform-origin:left;transform:scaleX(0);transition:transform .1s;} | ||
.nav{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( | .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(13,13,13,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.05);} | ||
.nl{color:var(--tx2);text-decoration:none;font-size:.875rem;font-weight:500;transition:color .15s;} | .nl{color:var(--tx2);text-decoration:none;font-size:.875rem;font-weight:500;transition:color .15s;} | ||
.nl:hover{color:var(--tx);} | .nl:hover{color:var(--tx);} | ||
| Line 24: | Line 25: | ||
.tbtn:hover{background:rgba(255,255,255,.09);} | .tbtn:hover{background:rgba(255,255,255,.09);} | ||
.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;} | .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;} | ||
.h-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 50%,rgba(255, | .h-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 50%,rgba(255,121,0,.08) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 80% 20%,rgba(255,162,74,.06) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 50% 80%,rgba(255,121,0,.07) 0%,transparent 60%);pointer-events:none;} | ||
.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;} | .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;} | ||
.h-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255, | .h-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,121,0,.1);border:1px solid rgba(255,121,0,.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;} | .h-dot{width:6px;height:6px;border-radius:50%;background:var(--or);animation:pulse 2s infinite;} | ||
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}} | @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}} | ||
| Line 33: | Line 34: | ||
.h-sub{font-size:clamp(1rem,2vw,1.15rem);color:var(--tx2);line-height:1.75;max-width:520px;margin:0 auto 2.5rem;} | .h-sub{font-size:clamp(1rem,2vw,1.15rem);color:var(--tx2);line-height:1.75;max-width:520px;margin:0 auto 2.5rem;} | ||
.h-ctas{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;} | .h-ctas{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;} | ||
.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, | .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,121,0,.35);transition:transform .2s,box-shadow .2s;} | ||
.hcp:hover{transform:translateY(-2px);box-shadow:0 0 60px rgba(255, | .hcp:hover{transform:translateY(-2px);box-shadow:0 0 60px rgba(255,121,0,.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;} | .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;} | ||
.hcs:hover{background:rgba(255,255,255,.11);} | .hcs:hover{background:rgba(255,255,255,.11);} | ||
| Line 45: | Line 46: | ||
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.05);} | .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.05);} | ||
.stat{background:var(--bg);padding:2.5rem 2rem;text-align:center;} | .stat{background:var(--bg);padding:2.5rem 2rem;text-align:center;} | ||
.stat-n{font-size:2.8rem;font-weight:900;font-family: | .stat-n{font-size:2.8rem;font-weight:900;font-family:var(--head),sans-serif;} | ||
.stat-l{color:var(--tx2);font-size:.875rem;margin-top:.25rem;} | .stat-l{color:var(--tx2);font-size:.875rem;margin-top:.25rem;} | ||
.sec{padding:100px 1rem;} | .sec{padding:100px 1rem;} | ||
| Line 55: | Line 56: | ||
.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;} | .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;} | ||
.bc{background:var(--bg2);padding:2.25rem;transition:background .2s;} | .bc{background:var(--bg2);padding:2.25rem;transition:background .2s;} | ||
.bc:hover{background:rgba(255, | .bc:hover{background:rgba(255,121,0,.04);} | ||
.bw{grid-column:span 2;} | .bw{grid-column:span 2;} | ||
.b-ic{font-size:2rem;margin-bottom:1rem;} | .b-ic{font-size:2rem;margin-bottom:1rem;} | ||
.b-ti{font-size:1.05rem;font-weight:700;margin-bottom:.5rem;font-family: | .b-ti{font-size:1.05rem;font-weight:700;margin-bottom:.5rem;font-family:var(--head),sans-serif;} | ||
.b-de{color:var(--tx2);font-size:.875rem;line-height:1.65;} | .b-de{color:var(--tx2);font-size:.875rem;line-height:1.65;} | ||
.tg{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;} | .tg{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;} | ||
.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;} | .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;} | ||
.tc:hover{transform:translateY(-4px);border-color:rgba(255, | .tc:hover{transform:translateY(-4px);border-color:rgba(255,121,0,.3);} | ||
.tc img{width:100%;height:100%;object-fit:cover;transition:transform .4s;} | .tc img{width:100%;height:100%;object-fit:cover;transition:transform .4s;} | ||
.tc:hover img{transform:scale(1.05);} | .tc:hover img{transform:scale(1.05);} | ||
.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;} | .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;} | ||
.tn{font-weight:700;font-size:1rem;color:#fff;font-family: | .tn{font-weight:700;font-size:1rem;color:#fff;font-family:var(--head),sans-serif;} | ||
.art-sc{display:flex;gap:14px;overflow-x:auto;padding-bottom:1rem;scrollbar-width:none;} | .art-sc{display:flex;gap:14px;overflow-x:auto;padding-bottom:1rem;scrollbar-width:none;} | ||
.art-sc::-webkit-scrollbar{display:none;} | .art-sc::-webkit-scrollbar{display:none;} | ||
| Line 72: | Line 73: | ||
.ac:hover{border-color:var(--chb);background:var(--chov);transform:translateY(-2px);} | .ac:hover{border-color:var(--chb);background:var(--chov);transform:translateY(-2px);} | ||
.atag{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--or);font-weight:700;margin-bottom:.75rem;} | .atag{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--or);font-weight:700;margin-bottom:.75rem;} | ||
.ati{font-weight:700;color:var(--tx);font-size:.95rem;line-height:1.4;margin-bottom:.5rem;font-family: | .ati{font-weight:700;color:var(--tx);font-size:.95rem;line-height:1.4;margin-bottom:.5rem;font-family:var(--head),sans-serif;} | ||
.ade{color:var(--tx2);font-size:.82rem;line-height:1.5;} | .ade{color:var(--tx2);font-size:.82rem;line-height:1.5;} | ||
.edg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;} | .edg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;} | ||
| Line 78: | Line 79: | ||
.ec:hover{border-color:var(--chb);background:var(--chov);} | .ec:hover{border-color:var(--chb);background:var(--chov);} | ||
.etag{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--or);font-weight:700;} | .etag{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--or);font-weight:700;} | ||
.eti{font-weight:700;color:var(--tx);font-size:.95rem;line-height:1.4;font-family: | .eti{font-weight:700;color:var(--tx);font-size:.95rem;line-height:1.4;font-family:var(--head),sans-serif;} | ||
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;} | .pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;} | ||
.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;} | .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;} | ||
.pc:hover{border-color:var(--chb);background:var(--chov);transform:translateY(-2px);} | .pc:hover{border-color:var(--chb);background:var(--chov);transform:translateY(-2px);} | ||
.pi{font-size:1.5rem;margin-bottom:.75rem;} | .pi{font-size:1.5rem;margin-bottom:.75rem;} | ||
.pt{font-weight:700;color:var(--tx);font-size:.9rem;margin-bottom:.3rem;font-family: | .pt{font-weight:700;color:var(--tx);font-size:.9rem;margin-bottom:.3rem;font-family:var(--head),sans-serif;} | ||
.ps{color:var(--tx3);font-size:.78rem;line-height:1.4;} | .ps{color:var(--tx3);font-size:.78rem;line-height:1.4;} | ||
.cyp-sub{color:var(--tx2);font-size:1rem;max-width:600px;margin:1rem auto 0;font-family:' | .cyp-sub{color:var(--tx2);font-size:1rem;max-width:600px;margin:1rem auto 0;font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:400;line-height:1.6;} | ||
.cyp{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;} | .cyp{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;} | ||
.cypw{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;} | .cypw{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;} | ||
.cyc{background:var(--card);border:1px solid var(--cb);border-radius:18px;padding:26px;text-decoration:none;display:block;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;} | .cyc{background:var(--card);border:1px solid var(--cb);border-radius:18px;padding:26px;text-decoration:none;display:block;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;} | ||
.cyc:hover{border-color:var(--chb);background:var(--chov);transform:translateY(-3px);box-shadow:0 12px 40px rgba(255, | .cyc:hover{border-color:var(--chb);background:var(--chov);transform:translateY(-3px);box-shadow:0 12px 40px rgba(255,121,0,.08);} | ||
.cyn{font-size:.8rem;letter-spacing:.14em;color:var(--tx3);font-weight:700;margin-bottom:16px;} | .cyn{font-size:.8rem;letter-spacing:.14em;color:var(--tx3);font-weight:700;margin-bottom:16px;} | ||
.cyi{display:inline-flex;width:48px;height:48px;border-radius:13px;background:rgba(255, | .cyi{display:inline-flex;width:48px;height:48px;border-radius:13px;background:rgba(255,121,0,.1);border:1px solid rgba(255,121,0,.28);align-items:center;justify-content:center;margin-bottom:20px;} | ||
.cyt{font-weight:700;color:var(--tx);font-size:1.18rem;margin-bottom:.6rem;font-family: | .cyt{font-weight:700;color:var(--tx);font-size:1.18rem;margin-bottom:.6rem;font-family:var(--head),sans-serif;letter-spacing:-.01em;line-height:1.25;} | ||
.cyd{color:var(--tx2);font-size:.92rem;line-height:1.55;margin-bottom:1.1rem;} | .cyd{color:var(--tx2);font-size:.92rem;line-height:1.55;margin-bottom:1.1rem;} | ||
.cye{color:var(--or);font-size:.9rem;font-weight:700;font-family: | .cye{color:var(--or);font-size:.9rem;font-weight:700;font-family:var(--head),sans-serif;} | ||
.cyc:hover .cye{color:var(--or2);} | .cyc:hover .cye{color:var(--or2);} | ||
.cyc-w{display:flex;align-items:center;gap:22px;} | .cyc-w{display:flex;align-items:center;gap:22px;} | ||
| Line 103: | Line 104: | ||
.cyc-w .cye{flex-shrink:0;} | .cyc-w .cye{flex-shrink:0;} | ||
@media(max-width:820px){.cyp,.cypw{grid-template-columns:1fr;}.cyc-w{flex-wrap:wrap;gap:14px;}.cyc-w .cyt{max-width:none;}.cyc-w .cyd{flex-basis:100%;}} | @media(max-width:820px){.cyp,.cypw{grid-template-columns:1fr;}.cyc-w{flex-wrap:wrap;gap:14px;}.cyc-w .cyt{max-width:none;}.cyc-w .cyd{flex-basis:100%;}} | ||
.ctab{background:linear-gradient(135deg,rgba(255, | .ctab{background:linear-gradient(135deg,rgba(255,121,0,.12) 0%,rgba(255,121,0,.05) 100%);border-top:1px solid rgba(255,121,0,.15);border-bottom:1px solid rgba(255,121,0,.15);padding:80px 1rem;text-align:center;} | ||
.tsg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;} | .tsg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;} | ||
.tsc{background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:2rem;} | .tsc{background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:2rem;} | ||
.tsq{font-size:3.5rem;line-height:.8;color:rgba(255, | .tsq{font-size:3.5rem;line-height:.8;color:rgba(255,121,0,.2);font-family:var(--head),sans-serif;font-weight:900;margin-bottom:.5rem;} | ||
.tst{color:var(--tx2);font-size:.95rem;line-height:1.75;margin-bottom:1.5rem;} | .tst{color:var(--tx2);font-size:.95rem;line-height:1.75;margin-bottom:1.5rem;} | ||
.tsa{display:flex;align-items:center;gap:.75rem;} | .tsa{display:flex;align-items:center;gap:.75rem;} | ||
| Line 115: | Line 116: | ||
.nlf{display:flex;gap:.75rem;max-width:440px;margin:2rem auto 0;} | .nlf{display:flex;gap:.75rem;max-width:440px;margin:2rem auto 0;} | ||
.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;} | .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;} | ||
.nli:focus{border-color:rgba(255, | .nli:focus{border-color:rgba(255,121,0,.4);} | ||
.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;} | .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;} | ||
.nlb:hover{opacity:.9;} | .nlb:hover{opacity:.9;} | ||
| Line 129: | Line 130: | ||
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s;} | .fade-up{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s;} | ||
.fade-up.in{opacity:1;transform:none;} | .fade-up.in{opacity:1;transform:none;} | ||
body.light-mode{--bg:# | /* ===== DAY MODE — cohesive light theme (mirrors the dark palette; dark mode untouched) ===== */ | ||
body.light-mode .nav{background:rgba( | body.light-mode{--bg:#F7F6F3;--bg2:#FFFFFF;--panel:#FFFFFF;--card:#FFFFFF;--cb:rgba(0,0,0,.09);--line:rgba(0,0,0,.10);--chov:rgba(255,121,0,.05);--chb:rgba(255,121,0,.40);--tx:#161513;--tx2:#575654;--tx3:#8A8985;} | ||
/* Lift the forced-dark MediaWiki canvas to light (beats Common.css body/#content/.mw-parser-output !important via +1 class specificity or source order) */ | |||
body.light-mode, | |||
body.light-mode #content, | |||
body.light-mode .mw-body, | |||
body.light-mode .mw-body-content, | |||
body.light-mode #mw-content, | |||
body.light-mode #mw-content-text, | |||
body.light-mode #bodyContent, | |||
body.light-mode .mw-parser-output{background:var(--bg)!important;color:var(--tx)!important;} | |||
/* Homepage section headings: dark ink in day mode (Common.css forces them white) */ | |||
body.light-mode .mw-parser-output h1, | |||
body.light-mode .mw-parser-output h2, | |||
body.light-mode .mw-parser-output h3, | |||
body.light-mode .mw-parser-output h4{color:var(--tx)!important;} | |||
/* Chrome + components */ | |||
body.light-mode .nav{background:rgba(247,246,243,.9);border-bottom:1px solid var(--line);} | |||
body.light-mode .lsw{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08);} | |||
body.light-mode .lb.av{color:#8A8985;} | |||
body.light-mode .lb.dim{color:#C9C7C2;} | |||
/* Nav/lang link hover: Common.css forces #fff !important — keep dark ink on light */ | |||
body.light-mode .nl:hover{color:var(--tx)!important;} | |||
body.light-mode .lb.av:hover{color:var(--tx)!important;} | |||
body.light-mode .tbtn{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.09);color:var(--tx2);} | |||
body.light-mode .tbtn:hover{background:rgba(0,0,0,.07);} | |||
body.light-mode .mq-wrap{border-top-color:rgba(0,0,0,.07);border-bottom-color: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 .hcs{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12);color:var(--tx)!important;} | |||
body.light-mode .hcs:hover{background:rgba(0,0,0,.07);border-color:rgba(255,121,0,.5);} | |||
body.light-mode .stats{background:rgba(0,0,0,.08);} | |||
body.light-mode .stat{background:var(--bg);} | body.light-mode .stat{background:var(--bg);} | ||
body.light-mode .bento{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.06);} | |||
body.light-mode .bc{background:var(--bg2);} | body.light-mode .bc{background:var(--bg2);} | ||
body.light-mode . | body.light-mode .bc:hover{background:var(--chov);box-shadow:inset 0 0 0 1px rgba(255,121,0,.22);} | ||
body.light-mode . | body.light-mode .tc{border-color:rgba(0,0,0,.08);} | ||
body.light-mode .foot{background:var(--bg);} | body.light-mode .ac, | ||
body.light-mode .ec, | |||
body.light-mode .pc, | |||
body.light-mode .cyc, | |||
body.light-mode .tsc{box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 16px -8px rgba(0,0,0,.10);} | |||
body.light-mode .ac:hover, | |||
body.light-mode .pc:hover, | |||
body.light-mode .cyc:hover{box-shadow:0 18px 44px -22px rgba(255,121,0,.45);} | |||
body.light-mode .nli{background:#fff;border-color:rgba(0,0,0,.15);color:var(--tx);} | |||
body.light-mode .nli:focus{border-color:rgba(255,121,0,.5);} | |||
body.light-mode .foot{background:var(--bg);border-top-color:rgba(0,0,0,.08);} | |||
body.light-mode .fb{border-top-color:rgba(0,0,0,.08);} | |||
body.light-mode #topics, | |||
body.light-mode #articles{border-top-color:rgba(0,0,0,.06)!important;border-bottom-color:rgba(0,0,0,.06)!important;} | |||
@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: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;}} | @media(max-width:600px){.nav-links-wrap{display:none;}.fg{grid-template-columns:1fr;}} | ||
/* BigBro Know Banner */ | /* BigBro Know Banner */ | ||
.bigbro-banner{width:100%;background:linear-gradient(135deg,#0D0D0D 0%,#1a0800 50%,#0D0D0D 100%);border-bottom:1px solid rgba(255, | .bigbro-banner{width:100%;background:linear-gradient(135deg,#0D0D0D 0%,#1a0800 50%,#0D0D0D 100%);border-bottom:1px solid rgba(255,121,0,.2);padding:80px 2rem 80px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-top:60px;} | ||
.bigbro-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(255, | .bigbro-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(255,121,0,.12) 0%,transparent 70%);pointer-events:none;} | ||
.bigbro-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;} | .bigbro-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;} | ||
.ab-inner{position:relative;z-index:1;text-align:center;max-width:900px;} | .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, | .ab-eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,121,0,.1);border:1px solid rgba(255,121,0,.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;} | ||
.ab-dot{width:6px;height:6px;border-radius:50%;background:var(--or);animation:pulse 2s infinite;} | .ab-dot{width:6px;height:6px;border-radius:50%;background:var(--or);animation:pulse 2s infinite;} | ||
.ab-logo{font-family: | .ab-logo{font-family:var(--head),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,# | .ab-logo-a{background:linear-gradient(135deg,#FF7900,#FFA24A,#FFC178);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} | ||
.ab-logo-x{color:#fff;} | .ab-logo-x{color:#fff;} | ||
.ab-logo{margin-bottom:.35rem;} | .ab-logo{margin-bottom:.35rem;} | ||
.ab-know{font-family: | .ab-know{font-family:var(--head),sans-serif;font-size:clamp(.9rem,2.4vw,1.35rem);font-weight:700;letter-spacing:.55em;text-indent:.55em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:1.4rem;} | ||
.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-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, | .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,121,0,.3);transition:transform .2s,box-shadow .2s;} | ||
.ab-cta:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(255, | .ab-cta:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(255,121,0,.5);} | ||
.ab-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255, | .ab-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,121,0,.08) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;} | ||
/* Enhanced modern styles */ | /* Enhanced modern styles */ | ||
| Line 163: | Line 207: | ||
.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;} | .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;} | ||
.hcp:hover::after{transform:translateX(60%);} | .hcp:hover::after{transform:translateX(60%);} | ||
/* === bigbro.men unification layer (!important beats Vector skin heading/link rules) === */ | |||
h1,h2,h3,h4{font-family:var(--head)!important;letter-spacing:-.012em;} | |||
.h-title{font-family:var(--disp)!important;font-weight:400;text-transform:uppercase;letter-spacing:.015em;line-height:.98;} | |||
.stat-n,.tsq,.ab-logo{font-family:var(--disp)!important;font-weight:400;} | |||
.stitle{color:var(--tx)!important;font-weight:800;} | |||
.btn-p,.hcp,.nlb,.ab-cta,.lb.on{color:#0D0D0D!important;font-weight:800;} | |||
.nav{border-bottom:1px solid var(--line);} | |||
.stag,.atag,.etag,.cyn,.fct,.ab-eyebrow{font-weight:700;} | |||
.ac:hover,.pc:hover,.cyc:hover{box-shadow:0 20px 50px -24px rgba(255,121,0,.5);} | |||
.tc:hover{box-shadow:0 18px 44px -22px rgba(255,121,0,.55);} | |||
.bc:hover{box-shadow:inset 0 0 0 1px rgba(255,121,0,.18);} | |||
.hcp:hover,.ab-cta:hover{box-shadow:0 18px 60px -10px rgba(255,121,0,.6);} | |||
.hcs:hover{border-color:rgba(255,121,0,.5);} | |||
.btn-p:hover{box-shadow:0 12px 36px -12px rgba(255,121,0,.6);} | |||
</style> | </style> | ||
| Line 168: | Line 227: | ||
<nav class="nav"> | <nav class="nav"> | ||
<a href=" | <a href="/Homepage"> | ||
<img src="/images/8/80/BigBro_mark.png" alt="BigBro Know" style="height:36px;width:auto;"> | <img src="/images/8/80/BigBro_mark.png" alt="BigBro Know" style="height:36px;width:auto;"> | ||
</a> | </a> | ||
| Line 179: | Line 238: | ||
<div class="nav-right"> | <div class="nav-right"> | ||
<div class="lsw"> | <div class="lsw"> | ||
<a href=" | <a href="/Homepage" class="lb on">EN</a> | ||
<a href=" | <a href="/Homepage/de" class="lb av">DE</a> | ||
< | <a href="/Homepage/fr" class="lb av">FR</a> | ||
< | <a href="/Homepage/es" class="lb av">ES</a> | ||
< | <a href="/Homepage/pt" class="lb av">PT</a> | ||
</div> | </div> | ||
<button class="tbtn" id="tbtn" onclick="toggleTheme()">🌙</button> | <button class="tbtn" id="tbtn" onclick="toggleTheme()">🌙</button> | ||
| Line 190: | Line 249: | ||
</div> | </div> | ||
</nav> | </nav> | ||
<div class="mq-wrap" style="margin-top:60px;"> | |||
<div class="mq-track"> | |||
<span class="mq-item"><a href="/Category:HIV_Prevention_%26_Treatment" style="color:inherit;text-decoration:none;">HIV Prevention & Treatment</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Consent_%26_Negotiation" style="color:inherit;text-decoration:none;">Consent & Negotiation</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Communication_%26_Boundaries" style="color:inherit;text-decoration:none;">Communication & Boundaries</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Aging,_Relevance,_and_Shifting_Identity" style="color:inherit;text-decoration:none;">Aging, Relevance & Shifting Identity</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Culture" style="color:inherit;text-decoration:none;">Culture</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Body_Presentation" style="color:inherit;text-decoration:none;">Body Presentation</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Party_Drugs" style="color:inherit;text-decoration:none;">Party Drugs</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Trauma_%26_Recovery" style="color:inherit;text-decoration:none;">Trauma & Recovery</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Power_Dynamics" style="color:inherit;text-decoration:none;">Power Dynamics</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Hookups_vs._Dating" style="color:inherit;text-decoration:none;">Hookups vs. Dating</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Chosen_Family_and_Social_Belonging" style="color:inherit;text-decoration:none;">Chosen Family & Social Belonging</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:History" style="color:inherit;text-decoration:none;">History</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Style_as_Communication" style="color:inherit;text-decoration:none;">Style as Communication</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:STI_Awareness_%26_Testing" style="color:inherit;text-decoration:none;">STI Awareness & Testing</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Roles_%26_Archetypes" style="color:inherit;text-decoration:none;">Roles & Archetypes</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Sex,_Intimacy_%26_Connection" style="color:inherit;text-decoration:none;">Sex, Intimacy & Connection</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Online_Communities_vs._Physical_Communities" style="color:inherit;text-decoration:none;">Online Communities vs. Physical Communities</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Politics" style="color:inherit;text-decoration:none;">Politics</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Subculture_Aesthetics" style="color:inherit;text-decoration:none;">Subculture Aesthetics</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Body_Image_%26_Self-Perception" style="color:inherit;text-decoration:none;">Body Image & Self-Perception</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Risk_Awareness_%26_Safety" style="color:inherit;text-decoration:none;">Risk Awareness & Safety</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Belonging_Without_Centrality" style="color:inherit;text-decoration:none;">Belonging Without Centrality</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Symbols_%26_Accessories" style="color:inherit;text-decoration:none;">Symbols & Accessories</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Substance_Use_%26_Sexual_Contexts" style="color:inherit;text-decoration:none;">Substance Use & Sexual Contexts</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Digital_Kink_Culture" style="color:inherit;text-decoration:none;">Digital Kink Culture</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Identity_Performance_in_Dating_and_Social_Spaces" style="color:inherit;text-decoration:none;">Identity Performance in Dating & Social Spaces</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Aging_%26_Sexual_Health" style="color:inherit;text-decoration:none;">Aging & Sexual Health</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Emotional_Dynamics_in_Kink" style="color:inherit;text-decoration:none;">Emotional Dynamics in Kink</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Visibility,_Privacy,_and_Being_%22Out%22" style="color:inherit;text-decoration:none;">Visibility, Privacy & Being Out</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Communication_%26_Disclosure" style="color:inherit;text-decoration:none;">Communication & Disclosure</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Kink_in_Relationships" style="color:inherit;text-decoration:none;">Kink in Relationships</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:The_Role_of_Humor,_Irony,_and_Distance" style="color:inherit;text-decoration:none;">The Role of Humor, Irony & Distance</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Sexual_Function_%26_Mental_Health" style="color:inherit;text-decoration:none;">Sexual Function & Mental Health</a></span><span class="mq-dot"></span> | |||
<span class="mq-item"><a href="/Category:HIV_Prevention_%26_Treatment" style="color:inherit;text-decoration:none;">HIV Prevention & Treatment</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Consent_%26_Negotiation" style="color:inherit;text-decoration:none;">Consent & Negotiation</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Communication_%26_Boundaries" style="color:inherit;text-decoration:none;">Communication & Boundaries</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Aging,_Relevance,_and_Shifting_Identity" style="color:inherit;text-decoration:none;">Aging, Relevance & Shifting Identity</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Culture" style="color:inherit;text-decoration:none;">Culture</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Body_Presentation" style="color:inherit;text-decoration:none;">Body Presentation</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Party_Drugs" style="color:inherit;text-decoration:none;">Party Drugs</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Trauma_%26_Recovery" style="color:inherit;text-decoration:none;">Trauma & Recovery</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Power_Dynamics" style="color:inherit;text-decoration:none;">Power Dynamics</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Hookups_vs._Dating" style="color:inherit;text-decoration:none;">Hookups vs. Dating</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Chosen_Family_and_Social_Belonging" style="color:inherit;text-decoration:none;">Chosen Family & Social Belonging</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:History" style="color:inherit;text-decoration:none;">History</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Style_as_Communication" style="color:inherit;text-decoration:none;">Style as Communication</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:STI_Awareness_%26_Testing" style="color:inherit;text-decoration:none;">STI Awareness & Testing</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Roles_%26_Archetypes" style="color:inherit;text-decoration:none;">Roles & Archetypes</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Sex,_Intimacy_%26_Connection" style="color:inherit;text-decoration:none;">Sex, Intimacy & Connection</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Online_Communities_vs._Physical_Communities" style="color:inherit;text-decoration:none;">Online Communities vs. Physical Communities</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Politics" style="color:inherit;text-decoration:none;">Politics</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Subculture_Aesthetics" style="color:inherit;text-decoration:none;">Subculture Aesthetics</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Body_Image_%26_Self-Perception" style="color:inherit;text-decoration:none;">Body Image & Self-Perception</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Risk_Awareness_%26_Safety" style="color:inherit;text-decoration:none;">Risk Awareness & Safety</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Belonging_Without_Centrality" style="color:inherit;text-decoration:none;">Belonging Without Centrality</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Symbols_%26_Accessories" style="color:inherit;text-decoration:none;">Symbols & Accessories</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Substance_Use_%26_Sexual_Contexts" style="color:inherit;text-decoration:none;">Substance Use & Sexual Contexts</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Digital_Kink_Culture" style="color:inherit;text-decoration:none;">Digital Kink Culture</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Identity_Performance_in_Dating_and_Social_Spaces" style="color:inherit;text-decoration:none;">Identity Performance in Dating & Social Spaces</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Aging_%26_Sexual_Health" style="color:inherit;text-decoration:none;">Aging & Sexual Health</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Emotional_Dynamics_in_Kink" style="color:inherit;text-decoration:none;">Emotional Dynamics in Kink</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Visibility,_Privacy,_and_Being_%22Out%22" style="color:inherit;text-decoration:none;">Visibility, Privacy & Being Out</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Communication_%26_Disclosure" style="color:inherit;text-decoration:none;">Communication & Disclosure</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Kink_in_Relationships" style="color:inherit;text-decoration:none;">Kink in Relationships</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:The_Role_of_Humor,_Irony,_and_Distance" style="color:inherit;text-decoration:none;">The Role of Humor, Irony & Distance</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Sexual_Function_%26_Mental_Health" style="color:inherit;text-decoration:none;">Sexual Function & Mental Health</a></span><span class="mq-dot"></span> | |||
</div> | |||
</div> | |||
| Line 195: | Line 263: | ||
<div class="ab-glow"></div> | <div class="ab-glow"></div> | ||
<div class="ab-inner"> | <div class="ab-inner"> | ||
<img src="/images/f/f9/BigBro_Know_logo_new.png" alt="BigBro Know" style="max-width:480px;width:80%;margin-bottom:1rem;"> | |||
<p class="ab-tagline">The free knowledge platform for gay communities worldwide</p> | <p class="ab-tagline">The free knowledge platform for gay communities worldwide</p> | ||
<a href=" | <a href="/Start_Here" class="ab-cta">Explore BigBro Know →</a> | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 214: | Line 281: | ||
</section> | </section> | ||
<section class="sec" id="features"> | <section class="sec" id="features"> | ||
| Line 253: | Line 307: | ||
</div> | </div> | ||
<div class="tg"> | <div class="tg"> | ||
<a href=" | <a href="/Category:Sexual_Health" class="tc"><img src="/images/c/c2/Sexual_health.png" alt="Sexual Health" loading="lazy"><div class="to"><span class="tn">Sexual Health</span></div></a> | ||
<a href=" | <a href="/Category:Dating,_Sex_%26_Relationships" class="tc"><img src="/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=" | <a href="/Category:Kink_%26_BDSM" class="tc"><img src="/images/a/a1/Chain-image.png" alt="Kink & BDSM" loading="lazy"><div class="to"><span class="tn">Kink & BDSM</span></div></a> | ||
<a href=" | <a href="/Category:Culture,_History_%26_Politics" class="tc"><img src="/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=" | <a href="/Category:Fashion_%26_Visual_Signaling" class="tc"><img src="/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> | ||
<a href=" | <a href="/Category:Community_%26_Identity" class="tc"><img src="/images/e/ed/Community_Identity_Hero.png" alt="Community & Identity" loading="lazy"><div class="to"><span class="tn">Community & Identity</span></div></a> | ||
<a href=" | <a href="/Category:Drugs,_Party_Culture_%26_Harm_Reduction" class="tc"><img src="/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> | ||
<a href=" | <a href="/Category:Life_Planning" class="tc"><img src="/images/7/74/Life_Planning_Hero.jpg" alt="Life Planning" loading="lazy"><div class="to"><span class="tn">Life Planning</span></div></a> | ||
<a href="/Category:Connections" class="tc"><img src="/images/c/c0/Connecions.png" alt="Connections" loading="lazy"><div class="to"><span class="tn">Connections</span></div></a> | |||
</div> | </div> | ||
</div> | </div> | ||
| Line 268: | Line 323: | ||
<div style="max-width:600px;margin:0 auto;"> | <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> | <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> | <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=" | <div style="margin-top:2.5rem;text-align:left;max-width:1000px;margin-left:auto;margin-right:auto;"> | ||
<h3 style="font-size:1.2rem;font-weight:800;margin-bottom:1.5rem;text-align:center;color:var(--tx);">Start with these life-saving articles</h3> | |||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;"> | |||
<a href="/Understanding_PrEP_and_Modern_HIV_Prevention" style="display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.25rem;text-decoration:none;transition:border-color .15s,transform .15s;"> | |||
<div style="color:var(--or);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem;">Health</div> | |||
<div style="color:var(--tx);font-weight:700;margin-bottom:.35rem;line-height:1.3;">Understanding PrEP and Modern HIV Prevention</div> | |||
<div style="color:var(--tx2);font-size:.85rem;line-height:1.4;">A complete guide to PrEP and modern HIV prevention.</div> | |||
</a> | |||
<a href="/Understanding_U%3DU_(Undetectable_%3D_Untransmittable)" style="display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.25rem;text-decoration:none;transition:border-color .15s,transform .15s;"> | |||
<div style="color:var(--or);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem;">Health</div> | |||
<div style="color:var(--tx);font-weight:700;margin-bottom:.35rem;line-height:1.3;">Understanding U=U (Undetectable = Untransmittable)</div> | |||
<div style="color:var(--tx2);font-size:.85rem;line-height:1.4;">What undetectable status means for transmission.</div> | |||
</a> | |||
<a href="/Understanding_Routine_STI_Testing_in_Gay_Communities" style="display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.25rem;text-decoration:none;transition:border-color .15s,transform .15s;"> | |||
<div style="color:var(--or);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem;">Health</div> | |||
<div style="color:var(--tx);font-weight:700;margin-bottom:.35rem;line-height:1.3;">Understanding Routine STI Testing in Gay Communities</div> | |||
<div style="color:var(--tx2);font-size:.85rem;line-height:1.4;">Why regular testing matters and how it works.</div> | |||
</a> | |||
<a href="/Condom_Use_in_Modern_Gay_Sexual_Health" style="display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.25rem;text-decoration:none;transition:border-color .15s,transform .15s;"> | |||
<div style="color:var(--or);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem;">Health</div> | |||
<div style="color:var(--tx);font-weight:700;margin-bottom:.35rem;line-height:1.3;">Condom Use in Modern Gay Sexual Health</div> | |||
<div style="color:var(--tx2);font-size:.85rem;line-height:1.4;">Practical guidance on barrier protection.</div> | |||
</a> | |||
<a href="/Chemsex,_Party_Drugs,_and_Harm_Reduction_in_Gay_Communities" style="display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.25rem;text-decoration:none;transition:border-color .15s,transform .15s;"> | |||
<div style="color:var(--or);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem;">Harm Reduction</div> | |||
<div style="color:var(--tx);font-weight:700;margin-bottom:.35rem;line-height:1.3;">Chemsex, Party Drugs, and Harm Reduction in Gay Communities</div> | |||
<div style="color:var(--tx2);font-size:.85rem;line-height:1.4;">Balanced, non-judgmental harm-reduction info.</div> | |||
</a> | |||
<a href="/Harm_Reduction_in_Nightlife" style="display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.25rem;text-decoration:none;transition:border-color .15s,transform .15s;"> | |||
<div style="color:var(--or);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem;">Harm Reduction</div> | |||
<div style="color:var(--tx);font-weight:700;margin-bottom:.35rem;line-height:1.3;">Harm Reduction in Nightlife</div> | |||
<div style="color:var(--tx2);font-size:.85rem;line-height:1.4;">Staying safer in club and party environments.</div> | |||
</a> | |||
<a href="/Overdose_Awareness" style="display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.25rem;text-decoration:none;transition:border-color .15s,transform .15s;"> | |||
<div style="color:var(--or);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem;">Harm Reduction</div> | |||
<div style="color:var(--tx);font-weight:700;margin-bottom:.35rem;line-height:1.3;">Overdose Awareness</div> | |||
<div style="color:var(--tx2);font-size:.85rem;line-height:1.4;">Recognizing and responding to overdose risk.</div> | |||
</a> | |||
<a href="/Mixing_Substances" style="display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.25rem;text-decoration:none;transition:border-color .15s,transform .15s;"> | |||
<div style="color:var(--or);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem;">Harm Reduction</div> | |||
<div style="color:var(--tx);font-weight:700;margin-bottom:.35rem;line-height:1.3;">Mixing Substances</div> | |||
<div style="color:var(--tx2);font-size:.85rem;line-height:1.4;">Understanding risks of combining substances.</div> | |||
</a> | |||
<a href="/Drug_Testing_Kits" style="display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.25rem;text-decoration:none;transition:border-color .15s,transform .15s;"> | |||
<div style="color:var(--or);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem;">Harm Reduction</div> | |||
<div style="color:var(--tx);font-weight:700;margin-bottom:.35rem;line-height:1.3;">Drug Testing Kits</div> | |||
<div style="color:var(--tx2);font-size:.85rem;line-height:1.4;">How testing kits help reduce risk.</div> | |||
</a> | |||
<a href="/Risk_in_Consensual_Kink" style="display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.25rem;text-decoration:none;transition:border-color .15s,transform .15s;"> | |||
<div style="color:var(--or);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem;">Kink & BDSM</div> | |||
<div style="color:var(--tx);font-weight:700;margin-bottom:.35rem;line-height:1.3;">Risk in Consensual Kink</div> | |||
<div style="color:var(--tx2);font-size:.85rem;line-height:1.4;">Safety and harm-awareness in kink practices.</div> | |||
</a> | |||
</div> | |||
</div> | |||
</div> | </div> | ||
</div> | </div> | ||
| Line 283: | Line 392: | ||
<a href="/New_and_Just_Curious" class="cyc"> | <a href="/New_and_Just_Curious" class="cyc"> | ||
<div class="cyn">01</div> | <div class="cyn">01</div> | ||
<span class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="# | <span class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF7900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg></span> | ||
<div class="cyt">I'm New / Just Curious</div> | <div class="cyt">I'm New / Just Curious</div> | ||
<div class="cyd">Community basics, health, consent & finding your people.</div> | <div class="cyd">Community basics, health, consent & finding your people.</div> | ||
| Line 290: | Line 399: | ||
<a href="/Exploring_Kink" class="cyc"> | <a href="/Exploring_Kink" class="cyc"> | ||
<div class="cyn">02</div> | <div class="cyn">02</div> | ||
<span class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="# | <span class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF7900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg></span> | ||
<div class="cyt">I Want to Explore Kink</div> | <div class="cyt">I Want to Explore Kink</div> | ||
<div class="cyd">BDSM, fetishes, leather culture & power dynamics.</div> | <div class="cyd">BDSM, fetishes, leather culture & power dynamics.</div> | ||
| Line 297: | Line 406: | ||
<a href="/Improving_Your_Relationship" class="cyc"> | <a href="/Improving_Your_Relationship" class="cyc"> | ||
<div class="cyn">03</div> | <div class="cyn">03</div> | ||
<span class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="# | <span class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF7900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg></span> | ||
<div class="cyt">Improve My Relationship</div> | <div class="cyt">Improve My Relationship</div> | ||
<div class="cyd">Communication, trust, non-monogamy & intimacy.</div> | <div class="cyd">Communication, trust, non-monogamy & intimacy.</div> | ||
| Line 306: | Line 415: | ||
<a href="/Safety_and_Consent" class="cyc cyc-w"> | <a href="/Safety_and_Consent" class="cyc cyc-w"> | ||
<span class="cyn">04</span> | <span class="cyn">04</span> | ||
<span class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="# | <span class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF7900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg></span> | ||
<span class="cyt">I Care About Safety</span> | <span class="cyt">I Care About Safety</span> | ||
<span class="cyd">Harm reduction, safe sex, PrEP, BDSM safety & consent.</span> | <span class="cyd">Harm reduction, safe sex, PrEP, BDSM safety & consent.</span> | ||
| Line 313: | Line 422: | ||
<a href="/Advanced_Knowledge" class="cyc cyc-w"> | <a href="/Advanced_Knowledge" class="cyc cyc-w"> | ||
<span class="cyn">05</span> | <span class="cyn">05</span> | ||
<span class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="# | <span class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF7900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6M10 22h4"/></svg></span> | ||
<span class="cyt">I Want Advanced Knowledge</span> | <span class="cyt">I Want Advanced Knowledge</span> | ||
<span class="cyd">Psychology, advanced BDSM, identity & queer history.</span> | <span class="cyd">Psychology, advanced BDSM, identity & queer history.</span> | ||
| Line 329: | Line 438: | ||
</div> | </div> | ||
<div class="art-sc"> | <div class="art-sc"> | ||
<a href=" | <a href="/Entering_the_Gay_Scene_for_the_First_Time" class="ac"><div class="atag">Community</div><div class="ati">Entering the Gay Scene for the First Time</div><div class="ade">What to expect, how to prepare, and where to start.</div></a> | ||
<a href=" | <a href="/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=" | <a href="/Body_Image_Pressure_in_Gay_Communities" class="ac"><div class="atag">Identity</div><div class="ati">Body Image Pressure in Gay Communities</div><div class="ade">Beauty ideals, self-perception, and navigating expectations.</div></a> | ||
<a href=" | <a href="/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=" | <a href="/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> | ||
<a href=" | <a href="/Navigating_Intimacy_After_Sexual_Trauma" class="ac"><div class="atag">Health</div><div class="ati">Navigating Intimacy After Sexual Trauma</div><div class="ade">Processing, healing, and the path back to connection.</div></a> | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 346: | Line 455: | ||
</div> | </div> | ||
<div class="edg"> | <div class="edg"> | ||
<a href=" | <a href="/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=" | <a href="/What_Is_BDSM" class="ec"><div class="etag">Kink & BDSM</div><div class="eti">What Is BDSM?</div></a> | ||
<a href=" | <a href="/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> | ||
<a href=" | <a href="/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=" | <a href="/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> | ||
<a href=" | <a href="/Recovering_Sexual_Confidence_After_Relationship_Breakups" class="ec"><div class="etag">Relationships</div><div class="eti">Recovering Sexual Confidence After Breakups</div></a> | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 388: | Line 497: | ||
<p class="fbp">A free, independent knowledge platform for gay communities worldwide.</p> | <p class="fbp">A free, independent knowledge platform for gay communities worldwide.</p> | ||
</div> | </div> | ||
<div><div class="fct">Health</div><div class="fl"><a href=" | <div><div class="fct">Health</div><div class="fl"><a href="/Category:Sexual_Health">Sexual Health</a><a href="/Category:HIV_Prevention_%26_Treatment">HIV Prevention</a><a href="/Category:STI_Awareness_%26_Testing">STI Testing</a><a href="/Category:Sexual_Function_%26_Mental_Health">Mental Health</a></div></div> | ||
<div><div class="fct">Lifestyle</div><div class="fl"><a href=" | <div><div class="fct">Lifestyle</div><div class="fl"><a href="/Category:Dating,_Sex_%26_Relationships">Dating & Relationships</a><a href="/Category:Kink_%26_BDSM">Kink & BDSM</a><a href="/Category:Culture,_History_%26_Politics">Culture & History</a><a href="/Category:Fashion_%26_Visual_Signaling">Fashion & Style</a></div></div> | ||
<div><div class="fct">Site</div><div class="fl"><a href=" | <div><div class="fct">Site</div><div class="fl"><a href="/Homepage">Home</a><a href="/Topics">All Topics</a><a href="/Special:AllPages">All Articles</a><a href="/radmin">Admin</a></div></div> | ||
</div> | </div> | ||
<div class="fb"> | <div class="fb"> | ||
<span>© | <span>© 2026 Karussell Labs OÜ, operating BigBro and BigBro Know · All content is for educational purposes only.</span> | ||
<span>No account · No tracking · Always free</span> | <span>No account · No tracking · Always free</span> | ||
</div> | </div> | ||