/* REVO Media landing — core (desktop) styles. Design ref: Figma "Revo site" / Media / REVO Media */ :root { --media-bg: #0c0c0c; --media-panel: #171717; /* Both stops are translucent on purpose — whatever uses this one sits straight on the page background instead of on a solid fill. Same two colours as --media-card-gradient, just at 24%. */ --media-gradient-soft: linear-gradient( 94.4deg, rgba(37, 37, 39, 0.24) -30.57%, rgba(134, 134, 141, 0.24) 176.42% ); --media-card: #1d1d1f; --media-card-gradient: linear-gradient(115deg, #252527 45%, #86868d 190%); --media-red: #dc353c; --media-light: #f5f5f6; --media-gray: #84848c; --media-gray-2: #84848c; --media-white-55: rgba(255, 255, 255, 0.55); --media-white-75: rgba(255, 255, 255, 0.75); --media-silver: linear-gradient(180deg, #ffffff 30%, #999999 100%); --media-radius: 64px; --media-radius-card: 48px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; } /* No overflow-x here on purpose: it would turn into its own scroll container, and since the page actually scrolls in the viewport, every sticky descendant would sit in a box with no scroll range and never stick. The `overflow-x: hidden` on above propagates to the viewport and clips the horizontal bleed on its own. */ body.media { font-family: "Onest", system-ui, sans-serif; background: var(--media-bg); color: #fff; -webkit-font-smoothing: antialiased; } .media main, .media-footer { max-width: 1440px; margin-left: auto; margin-right: auto; } .media button { font-family: inherit; cursor: pointer; border: 0; } .media img { display: block; max-width: 100%; } /* ---------- Shared ---------- */ .media-section__title { font-size: 56px; font-weight: 600; letter-spacing: -2px; line-height: 1.05; color: var(--media-light); } .media-section__subtitle { margin-top: 24px; font-size: 24px; font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, 0.72); } .media-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--media-red); color: var(--media-light); font-weight: 600; white-space: nowrap; transition: filter 0.2s ease, transform 0.15s ease; } .media-btn:hover { filter: brightness(1.1); } /* The translucent fill is what two of the three panels want; services overrides it with its own. */ .media-panel { background: var(--media-gradient-soft); border-radius: var(--media-radius); } /* Cards shared between services and why sections */ .media-card { border-radius: 40px; background: var(--media-card-gradient); padding: 32px 42px 40px; } .media-card__dot { display: block; width: 40px; height: 40px; border-radius: 50%; background: var(--media-red); } .media-card h3 { margin-top: 32px; font-size: 36px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--media-light); } .media-card p { margin-top: 16px; font-size: 22px; font-weight: 500; line-height: 1.15; color: var(--media-white-55); } /* ---------- Logo ---------- */ .media-logo { display: block; width: 352.8px; height: auto; max-width: 100%; } .media-header__logo { display: block; flex: 0 1 auto; min-width: 0; } /* ---------- Header ---------- */ .media-header { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 1416px; z-index: 50; height: 80px; padding: 0 12px 0 28px; display: flex; align-items: center; justify-content: space-between; border-radius: 28px; background: rgba(10, 10, 10, 0.82); border: 1px solid rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .media-header__actions { display: flex; align-items: center; gap: 12px; } .media-header__lang { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 48px; padding: 0 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.12); font-size: 14px; font-weight: 500; line-height: 24px; color: var(--media-light); } .media-header__lang svg { width: 16px; height: 16px; } .media-header__cta { height: 62px; padding: 0 20px; border-radius: 25px; background: #dc353c; font-size: 17.5px; font-weight: 500; line-height: 30px; } /* ---------- Language dropdown ---------- */ .media-lang { position: relative; } .media-lang__list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 168px; padding: 8px; border-radius: 16px; background: #1a1a1c; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); } .media-lang__list:not([hidden]) { display: flex; flex-direction: column; gap: 2px; } .media-lang__list a { padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.65); text-decoration: none; white-space: nowrap; } .media-lang__list a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .media-lang__list a.is-active { color: #fff; background: #252527; } .media-lang__short { display: none; } /* ---------- Hero ---------- */ .media-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 200px 72px 90px; min-height: 760px; overflow: hidden; } .media-hero__content { position: relative; z-index: 1; max-width: 800px; } .media-hero__title { font-size: 96px; font-weight: 600; letter-spacing: -3.6px; line-height: 1; background: var(--media-silver); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; /* Descenders reach below the line box at line-height 1, and a background-clipped fill only paints inside the element box — without this padding the tails of y/g/p simply vanish. The negative margin gives the room back so the layout doesn't grow. */ padding-bottom: 0.15em; margin-bottom: -0.15em; } .media-hero__subtitle { margin-top: 32px; max-width: 604px; font-size: 24px; line-height: 1.25; color: var(--media-gray); } .media-hero__cta { margin-top: 44px; height: 60px; padding: 0 30px; font-size: 17px; } /* Rotating word column — every word sits upright on one true circular arc: the active word rests at its natural position, and each neighbor curls back to the left and up/down along the same circle the further it sits from center. No tilt, no rotation — words stay flat and legible the whole way, only their position on the curve moves. See media.js setupWordTicker(). */ .media-hero__words { position: relative; flex: 0 0 460px; height: 620px; /* Clip top/bottom only (for the fade mask below) — left stays open so receding words can curl back without clipping, guarded instead by the JS-computed minTranslateX so they never reach the hero title. */ clip-path: inset(0 0 0 -300px); -webkit-mask-image: linear-gradient( 180deg, transparent 0%, #000 32%, #000 68%, transparent 100% ); mask-image: linear-gradient( 180deg, transparent 0%, #000 32%, #000 68%, transparent 100% ); } .media-hero__words-track { position: relative; width: 100%; height: 100%; } .media-hero__word { position: absolute; top: 50%; left: 0; display: flex; align-items: center; font-size: 78px; font-weight: 600; letter-spacing: -2px; line-height: 1; white-space: nowrap; /* Every word carries the silver gradient at all times, active or not. Swapping fill modes on the active word instead (solid colour <-> gradient text-clip) can't be transitioned, so the word visibly flashed the instant the class flipped. Only opacity separates the active word now, and that animates cleanly. */ color: transparent; background: var(--media-silver); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* Transparent until the ticker has placed each word around the rim — otherwise the whole set flashes as an unreadable pile in the middle on first paint. media.js fades them in once positioned. */ opacity: 0; /* Same descender rescue as the hero title — the clipped fill stops at the box edge, so give the tails of y/g room to paint. */ padding-bottom: 0.15em; /* Rotation pivots where the word meets the rim, so the tilt reads as the word lying along the wheel's edge, not seesawing in place. */ transform-origin: left center; will-change: transform, opacity; transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1), opacity 1s cubic-bezier(0.65, 0, 0.35, 1); } /* Invisible spacer inside every word — keeps the text indented so the fixed indicator dot below always has room at the active position. */ .media-hero__word-dot { width: 24px; height: 24px; margin-right: 24px; border-radius: 50%; opacity: 0; } /* The one visible dot: a fixed indicator at the active (front) position. It never animates at all — the wheel turns behind it and each word arrives at the dot, so there's nothing to fade, lag, or double up. */ .media-hero__dot { position: absolute; top: 50%; left: 0; z-index: 1; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--media-red); } /* ---------- Showreel ---------- */ /* The only panel with its own fill — dark and opaque, unlike the translucent one .media-panel hands the other two. */ .media-services { padding: 28px 28px 24px; background: #171717; } .media-services__container { width: 100%; max-width: 1625px; margin-inline: auto; } .media-showreel { position: relative; overflow: hidden; border-radius: var(--media-radius-card); } .media-showreel::after { position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: rgba(0, 0, 0, 0.35); content: ""; pointer-events: none; } .media-showreel__media { width: 100%; aspect-ratio: 1740 / 900; object-fit: cover; border-radius: inherit; display: block; } .media-showreel__brand { position: absolute; top: 28px; left: 28px; z-index: 2; width: min(352.8px, calc(100% - 56px)); height: auto; pointer-events: none; } /* The team photo is squarer than the 1740/900 frame, so `cover` has to crop it vertically. Bias the crop upward — the top of the shot is just ceiling, while the bottom row of people sits right at the edge. */ .media-showreel__media--photo { object-position: center -30%; } .media-showreel__badges { position: absolute; top: -14px; left: 36px; z-index: 2; display: flex; pointer-events: none; transition: opacity 0.4s ease; } .media-showreel.is-sound-on .media-showreel__badges { opacity: 0; } .media-showreel__badge { display: inline-flex; flex-direction: column; justify-content: center; padding: 18px 28px; border-radius: 24px; font-size: 22px; font-weight: 500; line-height: 1.1; color: #fff; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); } .media-showreel__badge--projects { background: rgba(0, 201, 80, 0.2); transform: rotate(-9deg); } .media-showreel__badge--sales { margin-left: -10px; background: rgba(0, 85, 244, 0.2); transform: rotate(7deg) translateY(14px); } .media-showreel__sound { position: absolute; right: 28px; bottom: 28px; z-index: 2; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; color: #fff; transition: background 0.2s ease; } .media-showreel__sound:hover { background: rgba(255, 255, 255, 0.28); } .media-showreel__icon-sound { display: none; } .media-showreel.is-sound-on .media-showreel__icon-muted { display: none; } .media-showreel.is-sound-on .media-showreel__icon-sound { display: block; } /* ---------- Services ---------- */ .media-services__intro { padding: 64px 44px 0; } .media-services__intro .media-section__subtitle { max-width: 1180px; font-weight: 400; color: rgba(255, 255, 255, 0.55); } .media-services__grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .media-services__card { background: #272728; border: 0; padding: 28px 32px 34px; min-height: 196px; } .media-services__card h3 { margin-top: 26px; font-size: 30px; } .media-services__card p { margin-top: 12px; font-size: 17px; line-height: 1.25; color: var(--media-gray); } /* ---------- Process ---------- */ .media-process { padding: 130px 72px; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 72px; align-items: start; } /* The heading stays put while its steps scroll past. `align-items: start` above is what makes that possible — stretched to the row height the heading would fill its whole grid area and have nowhere left to travel. The offset clears the fixed header (80px tall, sitting 16px down) with a little air left under it. */ .media-process > .media-section__title { position: sticky; top: 140px; } .media-process__list { display: flex; flex-direction: column; gap: 12px; } .media-process__row { position: relative; display: flex; align-items: center; min-height: 128px; padding: 26px 36px; border-radius: 36px; /* Mirror of the old 100deg — the light edge belongs on the right, by the step number, with the dark end under the text. */ background: linear-gradient( 280deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 70% ); overflow: hidden; } .media-process__info h3 { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--media-light); } .media-process__info p { margin-top: 10px; max-width: 420px; font-size: 18px; font-weight: 500; line-height: 1.2; color: rgba(255, 255, 255, 0.5); } .media-process__num { position: absolute; right: 22px; top: 50%; transform: translateY(-46%); font-size: 180px; font-weight: 600; line-height: 1; color: rgba(255, 255, 255, 0.08); pointer-events: none; } /* ---------- Trusted ---------- */ .media-trusted { padding: 0 0 28px; overflow: hidden; background: #171717; } .media-trusted__intro { padding: 64px 72px 0; } .media-trusted__track { margin-top: 48px; display: flex; gap: 12px; padding: 0 28px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; } .media-trusted__track::-webkit-scrollbar { display: none; } .media-trusted__track.is-dragging { cursor: grabbing; scroll-behavior: auto; } .media-trusted__card { position: relative; flex: 0 0 296px; height: 526px; border-radius: 28px; overflow: hidden; background: #1a1a1c; } .media-trusted__card img { width: 100%; height: 100%; object-fit: cover; } .media-trusted__play { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(12, 12, 12, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; color: #fff; } .media-trusted__partners { margin-top: 44px; padding-bottom: 36px; overflow: hidden; } .media-trusted__partners-row { display: flex; align-items: center; width: max-content; animation: media-marquee 36s linear infinite; } .media-trusted__partners-group { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; padding-right: 12px; } @keyframes media-marquee { from { transform: translateX(0); } to { transform: translateX(-33.3333333333%); } } .media-trusted__partner { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 104px; min-width: 208px; padding: 0 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.05); } .media-trusted__partner-logo { height: 40px; width: auto; } .media-trusted__partner-logo--kon { height: 15px; } .media-trusted__partner-logo--tezavia { height: 96px; } .media-trusted__partner-logo--itpark { height: 78px; } .media-trusted__partner-logo--garage { height: 38px; } .media-trusted__partner-logo--asaxiy { height: 36px; } /* ---------- Why ---------- */ .media-why { padding: 130px 72px 60px; } .media-why__grid { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* These cards take the translucent fill from the design instead of the opaque .media-card one — nothing sits behind them here, so they read against the page background. */ .media-why__card { min-height: 260px; background: var(--media-gradient-soft); } /* ---------- Footer ---------- */ .media-footer { margin-top: 70px; margin-bottom: 0; padding: 72px; border-radius: 64px 64px 0 0; } .media-footer__cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .media-footer__cta-text .media-section__title { max-width: 645px; font-size: 52px; line-height: 1.05; } .media-footer__cta-text p { margin-top: 24px; max-width: 585px; font-size: 24px; font-weight: 400; line-height: 1.3; color: var(--media-gray); } .media-footer__cta-btn { flex: 0 0 auto; width: 560px; height: 160px; border-radius: 56px; padding: 0; background: var(--media-red); display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--media-light); font-size: 38px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; transition: filter 0.2s ease; } .media-footer__cta-btn span { flex: 0 0 auto; white-space: nowrap; } .media-footer__cta-btn svg { flex: 0 0 auto; width: 52px; height: 52px; } .media-footer__cta-btn:hover { filter: brightness(1.1); } .media-footer__divider { margin: 52px 0; border: 0; height: 1px; background: rgba(255, 255, 255, 0.15); } .media-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; height: 246px; } .media-footer__col h4 { font-size: 20px; font-weight: 600; color: var(--media-light); } .media-footer__col a, .media-footer__col p { display: block; margin-top: 20px; font-size: 17px; font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, 0.85); text-decoration: none; } .media-footer__col a:hover { color: #fff; } /* ---------- Modals ---------- */ .media-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; } .media-modal[hidden] { display: none; } .media-modal__backdrop { position: absolute; inset: 0; background: rgba(8, 8, 8, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .media-modal__panel { position: relative; background: #151516; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 48px; max-height: calc(100vh - 48px); overflow-y: auto; } .media-modal__panel--form { width: 1240px; max-width: 100%; padding: 60px; display: grid; grid-template-columns: 1fr 480px; gap: 60px; } .media-modal__close { position: absolute; top: 28px; right: 28px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; color: #fff; } .media-modal__close:hover { background: rgba(255, 255, 255, 0.3); } .media-modal__text h2 { font-size: 76px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; background: var(--media-silver); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; /* Same descender rescue as the hero title. */ padding-bottom: 0.15em; margin-bottom: -0.15em; } .media-modal__text p { margin-top: 28px; max-width: 480px; font-size: 20px; font-weight: 500; line-height: 1.35; color: var(--media-white-55); } .media-form { display: flex; flex-direction: column; gap: 14px; } .media-form__input { width: 100%; height: 64px; padding: 0 24px; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 20px; background: #2a2a2c; font-family: inherit; font-size: 17px; font-weight: 500; color: #fff; } .media-form__input::placeholder { color: #85858a; } .media-form__input:focus { outline: 2px solid var(--media-red); outline-offset: -1px; } .media-form__textarea { height: 190px; padding: 20px 24px; resize: none; line-height: 1.35; } .media-form__submit { position: relative; width: 100%; height: 64px; margin-top: 12px; border-radius: 20px; background: var(--media-red); color: #fff; font-size: 17px; font-weight: 600; transition: filter 0.2s ease; } .media-form__submit:hover { filter: brightness(1.1); } .media-form__submit.is-loading { color: transparent; pointer-events: none; } .media-form__submit.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: media-spin 0.7s linear infinite; } @keyframes media-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .media-form__submit.is-loading::after { animation-duration: 1.4s; } } .media-modal__panel--success { width: 900px; max-width: 100%; padding: 60px; } .media-modal__panel--success h2 { font-size: clamp(38px, 6vw, 72px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; } .media-modal__panel--success p { margin-top: 32px; font-size: 20px; font-weight: 500; line-height: 1.35; color: var(--media-white-55); } .media-modal__panel--success .media-form__submit { margin-top: 44px; } body.media--modal-open { overflow: hidden; } /* ---------- Scroll-reveal (class added by JS; no-JS = visible) ---------- */ .media-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .media-reveal.is-inview { opacity: 1; transform: none; } /* ---------- Modal entrance ---------- */ .media-modal:not([hidden]) .media-modal__backdrop { animation: media-fade-in 0.3s ease both; } .media-modal:not([hidden]) .media-modal__panel { animation: media-modal-in 0.36s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes media-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes media-modal-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: none; } } /* ---------- Card hover lift (pointer devices only) ---------- */ .media-card, .media-trusted__card { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } @media (hover: hover) { .media-card:hover { transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .media-reveal { opacity: 1; transform: none; transition: none; } .media-modal:not([hidden]) .media-modal__backdrop, .media-modal:not([hidden]) .media-modal__panel { animation: none; } .media-trusted__partners-row { animation: none; } }