Initial VTuber Awards implementation
This commit is contained in:
AzuTear
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
@@ -0,0 +1,269 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>VTuber Star Awards</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=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="site-frame">
|
||||
<header class="topbar">
|
||||
<a class="brand" href="#home">
|
||||
<span class="brand-star">✦</span>
|
||||
<span class="brand-copy">
|
||||
<strong>VTUBER</strong>
|
||||
<small>STAR AWARDS</small>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<nav class="nav">
|
||||
<a href="#home" class="is-active">Home</a>
|
||||
<a href="#process">Ablauf</a>
|
||||
<a href="#featured">Kategorien</a>
|
||||
<a href="#archive">Gewinner</a>
|
||||
<a href="#faq">FAQ</a>
|
||||
<a href="#about">Ueber die Show</a>
|
||||
</nav>
|
||||
|
||||
<div class="topbar-actions">
|
||||
<button class="ghost-button" type="button">Anmelden</button>
|
||||
<button class="primary-button" type="button">Jetzt voten</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero" id="home">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow">Die groesste Community-Auszeichnung</p>
|
||||
<h1>VTuber Star Awards</h1>
|
||||
<p class="hero-body">
|
||||
Feiere die talentiertesten VTuber, Creator und Momente des Jahres -
|
||||
gewaehlt von der Community, fuer die Community.
|
||||
</p>
|
||||
|
||||
<div class="hero-cta">
|
||||
<a class="primary-button" href="#nomination-cta">Jetzt nominieren</a>
|
||||
<a class="secondary-button" href="#voting-cta">Jetzt voten</a>
|
||||
</div>
|
||||
|
||||
<div class="show-meta">
|
||||
<p class="eyebrow muted">Die Show findet statt am</p>
|
||||
<h2>24. Januar 2026</h2>
|
||||
<p>Live auf YouTube & Twitch</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-art">
|
||||
<div class="hero-illustration">
|
||||
<div class="hero-placeholder" aria-hidden="true"></div>
|
||||
</div>
|
||||
<div class="hero-signature">
|
||||
<span>Jayuhime</span>
|
||||
<small>Host of the Show</small>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="phase-panel" aria-label="Aktuelle Phase">
|
||||
<div class="phase-copy">
|
||||
<p class="eyebrow">Aktuelle Phase</p>
|
||||
<h3>Voting</h3>
|
||||
<p>
|
||||
Stimme in deinen Lieblingskategorien ab und unterstuetze deine
|
||||
Favoriten.
|
||||
</p>
|
||||
|
||||
<div class="timer">
|
||||
<div><strong>14</strong><span>Tage</span></div>
|
||||
<div><strong>07</strong><span>Std</span></div>
|
||||
<div><strong>32</strong><span>Min</span></div>
|
||||
<div><strong>45</strong><span>Sek</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="phase-track">
|
||||
<div class="phase-step is-complete">
|
||||
<span>✓</span>
|
||||
<strong>Nominierung</strong>
|
||||
<small>01. Mai - 31. Mai</small>
|
||||
</div>
|
||||
<div class="phase-step is-active">
|
||||
<span>★</span>
|
||||
<strong>Voting</strong>
|
||||
<small>01. Jun - 30. Jun</small>
|
||||
</div>
|
||||
<div class="phase-step">
|
||||
<span>✉</span>
|
||||
<strong>Auswertung</strong>
|
||||
<small>01. Jul - 10. Jul</small>
|
||||
</div>
|
||||
<div class="phase-step">
|
||||
<span>🏆</span>
|
||||
<strong>Award Show</strong>
|
||||
<small>24. Januar 2026</small>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="process">
|
||||
<div class="section-title centered">
|
||||
<h2>So funktioniert's</h2>
|
||||
</div>
|
||||
|
||||
<div class="how-grid">
|
||||
<article class="how-card">
|
||||
<div class="how-icon">✒</div>
|
||||
<h3>1. Nominieren</h3>
|
||||
<p>Nominiere deine Favoriten in jeder Kategorie.</p>
|
||||
</article>
|
||||
<article class="how-card">
|
||||
<div class="how-icon">☑</div>
|
||||
<h3>2. Voten</h3>
|
||||
<p>Stimme ab und unterstuetze deine Lieblings-Creator.</p>
|
||||
</article>
|
||||
<article class="how-card">
|
||||
<div class="how-icon">✦</div>
|
||||
<h3>3. Ergebnisse</h3>
|
||||
<p>Die Community entscheidet - 100% deiner Stimme zaehlt.</p>
|
||||
</article>
|
||||
<article class="how-card">
|
||||
<div class="how-icon">🏆</div>
|
||||
<h3>4. Award Show</h3>
|
||||
<p>Feiere die Gewinner bei der grossen Live-Show.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="featured">
|
||||
<div class="section-title split">
|
||||
<h2>Gefeatured Kategorien</h2>
|
||||
<a href="#">Alle Kategorien ansehen →</a>
|
||||
</div>
|
||||
|
||||
<div class="category-grid" id="category-grid"></div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="archive">
|
||||
<div class="section-title split">
|
||||
<h2>Gewinner Archiv</h2>
|
||||
<a href="#">Alle Jahre ansehen →</a>
|
||||
</div>
|
||||
|
||||
<div class="archive-panel">
|
||||
<aside class="archive-lead">
|
||||
<h3 id="archive-year-label">2025</h3>
|
||||
<p>
|
||||
Die letzten Gewinner. Sieh dir an, wer im letzten Jahr die
|
||||
Community begeistert hat.
|
||||
</p>
|
||||
<button class="primary-button" type="button">Archiv entdecken</button>
|
||||
</aside>
|
||||
|
||||
<div class="archive-content">
|
||||
<div class="year-pills" id="year-pills">
|
||||
<button class="year-pill is-active" data-year="2025">2025</button>
|
||||
<button class="year-pill" data-year="2024">2024</button>
|
||||
<button class="year-pill" data-year="2023">2023</button>
|
||||
<button class="year-pill" data-year="2022">2022</button>
|
||||
</div>
|
||||
<div class="winner-grid" id="winner-grid"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section cta-row">
|
||||
<article class="cta-panel" id="nomination-cta">
|
||||
<div class="cta-copy">
|
||||
<p class="eyebrow">Nominieren</p>
|
||||
<h2>Nominiere pro Kategorie bis zu 3 VTuber.</h2>
|
||||
<ul>
|
||||
<li>Pro Kategorie nur 1 Nominierung fuer dieselbe Person</li>
|
||||
<li>Insgesamt nur 2 Nominierungen pro Person</li>
|
||||
<li>Live-Validierung & Feedback</li>
|
||||
</ul>
|
||||
<a class="primary-button" href="#">Jetzt nominieren</a>
|
||||
</div>
|
||||
<div class="placeholder-visual ballot-box">
|
||||
<div class="placeholder-card"></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="cta-panel accent" id="voting-cta">
|
||||
<div class="cta-copy">
|
||||
<p class="eyebrow">Voten</p>
|
||||
<h2>Stimme in deinen Lieblingskategorien ab.</h2>
|
||||
<ul>
|
||||
<li>Nur 1 Stimme pro Kategorie</li>
|
||||
<li>Twitch Login erforderlich</li>
|
||||
<li>Videos, Clips & Songs ansehen</li>
|
||||
</ul>
|
||||
<a class="secondary-button" href="#">Jetzt voten</a>
|
||||
</div>
|
||||
<div class="placeholder-visual trophy-visual">
|
||||
<div class="trophy"></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="section lower-grid" id="faq">
|
||||
<article class="faq-panel">
|
||||
<div class="section-title">
|
||||
<h2>Haeufige Fragen</h2>
|
||||
</div>
|
||||
<div class="faq-list" id="faq-list"></div>
|
||||
</article>
|
||||
|
||||
<article class="updates-panel" id="about">
|
||||
<div class="section-title">
|
||||
<h2>Bleib up to date</h2>
|
||||
</div>
|
||||
<p>
|
||||
Erhalte Updates zu Phasen, Regeln und der Show direkt in dein
|
||||
Postfach.
|
||||
</p>
|
||||
<div class="newsletter">
|
||||
<input type="email" placeholder="Deine E-Mail-Adresse" />
|
||||
<button class="primary-button" type="button">Abonnieren</button>
|
||||
</div>
|
||||
<div class="social-row">
|
||||
<span>Twitch</span>
|
||||
<span>YouTube</span>
|
||||
<span>X</span>
|
||||
<span>Instagram</span>
|
||||
<span>TikTok</span>
|
||||
<span>Discord</span>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<a class="brand compact" href="#home">
|
||||
<span class="brand-star">✦</span>
|
||||
<span class="brand-copy">
|
||||
<strong>VTUBER</strong>
|
||||
<small>STAR AWARDS</small>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="footer-links">
|
||||
<a href="#">Impressum</a>
|
||||
<a href="#">Datenschutz</a>
|
||||
<a href="#">Kontakt</a>
|
||||
<a href="#">Media Kit</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-meta">© 2025 VTuber Star Awards. All rights reserved.</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+157
@@ -0,0 +1,157 @@
|
||||
const categories = [
|
||||
{
|
||||
icon: "✦",
|
||||
color: "linear-gradient(160deg, #c49aef, #8b6ce7)",
|
||||
title: "VTuber des Jahres",
|
||||
text: "Die herausragendste VTuberin des Jahres 2025.",
|
||||
},
|
||||
{
|
||||
icon: "🎙",
|
||||
color: "linear-gradient(160deg, #d7e7ff, #8ea9ef)",
|
||||
title: "Bestes Live Event",
|
||||
text: "Das beste Live Event, das die Community begeistert hat.",
|
||||
},
|
||||
{
|
||||
icon: "🎬",
|
||||
color: "linear-gradient(160deg, #f7dfb2, #dba84b)",
|
||||
title: "Bester Content Creator",
|
||||
text: "Kreativitaet, Konsistenz und Impact in einem.",
|
||||
},
|
||||
{
|
||||
icon: "🌿",
|
||||
color: "linear-gradient(160deg, #e9f3bb, #a7c95d)",
|
||||
title: "Bester New VTuber",
|
||||
text: "Rising Stars, die dieses Jahr durchgestartet sind.",
|
||||
},
|
||||
{
|
||||
icon: "🤍",
|
||||
color: "linear-gradient(160deg, #ffd4e4, #f28ab1)",
|
||||
title: "Beste Community",
|
||||
text: "Die herzlichste und aktivste Community des Jahres.",
|
||||
},
|
||||
];
|
||||
|
||||
const winners = {
|
||||
2025: [
|
||||
["Hoshimi Miyu", "VTuber des Jahres", "Conveyed"],
|
||||
["Eclipse Euphoria", "Bestes Live Event", "Conveyed"],
|
||||
["Kurainu", "Bester Content Creator", "Conveyed"],
|
||||
["Lumi Airi", "Bester New VTuber", "Conveyed"],
|
||||
["Pyonkichi Kingdom", "Beste Community", "Conveyed"],
|
||||
],
|
||||
2024: [
|
||||
["Miyu Astra", "VTuber des Jahres", "Winner"],
|
||||
["Nova Hall", "Bestes Live Event", "Winner"],
|
||||
["Shiro Ch.", "Bester Content Creator", "Winner"],
|
||||
["Airi Bloom", "Bester New VTuber", "Winner"],
|
||||
["Moonrelay", "Beste Community", "Winner"],
|
||||
],
|
||||
2023: [
|
||||
["Tenshi Vox", "VTuber des Jahres", "Winner"],
|
||||
["Umi Nights", "Bestes Live Event", "Winner"],
|
||||
["Rin Atelier", "Bester Content Creator", "Winner"],
|
||||
["Starbyte", "Bester New VTuber", "Winner"],
|
||||
["Luna Port", "Beste Community", "Winner"],
|
||||
],
|
||||
2022: [
|
||||
["Aoi Sakura", "VTuber des Jahres", "Winner"],
|
||||
["Kitsu Stage", "Bestes Live Event", "Winner"],
|
||||
["Kohaku Live", "Bester Content Creator", "Winner"],
|
||||
["Mira Veil", "Bester New VTuber", "Winner"],
|
||||
["Neko Choir", "Beste Community", "Winner"],
|
||||
],
|
||||
};
|
||||
|
||||
const faqs = [
|
||||
["Wer kann nominieren und voten?", "Jede Person mit Twitch Login. Das Konto wird bei der ersten Anmeldung im Hintergrund angelegt."],
|
||||
["Wie oft kann ich abstimmen?", "Pro Kategorie eine Stimme. Bis zur Deadline kannst du deine Auswahl erneut bearbeiten und absenden."],
|
||||
["Wie werden Gewinner bestimmt?", "Aktuell rein community-basiert. Eine spaetere Mischung mit Jury oder Panel bleibt offen."],
|
||||
["Was ist mit Bots und Betrug?", "Missbrauchsschutz laeuft moeglichst unsichtbar: Twitch Login, Rate Limits und interne Risiko-Flags."],
|
||||
["Kann das Team Kategorien aendern?", "Ja. Kategorien und Unterkategorien werden pro Jahr durch das Team gepflegt und freigeschaltet."],
|
||||
];
|
||||
|
||||
function renderCategories() {
|
||||
const root = document.getElementById("category-grid");
|
||||
root.innerHTML = categories
|
||||
.map(
|
||||
(item) => `
|
||||
<article class="category-card">
|
||||
<div class="category-orb" style="background:${item.color}">${item.icon}</div>
|
||||
<h3>${item.title}</h3>
|
||||
<p>${item.text}</p>
|
||||
</article>
|
||||
`,
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
function renderWinners(year = "2025") {
|
||||
const root = document.getElementById("winner-grid");
|
||||
const yearLabel = document.getElementById("archive-year-label");
|
||||
yearLabel.textContent = year;
|
||||
|
||||
root.innerHTML = winners[year]
|
||||
.map(
|
||||
([name, category, tag], index) => `
|
||||
<article class="winner-card">
|
||||
<div class="winner-thumb" data-tag="${tag}" style="background:${winnerGradient(index)}"></div>
|
||||
<div class="winner-info">
|
||||
<strong>${name}</strong>
|
||||
<small>${category}</small>
|
||||
</div>
|
||||
</article>
|
||||
`,
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
function winnerGradient(index) {
|
||||
const gradients = [
|
||||
"linear-gradient(160deg, rgba(208,189,255,.78), rgba(255,231,198,.72))",
|
||||
"linear-gradient(160deg, rgba(151,128,212,.84), rgba(248,222,180,.52))",
|
||||
"linear-gradient(160deg, rgba(201,192,255,.82), rgba(250,215,168,.6))",
|
||||
"linear-gradient(160deg, rgba(196,221,255,.82), rgba(250,235,195,.68))",
|
||||
"linear-gradient(160deg, rgba(255,213,225,.82), rgba(249,225,176,.62))",
|
||||
];
|
||||
return gradients[index % gradients.length];
|
||||
}
|
||||
|
||||
function bindYears() {
|
||||
document.querySelectorAll(".year-pill").forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
document.querySelectorAll(".year-pill").forEach((pill) => pill.classList.remove("is-active"));
|
||||
button.classList.add("is-active");
|
||||
renderWinners(button.dataset.year);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderFaq() {
|
||||
const root = document.getElementById("faq-list");
|
||||
root.innerHTML = faqs
|
||||
.map(
|
||||
([question, answer], index) => `
|
||||
<div class="faq-item ${index === 0 ? "is-open" : ""}">
|
||||
<button class="faq-button" type="button">
|
||||
<span>${question}</span>
|
||||
<strong>+</strong>
|
||||
</button>
|
||||
<div class="faq-panel-copy">
|
||||
<p>${answer}</p>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
.join("");
|
||||
|
||||
root.querySelectorAll(".faq-item").forEach((item) => {
|
||||
item.querySelector(".faq-button").addEventListener("click", () => {
|
||||
item.classList.toggle("is-open");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
renderCategories();
|
||||
renderWinners();
|
||||
bindYears();
|
||||
renderFaq();
|
||||
@@ -0,0 +1,846 @@
|
||||
:root {
|
||||
--bg: #fffdf9;
|
||||
--surface: #ffffff;
|
||||
--surface-soft: rgba(255, 255, 255, 0.78);
|
||||
--line: rgba(146, 121, 198, 0.18);
|
||||
--line-strong: rgba(146, 121, 198, 0.28);
|
||||
--text: #40395b;
|
||||
--muted: #7a7492;
|
||||
--purple: #7f5ad6;
|
||||
--purple-strong: #6841bb;
|
||||
--gold: #dfab4e;
|
||||
--gold-soft: #f5e0b6;
|
||||
--peach: #f3c4a0;
|
||||
--pink: #f0c0d8;
|
||||
--shadow: 0 28px 70px rgba(170, 151, 214, 0.13);
|
||||
--radius-xl: 34px;
|
||||
--radius-lg: 26px;
|
||||
--radius-md: 18px;
|
||||
--max: 1440px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Manrope", sans-serif;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at 12% 18%, rgba(245, 224, 182, 0.22), transparent 24%),
|
||||
radial-gradient(circle at 86% 18%, rgba(196, 188, 255, 0.18), transparent 22%),
|
||||
linear-gradient(180deg, #fffefc 0%, #fffaf4 100%);
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(circle at 14% 30%, rgba(216, 198, 255, 0.14) 0, transparent 9px),
|
||||
radial-gradient(circle at 80% 12%, rgba(255, 210, 171, 0.16) 0, transparent 8px),
|
||||
radial-gradient(circle at 72% 42%, rgba(196, 178, 255, 0.12) 0, transparent 7px);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.site-frame {
|
||||
width: min(calc(100% - 32px), var(--max));
|
||||
margin: 0 auto;
|
||||
padding: 18px 0 40px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
padding: 16px 22px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.74);
|
||||
backdrop-filter: blur(18px);
|
||||
box-shadow: 0 16px 36px rgba(185, 163, 223, 0.08);
|
||||
position: sticky;
|
||||
top: 10px;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand-star {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 14px;
|
||||
color: var(--gold);
|
||||
background: linear-gradient(135deg, rgba(223, 171, 78, 0.15), rgba(127, 90, 214, 0.08));
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.brand-copy strong,
|
||||
.brand-copy small {
|
||||
display: block;
|
||||
letter-spacing: 0.18em;
|
||||
}
|
||||
|
||||
.brand-copy strong {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.brand-copy small {
|
||||
color: var(--muted);
|
||||
font-size: 0.64rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.nav a,
|
||||
.footer a {
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
position: relative;
|
||||
padding: 6px 0;
|
||||
font-size: 0.93rem;
|
||||
}
|
||||
|
||||
.nav a.is-active::after,
|
||||
.nav a:hover::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -8px;
|
||||
height: 2px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, var(--gold), var(--purple));
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.ghost-button,
|
||||
.primary-button,
|
||||
.secondary-button,
|
||||
.year-pill {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.ghost-button,
|
||||
.primary-button,
|
||||
.secondary-button {
|
||||
border-radius: 14px;
|
||||
padding: 13px 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ghost-button {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.primary-button,
|
||||
.secondary-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
background: linear-gradient(135deg, var(--purple), var(--purple-strong));
|
||||
color: white;
|
||||
box-shadow: 0 16px 30px rgba(122, 90, 194, 0.2);
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
background: white;
|
||||
color: var(--gold);
|
||||
border: 1px solid rgba(223, 171, 78, 0.36);
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: 0.92fr 1.08fr;
|
||||
align-items: center;
|
||||
gap: 36px;
|
||||
padding: 42px 8px 18px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
font-size: 0.77rem;
|
||||
color: var(--gold);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.eyebrow.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.hero h1,
|
||||
.section-title h2,
|
||||
.show-meta h2,
|
||||
.archive-lead h3,
|
||||
.phase-copy h3 {
|
||||
font-family: "Cormorant Garamond", serif;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
margin: 0 0 22px;
|
||||
font-size: clamp(4.3rem, 8vw, 7rem);
|
||||
line-height: 0.9;
|
||||
letter-spacing: -0.04em;
|
||||
color: var(--purple-strong);
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.hero-body {
|
||||
max-width: 460px;
|
||||
font-size: 1.18rem;
|
||||
line-height: 1.75;
|
||||
color: #60597c;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
margin: 34px 0 40px;
|
||||
}
|
||||
|
||||
.show-meta h2 {
|
||||
margin: 8px 0 6px;
|
||||
font-size: 2.2rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.show-meta p:last-child {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.hero-art {
|
||||
position: relative;
|
||||
min-height: 720px;
|
||||
}
|
||||
|
||||
.hero-illustration {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 42px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.74), transparent 26%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.08));
|
||||
}
|
||||
|
||||
.hero-illustration::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
border: 1px solid rgba(223, 171, 78, 0.16);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-illustration img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: 68% 18%;
|
||||
transform: scale(1.2);
|
||||
filter: saturate(1.02) brightness(1.02);
|
||||
}
|
||||
|
||||
.hero-signature {
|
||||
position: absolute;
|
||||
right: 46px;
|
||||
bottom: 44px;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.hero-signature span {
|
||||
font-family: "Cormorant Garamond", serif;
|
||||
font-size: 3.5rem;
|
||||
font-style: italic;
|
||||
color: #7e62c9;
|
||||
}
|
||||
|
||||
.hero-signature small {
|
||||
color: var(--muted);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.phase-panel,
|
||||
.how-card,
|
||||
.archive-panel,
|
||||
.cta-panel,
|
||||
.faq-panel,
|
||||
.updates-panel {
|
||||
border-radius: var(--radius-xl);
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface-soft);
|
||||
backdrop-filter: blur(18px);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.phase-panel {
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
gap: 32px;
|
||||
padding: 34px 38px;
|
||||
}
|
||||
|
||||
.phase-copy h3 {
|
||||
margin: 8px 0 10px;
|
||||
font-size: 3rem;
|
||||
color: var(--purple-strong);
|
||||
}
|
||||
|
||||
.phase-copy p {
|
||||
color: var(--muted);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.timer {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.timer div {
|
||||
min-width: 68px;
|
||||
padding: 12px 10px;
|
||||
border-radius: 16px;
|
||||
background: rgba(245, 239, 255, 0.9);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.timer strong {
|
||||
display: block;
|
||||
font-size: 1.9rem;
|
||||
color: var(--purple-strong);
|
||||
}
|
||||
|
||||
.timer span {
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.phase-track {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.phase-step {
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.phase-step span {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
border-radius: 999px;
|
||||
margin-bottom: 14px;
|
||||
border: 1px solid var(--line-strong);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.phase-step.is-active span {
|
||||
color: white;
|
||||
background: linear-gradient(135deg, #9a78eb, #7f5ad6);
|
||||
box-shadow: 0 14px 28px rgba(127, 90, 214, 0.2);
|
||||
}
|
||||
|
||||
.phase-step.is-complete span {
|
||||
color: var(--purple);
|
||||
}
|
||||
|
||||
.phase-step strong,
|
||||
.phase-step small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.phase-step strong {
|
||||
margin-bottom: 6px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-top: 56px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.section-title h2 {
|
||||
margin: 0;
|
||||
font-size: clamp(2.1rem, 4vw, 3.2rem);
|
||||
color: var(--purple-strong);
|
||||
}
|
||||
|
||||
.section-title.centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-title.split {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.section-title.split a {
|
||||
color: var(--purple);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.how-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.how-card {
|
||||
padding: 28px 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.how-icon {
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
margin: 0 auto 18px;
|
||||
border-radius: 999px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 1.85rem;
|
||||
color: var(--gold);
|
||||
background:
|
||||
radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.94), rgba(244, 234, 255, 0.82)),
|
||||
linear-gradient(135deg, rgba(223, 171, 78, 0.14), rgba(127, 90, 214, 0.06));
|
||||
border: 1px solid rgba(223, 171, 78, 0.22);
|
||||
}
|
||||
|
||||
.how-card h3 {
|
||||
margin: 0 0 10px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.how-card p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.category-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.category-card {
|
||||
border-radius: 22px;
|
||||
padding: 24px 20px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
box-shadow: 0 20px 50px rgba(197, 177, 229, 0.1);
|
||||
}
|
||||
|
||||
.category-orb {
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
border-radius: 999px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin: 0 auto 18px;
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.category-card h3 {
|
||||
margin: 0 0 10px;
|
||||
text-align: center;
|
||||
font-family: "Cormorant Garamond", serif;
|
||||
font-size: 1.7rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.category-card p {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.archive-panel {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr;
|
||||
gap: 26px;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.archive-lead {
|
||||
padding: 10px 8px;
|
||||
}
|
||||
|
||||
.archive-lead h3 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 4rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.archive-lead p {
|
||||
color: var(--muted);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.year-pills {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.year-pill {
|
||||
border-radius: 999px;
|
||||
padding: 10px 16px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
color: var(--muted);
|
||||
border: 1px solid var(--line);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.year-pill.is-active {
|
||||
background: linear-gradient(135deg, rgba(127, 90, 214, 0.12), rgba(223, 171, 78, 0.16));
|
||||
color: var(--purple-strong);
|
||||
}
|
||||
|
||||
.winner-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.winner-card {
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
|
||||
.winner-thumb {
|
||||
aspect-ratio: 0.92;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
background: linear-gradient(160deg, rgba(207, 191, 255, 0.54), rgba(255, 227, 190, 0.48));
|
||||
}
|
||||
|
||||
.winner-thumb::after {
|
||||
content: attr(data-tag);
|
||||
display: inline-flex;
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 238, 195, 0.92);
|
||||
color: #936313;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.winner-info {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.winner-info strong,
|
||||
.winner-info small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.winner-info strong {
|
||||
color: var(--text);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.winner-info small {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.cta-row,
|
||||
.lower-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.cta-panel {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 220px;
|
||||
gap: 22px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.cta-panel.accent {
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(255, 240, 212, 0.36), transparent 26%),
|
||||
rgba(255, 255, 255, 0.78);
|
||||
}
|
||||
|
||||
.cta-copy h2 {
|
||||
margin: 0 0 16px;
|
||||
font-family: "Cormorant Garamond", serif;
|
||||
font-size: 2.3rem;
|
||||
color: var(--purple-strong);
|
||||
}
|
||||
|
||||
.cta-copy ul {
|
||||
margin: 0 0 24px;
|
||||
padding-left: 20px;
|
||||
color: var(--muted);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.placeholder-visual {
|
||||
position: relative;
|
||||
min-height: 260px;
|
||||
border-radius: 24px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background:
|
||||
radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.86), transparent 40%),
|
||||
linear-gradient(180deg, rgba(205, 188, 255, 0.34), rgba(255, 255, 255, 0.3));
|
||||
}
|
||||
|
||||
.ballot-box::before,
|
||||
.trophy-visual::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 28px;
|
||||
border-radius: 28px;
|
||||
border: 1px solid rgba(127, 90, 214, 0.1);
|
||||
}
|
||||
|
||||
.placeholder-card {
|
||||
width: 120px;
|
||||
height: 160px;
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(147, 118, 220, 0.46));
|
||||
box-shadow: 0 18px 40px rgba(149, 119, 206, 0.18);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.placeholder-card::before {
|
||||
content: "✦";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 2rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.trophy {
|
||||
width: 122px;
|
||||
height: 152px;
|
||||
position: relative;
|
||||
border-radius: 0 0 28px 28px;
|
||||
background: linear-gradient(180deg, #f2cc82, #d89e36);
|
||||
box-shadow: inset 0 0 0 10px rgba(255, 248, 224, 0.25);
|
||||
}
|
||||
|
||||
.trophy::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: -78px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 46px solid transparent;
|
||||
border-right: 46px solid transparent;
|
||||
border-bottom: 78px solid #e1b158;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.faq-panel,
|
||||
.updates-panel {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.faq-list {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
border-bottom: 1px solid rgba(127, 90, 214, 0.12);
|
||||
}
|
||||
|
||||
.faq-button {
|
||||
width: 100%;
|
||||
padding: 16px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.faq-panel-copy {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
color: var(--muted);
|
||||
transition: max-height 0.28s ease;
|
||||
}
|
||||
|
||||
.faq-item.is-open .faq-panel-copy {
|
||||
max-height: 200px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.newsletter {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.newsletter input {
|
||||
padding: 14px 16px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.social-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-top: 22px;
|
||||
color: var(--purple);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 34px 8px 10px;
|
||||
color: var(--muted);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: 1220px) {
|
||||
.hero,
|
||||
.phase-panel,
|
||||
.archive-panel,
|
||||
.cta-row,
|
||||
.lower-grid,
|
||||
.cta-panel,
|
||||
.how-grid,
|
||||
.category-grid,
|
||||
.winner-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.nav {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.topbar,
|
||||
.footer,
|
||||
.section-title.split {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.hero-art {
|
||||
min-height: 560px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.site-frame {
|
||||
width: min(calc(100% - 18px), var(--max));
|
||||
}
|
||||
|
||||
.topbar {
|
||||
border-radius: 30px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.topbar-actions,
|
||||
.hero-cta,
|
||||
.newsletter,
|
||||
.timer {
|
||||
width: 100%;
|
||||
grid-template-columns: 1fr;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(3.2rem, 17vw, 5rem);
|
||||
}
|
||||
|
||||
.hero-art {
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
.hero-signature {
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.hero-signature span {
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user