From f7110181d704aaa0d5144a9e662afed0ffc90856 Mon Sep 17 00:00:00 2001
From: Tolmachev Igor <me@igorek.dev>
Date: Thu, 1 Jan 2026 22:44:17 +0900
Subject: New expulsiononline site

---
 style.css | 569 +++++++++++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 469 insertions(+), 100 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 9b72345..b909ec5 100644
--- a/style.css
+++ b/style.css
@@ -1,155 +1,524 @@
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
 
-@media (prefers-color-scheme: light) {
-  :root {
-    --color-primary: rgb(0 104 119);
-    --color-on-primary: rgb(255 255 255);
+@font-face {
+    font-family: "kerekobar";
+    src: url("/src/kerekobar.otf");
+}
 
-    --color-secondary: rgb(74 98 104);
+:root {
+    --text: #333333;
+    --background: #ffffff;
+    --primary: #1743bd;
+    --secondary: #ed2257;
 
-    --color-surface: rgb(245 250 252);
-    --color-surface-container: rgb(233 239 240);
-    --color-on-surface: rgb(23 29 30);
-  }
+    --surface: #f5f7fa;
+    --surface-hover: #eef2f6;
+    --border: #e1e4e8;
+    --shadow: rgba(0, 0, 0, 0.08);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-primary: rgb(131 210 228);
-    --color-on-primary: rgb(0 54 62);
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
 
-    --color-secondary: rgb(178 203 209);
+body {
+    font-family: "Open Sans", sans-serif;
+    color: var(--text);
+    background-color: var(--background);
+    line-height: 1.6;
+    overflow-x: hidden;
+}
 
-    --color-surface: rgb(14 20 22);
-    --color-surface-container: rgb(27 33 34);
-    --color-on-surface: rgb(222 227 229);
-  }
+.container {
+    max-width: 1300px;
+    margin: 0 auto;
+    padding: 0 1.5rem;
 }
 
-* {
-  transition-duration: 0.5s;
-  transition-property: background, color;
-  transition-timing-function: ease-in-out;
+a {
+    text-decoration: none;
+    color: inherit;
+    transition: 0.3s;
 }
 
-body {
-  font-family: "Noto Sans", sans-serif;
-  background-color: var(--color-surface);
-  color: var(--color-on-surface);
-  margin: 0 auto;
-  padding: 0 0.5em;
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem 1.5rem;
+}
 
-  max-width: 50em;
+.logo {
+    display: flex;
+    gap: 0.5rem;
+    font-weight: 800;
+    font-size: 1.5rem;
 }
 
-main {
-  background-color: var(--color-surface-container);
-  border-radius: 2em;
+.logo span {
+    margin: auto 0;
+}
 
-  margin: 1em 0 5em 0;
-  padding: 1.5em;
+.header nav a {
+    margin-left: 1.5rem;
+    font-weight: 600;
+    color: var(--text);
+    display: none;
 }
 
-main > *:first-child {
-  margin-top: 0;
+@media (min-width: 768px) {
+    .header nav a {
+        display: inline-block;
+    }
 }
 
-main > *:last-child {
-  margin-bottom: 0;
+.header nav a:hover {
+    color: var(--primary);
 }
 
-footer {
-  background-color: var(--color-surface-container);
-  border-radius: 2em 2em 0 0;
+.btn {
+    display: inline-block;
+    padding: 0.8rem 1.5rem;
+    border-radius: 50px;
+    font-weight: 700;
+    text-align: center;
+    cursor: pointer;
+    transition:
+        transform 0.2s,
+        box-shadow 0.2s;
+}
 
-  display: flex;
-  flex-wrap: wrap;
+.btn:active {
+    transform: scale(0.95);
+}
 
-  padding: 1.5em;
+.btn-primary {
+    background-color: var(--secondary);
+    color: white;
+    box-shadow: 0 4px 15px rgba(237, 34, 87, 0.4);
 }
 
-footer > * {
-  margin-bottom: 1em;
-  margin-right: 1em;
+.btn-secondary {
+    background-color: transparent;
+    color: var(--text);
+    border: 2px solid var(--border);
 }
 
-footer > *:last-child {
-  margin-right: 0;
-  margin-bottom: 0;
+.btn-secondary:hover {
+    border-color: var(--text);
+    background-color: var(--surface);
 }
 
-h1,
-h2 {
-  color: var(--color-primary);
+.btn-fake:hover {
+    opacity: 0;
+    cursor: not-allowed;
 }
 
-h4 {
-  margin: 0;
-  margin-bottom: 0.5em;
+.pulse {
+    animation: pulse-animation 2s infinite;
 }
 
-b {
-  color: var(--color-secondary);
+@keyframes pulse-animation {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.05);
+    }
+    100% {
+        transform: scale(1);
+    }
 }
 
-ul,
-ol {
-  padding-left: 1.5em;
+.hero {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    padding: 3rem 1.5rem;
+    text-align: center;
+    gap: 2rem;
 }
 
-li {
-  padding-bottom: 1em;
+@media (min-width: 768px) {
+    .hero {
+        flex-direction: row;
+        text-align: left;
+        padding: 5rem 1.5rem;
+    }
+    .hero-buttons {
+        display: flex;
+        gap: 1rem;
+        justify-content: flex-start;
+    }
 }
 
-li:last-child {
-  padding-bottom: 0;
+.hero-content {
+    flex: 1;
 }
 
-a {
-  color: var(--color-primary);
+.badge {
+    display: inline-block;
+    background: #e0eaff;
+    color: var(--primary);
+    padding: 0.3rem 0.8rem;
+    border-radius: 8px;
+    font-size: 0.85rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    text-transform: uppercase;
+}
+
+.hero h1 {
+    font-size: 2.5rem;
+    line-height: 1.2;
+    margin-bottom: 1rem;
+    color: var(--primary);
+}
+
+.hero .subtitle {
+    font-size: 1.1rem;
+    color: #666;
+    margin-bottom: 2rem;
+}
+
+.hero-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.disclaimer {
+    font-size: 0.7rem;
+    color: #999;
+}
+
+.hero-image {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.emoji-scene {
+    font-size: 5rem;
+    background: var(--surface);
+    width: 250px;
+    height: 250px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-15px);
+    }
+}
+
+.features-section {
+    padding: 4rem 0;
+    background-color: var(--surface);
+}
+
+.features-section h2 {
+    text-align: center;
+    margin-bottom: 2rem;
+    color: var(--primary);
+}
+
+.grid {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1.5rem;
 }
 
-img {
-  width: 100%;
-  max-height: 15em;
-  object-fit: cover;
-  border-radius: 1em;
+.card {
+    background: var(--background);
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: 0 4px 6px var(--shadow);
+    transition: transform 0.3s;
+
+    flex: 1 1 300px;
+    max-width: 400px;
+    width: 100%;
+}
+
+.card:hover {
+    transform: translateY(-5px);
 }
 
-@keyframes button {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.15);
-  }
+.card .icon {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+}
 
-  100% {
-    transform: scale(1);
-  }
+.card h3 {
+    margin-bottom: 0.5rem;
+    color: var(--text);
 }
 
-.button {
-  background-color: var(--color-primary);
-  color: var(--color-on-primary);
+.card p {
+    font-size: 0.95rem;
+    color: #555;
+}
+
+.reviews-section {
+    padding: 4rem 1.5rem;
+}
 
-  border-radius: 1em;
-  padding: 1em;
-  margin: 1em 2.5em;
-  font-size: medium;
-  animation: button infinite 1s;
+.reviews-section h2 {
+    text-align: center;
+    margin-bottom: 2rem;
+    color: var(--primary);
+}
+
+.carousel-wrapper {
+    overflow: hidden;
+}
+
+.carousel {
+    display: flex;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    gap: 1.5rem;
+    padding-bottom: 1.5rem;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+}
+
+.carousel-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.nav-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: white;
+    border: 1px solid var(--border);
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 10;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    color: var(--primary);
+    font-weight: bold;
+    font-size: 1.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.nav-btn:hover {
+    background: var(--surface);
+    color: var(--secondary);
+    transform: translateY(-50%) scale(1.1);
+}
+
+.prev-btn {
+    left: -20px;
+}
 
-  text-decoration: none;
-  text-align: center;
-  display: block;
+.next-btn {
+    right: -20px;
 }
 
-.sponsors {
-  display: flex;
-  flex-wrap: wrap;
+@media (max-width: 768px) {
+    .nav-btn {
+        display: none;
+    }
 }
 
-.sponsors > * {
-  flex: 1 1 150px;
-  text-wrap: nowrap;
+.carousel {
+    scrollbar-width: none;
+}
+
+.carousel::-webkit-scrollbar {
+    display: none;
+}
+
+.review-card {
+    flex: 0 0 85%;
+    scroll-snap-align: center;
+    background: var(--background);
+    border: 1px solid var(--border);
+    padding: 1.5rem;
+    border-radius: 1rem;
+    box-shadow: 0 4px 12px var(--shadow);
+}
+
+@media (min-width: 768px) {
+    .review-card {
+        flex: 0 0 40%;
+    }
+}
+
+.review-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.review-header .avatar {
+    font-size: 2.5rem;
+    background: var(--surface);
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.review-header h4 {
+    margin: 0;
+    font-size: 1rem;
+}
+
+.review-header small {
+    color: var(--secondary);
+    font-weight: 600;
+}
+
+.cta-section {
+    background: var(--primary);
+    color: white;
+    text-align: center;
+    padding: 4rem 1.5rem;
+}
+
+.cta-section h2 {
+    color: white;
+    margin-bottom: 1rem;
+}
+
+.cta-section p {
+    margin-bottom: 2rem;
+    opacity: 0.9;
+}
+
+.big-btn {
+    background: white;
+    color: var(--primary);
+    font-size: 1.2rem;
+    padding: 1rem 3rem;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.big-btn:hover {
+    background: var(--surface);
+    transform: translateY(-3px);
+}
+
+.sponsors-section {
+    padding: 2rem 0 4rem 0;
+    background-color: var(--background);
+    overflow: hidden;
+}
+
+.sponsors-title {
+    text-align: center;
+    color: #999;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 1.5rem;
+    font-weight: 700;
+}
+
+.marquee-wrapper {
+    position: relative;
+    width: 100%;
+    display: flex;
+    overflow: hidden;
+    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
+    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
+}
+
+.marquee-track {
+    display: flex;
+    gap: 1rem;
+    width: max-content;
+    animation: scroll 30s linear infinite;
+    padding: 0.5rem 0;
+}
+
+.marquee-wrapper:hover .marquee-track {
+    animation-play-state: paused;
+}
+
+@keyframes scroll {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-50%);
+    }
+}
+
+.sponsor-tag {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    padding: 0.5rem 1rem;
+    border-radius: 50px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-decoration: none;
+    transition: transform 0.2s;
+}
+
+.sponsor-tag:hover {
+    transform: scale(1.08);
+}
+
+.tier-creator {
+    background: var(--secondary);
+    color: white;
+    border: 2px solid transparent;
+}
+
+.tier-vip {
+    background-color: #fff9e6;
+    color: #d97706;
+    border: 1px solid #fcd34d;
+}
+
+.tier-norm {
+    background-color: var(--surface);
+    color: var(--text);
+    border: 1px solid var(--border);
+}
+
+.tier-norm:hover {
+    border-color: var(--primary);
+    color: var(--primary);
+}
+
+.kerekobar {
+    font-family: "kerekobar";
+}
+
+footer {
+    text-align: center;
+    padding: 2rem 1.5rem;
+    background: #222;
+    color: #777;
+    font-size: 0.85rem;
 }
-- 
cgit v1.2.3