Homepage: Difference between revisions
No edit summary |
Modern homepage redesign: removed languages sidebar menu, added AlphaX banner, modernized hero animations |
||
| Line 120: | Line 120: | ||
@media(max-width:900px){.bento{grid-template-columns:1fr;}.bw{grid-column:span 1;}.stats{grid-template-columns:repeat(2,1fr);}.fg{grid-template-columns:1fr 1fr;}} | @media(max-width:900px){.bento{grid-template-columns:1fr;}.bw{grid-column:span 1;}.stats{grid-template-columns:repeat(2,1fr);}.fg{grid-template-columns:1fr 1fr;}} | ||
@media(max-width:600px){.nav-links-wrap{display:none;}.fg{grid-template-columns:1fr;}} | @media(max-width:600px){.nav-links-wrap{display:none;}.fg{grid-template-columns:1fr;}} | ||
/* AlphaX Banner */ | |||
.alphax-banner{width:100%;background:linear-gradient(135deg,#0D0D0D 0%,#1a0800 50%,#0D0D0D 100%);border-bottom:1px solid rgba(255,106,33,.2);padding:80px 2rem 80px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-top:60px;} | |||
.alphax-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(255,106,33,.12) 0%,transparent 70%);pointer-events:none;} | |||
.alphax-banner::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 10%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 10%,transparent 100%);pointer-events:none;} | |||
.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-dot{width:6px;height:6px;border-radius:50%;background:var(--or);animation:pulse 2s infinite;} | |||
.ab-logo{font-family:'Space Grotesk',sans-serif;font-size:clamp(3.5rem,8vw,6.5rem);font-weight:900;letter-spacing:-.05em;line-height:.9;margin-bottom:1rem;} | |||
.ab-logo-a{background:linear-gradient(135deg,#FF6A21,#FF8C42,#FFB347);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} | |||
.ab-logo-x{color:#fff;} | |||
.ab-tagline{font-size:clamp(1rem,2.5vw,1.3rem);color:rgba(255,255,255,.55);font-weight:400;letter-spacing:.02em;margin-bottom:2rem;line-height:1.5;} | |||
.ab-cta{display:inline-flex;align-items:center;gap:.6rem;background:var(--grad);color:#fff;padding:.7rem 1.8rem;border-radius:10px;font-weight:700;font-size:.95rem;text-decoration:none;box-shadow:0 0 30px rgba(255,106,33,.3);transition:transform .2s,box-shadow .2s;} | |||
.ab-cta:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(255,106,33,.5);} | |||
.ab-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,33,.08) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;} | |||
/* Enhanced modern styles */ | |||
.hero{padding-top:0 !important;} | |||
.h-badge{animation:float 3s ease-in-out infinite;} | |||
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} | |||
.hcp{position:relative;overflow:hidden;} | |||
.hcp::after{content:'';position:absolute;top:-50%;left:-60%;width:200%;height:200%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-100%);transition:transform .6s;} | |||
.hcp:hover::after{transform:translateX(60%);} | |||
</style> | </style> | ||
| Line 147: | Line 170: | ||
</div> | </div> | ||
</nav> | </nav> | ||
<div class="alphax-banner"> | |||
<div class="ab-glow"></div> | |||
<div class="ab-inner"> | |||
<div class="ab-eyebrow"><span class="ab-dot"></span> Free · Independent · Always Open</div> | |||
<div class="ab-logo"><span class="ab-logo-a">Alpha</span><span class="ab-logo-x">X</span></div> | |||
<p class="ab-tagline">The free knowledge platform for gay communities worldwide</p> | |||
<a href="/wiki/Start_Here" class="ab-cta">Explore AlphaX →</a> | |||
</div> | |||
</div> | |||
<section class="hero"> | <section class="hero"> | ||