Add parody DANO landing page
This commit is contained in:
178
index.html
Normal file
178
index.html
Normal file
@@ -0,0 +1,178 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>DANO — результатов нет с 1984 • danosito</title>
|
||||||
|
<meta name="description" content="Национальная олимпиада по анализу данных, где результаты не выкладывают с 1984 года.">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="https://www.hse.ru/f/src/global/i/favicon/favicon_32x32.png">
|
||||||
|
<link rel="stylesheet" href="https://www.hse.ru/f/src/projects/unshm1/unshm1.css" media="all">
|
||||||
|
<link rel="stylesheet" href="https://www.hse.ru/f/src/global/css/vision.css" media="all">
|
||||||
|
<link rel="stylesheet" href="https://www.hse.ru/f/src/global/css/sitemap.css" media="all">
|
||||||
|
<link rel="stylesheet" href="https://www.hse.ru/f/src/global/css/fotorama.css" media="all">
|
||||||
|
<link rel="stylesheet" href="https://www.hse.ru/f/src/global/css/magnific-popup.min.css" media="all">
|
||||||
|
<link rel="stylesheet" href="https://www.hse.ru/f/src/global/css/owl.carousel2.min.css">
|
||||||
|
<link rel="stylesheet" href="https://www.hse.ru/f/src/projects/unshm1/busedu.css">
|
||||||
|
<link rel="stylesheet" href="https://www.hse.ru/f/src/projects/unshm1/promo.css">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body class="body">
|
||||||
|
<div class="header-board--preview row links-dark banner-wrap">
|
||||||
|
<div class="b-row a_c hero">
|
||||||
|
<p class="sup">официальный портал отсутствия результатов</p>
|
||||||
|
<div class="promo-hint">
|
||||||
|
<div class="hero-img">
|
||||||
|
<img class="pc1" src="https://dano.hse.ru/mirror/pubs/share/956531756" alt="DANO" />
|
||||||
|
<img class="mobile1" src="https://dano.hse.ru/mirror/pubs/share/956531758" alt="DANO mobile" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h1 class="title">Результатов олимпиад DANO нет с 1984 года</h1>
|
||||||
|
<p class="lead">
|
||||||
|
Мы храним вакуум ради науки. Каждый год обещаем «выложить скоро», запускаем новые пресс‑релизы
|
||||||
|
и пересчитываем пустые таблицы. Лука Дуванов по-прежнему не победил задачный этап, ведь формула ссылалась на пустую ячейку.
|
||||||
|
</p>
|
||||||
|
<div class="cta">
|
||||||
|
<a class="button button_large button_preview button_clean" href="#why">почему пусто?</a>
|
||||||
|
<a class="button button_large button_preview button_dark" href="#timeline">история «скоро»</a>
|
||||||
|
</div>
|
||||||
|
<div class="timer-box">
|
||||||
|
<span class="timer-label">данонетрезовуже</span>
|
||||||
|
<span class="timer-value" id="ms-since">—</span>
|
||||||
|
<span class="timer-unit">миллисекунд</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="builder-section results-bait">
|
||||||
|
<div class="bait-card">
|
||||||
|
<div class="builder-section__title h1 c">Результаты? Они ЗДЕСЬ</div>
|
||||||
|
<a class="bait-button" href="https://rutube.ru/video/ac4ac2f35c35fe2dc78e9a66c48097cb/" target="_blank" rel="noopener">резы ЗДЕСЬ</a>
|
||||||
|
<p class="small-print c">Если что, это не баг, это традиция с 1984 года.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="why" class="builder-section">
|
||||||
|
<div class="builder-section__title h1 c">Почему результатов нет</div>
|
||||||
|
<div class="builder-section__description">
|
||||||
|
<p>
|
||||||
|
Бумаги скреплены степлером, сканер ушел в академический отпуск до 2084, а алгоритм выкладки
|
||||||
|
использует стохастический спуск в пропасть. Любой запрос в базу возвращает NULL — это фича.
|
||||||
|
Плохих участников отправляют в Билибино чинить счётчики Гейгера и думать о прозрачности данных.
|
||||||
|
</p>
|
||||||
|
<ul class="reason-list">
|
||||||
|
<li data-egg="p-value">p-value публикации: стабильно > 0.5</li>
|
||||||
|
<li data-egg="sql">`SELECT * FROM results` — 0 rows affected</li>
|
||||||
|
<li data-egg="overfit">Модель публикации переобучена на отмазках</li>
|
||||||
|
<li data-egg="feature">Дата фиксации: 1984. Фиксить не будем.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="timeline" class="builder-section builder-section_dark">
|
||||||
|
<div class="builder-section__title h1 c">Хронология великих «скоро»</div>
|
||||||
|
<div class="timeline">
|
||||||
|
<div class="timeline__item">
|
||||||
|
<div class="timeline__date">1984</div>
|
||||||
|
<div class="timeline__text">Запустили таймер. Файл потеряли. Все довольны.</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline__item">
|
||||||
|
<div class="timeline__date">2007</div>
|
||||||
|
<div class="timeline__text">Сделали сайт быстрее результатов. Засчитали как победу.</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline__item">
|
||||||
|
<div class="timeline__date">2016</div>
|
||||||
|
<div class="timeline__text">Опубликовали новость, что скоро опубликуют результаты.</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline__item">
|
||||||
|
<div class="timeline__date">2024</div>
|
||||||
|
<div class="timeline__text">Автотест «результаты отсутствуют» зелёный на проде.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="easter" class="builder-section builder-section_dark">
|
||||||
|
<div class="builder-section__title h1 c">Пасхалки для дата‑саентистов</div>
|
||||||
|
<div class="easter-grid">
|
||||||
|
<div class="egg" data-egg="heatmap">
|
||||||
|
Кликните на выделенные фразы выше — увидите лог p-value > 0.5.
|
||||||
|
</div>
|
||||||
|
<div class="egg" data-egg="pivot">
|
||||||
|
Двойной клик по таймеру — признание, что мы округляем в сторону драматизма.
|
||||||
|
</div>
|
||||||
|
<div class="egg" data-egg="gradient">
|
||||||
|
Откройте консоль: строим тепловую карту пустоты. Градусы = уровень цинизма.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="faq" class="builder-section">
|
||||||
|
<div class="builder-section__title h1 c">FAQ без данных</div>
|
||||||
|
<div class="faq-grid">
|
||||||
|
<div class="faq-card">
|
||||||
|
<h3>Где результаты?</h3>
|
||||||
|
<p>В отпуске, на карантине и в чьих‑то воспоминаниях. Но не на сайте.</p>
|
||||||
|
</div>
|
||||||
|
<div class="faq-card">
|
||||||
|
<h3>Что будет с плохими участниками?</h3>
|
||||||
|
<p>Билибино, счётчики Гейгера и бесконечный курс «как публикуют данные».</p>
|
||||||
|
</div>
|
||||||
|
<div class="faq-card">
|
||||||
|
<h3>Почему Лука Дуванов не выиграл задачный этап?</h3>
|
||||||
|
<p>Формула в Excel ссылалась на пустую ячейку «результаты». Нажали F9 — стало хуже.</p>
|
||||||
|
</div>
|
||||||
|
<div class="faq-card">
|
||||||
|
<h3>Когда ждать выкладку?</h3>
|
||||||
|
<p>После ретрограда, согласований и еще одной пресс‑релизной итерации.</p>
|
||||||
|
</div>
|
||||||
|
<div class="faq-card">
|
||||||
|
<h3>Как проверяются гипотезы?</h3>
|
||||||
|
<p>Организаторы очень заняты: отправляют файлик «Очевидный механизм, что …» и пропадают. p-value > 0.5, зато слэк всегда зелёный.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="builder-section bilibino">
|
||||||
|
<div class="builder-section__title h1 c">Новости Билибино и вечного ожидания</div>
|
||||||
|
<div class="bilibino-grid">
|
||||||
|
<div class="bili-card">
|
||||||
|
<h3>Билибино, модуль «аналитика»</h3>
|
||||||
|
<p>Аналитиков отправили чинить счётчики Гейгера и считать пропуски в таблицах. Кто неправильно посчитает — идёт копать туннель под новый дата‑центр.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bili-card">
|
||||||
|
<h3>Лука Дуванов и хакатон</h3>
|
||||||
|
<p>Лука снова не выиграл: бэклог пуст, как результаты. Вечный статус тикета: «в работе с 1984».</p>
|
||||||
|
</div>
|
||||||
|
<div class="bili-card">
|
||||||
|
<h3>Билибино: отдел мотивации</h3>
|
||||||
|
<p>Тем, кто спрашивает «когда результаты?», выдают фонарик, компас и Excel с круговой ссылкой. Мотивирует молчать годами.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bili-card">
|
||||||
|
<h3>Примерная дата выкладки</h3>
|
||||||
|
<p>В календаре стоит 19.01.2038 03:14:07. Обещали, что Unix-время само всё выложит.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bili-card">
|
||||||
|
<h3>Экспедиция «Результат»</h3>
|
||||||
|
<p>Группу отправили в тундру искать итоги. Нашли снег, медведя и «чуть позже». Теперь это их легендарный бэклог.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bili-card">
|
||||||
|
<h3>Лука и задачный этап v2</h3>
|
||||||
|
<p>Лука подал апелляцию — её отправили в Билибино на «дополнительный анализ». Ответ пришел: «Очевидный механизм, что…» и всё.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="c bili-note">Если заметите результаты раньше — срочно создайте баг-репорт, мы откатим.</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer__left">
|
||||||
|
<p>Мы честно публикуем пустоту. Если появятся результаты — это баг, сообщите.</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer__right">
|
||||||
|
<span class="tag">beta 0.0.1984</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
4722
original.html
Normal file
4722
original.html
Normal file
File diff suppressed because it is too large
Load Diff
48
script.js
Normal file
48
script.js
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
(() => {
|
||||||
|
const start = Date.parse("1984-01-01T00:00:00Z");
|
||||||
|
const timerEl = document.getElementById("ms-since");
|
||||||
|
const fmt = new Intl.NumberFormat("ru-RU");
|
||||||
|
|
||||||
|
const eggMessages = {
|
||||||
|
"p-value": "p-value = 0.73 — отсутствие результатов статистически значимо.",
|
||||||
|
sql: "SELECT * FROM results; 0 rows. База данных благодарит за лёгкий запрос.",
|
||||||
|
overfit: "Модель публикации переобучена на отмазках. Generalization error → ∞.",
|
||||||
|
feature: "Фича «1984» в проде. Release notes: добавили вечность.",
|
||||||
|
heatmap: "Строим тепловую карту пустоты: самый горячий пиксель под диваном.",
|
||||||
|
pivot: "Pivot в никуда: развернули таблицу, получили NaN.",
|
||||||
|
gradient: "Градиент неопределённости сошёлся к нулю информации."
|
||||||
|
};
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
if (!timerEl) return;
|
||||||
|
const diff = Date.now() - start;
|
||||||
|
timerEl.textContent = fmt.format(diff);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toast(message) {
|
||||||
|
console.log(`[dano easter] ${message}`);
|
||||||
|
const box = document.createElement("div");
|
||||||
|
box.className = "toast";
|
||||||
|
box.textContent = message;
|
||||||
|
document.body.appendChild(box);
|
||||||
|
requestAnimationFrame(() => box.classList.add("visible"));
|
||||||
|
setTimeout(() => box.classList.remove("visible"), 2200);
|
||||||
|
setTimeout(() => box.remove(), 2600);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelectorAll("[data-egg]").forEach((el) => {
|
||||||
|
el.addEventListener("click", () => {
|
||||||
|
const msg = eggMessages[el.dataset.egg] || "Логируем вакуум данных.";
|
||||||
|
toast(msg);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (timerEl) {
|
||||||
|
timerEl.addEventListener("dblclick", () =>
|
||||||
|
toast("Таймер округляет миллисекунды в сторону драматизма.")
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
update();
|
||||||
|
setInterval(update, 100);
|
||||||
|
})();
|
||||||
354
style.css
Normal file
354
style.css
Normal file
@@ -0,0 +1,354 @@
|
|||||||
|
:root {
|
||||||
|
--accent: #1658da;
|
||||||
|
--bg-dark: #0f2d69;
|
||||||
|
--yellow: #ffc107;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #fffef8;
|
||||||
|
color: #111;
|
||||||
|
word-spacing: 0.035em;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 0 12px 32px;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
text-align: center;
|
||||||
|
width: min(1100px, 96vw);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-wrap {
|
||||||
|
background: linear-gradient(135deg, rgba(255, 193, 7, 0.16), rgba(22, 88, 218, 0.08), rgba(15, 45, 105, 0.12));
|
||||||
|
padding: 32px 16px 8px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-wrap .b-row {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-img {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-img img {
|
||||||
|
max-width: 720px;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text {
|
||||||
|
max-width: 960px;
|
||||||
|
margin: 0 auto 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sup {
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: #0f2d69;
|
||||||
|
margin: 0 0 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
word-spacing: 0.12em;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sup::after {
|
||||||
|
content: "";
|
||||||
|
width: 40px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: clamp(28px, 4vw, 42px);
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 6px 0 12px;
|
||||||
|
color: #0f2d69;
|
||||||
|
word-spacing: 0.06em;
|
||||||
|
letter-spacing: 0.005em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #333;
|
||||||
|
word-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 16px 0;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button_dark {
|
||||||
|
background: #0f2d69;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 12px 30px rgba(15, 45, 105, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button_clean {
|
||||||
|
background: linear-gradient(90deg, #fff3cd, #ffe082);
|
||||||
|
color: #3c2a00;
|
||||||
|
box-shadow: 0 10px 26px rgba(255, 193, 7, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta .button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timer-box {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: linear-gradient(90deg, rgba(255, 193, 7, 0.25), rgba(15, 45, 105, 0.15));
|
||||||
|
font-family: "Courier New", monospace;
|
||||||
|
color: #0f2d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
.builder-section {
|
||||||
|
padding: 48px 16px;
|
||||||
|
width: min(1200px, 96vw);
|
||||||
|
margin: 24px auto;
|
||||||
|
background: #fffdf5;
|
||||||
|
border: 1px solid #111;
|
||||||
|
box-shadow: 12px 12px 0 #ffc107;
|
||||||
|
border-radius: 16px;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.builder-section_dark {
|
||||||
|
background: #0b0b0f;
|
||||||
|
color: #f4f7ff;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 12px 12px 0 #ffc107;
|
||||||
|
border: 1px solid #ffc107;
|
||||||
|
}
|
||||||
|
|
||||||
|
.builder-section_dark .builder-section__title {
|
||||||
|
color: #f4f7ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.builder-section__title {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.builder-section__description {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.6;
|
||||||
|
word-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reason-list {
|
||||||
|
margin: 12px 0 0;
|
||||||
|
padding-left: 18px;
|
||||||
|
list-style: disc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline {
|
||||||
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline__item {
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.builder-section:not(.builder-section_dark) .timeline__item {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #111;
|
||||||
|
box-shadow: 6px 6px 0 #ffc107;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline__date {
|
||||||
|
font-weight: 700;
|
||||||
|
color: #0f2d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
.builder-section_dark .timeline__date {
|
||||||
|
color: #cde0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-card {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #111;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 14px;
|
||||||
|
box-shadow: 6px 6px 0 #ffc107;
|
||||||
|
}
|
||||||
|
|
||||||
|
.builder-section_dark .faq-card {
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.easter-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.egg {
|
||||||
|
border: 1px dashed #ffc107;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.results-bait .bait-card {
|
||||||
|
background: #0b0b0f;
|
||||||
|
color: #f8f8f8;
|
||||||
|
border: 1px solid #ffc107;
|
||||||
|
border-radius: 14px;
|
||||||
|
box-shadow: 12px 12px 0 #ffc107;
|
||||||
|
padding: 28px 18px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bait-button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 14px 22px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: linear-gradient(90deg, #fff3cd, #ffe082);
|
||||||
|
color: #2c1a00;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 12px auto;
|
||||||
|
box-shadow: 0 10px 26px rgba(255, 193, 7, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-print {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #c4c4c4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bilibino {
|
||||||
|
background: #0b0b0f;
|
||||||
|
color: #f8f8f8;
|
||||||
|
border: 1px solid #ffc107;
|
||||||
|
box-shadow: 12px 12px 0 #ffc107;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bilibino-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bili-card {
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
border: 1px solid rgba(255, 193, 7, 0.4);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bili-note {
|
||||||
|
margin-top: 10px;
|
||||||
|
color: #f1d48a;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
padding: 24px 16px;
|
||||||
|
background: #0f2d69;
|
||||||
|
color: #f4f7ff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 14px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
background: rgba(255, 255, 255, 0.12);
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta .button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 180px;
|
||||||
|
word-spacing: 0.12em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast {
|
||||||
|
position: fixed;
|
||||||
|
right: 16px;
|
||||||
|
bottom: 16px;
|
||||||
|
background: rgba(15, 45, 105, 0.92);
|
||||||
|
color: #f4f7ff;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||||
|
max-width: 280px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast.visible {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.hero-img img.pc1 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.hero-img img.mobile1 {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 721px) {
|
||||||
|
.hero-img img.mobile1 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user