fcc02f3814
Update CSS to make the hero image section occupy the full viewport width and height (100vw, 100vh), remove border-radius, and apply a grayscale filter. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 5e584ab0-c340-4432-97ef-1972582b60e9 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 79d79fa4-26ae-4521-8a73-299caaa8adb1 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/5e584ab0-c340-4432-97ef-1972582b60e9/LO5wnCQ
1772 lines
33 KiB
CSS
1772 lines
33 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--black: #000000;
|
|
--gray-900: #0f0f0f;
|
|
--gray-800: #1a1a1a;
|
|
--gray-700: #2a2a2a;
|
|
--gray-600: #3a3a3a;
|
|
--gray-400: #666666;
|
|
--gray-300: #999999;
|
|
--white: #ffffff;
|
|
--accent: #3b82f6;
|
|
--accent-hover: #2563eb;
|
|
|
|
--font-display: "Orbitron", monospace;
|
|
--font-body: "Inter", sans-serif;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--black);
|
|
color: var(--white);
|
|
font-family: var(--font-body);
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background:
|
|
radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 40%),
|
|
radial-gradient(circle at 70% 60%, rgba(139, 92, 246, 0.08) 0%, transparent 40%),
|
|
radial-gradient(circle at 50% 80%, rgba(59, 130, 246, 0.06) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
animation: float-background 20s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float-background {
|
|
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
|
33% { transform: translate(2%, -2%) rotate(1deg); }
|
|
66% { transform: translate(-2%, 2%) rotate(-1deg); }
|
|
}
|
|
|
|
nav {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 1000;
|
|
width: calc(100% - 40px);
|
|
max-width: 1200px;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
nav.scrolled {
|
|
top: 10px;
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.nav-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
list-style: none;
|
|
gap: 8px;
|
|
padding: 10px 20px;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
border-radius: 16px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.nav-container li {
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-container li a {
|
|
color: var(--gray-300);
|
|
text-decoration: none;
|
|
font-family: var(--font-body);
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
display: block;
|
|
}
|
|
|
|
.nav-item-center:hover a,
|
|
.nav-item-left:hover a {
|
|
color: var(--white);
|
|
background: var(--gray-700);
|
|
}
|
|
|
|
.nav-item-center.active a,
|
|
.nav-item-left.active a {
|
|
color: #3b82f6;
|
|
}
|
|
|
|
#logo {
|
|
height: 36px;
|
|
padding-right: 16px;
|
|
border-right: 1px solid var(--gray-700);
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.menu-button {
|
|
display: none;
|
|
background: var(--gray-800);
|
|
color: var(--white);
|
|
font-size: 24px;
|
|
width: 48px;
|
|
height: 48px;
|
|
text-align: center;
|
|
padding: 0;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--gray-700);
|
|
cursor: pointer;
|
|
position: fixed;
|
|
z-index: 10000;
|
|
top: 20px;
|
|
right: 20px;
|
|
backdrop-filter: blur(20px);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.menu-button:hover {
|
|
background: var(--gray-700);
|
|
}
|
|
|
|
.nav-side {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 9999;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: rgba(0, 0, 0, 0.95);
|
|
backdrop-filter: blur(20px);
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-side ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.nav-side ul li {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.nav-side ul li a {
|
|
text-decoration: none;
|
|
color: var(--white);
|
|
font-size: 24px;
|
|
font-family: var(--font-body);
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.nav-side ul li a:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.home,
|
|
.rob,
|
|
.contact,
|
|
.contributors,
|
|
.sponsors {
|
|
padding-top: 0;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.rob,
|
|
.contact,
|
|
.contributors,
|
|
.sponsors {
|
|
padding-top: 100px;
|
|
}
|
|
|
|
.competitions {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.bg {
|
|
width: 100%;
|
|
background: var(--black);
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.bg img {
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: all 0.3s ease;
|
|
filter: brightness(0.8);
|
|
}
|
|
|
|
.bg::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 15%;
|
|
background: linear-gradient(to top, var(--black), transparent);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.overlay-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.overlay-container img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.overlay-container .overlay {
|
|
opacity: 0.8;
|
|
pointer-events: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: fill;
|
|
}
|
|
|
|
.footer-text {
|
|
position: absolute;
|
|
bottom: 60px;
|
|
left: 60px;
|
|
color: var(--accent);
|
|
font-size: 32px;
|
|
font-family: var(--font-display);
|
|
z-index: 100;
|
|
}
|
|
|
|
.home-but {
|
|
border: none;
|
|
background: rgba(38, 38, 38, 0.4);
|
|
backdrop-filter: blur(10px);
|
|
color: var(--gray-300);
|
|
transition: all 0.2s ease;
|
|
margin-top: 8px;
|
|
margin-right: 4px;
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.home-but:hover {
|
|
color: var(--white);
|
|
background: rgba(38, 38, 38, 0.6);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
hr {
|
|
width: 100%;
|
|
margin: 8px 0;
|
|
border: none;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--gray-700), transparent);
|
|
}
|
|
|
|
.heading,
|
|
.heading2 {
|
|
font-size: clamp(24px, 3vw, 32px);
|
|
color: var(--white);
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
margin: 0 0 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.home-info,
|
|
.team-info {
|
|
width: 90%;
|
|
max-width: 1200px;
|
|
margin: 40px auto 64px auto;
|
|
padding-bottom: 64px;
|
|
color: var(--white);
|
|
}
|
|
|
|
.team-info {
|
|
padding-top: 64px;
|
|
}
|
|
|
|
.sub-header {
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
font-size: clamp(32px, 5vw, 56px);
|
|
color: var(--white);
|
|
text-align: center;
|
|
margin: 32px 0;
|
|
}
|
|
|
|
.sub-content {
|
|
text-align: center;
|
|
font-size: clamp(16px, 2vw, 20px);
|
|
font-family: var(--font-body);
|
|
color: var(--gray-300);
|
|
line-height: 1.8;
|
|
max-width: 800px;
|
|
margin: 32px auto;
|
|
}
|
|
|
|
.info {
|
|
font-family: var(--font-body);
|
|
font-weight: 500;
|
|
font-size: clamp(16px, 2vw, 20px);
|
|
text-align: center;
|
|
color: var(--gray-300);
|
|
margin: 32px 0;
|
|
}
|
|
|
|
.hero-image-section {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
border-radius: 0;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
margin-left: calc(-50vw + 50%);
|
|
}
|
|
|
|
.hero-team-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
filter: grayscale(100%);
|
|
}
|
|
|
|
.hero-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 100%);
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-text-container {
|
|
position: absolute;
|
|
bottom: 64px;
|
|
left: 48px;
|
|
right: 48px;
|
|
z-index: 2;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.hero-title {
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
font-size: clamp(32px, 5vw, 56px);
|
|
color: var(--white);
|
|
margin: 0 0 24px 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.hero-description {
|
|
font-size: clamp(16px, 2vw, 20px);
|
|
font-family: var(--font-body);
|
|
color: var(--gray-300);
|
|
line-height: 1.8;
|
|
margin: 0 0 20px 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.hero-description:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.stats-container {
|
|
background: var(--gray-900);
|
|
border: 1px solid var(--gray-700);
|
|
border-radius: 16px;
|
|
padding: 48px;
|
|
margin: 48px auto;
|
|
}
|
|
|
|
.stats-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 24px;
|
|
margin: 48px 0;
|
|
}
|
|
|
|
.stats-card {
|
|
text-align: center;
|
|
padding: 32px;
|
|
background: var(--gray-800);
|
|
border-radius: 12px;
|
|
border: 1px solid var(--gray-700);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.stats-card:hover {
|
|
background: var(--gray-700);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.stats-card-header {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(40px, 5vw, 64px);
|
|
color: var(--accent);
|
|
margin: 0;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.stats-card-info {
|
|
margin: 16px 0 0;
|
|
font-family: var(--font-body);
|
|
font-size: clamp(14px, 1.5vw, 16px);
|
|
color: var(--gray-300);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stats-button {
|
|
color: var(--white);
|
|
font-size: 16px;
|
|
font-family: var(--font-body);
|
|
font-weight: 500;
|
|
border-radius: 12px;
|
|
padding: 16px 48px;
|
|
border: 1px solid #3b82f6;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
margin: 32px auto;
|
|
display: block;
|
|
}
|
|
|
|
.stats-button:hover {
|
|
background: #3b82f6;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.about-section-imgp {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 48px;
|
|
margin: 48px 0;
|
|
}
|
|
|
|
.about-sec-img {
|
|
width: 100%;
|
|
height: 500px;
|
|
overflow: hidden;
|
|
border-radius: 16px;
|
|
border: 1px solid var(--gray-700);
|
|
}
|
|
|
|
.about-sec-img img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.about-sec-img img:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.meet-our-team-container {
|
|
position: relative;
|
|
border: 1px solid var(--gray-700);
|
|
width: 100%;
|
|
border-radius: 16px;
|
|
margin: 48px 0;
|
|
height: 500px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#meet-our-team {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
filter: brightness(0.6);
|
|
transition: transform 3s ease;
|
|
}
|
|
|
|
#meet-our-team:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.meet-our-team-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.bottom-center-button {
|
|
position: absolute;
|
|
bottom: 48px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 16px;
|
|
font-family: var(--font-body);
|
|
font-weight: 500;
|
|
border-radius: 12px;
|
|
color: var(--white);
|
|
padding: 16px 48px;
|
|
border: 1px solid #3b82f6;
|
|
background: transparent;
|
|
z-index: 2;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.bottom-center-button:hover {
|
|
background: #3b82f6;
|
|
color: var(--white);
|
|
transform: translateX(-50%) translateY(-2px);
|
|
}
|
|
|
|
.values-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 24px;
|
|
margin: 48px 0 64px 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.value-card {
|
|
background: rgba(26, 26, 26, 0.4);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 16px;
|
|
padding: 32px;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.value-card:hover {
|
|
transform: translateY(-4px);
|
|
background: rgba(26, 26, 26, 0.6);
|
|
box-shadow: 0 12px 24px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.value-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 16px;
|
|
color: var(--white);
|
|
}
|
|
|
|
.value-icon svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.value-title {
|
|
font-family: var(--font-display);
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: var(--white);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.value-description {
|
|
font-family: var(--font-body);
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
color: var(--gray-300);
|
|
margin: 0;
|
|
}
|
|
|
|
.team-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 48px;
|
|
margin: 64px 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.team-text {
|
|
flex: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
.team-text .sub-header {
|
|
text-align: left;
|
|
margin: 0 0 24px 0;
|
|
}
|
|
|
|
.team-text .sub-content {
|
|
text-align: left;
|
|
margin: 0 0 32px 0;
|
|
}
|
|
|
|
.team-image-wrapper {
|
|
flex: 1;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
height: 400px;
|
|
position: relative;
|
|
}
|
|
|
|
.team-image-wrapper img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
filter: brightness(0.7);
|
|
transition: transform 3s ease;
|
|
}
|
|
|
|
.team-image-wrapper:hover img {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.team-cta-button {
|
|
font-size: 16px;
|
|
font-family: var(--font-body);
|
|
font-weight: 500;
|
|
border-radius: 12px;
|
|
color: var(--white);
|
|
padding: 16px 32px;
|
|
background: rgba(59, 130, 246, 0.1);
|
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
|
cursor: pointer;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.team-cta-button:hover {
|
|
background: rgba(59, 130, 246, 0.2);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.values-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
margin: 32px 0;
|
|
}
|
|
|
|
.value-card {
|
|
padding: 24px;
|
|
}
|
|
|
|
.team-section {
|
|
flex-direction: column;
|
|
gap: 32px;
|
|
}
|
|
|
|
.team-text .sub-header,
|
|
.team-text .sub-content {
|
|
text-align: center;
|
|
}
|
|
|
|
.team-image-wrapper {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
}
|
|
|
|
.sponsors-container {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 32px;
|
|
margin: 48px 0;
|
|
}
|
|
|
|
.sponsors-card {
|
|
width: 100%;
|
|
height: auto;
|
|
object-fit: contain;
|
|
filter: brightness(0) invert(1);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.sponsors-card:hover {
|
|
filter: brightness(0) invert(1) drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
#sponnnnn {
|
|
background: #0a0a0a;
|
|
border: 1px solid #1a1a1a;
|
|
padding: 48px;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
#sponsors-more-button {
|
|
margin: 48px auto;
|
|
padding: 16px 48px;
|
|
font-size: 16px;
|
|
font-family: var(--font-body);
|
|
font-weight: 500;
|
|
border-radius: 12px;
|
|
border: 1px solid #3b82f6;
|
|
color: var(--white);
|
|
background: transparent;
|
|
display: block;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#sponsors-more-button:hover {
|
|
background: #3b82f6;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.card-container,
|
|
.card-container-sponsors {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: 40px;
|
|
margin: 64px 0;
|
|
max-width: 1200px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.card,
|
|
.card-sponsors {
|
|
background: var(--gray-900);
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--gray-700);
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 280px;
|
|
}
|
|
|
|
.card:hover,
|
|
.card-sponsors:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 20px 40px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.card-content,
|
|
.card-content-sponsors {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 64px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.card img,
|
|
.card-sponsors img {
|
|
max-width: 100%;
|
|
max-height: 180px;
|
|
object-fit: contain;
|
|
filter: brightness(0) invert(1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card:hover img,
|
|
.card-sponsors:hover img {
|
|
transform: scale(1.15);
|
|
filter: brightness(0) invert(1) drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
|
|
}
|
|
|
|
.members-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 40px;
|
|
padding: 64px;
|
|
background: var(--gray-900);
|
|
border: 1px solid var(--gray-700);
|
|
border-radius: 20px;
|
|
margin: 64px auto;
|
|
max-width: 1200px;
|
|
}
|
|
|
|
.member-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 48px 32px;
|
|
background: var(--gray-800);
|
|
border-radius: 16px;
|
|
border: 1px solid var(--gray-700);
|
|
transition: all 0.3s ease;
|
|
width: 100%;
|
|
}
|
|
|
|
.member-card:hover {
|
|
background: var(--gray-700);
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 20px 40px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.member-image {
|
|
width: 120px;
|
|
height: 120px;
|
|
border: 3px solid var(--accent);
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.member-image:hover {
|
|
transform: rotate(360deg);
|
|
box-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
.member-name {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
color: var(--white);
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.member-role {
|
|
font-size: 13px;
|
|
margin: 12px 0 0;
|
|
color: var(--gray-400);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sidebar {
|
|
position: fixed;
|
|
width: 250px;
|
|
height: calc(100vh - 150px);
|
|
top: 120px;
|
|
left: 32px;
|
|
background: #0a0a0a;
|
|
border: 1px solid #1a1a1a;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
overflow-y: auto;
|
|
z-index: 100;
|
|
}
|
|
|
|
.sidebar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.sidebar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.sidebar::-webkit-scrollbar-thumb {
|
|
background: var(--gray-700);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.sidebar-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.sidebar a {
|
|
text-decoration: none;
|
|
font-size: 18px;
|
|
color: var(--gray-300);
|
|
font-family: var(--font-body);
|
|
font-weight: 500;
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
text-align: left;
|
|
}
|
|
|
|
.sidebar a:hover {
|
|
color: var(--white);
|
|
background: rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
.sidebar a.active {
|
|
color: var(--white);
|
|
background: #3b82f6;
|
|
}
|
|
|
|
.competitions-container {
|
|
color: var(--white);
|
|
padding-top: 120px;
|
|
padding-left: 300px;
|
|
padding-right: 32px;
|
|
padding-bottom: 64px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
}
|
|
|
|
.competitions-inner {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
}
|
|
|
|
.competition-year {
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
font-size: clamp(40px, 6vw, 64px);
|
|
margin: 0px auto 24px auto;
|
|
color: var(--white);
|
|
text-align: center;
|
|
}
|
|
|
|
.competition-header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
font-size: 18px;
|
|
font-family: var(--font-body);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.middle-dot {
|
|
color: var(--gray-400);
|
|
}
|
|
|
|
.competition-card {
|
|
background: var(--gray-900);
|
|
padding: 48px;
|
|
border: 1px solid var(--gray-700);
|
|
border-radius: 16px;
|
|
margin-bottom: 32px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.competition-card:hover {
|
|
box-shadow: 0 8px 16px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.competition-card-img {
|
|
width: 100%;
|
|
margin: 32px 0;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--gray-700);
|
|
}
|
|
|
|
.competition-card-img img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
filter: brightness(0.8);
|
|
}
|
|
|
|
.competition-date {
|
|
color: var(--gray-400);
|
|
}
|
|
|
|
.competition-subtitle {
|
|
font-size: 16px;
|
|
font-family: var(--font-body);
|
|
font-weight: 600;
|
|
color: var(--accent);
|
|
margin: 32px 0 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.competition-description,
|
|
.competition-awards {
|
|
font-family: var(--font-body);
|
|
font-size: 16px;
|
|
color: var(--gray-300);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.competition-awards {
|
|
padding-left: 32px;
|
|
}
|
|
|
|
span.sponsors,
|
|
span.contact,
|
|
span.team,
|
|
span.about,
|
|
span.stats,
|
|
span.competitions,
|
|
span.gallary {
|
|
position: relative;
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
margin: -8px;
|
|
}
|
|
|
|
span.emoji::before,
|
|
span.emoji::after {
|
|
content: "";
|
|
position: absolute;
|
|
opacity: 0;
|
|
transform: scale(0.5) rotate(-30deg);
|
|
transition: opacity 120ms ease-out, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5);
|
|
}
|
|
|
|
span.emoji::after {
|
|
top: revert;
|
|
left: revert;
|
|
}
|
|
|
|
span.contact::before,
|
|
span.contact::after {
|
|
content: "📱";
|
|
font-size: 32px;
|
|
}
|
|
|
|
span.about::before,
|
|
span.about::after {
|
|
content: "👋";
|
|
font-size: 32px;
|
|
}
|
|
|
|
span.stats::before,
|
|
span.stats::after {
|
|
content: "📊";
|
|
font-size: 32px;
|
|
}
|
|
|
|
span.gallary::before,
|
|
span.gallary::after {
|
|
content: "✊";
|
|
font-size: 32px;
|
|
}
|
|
|
|
span.sponsors::before,
|
|
span.sponsors::after {
|
|
content: "❤️";
|
|
font-size: 32px;
|
|
}
|
|
|
|
span.team::before,
|
|
span.team::after {
|
|
content: "👥";
|
|
font-size: 32px;
|
|
}
|
|
|
|
span.competitions::before,
|
|
span.competitions::after {
|
|
content: "🥇";
|
|
font-size: 32px;
|
|
}
|
|
|
|
span.emoji:hover::before,
|
|
span.emoji:hover::after {
|
|
transform: scale(1.2) rotate(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
.robots-container {
|
|
width: 100%;
|
|
margin: 48px 0;
|
|
}
|
|
|
|
.robots-inner {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 32px;
|
|
}
|
|
|
|
.robo-card {
|
|
position: relative;
|
|
background: var(--gray-800);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--gray-700);
|
|
aspect-ratio: 4/3;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.robo-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 16px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.robo-card img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
filter: brightness(0.6);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.robo-card:hover img {
|
|
filter: brightness(0.4);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.robo-card-txt {
|
|
position: absolute;
|
|
bottom: 32px;
|
|
left: 32px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.robo-card-name {
|
|
font-size: 32px;
|
|
margin: 0;
|
|
color: var(--white);
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.robo-card-desc {
|
|
font-size: 16px;
|
|
margin: 8px 0 0;
|
|
color: var(--gray-300);
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.nav-item-left {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.sidebar {
|
|
display: none;
|
|
}
|
|
|
|
.competitions-container {
|
|
padding-left: 32px !important;
|
|
padding-right: 32px !important;
|
|
padding-top: 100px !important;
|
|
}
|
|
|
|
#comp {
|
|
margin-bottom: 20px !important;
|
|
}
|
|
|
|
#comp-hr {
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
width: 100% !important;
|
|
height: 1px !important;
|
|
background: var(--gray-700) !important;
|
|
margin: 0 0 40px 0 !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.stats-cards {
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 850px) {
|
|
nav {
|
|
display: none;
|
|
}
|
|
|
|
.menu-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.footer-text {
|
|
font-size: 24px;
|
|
bottom: 30px;
|
|
left: 30px;
|
|
}
|
|
|
|
.home-info,
|
|
.team-info {
|
|
width: 95%;
|
|
margin-top: 80px;
|
|
}
|
|
|
|
.rob,
|
|
.contact,
|
|
.contributors,
|
|
.sponsors {
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
padding-top: 80px;
|
|
}
|
|
|
|
.stats-cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sponsors-container,
|
|
.card-container,
|
|
.card-container-sponsors {
|
|
grid-template-columns: 1fr;
|
|
margin: 32px 0;
|
|
}
|
|
|
|
.members-container {
|
|
grid-template-columns: 1fr;
|
|
padding: 32px 24px;
|
|
margin: 32px auto;
|
|
}
|
|
|
|
.competition-header {
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.middle-dot {
|
|
display: none;
|
|
}
|
|
|
|
.competitions-container {
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
margin-top: 80px;
|
|
}
|
|
|
|
.stats-container {
|
|
padding: 32px 24px;
|
|
margin: 32px 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
nav {
|
|
top: 12px;
|
|
width: calc(100% - 24px);
|
|
}
|
|
|
|
.menu-button {
|
|
top: 12px;
|
|
left: 50%;
|
|
right: auto;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.sub-header {
|
|
font-size: clamp(28px, 8vw, 40px);
|
|
}
|
|
|
|
.footer-text {
|
|
font-size: 20px;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
}
|
|
|
|
.home-info,
|
|
.team-info {
|
|
margin: 80px auto 16px auto;
|
|
padding-bottom: 24px;
|
|
}
|
|
|
|
.rob,
|
|
.contact,
|
|
.contributors,
|
|
.sponsors {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
padding-top: 70px;
|
|
}
|
|
|
|
.competitions-container {
|
|
margin-left: 16px;
|
|
margin-right: 16px;
|
|
margin-top: 70px;
|
|
}
|
|
|
|
.competition-card {
|
|
padding: 24px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.card-container,
|
|
.card-container-sponsors {
|
|
padding: 0 8px;
|
|
margin: 24px 0;
|
|
}
|
|
|
|
.sponsors-container {
|
|
margin: 24px 0;
|
|
}
|
|
|
|
.members-container {
|
|
padding: 24px 16px;
|
|
margin: 24px auto;
|
|
}
|
|
|
|
.stats-container {
|
|
padding: 24px 16px;
|
|
margin: 24px 0;
|
|
}
|
|
|
|
.hero-image-section {
|
|
height: 100vh;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.hero-text-container {
|
|
bottom: 40px;
|
|
left: 24px;
|
|
right: 24px;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: clamp(24px, 6vw, 36px);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.hero-description {
|
|
font-size: clamp(14px, 3vw, 16px);
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
|
|
#comp {
|
|
margin: 0 0 20px 0 !important;
|
|
padding: 0 !important;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
#comp-hr {
|
|
width: 100%;
|
|
margin: 0 0 40px 0;
|
|
}
|
|
|
|
.competition-year {
|
|
margin-top: 25px !important;
|
|
font-weight: 100 !important;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
body {
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background:
|
|
radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-20px); }
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% center; }
|
|
100% { background-position: 200% center; }
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.nav-container {
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.nav-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -1px;
|
|
border-radius: 16px;
|
|
padding: 1px;
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.3));
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
opacity: 0;
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
|
|
.nav-container:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.stats-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stats-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: linear-gradient(
|
|
45deg,
|
|
transparent,
|
|
rgba(59, 130, 246, 0.1),
|
|
transparent
|
|
);
|
|
transform: rotate(45deg);
|
|
transition: all 0.6s ease;
|
|
opacity: 0;
|
|
}
|
|
|
|
.stats-card:hover::before {
|
|
opacity: 1;
|
|
animation: shimmer 2s infinite;
|
|
}
|
|
|
|
.card,
|
|
.card-sponsors,
|
|
.member-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card::after,
|
|
.card-sponsors::after,
|
|
.member-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
|
|
transform: translate(-50%, -50%);
|
|
transition: width 0.6s ease, height 0.6s ease;
|
|
}
|
|
|
|
.card:hover::after,
|
|
.card-sponsors:hover::after,
|
|
.member-card:hover::after {
|
|
width: 300%;
|
|
height: 300%;
|
|
}
|
|
|
|
.hero-image-section {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-image-section::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), transparent);
|
|
z-index: 3;
|
|
opacity: 0;
|
|
transition: opacity 0.6s ease;
|
|
}
|
|
|
|
.hero-image-section:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.stats-button,
|
|
.bottom-center-button,
|
|
#sponsors-more-button {
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.stats-button::before,
|
|
.bottom-center-button::before,
|
|
#sponsors-more-button::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transition: width 0.4s ease, height 0.4s ease;
|
|
}
|
|
|
|
.stats-button:hover::before,
|
|
.bottom-center-button:hover::before,
|
|
#sponsors-more-button:hover::before {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
.stats-card-header {
|
|
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
background-size: 200% 200%;
|
|
animation: gradient-shift 3s ease infinite;
|
|
}
|
|
|
|
@keyframes gradient-shift {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
.heading {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
.heading::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -8px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, transparent, #3b82f6, transparent);
|
|
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.heading:hover::after {
|
|
width: 0;
|
|
}
|
|
|
|
.robo-card {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.robo-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
|
|
opacity: 0;
|
|
z-index: 1;
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
|
|
.robo-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.competition-card {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.sponsors-card {
|
|
position: relative;
|
|
}
|
|
|
|
.sponsors-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -5px;
|
|
background: linear-gradient(45deg, #3b82f6, #8b5cf6);
|
|
border-radius: 8px;
|
|
opacity: 0;
|
|
z-index: -1;
|
|
filter: blur(20px);
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
|
|
.sponsors-card:hover::after {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.overlay-container .overlay {
|
|
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
hr {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
hr::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent);
|
|
animation: shimmer 3s infinite;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
}
|
|
|
|
.member-image {
|
|
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.home-but {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.home-but::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
background: rgba(59, 130, 246, 0.3);
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transition: width 0.3s ease, height 0.3s ease;
|
|
}
|
|
|
|
.home-but:hover::before {
|
|
width: 150%;
|
|
height: 150%;
|
|
}
|
|
|
|
.scroll-indicator {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
|
z-index: 9999;
|
|
transform-origin: left;
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
|
|
* {
|
|
cursor: default;
|
|
}
|
|
|
|
a, button, .stats-card, .card, .member-card {
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
body {
|
|
cursor: none;
|
|
}
|
|
|
|
.custom-cursor {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid #3b82f6;
|
|
border-radius: 50%;
|
|
position: fixed;
|
|
pointer-events: none;
|
|
z-index: 10000;
|
|
transition: all 0.15s ease;
|
|
transform: translate(-50%, -50%);
|
|
mix-blend-mode: difference;
|
|
}
|
|
|
|
.custom-cursor-follower {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
|
border-radius: 50%;
|
|
position: fixed;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
transition: all 0.3s ease;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.custom-cursor.hover {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
@media (max-width: 850px) {
|
|
.custom-cursor,
|
|
.custom-cursor-follower {
|
|
display: none;
|
|
}
|
|
|
|
body {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
.sub-header,
|
|
.hero-title {
|
|
background: linear-gradient(135deg, #ffffff, #a0a0a0);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.border-triangle {
|
|
display: none;
|
|
} |