КОНТАКТЫ +7-914-831-40-48
@font-face {
font-family: "Ogg Medium";
src: url("https://dcym8fthxf5uu.cloudfront.net/fonts/247a073c-29f5-4a89-aa3a-741020f346fc/OggText-Medium.woff2")
format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
:root {
--mx: 0;
--my: 0;
--back-opacity: 1;
--back-x: 0px;
--back-y: 0px;
--back-scale: 0.76;
--four-y: 10vh;
--four-scale: 0.78;
--bazaar-y: 20vh;
--blur-px: 0px;
--back-brightness: 1;
--bazaar-blur-px: 0px;
--bazaar-brightness: 1;
--bazaar-saturation: 1;
--shade-opacity: 1;
--shade-z: 2;
--shade-top-alpha: 0;
--shade-mid-alpha: 0;
--shade-bottom-alpha: 0;
--blur-tint: 74, 181, 224;
--title-y: 0px;
--title-scale: 1;
--title-opacity: 1;
--bridge-x: -50%;
--bridge-y: 0px;
--bridge-bottom: 5vh;
--bridge-width: 67.2vw;
--bridge-scale: 1.02;
--split-left-x: -50%;
--split-left-y: 0px;
--split-left-scale: 1;
--split-right-x: -50%;
--split-right-y: 0px;
--split-right-scale: 1;
--frame2-opacity: 0;
--frame2-x: -50%;
--frame2-y: -50%;
--frame2-scale: 1.06;
--intro-copy-y: 0px;
--intro-copy-opacity: 1;
--panel2-opacity: 0;
--panel2-y: calc(-50% + 58px);
--panel3-opacity: 0;
--panel3-y: calc(-50% + 58px);
--sights-opacity: 0;
--sights-controls-opacity: 0;
--sights-y: 0px;
--sights-enter-x: 420vw;
--sights-visibility: hidden;
--sights-shift: 0px;
--sights-scale: 1;
--sights-top: clamp(112px, 19vh, 220px);
--sights-screen-top: clamp(112px, 19vh, 220px);
--ink: #111411;
--paper: #fdf1e1;
--shadow: rgba(0, 0, 0, 0.32);
font-family: Inter, Satoshi, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--paper);
background: #0b1110;
letter-spacing: 0;
}
* {
box-sizing: border-box;
}
html {
min-height: 100%;
scroll-behavior: smooth;
background: #0b1110;
}
body {
min-height: 100%;
margin: 0;
overflow-x: clip;
background: #0b1110;
}
button {
border: 0;
font: inherit;
}
.site-shell {
min-height: 100vh;
}
/* ---------------------------------------------------------------- scroll rig */
.cinema-scroll {
position: relative;
height: calc(100vh + 3700px);
}
.stage {
position: sticky;
top: 0;
height: 100vh;
min-height: 620px;
overflow: hidden;
isolation: isolate;
background: #7fb4d4;
}
.world,
.back-stack,
.sky-img,
.shade,
.scene-img,
.site-header,
.sights-slider,
.sights-controls,
.hero-title,
.intro-copy,
.story-panel {
position: absolute;
}
.world {
inset: 0;
overflow: hidden;
background: #79b7dd;
}
/* ------------------------------------------------------------------- header */
.site-header {
z-index: 10;
top: 0;
left: 0;
right: 0;
display: grid;
grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
align-items: center;
gap: 32px;
padding: 32px;
color: rgba(253, 241, 225, 0.86);
pointer-events: auto;
}
.site-logo {
justify-self: start;
color: rgba(253, 241, 225, 0.92);
font-family: "Ogg Medium", serif;
font-size: 24px;
font-weight: 500;
line-height: 1;
text-decoration: none;
white-space: nowrap;
}
.site-nav {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(24px, 2.2vw, 44px);
}
.site-nav a,
.language-switcher {
color: rgba(253, 241, 225, 0.86);
font-weight: 700;
line-height: 1;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
}
.site-nav a {
font-size: 20px;
font-weight: 400;
text-decoration: none;
}
.language-switcher {
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0;
background: transparent;
font-size: 16px;
cursor: pointer;
}
.language-switcher span {
display: inline-flex;
line-height: 1;
}
/* ------------------------------------------------------------- scene layers */
.scene-img {
display: block;
user-select: none;
-webkit-user-drag: none;
will-change: transform, opacity, filter;
pointer-events: none;
}
.sky-img {
z-index: 0;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: none;
filter: blur(var(--blur-px)) brightness(var(--back-brightness));
}
.back-stack {
z-index: 1;
top: 0;
bottom: 0;
left: -3vw;
right: -3vw;
opacity: var(--back-opacity);
transform: translate3d(var(--back-x), var(--back-y), 0) scale(var(--back-scale));
transform-origin: 50% 100%;
will-change: transform, filter, opacity;
}
.back-img {
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(var(--blur-px)) brightness(var(--back-brightness));
}
.back-bazaar,
.back-four {
top: auto;
bottom: 0;
left: 48%;
right: auto;
width: 112%;
height: auto;
object-fit: contain;
}
.back-bazaar {
z-index: 3;
opacity: 1;
filter: blur(var(--bazaar-blur-px)) brightness(var(--bazaar-brightness))
saturate(var(--bazaar-saturation));
transform: translate3d(-50%, var(--bazaar-y), 0) scale(0.86);
}
.back-four {
z-index: 1;
opacity: 0.72;
mix-blend-mode: screen;
transform: translate3d(-50%, calc(var(--four-y) - 110px), 0) scale(var(--four-scale));
}
/* ------------------------------------------------------------ sights slider */
.sights-slider {
z-index: 2;
left: 0;
right: 0;
top: var(--sights-top);
padding: 0;
opacity: 1;
visibility: var(--sights-visibility);
transform: translate3d(var(--sights-enter-x), var(--sights-y), 0) scale(var(--sights-scale));
transform-origin: 0 0;
pointer-events: auto;
will-change: transform;
}
.sights-track {
display: flex;
gap: clamp(16px, 1.15vw, 24px);
align-items: stretch;
transform: translate3d(calc(var(--sights-shift) - 18vw), 0, 0);
transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.sights-track.is-jumping {
transition: none;
}
.sight-card {
position: relative;
flex: 0 0 clamp(360px, 19.4vw, 430px);
height: 220px;
padding: 24px;
overflow: hidden;
border: 1px solid rgba(253, 241, 225, 0.42);
border-radius: 24px;
color: #000;
background: #fdf1e1;
box-shadow: 0 18px 52px rgba(2, 47, 64, 0.12);
backdrop-filter: none;
cursor: pointer;
pointer-events: auto;
user-select: none;
}
.sight-card::before,
.sight-card::after {
content: none;
}
.sight-card:focus-visible,
.sight-card.is-active {
outline: none;
}
.sight-kicker,
.sight-card h3,
.sight-card p {
position: relative;
z-index: 1;
text-shadow: none;
}
.sight-kicker {
display: block;
margin-bottom: 56px;
color: #000;
font-size: 12px;
font-weight: 500;
line-height: 1.05;
text-transform: uppercase;
}
.sight-pin {
position: absolute;
top: 24px;
right: 24px;
width: 67.2px;
height: 67.2px;
pointer-events: none;
}
.sight-card h3 {
position: absolute;
left: 24px;
right: 24px;
bottom: calc(24px + (16px * 1.16 * 2) + 12px);
max-width: calc(100% - 76px);
margin: 0;
color: #000;
font-size: 24px;
font-weight: 800;
line-height: 0.95;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sight-card p {
position: absolute;
left: 24px;
right: 24px;
bottom: 24px;
max-width: 100%;
margin: 12px 0 0;
color: #000;
font-size: 16px;
font-weight: 400;
line-height: 1.16;
display: -webkit-box;
max-height: calc(2em * 1.16);
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.sights-controls {
z-index: 5;
left: 48px;
right: auto;
top: calc(var(--sights-screen-top) + 220px + 16px);
display: flex;
justify-content: flex-start;
gap: 14px;
opacity: var(--sights-controls-opacity);
transform: translate3d(0, var(--sights-y), 0);
pointer-events: none;
will-change: transform, opacity;
}
.sights-controls.is-ready {
pointer-events: auto;
}
.sight-nav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: 999px;
color: #111411;
background: rgba(253, 241, 225, 0.94);
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
/* -------------------------------------------------------------- hero + rest */
.hero-title {
z-index: 3;
left: 50%;
top: clamp(122px, 19vh, 205px);
width: min(94vw, 1780px);
margin: 0;
color: #fdf1e1;
font-family: "Ogg Medium", serif;
font-size: 14rem;
font-weight: 500;
line-height: 0.78;
text-align: center;
text-shadow: none;
transform: translate3d(-50%, var(--title-y), 0) scale(var(--title-scale));
opacity: var(--title-opacity);
will-change: transform, opacity;
}
.bridge-img {
z-index: 4;
left: 50%;
bottom: var(--bridge-bottom);
width: min(var(--bridge-width), 2140px);
height: auto;
transform: translate3d(var(--bridge-x), var(--bridge-y), 0) scale(var(--bridge-scale));
transform-origin: 50% 48%;
}
.splitframe-img {
z-index: 6;
left: 50%;
bottom: -2vh;
width: min(118vw, 2240px);
height: auto;
pointer-events: none;
}
.splitframe-left {
transform: translate3d(var(--split-left-x), var(--split-left-y), 0) scale(var(--split-left-scale));
transform-origin: 21% 52%;
}
.splitframe-right {
transform: translate3d(var(--split-right-x), var(--split-right-y), 0)
scale(var(--split-right-scale));
transform-origin: 79% 52%;
}
.frame-two-img {
z-index: 5;
filter: none !important;
backdrop-filter: none;
left: 50%;
top: 50%;
width: min(122vw, 2160px);
height: auto;
opacity: var(--frame2-opacity);
transform: translate3d(var(--frame2-x), var(--frame2-y), 0) scale(var(--frame2-scale));
transform-origin: 50% 48%;
}
.shade {
inset: 0;
z-index: var(--shade-z);
pointer-events: none;
opacity: var(--shade-opacity);
background: linear-gradient(
180deg,
rgba(var(--blur-tint), var(--shade-top-alpha)) 0%,
rgba(var(--blur-tint), var(--shade-mid-alpha)) 48%,
rgba(var(--blur-tint), var(--shade-bottom-alpha)) 100%
);
}
.intro-copy {
z-index: 9;
left: 50%;
bottom: clamp(56px, 28vh, 400px);
width: min(560px, calc(100vw - 40px));
text-align: center;
transform: translate3d(-50%, var(--intro-copy-y), 0);
opacity: var(--intro-copy-opacity);
will-change: transform, opacity;
}
.intro-copy p {
margin: 0 auto;
max-width: 560px;
color: #fdf1e1;
font-size: 1.18rem;
font-weight: 500;
line-height: 1.18;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}
.hero-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 26px;
}
.hero-tags span {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 25px;
color: var(--ink);
border-radius: 999px;
background: #fdf1e1;
font-size: 0.98rem;
font-weight: 500;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.story-panel {
z-index: 10;
left: 50%;
top: 45%;
width: min(760px, calc(100vw - 42px));
text-align: center;
pointer-events: none;
transform: translate3d(-50%, -50%, 0);
will-change: transform, opacity;
}
.story-panel h2 {
margin: 0;
color: #fdf1e1;
font-family: "Ogg Medium", serif;
font-size: 4.75rem;
font-weight: 500;
line-height: 0.95;
text-shadow: 0 16px 38px var(--shadow);
}
.story-panel p {
width: min(520px, 100%);
margin: 26px auto 0;
color: #fdf1e1;
font-size: 1.14rem;
font-weight: 500;
line-height: 1.18;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}
.story-panel-bridge {
top: 60%;
opacity: var(--panel2-opacity);
transform: translate3d(-50%, var(--panel2-y), 0);
}
.story-panel-bazaar {
top: 29%;
opacity: var(--panel3-opacity);
transform: translate3d(-50%, var(--panel3-y), 0);
}
.facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 86px;
width: min(470px, 100%);
margin: 72px auto 0;
}
.facts dt {
color: #fdf1e1;
font-family: "Ogg Medium", serif;
font-size: 4.2rem;
font-weight: 500;
line-height: 0.9;
text-shadow: 0 14px 34px var(--shadow);
}
.facts dd {
margin: 18px 0 0;
color: #fdf1e1;
font-size: 1rem;
font-weight: 500;
line-height: 1.14;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}
.note-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
margin-top: 28px;
gap: 12px;
padding: 0 28px;
border-radius: 999px;
color: var(--ink);
background: #fdf1e1;
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
pointer-events: auto;
cursor: pointer;
}
.note-button span:first-child {
font-size: 1.25rem;
line-height: 1;
}
/* ----------------------------------------------------------- media queries */
@media (max-width: 1500px) {
.hero-title {
font-size: 11rem;
}
.story-panel h2 {
font-size: 4.1rem;
}
}
@media (max-width: 1100px) {
.hero-title {
top: 15vh;
font-size: 7.5rem;
}
.bridge-img {
width: 138vw;
}
.frame-two-img {
width: 132vw;
}
.story-panel h2 {
font-size: 3.2rem;
}
.facts {
gap: 34px;
margin-top: 44px;
}
.facts dt {
font-size: 3.2rem;
}
.sight-card {
flex-basis: clamp(320px, 40vw, 390px);
min-height: 178px;
}
}
@media (max-width: 640px) {
.stage {
min-height: 640px;
}
.site-header {
grid-template-columns: 1fr auto;
gap: 18px;
padding: 24px;
}
.site-nav {
grid-column: 1 / -1;
grid-row: 2;
justify-content: flex-start;
gap: 18px;
overflow-x: auto;
scrollbar-width: none;
}
.site-nav::-webkit-scrollbar {
display: none;
}
.hero-title {
top: 16vh;
font-size: 4.5rem;
}
.bridge-img {
bottom: 2vh;
width: 190vw;
}
.frame-two-img {
width: 176vw;
}
.intro-copy {
bottom: 42px;
}
.intro-copy p,
.story-panel p {
font-size: 1rem;
}
.hero-tags {
gap: 8px;
}
.hero-tags span {
min-height: 38px;
padding: 0 16px;
font-size: 0.88rem;
}
.story-panel {
top: 42%;
}
.story-panel-bazaar {
top: 26%;
}
.story-panel h2 {
font-size: 2.45rem;
}
.facts {
gap: 18px;
margin-top: 34px;
}
.facts dt {
font-size: 2.5rem;
}
.sights-slider {
padding: 0;
}
.sights-track {
gap: 12px;
transform: translate3d(calc(var(--sights-shift) - 18vw), 0, 0);
}
.sight-card {
flex-basis: min(82vw, 330px);
height: 220px;
padding: 24px;
border-radius: 24px;
}
.sights-controls {
top: calc(var(--sights-screen-top) + 236px);
}
.sight-card h3 {
max-width: 78%;
}
.sight-card p {
max-width: 100%;
margin-top: 10px;
}
.sight-kicker {
margin-bottom: 56px;
}
.sight-pin {
top: 24px;
right: 24px;
width: 57.6px;
height: 57.6px;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.scene-img,
.back-stack,
.hero-title,
.intro-copy,
.story-panel,
.sights-track,
.sights-slider {
transition: none;
}
}