Homepage/fr: 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+ articles · Toujours gratuit</div> | <div class="h-badge"><span class="h-dot"></span>500+ articles · Toujours gratuit</div> | ||
<h1 class="h-title"> | <h1 class="h-title">Tout sur<br>la vie gay.<br><span class="gt">En un seul endroit. Gratuitement.</span></h1> | ||
<p class="h-sub">500+ articles honnêtes et vitaux sur la santé, la sécurité, la culture, les relations, la vie nocturne et plus — écrits pour la communauté gay, par la communauté gay.</p> | <p class="h-sub">500+ articles honnêtes et vitaux sur la santé, la sécurité, la culture, les relations, la vie nocturne et plus — écrits pour la communauté gay, par la communauté 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">Nouveau / Juste curieux</div> | <div class="cyt">Nouveau / Juste curieux</div> | ||
<div class="cyd">Les bases, la santé, le consentement & trouver votre communauté.</div> | <div class="cyd">Les bases, la santé, le consentement & trouver votre communauté.</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">Je veux explorer le Kink</div> | <div class="cyt">Je veux explorer le Kink</div> | ||
<div class="cyd">BDSM, fétiches, culture cuir & dynamiques de pouvoir.</div> | <div class="cyd">BDSM, fétiches, culture cuir & dynamiques de pouvoir.</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">Améliorer ma relation</div> | <div class="cyt">Améliorer ma relation</div> | ||
<div class="cyd">Communication, confiance, non-monogamie & intimité.</div> | <div class="cyd">Communication, confiance, non-monogamie & intimité.</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">La sécurité me tient à cœur</span> | <span class="cyt">La sécurité me tient à cœur</span> | ||
<span class="cyd">Réduction des risques, sexe sans risque, PrEP, sécurité BDSM & consentement.</span> | <span class="cyd">Réduction des risques, sexe sans risque, PrEP, sécurité BDSM & consentement.</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">Je veux des connaissances avancées</span> | <span class="cyt">Je veux des connaissances avancées</span> | ||
<span class="cyd">Psychologie, BDSM avancé, identité & histoire queer.</span> | <span class="cyd">Psychologie, BDSM avancé, identité & histoire queer.</span> | ||
Latest revision as of 09:20, 30 June 2026
Gratuit · Indépendant · Toujours ouvert
La plateforme de connaissance gratuite pour les communautés gay dans le monde
Explorer BigBro Know →500+ articles · Toujours gratuit
Tout sur
la vie gay.
En un seul endroit. Gratuitement.
500+ articles honnêtes et vitaux sur la santé, la sécurité, la culture, les relations, la vie nocturne et plus — écrits pour la communauté gay, par la communauté 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+
Articles
2M+
Lecteurs mensuels
80+
Sujets
∞
Toujours gratuit
Why BigBro Know
Des connaissances qui comptent vraiment
🛡️
Des connaissances vitales
De la PrEP aux tests MST en passant par le consentement et la santé mentale — des informations qui font vraiment la différence, écrites avec soin par des personnes qui comprennent la communauté.
📖
Des articles approfondis et honnêtes
Pas de clickbait. Des articles vrais et approfondis qui traitent des sujets complexes avec le respect qu'ils méritent.
🔒
Privé par défaut
Pas de compte. Pas de suivi. Pas de jugement. Lisez ce dont vous avez besoin — en toute confidentialité.
✍️
Auteurs de la communauté
Écrits par des personnes qui vivent cette vie. Vérifiés pour leur exactitude. Jamais par des journalistes extérieurs.
🔍
Entièrement consultable
Trouvez exactement ce dont vous avez besoin parmi 500+ articles en quelques secondes.
💙
Toujours gratuit
Pas de paywall. Pas de niveau premium. BigBro Know est gratuit et le restera toujours.
Knowledge Areas
Explorer par catégorie
Huit domaines couvrant tous les aspects de la vie gay.
Des connaissances qui sauvent des vies
Tout le monde mérite d'avoir accès à des informations honnêtes et vitales sur sa propre vie.
Explorer les articlesEntry Points
Choisissez votre chemin
Pas sûr par où commencer? Choisissez le chemin qui vous correspond.
Latest
Articles récents
Community
Entrer dans la scène gay pour la première fois
À quoi s'attendre, comment se préparer et par où commencer.
Health
Comprendre la PrEP et la prévention moderne du VIH
Un guide complet sur la PrEP, son fonctionnement et comment y accéder.
Identity
La pression de l'image corporelle dans les communautés gay
Idéaux de beauté, perception de soi et attentes.
Kink & BDSM
Comprendre le consentement dans l'échange de pouvoir
Ce que le consentement signifie vraiment et comment il se pratique.
Relationships
La solitude, la culture hookup et le bien-être émotionnel
La tension entre liberté sexuelle et connexion.
Health
Naviguer l'intimité après un traumatisme sexuel
Traitement, guérison et le chemin vers la reconnexion.
Curated
Sélection de la rédaction
Health
Santé sexuelle dans la communauté gay
Kink & BDSM
Qu'est-ce que le BDSM?
Identity
Diversité corporelle et attraction dans les communautés gay
Health
Comprendre les tests MST de routine
Nightlife
Première fois dans une soirée sexuelle gay privée
Relationships
Retrouver la confiance sexuelle après une rupture
Readers
Ce que disent les gens
"
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
Restez informé.
Rejoignez 50 000+ lecteurs. Points forts hebdomadaires, sans spam, toujours gratuit.