mirror of
https://github.com/System-End/YSWS-Catalog.git
synced 2026-04-19 19:55:07 +00:00
Revamp homepage layout and styling for YSWS catalog
This commit is contained in:
PawiX25
parent
24e31fcbcc
commit
06f2f1c667
2 changed files with 737 additions and 31 deletions
117
index.html
117
index.html
|
|
@ -6,36 +6,94 @@
|
|||
<title>Hack Club YSWS Programs</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.js"></script>
|
||||
</head>
|
||||
<body class="noise">
|
||||
<body class="noise parallax-wrapper">
|
||||
<div class="gradient-bg">
|
||||
<div class="gradient-1"></div>
|
||||
<div class="gradient-2"></div>
|
||||
<div class="gradient-3"></div>
|
||||
<div class="gradient-blob gradient-1"></div>
|
||||
<div class="gradient-blob gradient-2"></div>
|
||||
<div class="gradient-blob gradient-3"></div>
|
||||
</div>
|
||||
<a href="https://hackclub.com" target="_blank" rel="noopenner noreferrer">
|
||||
<img src="https://assets.hackclub.com/flag-orpheus-top.svg" width="15%" height=auto style="padding-left: 20px;" class="max-w-20 sm:max-w-36 left-4 sm:left-12 absolute"></a>
|
||||
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode">
|
||||
🌙
|
||||
</button>
|
||||
<div class="container glassmorphic">
|
||||
<div class="header-content text-center">
|
||||
<h1 class="ultratitle">YSWS Programs</h1>
|
||||
<p class="lead">A comprehensive list of Hack Club's "You Ship, We Ship" programs.</p>
|
||||
<p class="caption">Want to update or add something? Submit a PR on <a href="https://github.com/hackclub/YSWS-Catalog" target="_blank" class="hover-underline">GitHub</a>!</p>
|
||||
|
||||
<div class="circuit-bg"></div>
|
||||
<div class="grid-overlay"></div>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="logo-container">
|
||||
<a href="https://hackclub.com" target="_blank" rel="noopenner noreferrer">
|
||||
<img src="https://assets.hackclub.com/flag-orpheus-top.svg" alt="Hack Club" class="logo">
|
||||
</a>
|
||||
</div>
|
||||
<nav class="main-nav">
|
||||
<a href="https://hackclub.com/slack" target="_blank" rel="noopenner noreferrer" class="nav-link">Join Slack</a>
|
||||
<a href="https://github.com/hackclub/YSWS-Catalog" target="_blank" rel="noopenner noreferrer" class="nav-link">GitHub</a>
|
||||
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode">🌙</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="hero-content">
|
||||
<div class="hero-animated-text">
|
||||
<span class="hero-text-shadow">You Ship,</span>
|
||||
<span class="animated-element">We Ship.</span>
|
||||
</div>
|
||||
<h1 class="hero-title">YSWS <span class="accent">Programs</span></h1>
|
||||
<p class="hero-description">Build something amazing, and Hack Club will ship you something epic in return.</p>
|
||||
<div class="hero-cards">
|
||||
<div class="hero-card">
|
||||
<div class="hero-card-inner">
|
||||
<div class="hero-card-front">
|
||||
<div class="hero-card-icon">🚀</div>
|
||||
<h3>Ship Your Project</h3>
|
||||
<p>Create something awesome</p>
|
||||
</div>
|
||||
<div class="hero-card-back">
|
||||
<p>Design a PCB, build a game, create an API, or make something amazing!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-card">
|
||||
<div class="hero-card-inner">
|
||||
<div class="hero-card-front">
|
||||
<div class="hero-card-icon">🎁</div>
|
||||
<h3>Get Rewarded</h3>
|
||||
<p>Receive awesome gear</p>
|
||||
</div>
|
||||
<div class="hero-card-back">
|
||||
<p>From hardware to subscriptions, get the tools you need to keep building cool things!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#programs-list" class="cta-button">Explore Programs<span class="button-arrow">→</span></a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="container glassmorphic programs-container" id="programs-list">
|
||||
<div class="programs-header">
|
||||
<div class="programs-title-container">
|
||||
<h2 class="section-title">YSWS <span class="accent">Programs</span></h2>
|
||||
<div class="programs-subtitle">
|
||||
<p class="lead">Find your next project opportunity and the rewards that come with it.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="programs-stats">
|
||||
<div class="stat">
|
||||
<div class="stat-number" id="active-count">0</div>
|
||||
<div class="stat-label">Active Programs</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search-container floating">
|
||||
<input type="search" id="program-search" placeholder="Search programs..." class="search-input">
|
||||
<div class="search-container">
|
||||
<div class="search-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
||||
</div>
|
||||
<input type="search" id="program-search" placeholder="Search for programs..." class="search-input">
|
||||
</div>
|
||||
|
||||
<div class="stats-bar">
|
||||
<p class="active-count"><span id="active-count">0</span> active programs</p>
|
||||
</div>
|
||||
|
||||
<div class="controls-wrapper">
|
||||
<div class="filter-container">
|
||||
<button class="filter-btn active" data-category="all">All</button>
|
||||
|
|
@ -53,10 +111,23 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="programs-container" class="fade-in">
|
||||
</div>
|
||||
<div id="programs-container" class="fade-in"></div>
|
||||
</div>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-column">
|
||||
<a href="https://hackclub.com" target="_blank" class="footer-logo">
|
||||
<img src="https://assets.hackclub.com/icon-rounded.png" alt="Hack Club" width="36">
|
||||
</a>
|
||||
<p>Built with ❤️ by the Hack Club community</p>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<p class="caption">Want to update or add something? Submit a PR on <a href="https://github.com/hackclub/YSWS-Catalog" target="_blank">GitHub</a>!</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div id="program-modal" class="modal">
|
||||
<div class="program-position"><span class="current-position"></span></div>
|
||||
<button class="modal-nav modal-prev" aria-label="Previous program">←</button>
|
||||
|
|
|
|||
651
styles.css
651
styles.css
|
|
@ -84,7 +84,6 @@
|
|||
--shadow-card: 0 4px 8px rgba(0, 0, 0, 0.125);
|
||||
--shadow-elevated: 0 1px 2px rgba(0, 0, 0, 0.0625),
|
||||
0 8px 12px rgba(0, 0, 0, 0.125);
|
||||
|
||||
--dark-background: var(--darker);
|
||||
--dark-text: var(--snow);
|
||||
--dark-elevated: var(--dark);
|
||||
|
|
@ -105,9 +104,9 @@
|
|||
}
|
||||
|
||||
.theme-toggle {
|
||||
position: fixed;
|
||||
top: var(--spacing-3);
|
||||
right: var(--spacing-3);
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
padding: var(--spacing-2);
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
|
|
@ -115,16 +114,18 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--elevated);
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
z-index: 10;
|
||||
transform-origin: center;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
transform: rotate(180deg) scale(1.1);
|
||||
transform: rotate(45deg) scale(1.1);
|
||||
background: rgba(236, 55, 80, 0.1);
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -1246,4 +1247,638 @@ body.modal-open {
|
|||
.header-content {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 2rem;
|
||||
z-index: 100;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(8px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.dark-theme .site-header {
|
||||
background: rgba(18, 18, 23, 0.5);
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
padding: 0.75rem 2rem;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark-theme .site-header.scrolled {
|
||||
background: rgba(18, 18, 23, 0.8);
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 80px;
|
||||
width: auto;
|
||||
transition: transform 0.3s ease;
|
||||
margin-top: -20px;
|
||||
margin-bottom: -20px;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: var(--radii-default);
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0%;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: var(--primary);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
transform: rotate(45deg) scale(1.1);
|
||||
background: rgba(236, 55, 80, 0.1);
|
||||
}
|
||||
|
||||
.gradient-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gradient-blob {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.gradient-1 {
|
||||
background: var(--gradient-1);
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
left: -100px;
|
||||
top: -100px;
|
||||
animation: float-animation 20s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.gradient-2 {
|
||||
background: var(--gradient-2);
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
right: -200px;
|
||||
top: 30%;
|
||||
animation: float-animation 25s ease-in-out infinite alternate-reverse;
|
||||
}
|
||||
|
||||
.gradient-3 {
|
||||
background: var(--gradient-3);
|
||||
width: 700px;
|
||||
height: 700px;
|
||||
left: 30%;
|
||||
bottom: -200px;
|
||||
animation: float-animation 18s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes float-animation {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50px, 50px) scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: translate(50px, -20px) scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.circuit-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 10 H80 V20 H20 V10z M80 10v10 M20 20v40 M80 20v40 M20 60h25 M45 60v10 M45 70h35 M20 30h25 M45 30h35 M45 30v10 M80 40v20 M50 40h10 M60 40v10' fill='none' stroke-width='1' stroke-opacity='0.03' stroke='%23ec3750'/%3E%3C/svg%3E");
|
||||
opacity: 0.4;
|
||||
z-index: -5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.grid-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
z-index: -6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dark-theme .grid-overlay {
|
||||
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 80px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.hero-animated-text {
|
||||
display: block;
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-animated-text .hero-text-shadow {
|
||||
display: block;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.hero-animated-text .animated-element {
|
||||
display: block;
|
||||
color: var(--primary);
|
||||
position: relative;
|
||||
padding: 0.5rem 0;
|
||||
animation: focus-in 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
|
||||
}
|
||||
|
||||
@keyframes focus-in {
|
||||
0% {
|
||||
filter: blur(12px);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
filter: blur(0);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 6rem;
|
||||
font-weight: 900;
|
||||
margin: 1rem 0 1.5rem;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1.2;
|
||||
padding-bottom: 0.5rem;
|
||||
background: linear-gradient(90deg, var(--text) 0%, var(--red) 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
position: relative;
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
|
||||
.hero-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -0.75rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100px;
|
||||
height: 5px;
|
||||
background: var(--primary);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.hero-title .accent {
|
||||
background: linear-gradient(90deg, var(--red) 0%, var(--orange) 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 1.5rem;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 2.5rem;
|
||||
color: var(--text);
|
||||
opacity: 0.9;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero-cards {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
justify-content: center;
|
||||
margin-bottom: 3rem;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
width: 280px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
transform: perspective(1000px);
|
||||
}
|
||||
|
||||
.hero-card-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.8s;
|
||||
}
|
||||
|
||||
.hero-card:hover .hero-card-inner {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.hero-card-front, .hero-card-back {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backface-visibility: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark-theme .hero-card-front, .dark-theme .hero-card-back {
|
||||
background: rgba(23, 23, 29, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.hero-card-back {
|
||||
transform: rotateY(180deg);
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-card-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero-card h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.hero-card p {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
color: var(--text);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.hero-card-back p {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
padding: 1rem 2.5rem;
|
||||
border-radius: 50px;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 0 rgba(0, 0, 0, 0.2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cta-button:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.button-arrow {
|
||||
display: inline-block;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.cta-button:hover .button-arrow {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.programs-container {
|
||||
position: relative;
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 5rem;
|
||||
padding: 3rem;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.1);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(15px);
|
||||
}
|
||||
|
||||
.dark-theme .programs-container {
|
||||
background: rgba(18, 18, 23, 0.8);
|
||||
}
|
||||
|
||||
.programs-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.programs-title-container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.section-title .accent {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.programs-subtitle {
|
||||
max-width: 600px;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text);
|
||||
opacity: 0.9;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.programs-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.stat {
|
||||
text-align: center;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
color: var(--primary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 1rem;
|
||||
color: var (--text);
|
||||
opacity: 0.8;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 1.25rem 3rem;
|
||||
font-size: 1.1rem;
|
||||
border-radius: 50px;
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 8px 20px rgba(236, 55, 80, 0.15);
|
||||
background: white;
|
||||
}
|
||||
|
||||
.dark-theme .search-input {
|
||||
background: rgba(23, 23, 29, 0.7);
|
||||
}
|
||||
|
||||
.dark-theme .search-input:focus {
|
||||
background: var(--dark);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: 1.25rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.controls-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.filter-container, .sort-container {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-btn, .sort-btn {
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-radius: 50px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
color: var (--text);
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.dark-theme .filter-btn, .dark-theme .sort-btn {
|
||||
background: rgba(23, 23, 29, 0.7);
|
||||
}
|
||||
|
||||
.filter-btn:hover, .sort-btn:hover {
|
||||
background: rgba(236, 55, 80, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.filter-btn.active, .sort-btn.active {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.programs-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.program-card {
|
||||
position: relative;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 1.5rem;
|
||||
height: 100%;
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dark-theme .program-card {
|
||||
background: rgba(23, 23, 29, 0.7);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.program-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.program-card:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.program-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
position: relative;
|
||||
padding: 3rem 0 2rem;
|
||||
margin-top: 5rem;
|
||||
background: var(--elevated);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.footer-column {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
display: inline-block;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue