Homepage/pt: Difference between revisions
Jump to navigation
Jump to search
Update language switcher to include all 5 languages as active links |
Restyle homepage to bigbro.men design (Archivo+Anton, #FF7900 palette, panel cards); fix heading/button cascade vs skin; localize hero |
||
| (One intermediate revision 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:#F4F4F2;--bg2:#ECECEA;--card:rgba(0,0,0,.03);--cb:rgba(0,0,0,.08);--chov:rgba(255, | 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, | .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 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 (!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 206: | Line 222: | ||
<div class="h-grid"></div> | <div class="h-grid"></div> | ||
<div class="h-badge"><span class="h-dot"></span>500+ artigos · Sempre grátis</div> | <div class="h-badge"><span class="h-dot"></span>500+ artigos · Sempre grátis</div> | ||
<h1 class="h-title"> | <h1 class="h-title">Tudo sobre<br>a vida gay.<br><span class="gt">Em um só lugar. Grátis.</span></h1> | ||
<p class="h-sub">500+ artigos honestos e essenciais sobre saúde, segurança, cultura, relacionamentos, vida noturna e mais — escritos para a comunidade gay, pela comunidade gay.</p> | <p class="h-sub">500+ artigos honestos e essenciais sobre saúde, segurança, cultura, relacionamentos, vida noturna e mais — escritos para a comunidade gay, pela comunidade gay.</p> | ||
<div class="h-ctas"> | <div class="h-ctas"> | ||
| 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="# | <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">Sou novo / Apenas curioso</div> | <div class="cyt">Sou novo / Apenas curioso</div> | ||
<div class="cyd">Noções básicas, saúde, consentimento & encontrar sua comunidade.</div> | <div class="cyd">Noções básicas, saúde, consentimento & encontrar sua comunidade.</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="# | <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">Quero explorar o Kink</div> | <div class="cyt">Quero explorar o Kink</div> | ||
<div class="cyd">BDSM, fetiches, cultura leather & dinâmicas de poder.</div> | <div class="cyd">BDSM, fetiches, cultura leather & dinâmicas de poder.</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="# | <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">Melhorar meu relacionamento</div> | <div class="cyt">Melhorar meu relacionamento</div> | ||
<div class="cyd">Comunicação, confiança, não-monogamia & intimidade.</div> | <div class="cyd">Comunicação, confiança, não-monogamia & intimidade.</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="# | <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">Me importo com segurança</span> | <span class="cyt">Me importo com segurança</span> | ||
<span class="cyd">Redução de danos, sexo seguro, PrEP, segurança BDSM & consentimento.</span> | <span class="cyd">Redução de danos, sexo seguro, PrEP, segurança BDSM & consentimento.</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="# | <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">Quero conhecimento avançado</span> | <span class="cyt">Quero conhecimento avançado</span> | ||
<span class="cyd">Psicologia, BDSM avançado, identidade & história queer.</span> | <span class="cyd">Psicologia, BDSM avançado, identidade & história queer.</span> | ||
Latest revision as of 09:20, 30 June 2026
Gratuito · Independente · Sempre aberto
A plataforma de conhecimento gratuita para comunidades gay em todo o mundo
Explorar BigBro Know →500+ artigos · Sempre grátis
Tudo sobre
a vida gay.
Em um só lugar. Grátis.
500+ artigos honestos e essenciais sobre saúde, segurança, cultura, relacionamentos, vida noturna e mais — escritos para a comunidade gay, pela comunidade gay.
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+
Artigos
2M+
Leitores mensais
80+
Tópicos
∞
Sempre grátis
Why BigBro Know
Conhecimento que realmente importa
🛡️
Conhecimento que salva vidas
Da PrEP aos testes de IST, passando pelo consentimento e saúde mental — informações que fazem uma diferença real, escritas com cuidado por pessoas que entendem a comunidade.
📖
Artigos profundos e honestos
Sem clickbait. Sem manchetes. Artigos reais e detalhados que tratam temas complexos com o respeito que merecem.
🔒
Privado por padrão
Sem conta. Sem rastreamento. Sem julgamento. Leia o que precisar — com total privacidade.
✍️
Autores da comunidade
Escritos por pessoas que vivem essa vida. Revisados para garantir a precisão. Nunca por jornalistas externos.
🔍
Totalmente pesquisável
Encontre exatamente o que precisa entre 500+ artigos em segundos.
💙
Sempre grátis
Sem paywall. Sem nível premium. BigBro Know é gratuito e sempre será.
Knowledge Areas
Explorar por categoria
Oito áreas cobrindo todos os aspectos da vida gay.
Conhecimento que salva vidas
Todos merecem acesso a informações honestas e essenciais sobre sua própria vida.
Explorar artigosEntry Points
Escolha seu caminho
Não sabe por onde começar? Escolha o caminho que se encaixa onde você está agora.
Latest
Artigos recentes
Community
Entrando na cena gay pela primeira vez
O que esperar, como se preparar e por onde começar.
Health
Entendendo a PrEP e a prevenção moderna do HIV
Um guia completo sobre a PrEP, como funciona e como acessá-la.
Identity
A pressão da imagem corporal nas comunidades gay
Ideais de beleza, autopercepção e expectativas.
Kink & BDSM
Entendendo o consentimento na troca de poder
O que o consentimento realmente significa e como é praticado.
Relationships
Solidão, cultura hookup e bem-estar emocional
A tensão entre liberdade sexual e conexão.
Health
Navegando a intimidade após um trauma sexual
Processamento, cura e o caminho de volta à conexão.
Curated
Seleção do editor
Readers
O que as pessoas dizem
"
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
Fique informado.
Junte-se a 50.000+ leitores. Destaques semanais, sem spam, sempre grátis.