Homepage: Difference between revisions

From BigBro Know
Jump to navigation Jump to search
← Older editNewer edit →
Admin (talk | contribs)
Bureaucrats, Interface administrators, Administrators
9,027 edits
VisualWikitext
Add FR/ES/PT language switcher links now that those pages exist
Restyle homepage to match bigbro.men design system (Archivo+Anton fonts, orange #FF7900 palette, panel cards); localize hero title
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=Space+Grotesk:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<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:#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{--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:'Inter',sans-serif;line-height:1.6;overflow-x:hidden;}
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:'Space Grotesk',sans-serif;}
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(8,8,8,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.05);}
.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,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;}
.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,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-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,106,33,.35);transition:transform .2s,box-shadow .2s;}
.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,106,33,.5);}
.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:'Space Grotesk',sans-serif;}
.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,106,33,.04);}
.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:'Space Grotesk',sans-serif;}
.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,106,33,.3);}
.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:'Space Grotesk',sans-serif;}
.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:'Space Grotesk',sans-serif;}
.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:'Space Grotesk',sans-serif;}
.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:'Space Grotesk',sans-serif;}
.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:'Inter',sans-serif;font-weight:400;line-height:1.6;}
.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,106,33,.08);}
.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,106,33,.1);border:1px solid rgba(255,106,33,.28);align-items:center;justify-content:center;margin-bottom:20px;}
.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:'Space Grotesk',sans-serif;letter-spacing:-.01em;line-height:1.25;}
.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:'Space Grotesk',sans-serif;}
.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,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;}
.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,106,33,.2);font-family:'Space Grotesk',sans-serif;font-weight:900;margin-bottom:.5rem;}
.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,106,33,.4);}
.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:#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;}
body.light-mode{--bg:#F4F4F2;--bg2:#ECECEA;--card:rgba(0,0,0,.03);--cb:rgba(0,0,0,.08);--chov:rgba(255,121,0,.04);--chb:rgba(255,121,0,.3);--tx:#111;--tx2:#555;--tx3:#999;}
body.light-mode .nav{background:rgba(244,244,242,.88);}
body.light-mode .nav{background:rgba(244,244,242,.88);}
body.light-mode .stat{background:var(--bg);}
body.light-mode .stat{background:var(--bg);}
Line 140: Line 141:


/* 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,106,33,.2);padding:80px 2rem 80px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-top:60px;}
.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,106,33,.12) 0%,transparent 70%);pointer-events:none;}
.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,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;}
.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:'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{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,#FF6A21,#FF8C42,#FFB347);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.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:'Space Grotesk',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-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,106,33,.3);transition:transform .2s,box-shadow .2s;}
.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,106,33,.5);}
.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,106,33,.08) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;}
.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 164:
.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 === */
h1,h2,h3{letter-spacing:-.012em;}
.h-title{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.015em;line-height:.98;}
.stat-n,.tsq,.ab-logo{font-family:var(--disp);font-weight:400;}
.stitle{font-weight:800;}
.btn-p,.hcp,.nlb,.ab-cta,.lb.on{color:#0D0D0D;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 283: Line 299:
       <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="#FF6A21" 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>
         <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 &amp; finding your people.</div>
         <div class="cyd">Community basics, health, consent &amp; finding your people.</div>
Line 290: Line 306:
       <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="#FF6A21" 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>
         <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 &amp; power dynamics.</div>
         <div class="cyd">BDSM, fetishes, leather culture &amp; power dynamics.</div>
Line 297: Line 313:
       <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="#FF6A21" 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>
         <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 &amp; intimacy.</div>
         <div class="cyd">Communication, trust, non-monogamy &amp; intimacy.</div>
Line 306: Line 322:
       <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="#FF6A21" 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="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 &amp; consent.</span>
         <span class="cyd">Harm reduction, safe sex, PrEP, BDSM safety &amp; consent.</span>
Line 313: Line 329:
       <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="#FF6A21" 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="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 &amp; queer history.</span>
         <span class="cyd">Psychology, advanced BDSM, identity &amp; queer history.</span>

Revision as of 09:16, 30 June 2026

Free · Independent · Always Open
BigBro Know

The free knowledge platform for gay communities worldwide

Explore BigBro Know →
500+ articles · Always free

Everything about
gay life.
In one place. Free.

Honest, life-saving articles on health, safety, culture, relationships, nightlife and more — written for the gay community, by the gay community.

Start Reading Browse Topics
HIV Prevention & TreatmentConsent & NegotiationCommunication & BoundariesAging, Relevance & Shifting IdentityCultureBody PresentationParty DrugsTrauma & RecoveryPower DynamicsHookups vs. DatingChosen Family & Social BelongingHistoryStyle as CommunicationSTI Awareness & TestingRoles & ArchetypesSex, Intimacy & ConnectionOnline Communities vs. Physical CommunitiesPoliticsSubculture AestheticsBody Image & Self-PerceptionRisk Awareness & SafetyBelonging Without CentralitySymbols & AccessoriesSubstance Use & Sexual ContextsDigital Kink CultureIdentity Performance in Dating & Social SpacesAging & Sexual HealthEmotional Dynamics in KinkVisibility, Privacy & Being OutCommunication & DisclosureKink in RelationshipsThe Role of Humor, Irony & DistanceSexual Function & Mental Health HIV Prevention & TreatmentConsent & NegotiationCommunication & BoundariesAging, Relevance & Shifting IdentityCultureBody PresentationParty DrugsTrauma & RecoveryPower DynamicsHookups vs. DatingChosen Family & Social BelongingHistoryStyle as CommunicationSTI Awareness & TestingRoles & ArchetypesSex, Intimacy & ConnectionOnline Communities vs. Physical CommunitiesPoliticsSubculture AestheticsBody Image & Self-PerceptionRisk Awareness & SafetyBelonging Without CentralitySymbols & AccessoriesSubstance Use & Sexual ContextsDigital Kink CultureIdentity Performance in Dating & Social SpacesAging & Sexual HealthEmotional Dynamics in KinkVisibility, Privacy & Being OutCommunication & DisclosureKink in RelationshipsThe Role of Humor, Irony & DistanceSexual Function & Mental Health
500+
Articles
2M+
Monthly Readers
80+
Topics
∞
Always Free
Why BigBro Know

Knowledge that actually matters

🛡️
Life-saving knowledge
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.
📖
Deep, honest articles
No clickbait. No headlines. Real, thorough articles that treat complex topics with the respect they deserve.
🔒
Private by default
No account. No tracking. No judgment. Read what you need — completely privately.
✍️
Community authors
Written by people who live this life. Reviewed for accuracy. Never by outside journalists.
🔍
Fully searchable
Find exactly what you need across all 500+ articles in seconds.
💙
Always free
No paywall. No premium tier. BigBro Know is free and will always be free.
Knowledge Areas

Explore by category

Eight areas covering every aspect of gay life.

Sexual Health
Sexual Health
 Dating, Sex & Relationships
Dating, Sex & Relationships
 Kink & BDSM
Kink & BDSM
 Culture, History & Politics
Culture, History & Politics
 Fashion & Visual Signaling
Fashion & Visual Signaling
 Community & Identity
Community & Identity
 Drugs, Party Culture & Harm Reduction
Drugs, Party Culture & Harm Reduction
 Life Planning
Life Planning

Knowledge that saves lives

Everyone deserves access to honest, life-saving information about their own life.

Explore Articles
Entry Points

Choose Your Path

Not sure where to begin? Pick the path that fits where you are right now.

01
I'm New / Just Curious
Community basics, health, consent & finding your people.
Explore →
02
I Want to Explore Kink
BDSM, fetishes, leather culture & power dynamics.
Explore →
03
Improve My Relationship
Communication, trust, non-monogamy & intimacy.
Explore →
04 I Care About Safety Harm reduction, safe sex, PrEP, BDSM safety & consent. Explore → 05 I Want Advanced Knowledge Psychology, advanced BDSM, identity & queer history. Explore →
Latest

Recent articles

Community
Entering the Gay Scene for the First Time
What to expect, how to prepare, and where to start.
Health
Understanding PrEP and Modern HIV Prevention
A complete guide to PrEP, how it works, and how to access it.
Identity
Body Image Pressure in Gay Communities
Beauty ideals, self-perception, and navigating expectations.
Kink & BDSM
Understanding Consent in Power Exchange
What consent truly means and how it's practiced.
Relationships
Loneliness, Hookup Culture, and Emotional Well-Being
The tension between sexual freedom and connection.
Health
Navigating Intimacy After Sexual Trauma
Processing, healing, and the path back to connection.
Curated

Editor's selection

Health
Sexual Health in the Gay Community
Kink & BDSM
What Is BDSM?
Identity
Body Diversity and Attraction in Gay Communities
Health
Understanding Routine STI Testing
Nightlife
First Time at a Private Gay Sex Party
Relationships
Recovering Sexual Confidence After Breakups
Readers

What people say

"
The PrEP article literally saved my life. I didn't even know what it was before I found BigBro Know. Now I'm on it and feel safe.
J
James
Manchester, UK
"
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.
D
Daniel
Berlin, Germany
"
Finally honest information about chemsex and harm reduction — no judgment, no moralising, just practical knowledge that actually helps.
A
Aviv
Tel Aviv, Israel
Newsletter

Stay informed.

Join 50,000+ readers. Weekly highlights, no spam, always free.

Retrieved from "https://know.bigbro.men/index.php?title=Homepage&oldid=18650"