/* ---- ROOT TOKENS ---- */ :root { --bg-body: #171919; --bg-scene: #1e1f1f; --dot: #2a2a2a; --text: #f3efe6; --text-hero: #f6efe0; --text-hero-shade: #5d574d; --text-2: #bdb8ae; --text-desc: #d8d3c8; --text-muted: #8f8a80; --line: #3a3a3a; --line-2: #4a4744; --accent: #e8962e; --on-accent: #141311; --stage-1: #e8962e; --stage-2: #6e93ad; --stage-3: #7fae5c; --m-steps: #a9a49a; --m-arrow: #6b675f; --m-rule: #2f2f2f; } /* ---- RESET ---- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg-body); color: var(--text); font-family: 'IBM Plex Sans', sans-serif; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } h1, h2, h3, p { margin: 0; } img { display: block; /* width/height attributes reserve the aspect ratio; CSS decides the size */ height: auto; } /* ---- KEYFRAMES ---- */ @keyframes flicker { 0%, 20% { filter: brightness(.06) } 26% { filter: brightness(1.25) } 30% { filter: brightness(.12) } 36% { filter: brightness(.12) } 44% { filter: brightness(1.1) } 50% { filter: brightness(.55) } 58% { filter: brightness(1.05) } 70%, 100% { filter: brightness(1) } } @keyframes lamp-anim { 0%, 20% { opacity: 0 } 26% { opacity: 1.2 } 30% { opacity: .05 } 36% { opacity: .05 } 44% { opacity: 1 } 50% { opacity: .45 } 58% { opacity: 1 } 70%, 100% { opacity: 1 } } @keyframes swing { 0% { transform: rotate(-9deg) } 55% { transform: rotate(3deg) } 80% { transform: rotate(-1deg) } 100% { transform: rotate(0) } } @keyframes sway { 0%, 100% { transform: rotate(-1.2deg) } 50% { transform: rotate(1.2deg) } } @keyframes breathe { 0%, 100% { opacity: 1 } 50% { opacity: .9 } } @keyframes i18n-reveal { to { visibility: visible } } /* ---- I18N GUARD ---- */ .i18n-pending body { visibility: hidden; animation: i18n-reveal 0s 1.5s forwards; } /* stays "ru" until English is on the page, so neither level variant may exist yet: the lazy images of a displayed variant would start downloading in the wrong language. */ .i18n-pending .level__art { display: none; } /* ---- VISIBILITY UTILITIES ---- */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } @media (min-width: 760px) { .only-mobile { display: none !important; } } @media (max-width: 759.98px) { .only-desktop { display: none !important; } } /* ---- PAGE CONTAINER (DESKTOP) ---- */ .page { min-height: 100vh; background: var(--bg-scene); /* Виньетка убрана 2026-09-18: на широком окне её переход занимал ~427px, а градаций между базой (30,31,31) и краем (17,17,17) всего 13-14 — ступень каждые ~33px читалась как полосы. Остаётся ровная база и точечная сетка; ровный цвет не полосит. */ background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 24px 24px; display: flex; justify-content: safe center; position: relative; overflow-x: auto; } /* ---- PAGE GLOW ---- */ .page__glow { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 50% 35%, rgba(232,150,46,.2), transparent 70%); animation: lamp-anim 3.6s .3s ease-in-out both; pointer-events: none; } /* ---- CANVAS ---- */ .canvas { width: 1280px; flex: none; min-height: 2800px; position: relative; overflow: hidden; } /* ---- LAMP ---- */ .lamp { position: absolute; left: 0; right: 0; top: 0; height: 1000px; pointer-events: none; z-index: 0; } .lamp__swing { position: absolute; left: 50%; top: -130px; width: 1100px; height: 1000px; margin-left: -550px; transform-origin: 50% 0; animation: swing 4.5s .3s cubic-bezier(.3,.7,.3,1) both; } .lamp__sway { position: absolute; inset: 0; transform-origin: 50% 0; animation: sway 6s 4.8s ease-in-out infinite; } .lamp__cord { position: absolute; left: 50%; top: 0; width: 2px; height: 150px; margin-left: -1px; background: var(--line); } .lamp__shade { position: absolute; left: 50%; top: 146px; width: 150px; height: 56px; margin-left: -75px; background: linear-gradient(#3b3b3b, #262626); clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%); } .lamp__light { position: absolute; inset: 0; animation: lamp-anim 3.6s .3s ease-in-out both; } .lamp__filament { position: absolute; left: 50%; top: 200px; width: 110px; height: 10px; margin-left: -55px; background: #f4c77a; border-radius: 50%; filter: blur(3px); opacity: .9; } .lamp__cone { position: absolute; left: 50%; top: 200px; width: 1100px; height: 800px; margin-left: -550px; background: linear-gradient(rgba(240,170,70,.28), rgba(240,170,70,.10) 45%, rgba(240,170,70,0) 90%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); filter: blur(14px); animation: breathe 7s ease-in-out infinite; } /* ---- HEADER ---- */ .header { display: flex; align-items: center; justify-content: space-between; padding: 22px 48px; position: relative; z-index: 2; } .header__brand { display: flex; align-items: center; gap: 18px; } .header__brand a:first-child img { height: 44px; width: auto; } .header__divider { width: 1px; height: 30px; background: var(--line-2); } .header__brand a:nth-child(3) img { height: 46px; width: auto; } /* ---- LANG SWITCH ---- */ .lang { display: flex; align-items: center; gap: 10px; font: 400 12px 'IBM Plex Mono'; letter-spacing: .08em; text-transform: uppercase; } .lang__link { color: var(--text-muted); } html:not([lang="en"]) [data-lang-switch="ru"], html[lang="en"] [data-lang-switch="en"] { color: var(--text); } .lang__slash { color: var(--line-2); } /* ---- SCENE (FLICKER WRAPPER) ---- */ .scene { position: absolute; inset: 0; pointer-events: none; animation: flicker 3.6s .3s ease-in-out both; } /* ---- HERO ---- */ .hero { position: absolute; left: 50%; top: 190px; width: 760px; margin-left: -380px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; pointer-events: auto; } .hero__kicker { display: flex; align-items: center; gap: 14px; font: 400 11px 'IBM Plex Mono'; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); } .hero__kicker-line { display: block; width: 36px; height: 1px; background: var(--accent); opacity: .6; } .hero__title { position: relative; margin: 0; font: 400 50px/1.05 'Peace Sans'; text-transform: uppercase; letter-spacing: .01em; } .hero__title-shade { display: block; color: var(--text-hero-shade); text-shadow: 0 22px 26px rgba(0,0,0,.55), 0 46px 60px rgba(0,0,0,.35); } .hero__title-light { position: absolute; inset: 0; display: block; color: transparent; background: linear-gradient(90deg, rgba(246,239,224,0) 0%, rgba(246,239,224,.35) 14%, var(--text-hero) 34%, var(--text-hero) 66%, rgba(246,239,224,.35) 86%, rgba(246,239,224,0) 100%); -webkit-background-clip: text; background-clip: text; } .hero__sub { margin: 2px 0 0; font: 400 15px/1.5 'IBM Plex Sans'; color: var(--text-2); max-width: 400px; text-wrap: pretty; } .hero__count { font: 400 12px 'IBM Plex Mono'; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); margin-top: 4px; } /* ---- BOX ---- */ .box { position: absolute; left: 50%; top: 400px; width: 560px; margin-left: -280px; z-index: 1; pointer-events: auto; } .box__art { position: relative; filter: drop-shadow(0 30px 30px rgba(0,0,0,.6)); } .box__art img { width: 100%; } .box__art img:last-child { position: absolute; inset: 0; width: 100%; } /* ---- FOLDERS ---- */ .folder { position: absolute; left: 50%; width: 400px; margin-left: -200px; pointer-events: auto; } .folder__art { position: relative; } .folder__art img { width: 100%; } .folder__art img:nth-child(2), .folder__art img:nth-child(3) { position: absolute; inset: 0; width: 100%; } .folder--1 { top: 720px; z-index: 3; transform: translate(-390px, 30px) rotate(-6deg); } .folder--2 { top: 770px; z-index: 4; } .folder--3 { top: 720px; z-index: 3; transform: translate(390px, 30px) rotate(6deg); } /* ---- VIDEO ---- */ .video { position: absolute; left: 48px; right: 48px; top: 1060px; display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: end; padding-top: 48px; } /* ---- PLAYER ---- */ .player { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #111; overflow: hidden; filter: drop-shadow(0 28px 22px rgba(0,0,0,.6)); } .player__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .player__play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: rgba(232,150,46,.92); display: flex; align-items: center; justify-content: center; pointer-events: none; } .player__triangle { width: 0; height: 0; border-style: solid; border-width: 16px 0 16px 28px; border-color: transparent transparent transparent var(--on-accent); margin-left: 6px; } .player__badges { position: absolute; left: 24px; bottom: 24px; display: flex; gap: 12px; color: var(--text); pointer-events: none; } .player__badge { display: block; font: 400 12px 'IBM Plex Mono'; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; background: rgba(20,19,17,.8); } /* ---- VIDEO ASIDE ---- */ .video__aside { display: flex; flex-direction: column; gap: 22px; } .video__title { font: 400 32px/1.15 'Peace Sans'; text-transform: uppercase; color: var(--text); text-wrap: balance; } .video__lead { font: 400 15px/1.55 'IBM Plex Sans'; color: var(--text-2); text-wrap: pretty; } /* ---- CTA ---- */ .cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px; background: var(--accent); color: var(--on-accent); font: 400 18px 'Peace Sans'; text-transform: uppercase; text-decoration: none; white-space: nowrap; } /* ---- VIDEO OR (mobile) ---- */ .video__or { text-align: center; font: 400 12px 'IBM Plex Mono'; color: var(--text-muted); margin-top: 10px; } /* ---- STAGE COLOURS (mobile stage list) ---- The desktop stage columns that sat at top:1600px were removed on 2026-09-16; the formula and the levels moved up by their 200px and the canvas shrank to match. */ .stage-row--1 .stage-row__name { color: var(--stage-1); } .stage-row--2 .stage-row__name { color: var(--stage-2); } .stage-row--3 .stage-row__name { color: var(--stage-3); } /* ---- STAGE-LIST (mobile) ---- */ .stage-list { display: flex; flex-direction: column; gap: 10px; } .kicker-m { font: 400 11px 'IBM Plex Mono'; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .stage-row { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--m-rule); } .stage-row__thumb { width: 64px; flex: none; position: relative; } .stage-row__thumb img { width: 100%; display: block; } .stage-row__thumb img:last-child { position: absolute; inset: 0; width: 100%; } .stage-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .stage-row__name { font: 400 15px 'Peace Sans'; text-transform: uppercase; } .stage-row__steps { font: 400 12px/1.4 'IBM Plex Sans'; color: var(--m-steps); } .stage-row__arrow { color: var(--m-arrow); font: 400 16px 'IBM Plex Mono'; } /* ---- FORMULA ---- */ .formula { position: absolute; left: 48px; right: 48px; top: 1600px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; } .formula__art { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; } .formula__sketch { position: absolute; inset: 0; width: 100%; pointer-events: none; } .formula__sketch:nth-child(-n+3) { filter: invert(1); opacity: .14; } .formula__sketch:nth-child(n+4) { opacity: .5; } .formula__board { position: absolute; left: 50%; top: 50%; width: 230px; transform: translate(-50%, -50%); filter: drop-shadow(0 24px 24px rgba(0,0,0,.6)); } .formula__board img { width: 100%; display: block; } .formula__board img:nth-child(n+2) { position: absolute; inset: 0; width: 100%; } .formula__text { display: flex; flex-direction: column; gap: 12px; } /* ---- KICKER ---- */ .kicker { font: 400 12px 'IBM Plex Mono'; letter-spacing: .08em; color: var(--accent); } /* ---- SECTION TITLE ---- */ .section-title { font: 400 32px/1.1 'Peace Sans'; text-transform: uppercase; margin: 0; } /* ---- BTN-OPEN ---- */ /* The mock sets these colours inline, which beats a:hover; a class does not, so restate them. */ .cta:hover, .btn-open:hover { color: var(--on-accent); } .btn-open { align-self: flex-start; background: var(--accent); color: var(--on-accent); font: 700 15px 'IBM Plex Sans'; padding: 12px 20px; margin-top: 8px; } /* ---- LEVELS ---- */ .levels { position: absolute; left: 48px; right: 48px; top: 2100px; display: flex; flex-direction: column; gap: 28px; padding-top: 28px; } .levels__head { display: flex; flex-direction: column; gap: 10px; } .levels__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } /* ---- LEVEL CARD ---- */ .level { display: flex; flex-direction: column; gap: 14px; } .level__art { position: relative; filter: drop-shadow(0 28px 22px rgba(0,0,0,.6)); } .level__plate { width: 100%; } .level__char { position: absolute; left: 2%; width: 96%; top: 27.5%; height: 71.3%; object-fit: contain; object-position: bottom; } .level__ribbon { position: absolute; left: 0; right: 0; top: 4.5%; text-align: center; font: 400 24px 'Peace Sans'; letter-spacing: .02em; color: var(--on-accent); } html[lang="en"] .level__art--ru, html:not([lang="en"]) .level__art--en { display: none; } .level__text { font: 400 14px/1.55 'IBM Plex Sans'; color: var(--text-desc); } /* ---- FOOTER ---- */ /* ---- REDUCED MOTION ---- */ @media (prefers-reduced-motion: reduce) { .page__glow, .lamp__swing, .lamp__sway, .lamp__light, .lamp__cone, .scene { animation: none !important; } } /* ======================== MOBILE < 760px ======================== */ @media (max-width: 759.98px) { .page { background: var(--bg-scene); background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 20px 20px; display: block; overflow-x: visible; } .page::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 90% 50% at 50% 30%, transparent 30%, rgba(0,0,0,.5)); } .page__glow { bottom: auto; height: 520px; background: radial-gradient(ellipse 70% 45% at 50% 38%, rgba(232,150,46,.22), transparent 70%); } .canvas { width: auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; padding: 16px 20px 40px; } .scene { position: static; animation: none; } .hero { position: static; width: auto; margin-left: 0; margin-top: 22px; gap: 10px; } .hero__title { font: 400 34px/1.05 'Peace Sans'; letter-spacing: normal; text-wrap: balance; } .hero__title-shade { color: var(--text-hero); text-shadow: 0 14px 18px rgba(0,0,0,.5); } .hero__title-light { display: none; } .hero__kicker { font: 400 10px 'IBM Plex Mono'; gap: 0; } .hero__kicker-line { display: none; } .hero__sub { display: none; } .header { padding: 0; min-height: 44px; gap: 12px; } .header__brand { gap: 12px; min-width: 0; } /* Below ~325px the two marks and the switch no longer fit: let the marks shrink in proportion instead of scrolling the page sideways. At 360px and wider nothing is constrained. */ .header__brand a { min-width: 0; } .header__brand img { max-width: 100%; object-fit: contain; object-position: left center; } .lang { flex: none; } .header__brand a:first-child img { height: 26px; } .header__divider { height: 20px; } .header__brand a:nth-child(3) img { height: 28px; } .lang { gap: 8px; min-height: 44px; } .lang__link { padding: 12px 4px; position: relative; } .lang__link::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .header__brand a:first-child { position: relative; } .header__brand a:first-child::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .video { position: static; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 0; } .player { margin-top: 28px; filter: drop-shadow(0 18px 18px rgba(0,0,0,.55)); } .player__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; } .player__triangle { border-width: 12px 0 12px 21px; margin-left: 5px; } .player__badges { left: 12px; bottom: 12px; gap: 8px; } .player__badge { font: 400 11px 'IBM Plex Mono'; letter-spacing: .1em; padding: 5px 8px; background: rgba(20,19,17,.85); } .video__aside { gap: 0; } .cta { margin-top: 14px; padding: 18px 20px; min-height: 56px; gap: 16px; font: 400 17px 'Peace Sans'; } .stage-list { margin-top: 44px; } .levels { position: static; padding-top: 0; margin-top: 40px; gap: 14px; } .levels__head { gap: 6px; } .kicker { font: 400 11px 'IBM Plex Mono'; letter-spacing: .12em; text-transform: uppercase; } .levels__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; } .level { gap: 10px; } .level__art { filter: drop-shadow(0 16px 14px rgba(0,0,0,.6)); } .level__ribbon { font: 400 15px 'Peace Sans'; letter-spacing: normal; } .level__text { font: 400 13px/1.5 'IBM Plex Sans'; } .section-title { font: 400 20px/1.1 'Peace Sans'; text-wrap: balance; } }