/* multipixels-main */
@font-face { font-family: "MP Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("https://multiipixels.com/wp-content/themes/multi-pixels-base/assets/css/../fonts/manrope-latin-variable.woff2") format("woff2"); } @font-face { font-family: "MP Cairo"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("https://multiipixels.com/wp-content/themes/multi-pixels-base/assets/css/../fonts/cairo-arabic-variable.woff2") format("woff2"); } :root { --mp-paper: #f8faf9; --mp-white: #ffffff; --mp-ink: #25272b; --mp-muted: #72777d; --mp-line: rgba(37, 39, 43, 0.14); --mp-line-soft: rgba(37, 39, 43, 0.08); --mp-red: #e71f2f; --mp-blue: #1b67de; --mp-mint: #dff2e4; --mp-header-height: 92px; --mp-container: 1220px; --mp-content: 800px; --mp-radius-sm: 12px; --mp-radius-md: 22px; --mp-radius-lg: 36px; --mp-shadow-soft: 0 24px 70px rgba(33, 43, 38, 0.08); --mp-transition: 220ms cubic-bezier(0.2, 0.75, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--mp-paper); max-width: 100%; overflow-x: hidden; overflow-x: clip; } body { margin: 0; width: 100%; max-width: 100%; overflow-x: hidden; overflow-x: clip; background: transparent; color: var(--mp-ink); font-family: "MP Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; isolation: isolate; line-height: 1.7; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body.menu-is-open { overflow: hidden; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } button, input, textarea, select { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--mp-red); } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.7em; color: var(--mp-ink); font-weight: 750; line-height: 1.08; letter-spacing: -0.035em; } p { margin: 0 0 1.4em; } ul, ol { margin: 0 0 1.5em; padding-inline-start: 1.25em; } blockquote { margin: 2.5rem 0; padding: 1.5rem 0 1.5rem 1.6rem; border-left: 3px solid var(--mp-red); color: var(--mp-ink); font-size: clamp(1.2rem, 1rem + 1vw, 1.75rem); line-height: 1.45; } hr { border: 0; border-top: 1px solid var(--mp-line); } ::selection { background: var(--mp-red); color: var(--mp-white); } :focus-visible { outline: 2px solid var(--mp-blue); outline-offset: 4px; } .mp-container { width: min(calc(100% - 48px), var(--mp-container)); margin-inline: auto; } .mp-container--wide { width: min(calc(100% - 48px), 1440px); } .mp-container--content { width: min(calc(100% - 48px), var(--mp-content)); } .site-main { position: relative; z-index: 1; min-height: 60vh; padding-top: var(--mp-header-height); } .site-main--home, .site-main--canvas { padding-top: 0; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .screen-reader-text:focus { z-index: 100000; top: 10px; left: 10px; display: block; width: auto; height: auto; padding: 12px 18px; clip: auto; border-radius: 999px; background: var(--mp-ink); color: var(--mp-white); font-size: 0.85rem; font-weight: 700; text-decoration: none; } .skip-link { position: fixed !important; } .mp-global-pixels { position: fixed; z-index: 0; inset: 0; overflow: hidden; background-image: radial-gradient(circle, rgba(76, 94, 84, 0.12) 1px, transparent 1.5px), radial-gradient(circle, rgba(231, 31, 47, 0.13) 1px, transparent 1.5px); background-position: 0 0, 24px 24px; background-size: 48px 48px; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent, black 9%, black 91%, transparent); mask-image: linear-gradient(to bottom, transparent, black 9%, black 91%, transparent); } .mp-global-pixels.is-ready { background-image: none; } .mp-global-pixels__canvas { width: 100%; height: 100%; max-width: none; } .alignwide { width: min(100vw - 48px, var(--mp-container)); max-width: none; margin-inline: calc((min(100vw - 48px, var(--mp-container)) - min(100vw - 48px, var(--mp-content))) / -2); } .alignfull { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); } .mp-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--mp-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; } .mp-kicker::before { content: ""; width: 6px; height: 6px; background: var(--mp-red); box-shadow: 9px 0 0 rgba(27, 103, 222, 0.4); } .mp-button, .wp-element-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0.8rem 1.35rem; border: 1px solid var(--mp-ink); border-radius: 999px; background: var(--mp-ink); color: var(--mp-white); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; transition: transform var(--mp-transition), background var(--mp-transition), color var(--mp-transition), border-color var(--mp-transition); } .mp-button:hover, .wp-element-button:hover { transform: translateY(-2px); border-color: var(--mp-red); background: var(--mp-red); color: var(--mp-white); } .mp-button--light { border-color: rgba(255, 255, 255, 0.35); background: var(--mp-white); color: var(--mp-ink); } .mp-button--light:hover { border-color: var(--mp-white); background: transparent; color: var(--mp-white); } html.mp-limited-effects .mp-market-strip__track, html.mp-limited-effects .mp-home-cta__pixels i, html.mp-limited-effects .mp-page-art, html.mp-limited-effects .mp-market-hero__pixels i, html.mp-limited-effects .mp-contact-pixels i, html.mp-limited-effects .mp-footer-pixel-edge__particles i, html.mp-limited-effects .mp-footer-source__particles i { animation: none !important; } .site-header { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; max-width: 100vw; height: var(--mp-header-height); border-bottom: 1px solid transparent; background: rgba(248, 250, 249, 0.74); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: height var(--mp-transition), background var(--mp-transition), border-color var(--mp-transition), box-shadow var(--mp-transition); } .site-header.is-scrolled { height: 76px; border-color: var(--mp-line-soft); background: rgba(255, 255, 255, 0.9); box-shadow: 0 10px 40px rgba(38, 48, 43, 0.04); } .site-header__inner { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; height: 100%; gap: clamp(20px, 4vw, 64px); min-width: 0; } .mp-language-switcher { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; min-height: 42px; padding-inline: 10px; border: 1px solid var(--mp-line); border-radius: 999px; font-size: 0.72rem; font-weight: 800; text-decoration: none; white-space: nowrap; gap: 5px; } .mp-language-switcher > span { font-size: 1.05rem; line-height: 1; } .mp-language-switcher small { font-size: 0.58rem; font-weight: 850; } .mp-language-switcher:hover { border-color: var(--mp-blue); background: rgba(27, 103, 222, 0.06); color: var(--mp-blue); } .site-brand { display: inline-flex; align-items: center; width: max-content; color: var(--mp-ink); text-decoration: none; } .custom-logo-link { display: inline-flex; align-items: center; } .custom-logo { width: auto; max-width: 190px; max-height: 58px; object-fit: contain; } .mp-brand-logo { display: inline-flex; align-items: center; width: clamp(150px, 12vw, 190px); text-decoration: none; } .mp-brand-logo img { display: block; width: 100%; height: auto; } .mp-wordmark { position: relative; display: inline-flex; flex-direction: column; align-items: flex-end; color: var(--mp-ink); line-height: 0.8; text-decoration: none; } .mp-wordmark__main { position: relative; display: inline-flex; align-items: baseline; font-size: clamp(1.55rem, 1.3rem + 0.7vw, 2.15rem); letter-spacing: -0.075em; } .mp-wordmark__multi { font-weight: 300; } .mp-wordmark strong { font-weight: 850; } .mp-wordmark small { margin-top: 7px; padding-right: 1px; color: #45494c; font-size: 0.34rem; font-weight: 800; letter-spacing: 0.19em; } .mp-wordmark__red, .mp-wordmark__blue { position: absolute; display: block; width: 5px; height: 5px; } .mp-wordmark__red { top: -7px; right: 32%; background: var(--mp-red); } .mp-wordmark__blue { right: -9px; bottom: 0; background: var(--mp-blue); } .primary-navigation { justify-self: end; } .mp-menu, .footer-menu { display: flex; align-items: center; gap: clamp(18px, 2vw, 36px); margin: 0; padding: 0; list-style: none; } .mp-menu .menu-item { position: relative; } .mp-menu a { position: relative; display: inline-flex; align-items: center; padding: 12px 0; color: var(--mp-ink); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; } .mp-menu a::after { content: ""; position: absolute; right: 100%; bottom: 8px; left: 0; height: 2px; background: var(--mp-red); transition: right var(--mp-transition); } .mp-menu a:hover::after, .mp-menu .current-menu-item > a::after, .mp-menu a:focus-visible::after { right: 0; } .mp-menu .sub-menu { position: absolute; top: calc(100% - 2px); left: -20px; min-width: 220px; margin: 0; padding: 12px; border: 1px solid var(--mp-line-soft); border-radius: var(--mp-radius-sm); background: rgba(255, 255, 255, 0.98); box-shadow: var(--mp-shadow-soft); list-style: none; opacity: 0; transform: translateY(8px); visibility: hidden; transition: opacity var(--mp-transition), transform var(--mp-transition), visibility var(--mp-transition); } .mp-menu .menu-item:hover > .sub-menu, .mp-menu .menu-item:focus-within > .sub-menu { opacity: 1; transform: translateY(0); visibility: visible; } .mp-menu .sub-menu a { display: flex; padding: 10px 12px; border-radius: 8px; } .mp-menu .sub-menu a::after { display: none; } .mp-menu .sub-menu a:hover { background: var(--mp-paper); } .header-cta { display: inline-flex; flex-shrink: 0; align-items: center; gap: 10px; min-height: 42px; padding: 0 17px; border: 1px solid var(--mp-line); border-radius: 999px; color: var(--mp-ink); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: background var(--mp-transition), color var(--mp-transition), border-color var(--mp-transition); } .header-cta:hover { border-color: var(--mp-ink); background: var(--mp-ink); color: var(--mp-white); } .header-cta--whatsapp { border-color: #16a765; background: #16a765; color: #fff; } .header-cta--whatsapp:hover { border-color: #118450; background: #118450; color: #fff; } .mp-direct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .mp-button--whatsapp { border-color: #16a765; background: #16a765; color: #fff; } .mp-button--whatsapp:hover { border-color: #118450; background: #118450; color: #fff; } .mp-button--call { border-color: var(--mp-ink); background: transparent; color: var(--mp-ink); } .mp-button--call:hover { background: var(--mp-ink); color: #fff; } .mp-action-icon { display: block; width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; transition: filter var(--mp-transition); } .mp-button .mp-action-icon, .header-cta--whatsapp .mp-action-icon { filter: brightness(0) invert(1); } .mp-button--call .mp-action-icon { filter: none; } .mp-button--call:hover .mp-action-icon { filter: brightness(0) invert(1); } .mp-page-cta__button .wp-element-button::before { width: 20px; height: 20px; flex: 0 0 20px; background: url("https://multiipixels.com/wp-content/themes/multi-pixels-base/assets/css/../images/icons/form.png") center / contain no-repeat; content: ""; filter: brightness(0) invert(1); } .menu-toggle { display: none; width: 46px; height: 46px; padding: 12px; border: 1px solid var(--mp-line); border-radius: 50%; background: rgba(255, 255, 255, 0.8); color: var(--mp-ink); cursor: pointer; } .menu-toggle > span:not(.screen-reader-text) { display: block; width: 100%; height: 1px; margin: 5px 0; background: currentColor; transition: transform var(--mp-transition), opacity var(--mp-transition); } .menu-toggle[aria-expanded="true"] > span:nth-of-type(2) { transform: translateY(3px) rotate(45deg); } .menu-toggle[aria-expanded="true"] > span:nth-of-type(3) { transform: translateY(-3px) rotate(-45deg); } .page-entry__header, .single-entry__header { padding: clamp(70px, 9vw, 140px) 0 clamp(48px, 6vw, 90px); border-bottom: 1px solid var(--mp-line-soft); background: radial-gradient(circle at 70% 20%, rgba(223, 242, 228, 0.65), transparent 36%), rgba(248, 250, 249, 0.8); } .page-entry__title, .single-entry__title, .archive-header h1 { margin: 0; font-size: clamp(2.8rem, 1.7rem + 4vw, 6rem); letter-spacing: -0.055em; } .entry-content { padding-block: clamp(52px, 7vw, 96px); } .entry-content > * { max-width: 100%; } .entry-content h2 { margin-top: 2.2em; font-size: clamp(1.9rem, 1.5rem + 1.3vw, 3rem); } .entry-content h3 { margin-top: 1.9em; font-size: clamp(1.4rem, 1.2rem + 0.7vw, 2rem); } .entry-content p, .entry-content li { color: #454a4d; line-height: 1.82; } .entry-content:not(.entry-content--home) > p { margin-bottom: 1.25em; } .entry-content:not(.entry-content--home) > :is(ul, ol) { margin-bottom: 1.55em; } .entry-content:not(.entry-content--home) > :is(h2, h3):first-child { margin-top: 0; } .entry-content:not(.entry-content--home) > *:last-child { margin-bottom: 0; } .entry-content a { color: var(--mp-blue); } .entry-content a:hover { color: var(--mp-red); } .entry-content img { border-radius: var(--mp-radius-md); } .single-entry__meta, .post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--mp-muted); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; } .single-entry__meta > span:first-child, .post-card__meta > span:first-child { color: var(--mp-red); } .single-entry__excerpt { max-width: 680px; margin: 24px 0 0; color: var(--mp-muted); font-size: 1.15rem; } .single-entry__featured { margin-top: 64px; } .single-entry__featured picture { display: block; } .single-entry__featured img { width: 100%; max-height: 760px; border-radius: var(--mp-radius-lg); object-fit: cover; box-shadow: 0 28px 80px rgba(33, 43, 55, 0.1); } .single-entry__footer { padding-bottom: 60px; } .entry-tags { display: flex; flex-wrap: wrap; gap: 8px; } .entry-tags a { padding: 7px 12px; border: 1px solid var(--mp-line); border-radius: 999px; font-size: 0.75rem; text-decoration: none; } .single-entry__cta { position: relative; overflow: hidden; margin-top: clamp(48px, 7vw, 84px); padding: clamp(28px, 5vw, 58px); border: 1px solid var(--mp-line-soft); border-radius: var(--mp-radius-lg); background: radial-gradient(circle at 12% 14%, rgba(231, 31, 47, 0.1), transparent 30%), radial-gradient(circle at 88% 82%, rgba(27, 103, 222, 0.1), transparent 30%), rgba(255, 255, 255, 0.82); box-shadow: var(--mp-shadow-soft); } .single-entry__cta::after { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(37, 39, 43, 0.13) 1px, transparent 1px); background-size: 22px 22px; content: ""; opacity: 0.25; mask-image: linear-gradient(120deg, transparent 38%, black); pointer-events: none; } .single-entry__cta > * { position: relative; z-index: 1; } .single-entry__cta-kicker { margin-bottom: 12px; color: var(--mp-red); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .single-entry__cta h2 { max-width: 680px; margin-bottom: 14px; font-size: clamp(1.7rem, 1.35rem + 1.4vw, 2.8rem); } .single-entry__cta > p:not(.single-entry__cta-kicker) { max-width: 620px; color: var(--mp-muted); } .single-entry__cta-actions { margin-top: 26px; } .post-navigation, .posts-navigation, .pagination { width: min(calc(100% - 48px), var(--mp-container)); margin: 60px auto; } .nav-links { display: flex; justify-content: space-between; gap: 24px; } .nav-previous, .nav-next { flex: 1; } .nav-next { text-align: right; } .post-navigation a { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--mp-line-soft); border-radius: var(--mp-radius-md); background: var(--mp-white); text-decoration: none; } .nav-subtitle { color: var(--mp-muted); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .nav-title { margin-top: 7px; font-weight: 700; } .archive-layout { padding-block: clamp(68px, 8vw, 120px); } .archive-header { max-width: 900px; margin-bottom: 60px; } .archive-description { max-width: 650px; margin-top: 20px; color: var(--mp-muted); } .posts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 38px); } .post-card { overflow: hidden; border: 1px solid var(--mp-line-soft); border-radius: var(--mp-radius-md); background: rgba(255, 255, 255, 0.7); transition: transform var(--mp-transition), box-shadow var(--mp-transition), border-color var(--mp-transition); } .post-card:hover { transform: translateY(-6px); border-color: rgba(37, 39, 43, 0.16); box-shadow: var(--mp-shadow-soft); } .post-card__image { position: relative; display: block; overflow: hidden; aspect-ratio: 1.54; background: #edf1ef; } .post-card__image::after { content: ""; position: absolute; right: 0; bottom: 0; width: 34%; height: 34%; background-image: linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.75) 50%), linear-gradient(transparent 48%, rgba(255, 255, 255, 0.75) 50%); background-size: 12px 12px; opacity: 0.62; mask-image: linear-gradient(135deg, transparent, black); } .post-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.2, 0.75, 0.2, 1); } .post-card__image picture { display: block; width: 100%; height: 100%; } .post-card:hover .post-card__image img { transform: scale(1.035); } .post-card__placeholder { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(231, 31, 47, 0.08), transparent 40%), linear-gradient(45deg, rgba(27, 103, 222, 0.08), transparent 44%), radial-gradient(circle, rgba(82, 112, 97, 0.18) 1px, transparent 1px); background-size: auto, auto, 22px 22px; } .post-card__content { padding: 25px; } .post-card__title { margin-bottom: 14px; font-size: clamp(1.25rem, 1.08rem + 0.55vw, 1.7rem); } .post-card__title a { text-decoration: none; } .post-card__excerpt { color: var(--mp-muted); font-size: 0.92rem; } .post-card__excerpt p { margin-bottom: 18px; } .post-card__link { display: inline-flex; align-items: center; gap: 9px; font-size: 0.69rem; font-weight: 800; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; } .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px; border: 1px solid var(--mp-line); border-radius: 999px; text-decoration: none; } .page-numbers.current { border-color: var(--mp-ink); background: var(--mp-ink); color: var(--mp-white); } .search-form { display: flex; width: min(100%, 540px); margin-top: 24px; } .search-form label { flex: 1; } .search-field { width: 100%; height: 50px; padding: 0 18px; border: 1px solid var(--mp-line); border-right: 0; border-radius: 999px 0 0 999px; background: var(--mp-white); color: var(--mp-ink); } .search-submit { min-width: 110px; padding: 0 18px; border: 1px solid var(--mp-ink); border-radius: 0 999px 999px 0; background: var(--mp-ink); color: var(--mp-white); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; } .no-results { padding: 60px; border: 1px solid var(--mp-line-soft); border-radius: var(--mp-radius-lg); background: var(--mp-white); } .no-results h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem); } .mp-error-page { position: relative; display: grid; min-height: calc(100svh - var(--mp-header-height)); place-items: center; overflow: hidden; padding: 80px 0; background: radial-gradient(circle at 70% 30%, rgba(223, 242, 228, 0.8), transparent 36%), var(--mp-paper); } .mp-error-page__inner { position: relative; z-index: 1; max-width: 900px; text-align: center; } .mp-error-page__code { position: absolute; z-index: -1; top: 50%; left: 50%; color: rgba(37, 39, 43, 0.035); font-size: clamp(12rem, 30vw, 32rem); font-weight: 900; line-height: 1; transform: translate(-50%, -50%); } .mp-error-page h1 { font-size: clamp(2.7rem, 2rem + 4vw, 6rem); } .mp-error-page p { color: var(--mp-muted); } .mp-error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 30px; } .mp-error-page .search-form { margin-top: 0; } .comments-area { padding-block: 60px 100px; border-top: 1px solid var(--mp-line-soft); } .comments-title { font-size: 2rem; } .comment-list { margin: 30px 0 60px; padding: 0; list-style: none; } .comment-list .comment { margin-bottom: 18px; padding: 22px; border: 1px solid var(--mp-line-soft); border-radius: var(--mp-radius-md); background: var(--mp-white); } .comment-list .children { margin-top: 18px; list-style: none; } .comment-form input:not([type="submit"]), .comment-form textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--mp-line); border-radius: var(--mp-radius-sm); background: var(--mp-white); color: var(--mp-ink); } .comment-form .submit { padding: 13px 22px; border: 0; border-radius: 999px; background: var(--mp-ink); color: var(--mp-white); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; cursor: pointer; } .site-footer { position: relative; z-index: 1; border-top: 1px solid var(--mp-line-soft); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .site-footer__cta { position: relative; overflow: hidden; padding: clamp(50px, 7vw, 100px) 0; background: radial-gradient(circle at 18% 50%, rgba(231, 31, 47, 0.1), transparent 34%), radial-gradient(circle at 80% 32%, rgba(27, 103, 222, 0.09), transparent 30%), rgba(248, 250, 249, 0.96); color: var(--mp-ink); } .site-footer__cta::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(37, 39, 43, 0.09) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(90deg, transparent, black, transparent); } .site-footer__cta-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 30px; } .site-footer__cta .mp-kicker { color: var(--mp-muted); } .site-footer__cta h2 { margin: 0; color: var(--mp-ink); font-size: clamp(2.6rem, 1.8rem + 3vw, 5rem); letter-spacing: -0.055em; } .site-footer__cta .mp-button--light { border-color: var(--mp-ink); background: var(--mp-ink); color: var(--mp-white); } .site-footer__cta .mp-button--light:hover { border-color: var(--mp-red); background: var(--mp-red); color: var(--mp-white); } .site-footer__main { display: grid; grid-template-columns: minmax(250px, 0.8fr) 1.2fr; gap: 60px; padding-block: 64px; } .site-footer__brand p { max-width: 390px; margin-top: 24px; color: var(--mp-muted); font-size: 0.92rem; } .footer-navigation { align-self: center; justify-self: end; } .footer-menu { flex-wrap: wrap; justify-content: flex-end; } .footer-menu a { font-size: 0.75rem; font-weight: 700; text-decoration: none; } .site-footer__bottom { display: flex; justify-content: space-between; gap: 20px; padding-block: 20px; border-top: 1px solid var(--mp-line-soft); color: var(--mp-muted); font-size: 0.74rem; } .site-footer__bottom p { margin: 0; } .site-footer__bottom a { text-decoration: none; } @media (max-width: 1100px) { .header-cta { display: none; } .site-header__inner { grid-template-columns: auto 1fr auto; } .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { :root { --mp-header-height: 78px; } .mp-container, .mp-container--wide, .mp-container--content { width: min(calc(100% - 36px), var(--mp-container)); } .site-header__inner { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; width: min(calc(100% - 28px), var(--mp-container)); } .site-header .mp-brand-logo { width: clamp(112px, 36vw, 138px); max-width: 138px; } .mp-language-switcher { min-width: 44px; min-height: 40px; padding-inline: 7px; } .mp-language-switcher small { display: none; } .menu-toggle { display: block; justify-self: end; width: 42px; height: 42px; } .primary-navigation { position: fixed; z-index: -1; top: 0; right: 0; display: flex; width: min(86vw, 390px); max-width: calc(100vw - 34px); height: 100svh; padding: calc(var(--mp-header-height) + 54px) 30px 40px; background: rgba(255, 255, 255, 0.98); box-shadow: -24px 0 80px rgba(34, 43, 39, 0.12); opacity: 0; transform: translateX(105%); visibility: hidden; transition: transform 350ms cubic-bezier(0.2, 0.75, 0.2, 1), opacity 250ms ease, visibility 350ms ease; } .primary-navigation.is-open { opacity: 1; transform: translateX(0); visibility: visible; } .primary-navigation .mp-menu { align-items: stretch; flex: 1; flex-direction: column; gap: 0; overflow-y: auto; } .primary-navigation .mp-menu a { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--mp-line-soft); font-size: 0.86rem; } .mp-menu .sub-menu { position: static; display: block; padding: 0 0 0 16px; border: 0; background: transparent; box-shadow: none; opacity: 1; transform: none; visibility: visible; } .site-footer__main { grid-template-columns: 1fr; gap: 38px; } .footer-navigation { justify-self: start; } .footer-menu { justify-content: flex-start; } } @media (max-width: 680px) { .mp-direct-actions { width: 100%; } .mp-direct-actions .mp-button { flex: 1 1 145px; padding-inline: 1rem; white-space: nowrap; } .mp-container, .mp-container--wide, .mp-container--content { width: min(calc(100% - 28px), var(--mp-container)); } .custom-logo { max-width: 155px; max-height: 48px; } .mp-wordmark__main { font-size: 1.55rem; } .posts-grid { grid-template-columns: 1fr; } .page-entry__header, .single-entry__header { padding: 62px 0 50px; } .page-entry__title, .single-entry__title, .archive-header h1 { font-size: clamp(2.5rem, 12vw, 4rem); } .alignwide { width: calc(100vw - 28px); margin-inline: calc((calc(100vw - 28px) - 100%) / -2); } .nav-links, .site-footer__cta-inner, .site-footer__bottom { align-items: flex-start; flex-direction: column; } .nav-next { text-align: left; } .site-footer__cta h2 { font-size: clamp(2.5rem, 12vw, 4rem); } .footer-menu { align-items: flex-start; flex-direction: column; gap: 12px; } .no-results { padding: 32px 22px; } .mp-error-page__actions, .mp-error-page .search-form { width: 100%; } .mp-error-page__actions { flex-direction: column; align-items: stretch; } .search-submit { min-width: 90px; } .mp-global-pixels { background-size: 58px 58px; -webkit-mask-image: linear-gradient(to bottom, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(to bottom, transparent, black 6%, black 94%, transparent); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .mp-global-pixels { background-image: radial-gradient(circle, rgba(76, 94, 84, 0.1) 1px, transparent 1.5px), radial-gradient(circle, rgba(27, 103, 222, 0.1) 1px, transparent 1.5px); } } .mp-google-proof { padding: clamp(64px, 8vw, 108px) 0; border-block: 1px solid var(--mp-line-soft); background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 249, 0.92)), var(--mp-paper); } .mp-google-proof__header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.68fr); align-items: end; gap: clamp(28px, 6vw, 82px); margin-bottom: clamp(26px, 4vw, 46px); } .mp-google-proof__header .mp-kicker { grid-column: 1 / -1; } .mp-google-proof__header h2 { margin: 0; font-size: clamp(2rem, 1.55rem + 1.6vw, 3.7rem); line-height: 1.04; } .mp-google-proof__header p { margin: 0; color: var(--mp-muted); font-size: 0.92rem; line-height: 1.72; } .mp-google-proof__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 26px; border-top: 1px solid var(--mp-line); border-inline-start: 1px solid var(--mp-line); } .mp-google-proof__stats article { min-height: 134px; padding: clamp(20px, 2.4vw, 30px); border-inline-end: 1px solid var(--mp-line); border-bottom: 1px solid var(--mp-line); background: rgba(255, 255, 255, 0.78); } .mp-google-proof__stats strong { display: block; max-width: 240px; font-size: clamp(1.05rem, 0.96rem + 0.34vw, 1.36rem); line-height: 1.28; } .mp-google-proof__featured { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.36fr); align-items: center; gap: clamp(18px, 3vw, 34px); margin: 0 0 28px; padding: clamp(16px, 2vw, 24px); border: 1px solid var(--mp-line-soft); border-radius: 24px; background: rgba(255, 255, 255, 0.86); box-shadow: 0 18px 56px rgba(37, 39, 43, 0.055); } .mp-google-proof__featured picture { display: block; overflow: hidden; border: 1px solid var(--mp-line-soft); border-radius: 18px; background: #fff; } .mp-google-proof__featured img { display: block; width: 100%; height: auto; } .mp-google-proof__featured figcaption { margin: 0; color: var(--mp-muted); font-size: 0.78rem; line-height: 1.7; } .mp-google-proof__gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); margin: 10px 0 28px; } .mp-google-proof__gallery figure { margin: 0; overflow: hidden; border: 1px solid var(--mp-line-soft); border-radius: 24px; background: #fff; box-shadow: 0 18px 56px rgba(37, 39, 43, 0.055); } .mp-google-proof__gallery img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--mp-line-soft); } .mp-google-proof__gallery figcaption { display: grid; gap: 8px; padding: 18px 20px 21px; color: var(--mp-muted); font-size: 0.72rem; line-height: 1.5; } .mp-google-proof__gallery figcaption strong { color: var(--mp-ink); font-size: 0.84rem; } @media (max-width: 900px) { .mp-google-proof__header, .mp-google-proof__stats, .mp-google-proof__featured, .mp-google-proof__gallery { grid-template-columns: 1fr 1fr; } .mp-google-proof__header .mp-kicker, .mp-google-proof__header h2, .mp-google-proof__header p { grid-column: 1 / -1; } } @media (max-width: 580px) { .mp-google-proof__stats, .mp-google-proof__featured, .mp-google-proof__gallery { grid-template-columns: 1fr; } .mp-google-proof__stats article { min-height: 0; } }
/* multipixels-pages */
.site-main--canvas { padding-top: var(--mp-header-height); overflow: clip; } .mp-page-builder { position: relative; } .mp-page-builder > * { margin-block-start: 0; margin-block-end: 0; } .mp-page-hero { position: relative; isolation: isolate; display: grid; min-height: min(76svh, 760px); overflow: hidden; border-bottom: 1px solid var(--mp-line-soft); background: radial-gradient(circle at 14% 72%, rgba(231, 31, 47, 0.09), transparent 27%), radial-gradient(circle at 82% 24%, rgba(27, 103, 222, 0.08), transparent 28%), rgba(248, 250, 249, 0.62); } .mp-page-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, transparent 49.8%, rgba(37, 39, 43, 0.035) 50%, transparent 50.2%), linear-gradient(transparent 49.8%, rgba(37, 39, 43, 0.03) 50%, transparent 50.2%); background-size: 78px 78px; -webkit-mask-image: radial-gradient(circle at 76% 44%, black, transparent 43%); mask-image: radial-gradient(circle at 76% 44%, black, transparent 43%); } .mp-page-hero__inner { --hero-pixel-x: 0px; --hero-pixel-y: 0px; position: relative; display: flex; justify-content: center; flex-direction: column; min-height: min(76svh, 760px); padding-block: clamp(80px, 10vw, 130px); } .mp-page-hero__title { max-width: 920px; margin: 0 0 28px; font-size: clamp(3.2rem, 2.35rem + 4vw, 6.5rem); line-height: 0.96; letter-spacing: -0.075em; } .mp-page-hero__lead { max-width: 780px; margin: 0; color: var(--mp-muted); font-size: clamp(1.05rem, 0.95rem + 0.48vw, 1.35rem); line-height: 1.68; } .mp-page-hero__pixels { position: absolute; top: 50%; right: 5%; display: grid; grid-template-columns: repeat(3, clamp(30px, 4.3vw, 66px)); gap: 8px; opacity: 0.72; transform: translate3d(var(--hero-pixel-x), calc(-50% + var(--hero-pixel-y)), 0) rotate(45deg); transition: transform 240ms ease-out; } .mp-page-hero__pixels i { aspect-ratio: 1; border: 1px solid rgba(37, 39, 43, 0.1); background: rgba(255, 255, 255, 0.7); box-shadow: 8px 10px 18px rgba(37, 39, 43, 0.05); } .mp-page-hero__pixels i:nth-child(3), .mp-page-hero__pixels i:nth-child(7) { background: var(--mp-red); } .mp-page-hero__pixels i:nth-child(5) { background: var(--mp-blue); } .mp-page-hero-art { --art-rotate-x: -1deg; --art-rotate-y: -5deg; --art-shift-x: 0px; --art-shift-y: 0px; position: absolute; z-index: 3; top: clamp(72px, 8vw, 112px); right: max(24px, calc((100vw - var(--mp-container)) / 2)); width: min(48vw, 680px); height: min(58vw, 590px); margin: 0; pointer-events: none; transform: perspective(1400px) translate3d(var(--art-shift-x), var(--art-shift-y), 0) rotateX(var(--art-rotate-x)) rotateY(var(--art-rotate-y)); transform-style: preserve-3d; transition: transform 220ms ease-out; } .mp-page-hero-art__frame { position: absolute; z-index: 2; inset: 6% 3% 4%; overflow: hidden; border: 1px solid rgba(37, 39, 43, 0.08); border-radius: clamp(24px, 3vw, 44px); background: rgba(255, 255, 255, 0.56); box-shadow: 0 42px 90px rgba(37, 39, 43, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.7); transform: translateZ(42px); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .mp-page-hero-art__frame picture, .mp-page-hero-art__image { display: block; width: 100%; height: 100%; } .mp-page-hero-art__image { object-fit: cover; transform: scale(1.025); transition: transform 600ms cubic-bezier(0.16, 0.8, 0.2, 1); } .mp-page-hero-art__depth { position: absolute; inset: 8% 5% 2%; transform-style: preserve-3d; } .mp-page-hero-art__depth i { position: absolute; inset: 0; border: 1px solid rgba(37, 39, 43, 0.075); border-radius: clamp(24px, 3vw, 44px); background: rgba(255, 255, 255, 0.15); } .mp-page-hero-art__depth i:nth-child(1) { transform: translate3d(-13px, 15px, -18px); } .mp-page-hero-art__depth i:nth-child(2) { transform: translate3d(-25px, 29px, -38px); } .mp-page-hero-art__depth i:nth-child(3) { transform: translate3d(-36px, 43px, -58px); } .mp-page-hero-art__orbit { position: absolute; z-index: 4; inset: 0; transform-style: preserve-3d; animation: mp-page-art-breathe 5.4s ease-in-out infinite alternate; } .mp-page-hero-art__orbit i { position: absolute; width: 9px; height: 9px; border: 1px solid rgba(37, 39, 43, 0.09); background: rgba(255, 255, 255, 0.9); box-shadow: 4px 5px 10px rgba(37, 39, 43, 0.08); transform: translateZ(70px) rotate(35deg); } .mp-page-hero-art__orbit i:nth-child(3n) { background: var(--mp-red); } .mp-page-hero-art__orbit i:nth-child(4n) { background: var(--mp-blue); } .mp-page-hero-art__orbit i:nth-child(1) { top: 7%; left: 22%; } .mp-page-hero-art__orbit i:nth-child(2) { top: 15%; right: 8%; } .mp-page-hero-art__orbit i:nth-child(3) { top: 31%; left: 0; } .mp-page-hero-art__orbit i:nth-child(4) { top: 46%; right: 0; } .mp-page-hero-art__orbit i:nth-child(5) { top: 66%; left: 4%; } .mp-page-hero-art__orbit i:nth-child(6) { right: 7%; bottom: 19%; } .mp-page-hero-art__orbit i:nth-child(7) { bottom: 3%; left: 34%; } .mp-page-hero-art__orbit i:nth-child(8) { top: 2%; left: 53%; } .mp-page-hero-art__orbit i:nth-child(9) { top: 24%; right: 19%; } .mp-page-hero-art__orbit i:nth-child(10) { bottom: 33%; left: 13%; } .mp-page-hero-art__orbit i:nth-child(11) { right: 29%; bottom: 0; } .mp-page-hero-art__orbit i:nth-child(12) { top: 51%; left: 48%; } @keyframes mp-page-art-breathe { to { transform: translateZ(18px) rotateZ(2deg); } } .has-mp-page-art .mp-page-hero__inner { padding-right: min(48vw, 680px); } .has-mp-page-art .mp-page-hero__title { max-width: 650px; font-size: clamp(3rem, 2.25rem + 3.3vw, 5.75rem); } .has-mp-page-art .mp-page-hero__lead { max-width: 610px; } .has-mp-page-art .mp-page-hero__pixels { display: none; } .mp-page-section { position: relative; padding: clamp(60px, 7vw, 98px) 0; } .mp-page-section--tint { border-block: 1px solid var(--mp-line-soft); background: radial-gradient(circle at 86% 30%, rgba(27, 103, 222, 0.055), transparent 24%), rgba(255, 255, 255, 0.46); } .mp-page-section__heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.6fr); align-items: end; gap: clamp(30px, 7vw, 110px); margin-bottom: clamp(34px, 4.5vw, 54px); } .mp-page-section__heading > p { max-width: 560px; } .mp-page-section__heading .mp-kicker { grid-column: 1 / -1; margin-bottom: -10px; } .mp-page-section h2, .mp-page-split h2, .mp-contact-grid h2 { max-width: 850px; margin: 0; font-size: clamp(2.35rem, 1.85rem + 2.4vw, 4.65rem); line-height: 1.02; letter-spacing: -0.06em; } .mp-page-section__heading > p, .mp-page-split > div > p, .mp-contact-grid > div > p { margin: 0; color: var(--mp-muted); font-size: 1.02rem; line-height: 1.7; } .mp-editable-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; perspective: 1200px; } .mp-editable-card { --page-tilt-x: 0deg; --page-tilt-y: 0deg; --page-glow-x: 50%; --page-glow-y: 50%; position: relative; isolation: isolate; min-height: 320px; overflow: hidden; padding: clamp(26px, 3vw, 40px); border: 1px solid var(--mp-line-soft); border-radius: 27px; background: radial-gradient(circle at var(--page-glow-x) var(--page-glow-y), rgba(255, 255, 255, 0.98), transparent 28%), rgba(255, 255, 255, 0.66); box-shadow: 0 20px 65px rgba(43, 56, 49, 0.055); transform: perspective(950px) rotateX(var(--page-tilt-x)) rotateY(var(--page-tilt-y)); transform-style: preserve-3d; transition: border-color var(--mp-transition), box-shadow var(--mp-transition), transform 180ms ease-out; } .mp-editable-card::before { content: ""; position: absolute; z-index: -1; top: -38px; right: -38px; width: 130px; height: 130px; border: 1px solid var(--mp-line-soft); background: linear-gradient(90deg, transparent 49%, rgba(37, 39, 43, 0.06) 50%, transparent 51%), linear-gradient(transparent 49%, rgba(37, 39, 43, 0.06) 50%, transparent 51%); background-size: 26px 26px; transform: rotate(20deg); } .mp-editable-card:nth-child(odd)::after { content: ""; position: absolute; top: 0; left: 30px; width: 50px; height: 2px; background: var(--mp-red); box-shadow: 58px 0 0 var(--mp-blue); } .mp-editable-card:hover { border-color: rgba(37, 39, 43, 0.18); box-shadow: 0 28px 82px rgba(43, 56, 49, 0.095); } .mp-editable-card__number { margin: 0 0 94px; color: var(--mp-muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.62rem; font-weight: 850; letter-spacing: 0.13em; } .mp-editable-card h3 { margin-bottom: 16px; font-size: clamp(1.55rem, 1.25rem + 0.9vw, 2.25rem); } .mp-editable-card h3 a { color: var(--mp-ink); text-decoration: none; } .mp-editable-card h3 a span { color: var(--mp-red); font-size: 0.72em; transition: transform var(--mp-transition); } .mp-editable-card h3 a:hover span { display: inline-block; transform: translate(3px, -3px); } .mp-editable-card > p:last-child { margin: 0; color: var(--mp-muted); font-size: 0.94rem; line-height: 1.65; } .mp-page-split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(400px, 0.7fr); align-items: center; gap: clamp(60px, 10vw, 150px); } .mp-page-split h2 { margin-bottom: 28px; } .mp-page-checklist { display: grid; gap: 0; margin: 0; padding: 0; border-block: 1px solid var(--mp-line); list-style: none; } .mp-page-checklist li { position: relative; margin: 0; padding: 20px 50px 20px 0; border-bottom: 1px solid var(--mp-line-soft); color: var(--mp-ink); font-size: 1rem; font-weight: 700; } .mp-page-checklist li:last-child { border-bottom: 0; } .mp-page-checklist li::after { content: ""; position: absolute; top: 50%; right: 8px; width: 7px; height: 7px; background: var(--mp-red); box-shadow: 11px 0 0 var(--mp-blue); transform: translateY(-50%); } .mp-page-cta { position: relative; overflow: hidden; padding: clamp(76px, 9vw, 130px) 0; border-top: 1px solid var(--mp-line-soft); background: radial-gradient(circle at 15% 66%, rgba(231, 31, 47, 0.1), transparent 27%), radial-gradient(circle at 84% 25%, rgba(27, 103, 222, 0.09), transparent 28%), linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(223, 242, 228, 0.46)); } .mp-page-cta__inner { max-width: 950px; text-align: center; } .mp-page-cta h2 { margin-bottom: 24px; font-size: clamp(2.6rem, 1.95rem + 3vw, 5.25rem); line-height: 1; } .mp-page-cta p { max-width: 620px; margin: 0 auto 30px; color: var(--mp-muted); } .mp-page-cta .wp-block-buttons { justify-content: center; } .mp-privacy-content__updated { margin-bottom: 42px; padding: 14px 18px; border-inline-start: 3px solid var(--mp-blue); background: rgba(27, 103, 222, 0.045); color: var(--mp-muted); font-size: 0.84rem; } .mp-privacy-content h2 { margin-top: clamp(38px, 6vw, 64px); margin-bottom: 15px; } .mp-privacy-content p { color: var(--mp-muted); line-height: 1.8; } .mp-contact-grid { display: grid; grid-template-columns: minmax(320px, 0.72fr) minmax(460px, 1fr); align-items: start; gap: clamp(54px, 9vw, 130px); } .mp-contact-grid h2 { margin-bottom: 24px; } .mp-contact-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 16px; } .mp-contact-form__field { display: grid; gap: 8px; } .mp-contact-form__field--wide, .mp-contact-form__contact-note, .mp-contact-form__optional, .mp-contact-form__consent, .mp-contact-form__actions { grid-column: 1 / -1; } .mp-contact-form__contact-note { margin: -10px 0 0; color: var(--mp-muted); font-size: 0.76rem; line-height: 1.5; } .mp-contact-form__optional { padding: 3px 0 1px; } .mp-contact-form__optional summary { width: fit-content; color: var(--mp-blue); cursor: pointer; font-size: 0.78rem; font-weight: 800; text-underline-offset: 3px; } .mp-contact-form__optional summary:hover { text-decoration: underline; } .mp-contact-form__optional-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; margin-top: 18px; } .mp-contact-form__optional-grid .mp-contact-form__field:last-child { grid-column: 1 / -1; } .mp-contact-form label { color: var(--mp-muted); font-size: 0.62rem; font-weight: 850; letter-spacing: 0.11em; text-transform: uppercase; } .mp-contact-form input, .mp-contact-form textarea, .mp-contact-form select { width: 100%; padding: 14px 15px; border: 1px solid var(--mp-line); border-radius: 12px; background: rgba(255, 255, 255, 0.82); color: var(--mp-ink); transition: border-color var(--mp-transition), box-shadow var(--mp-transition); } .mp-contact-form textarea { resize: vertical; } .mp-contact-form input:focus, .mp-contact-form textarea:focus, .mp-contact-form select:focus { border-color: var(--mp-blue); box-shadow: 0 0 0 4px rgba(27, 103, 222, 0.08); outline: 0; } .mp-contact-form__consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; padding-top: 2px; } .mp-contact-form__consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--mp-blue); } .mp-contact-form__consent label { font-size: 0.75rem; font-weight: 650; line-height: 1.55; letter-spacing: 0; text-transform: none; } .mp-contact-form__consent a { color: var(--mp-blue); text-underline-offset: 3px; } .mp-contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; } .mp-contact-form__actions small { max-width: 340px; color: var(--mp-muted); font-size: 0.73rem; line-height: 1.5; } .mp-contact-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .mp-form-message { margin-bottom: 22px; padding: 14px 16px; border: 1px solid var(--mp-line); border-radius: 12px; font-size: 0.9rem; } .mp-form-message--success { border-color: rgba(33, 135, 77, 0.24); background: rgba(223, 242, 228, 0.72); } .mp-form-message--error { border-color: rgba(231, 31, 47, 0.24); background: rgba(231, 31, 47, 0.055); } .mp-insights-archive { padding-bottom: clamp(70px, 9vw, 130px); } .mp-insights-archive__hero { padding: clamp(90px, 11vw, 150px) 0 clamp(55px, 7vw, 88px); background: radial-gradient(circle at 82% 25%, rgba(27, 103, 222, 0.075), transparent 25%), radial-gradient(circle at 14% 74%, rgba(231, 31, 47, 0.075), transparent 27%); } .mp-insights-archive__hero h1 { max-width: 980px; margin: 0; font-size: clamp(3.25rem, 2.35rem + 4vw, 6.5rem); line-height: 0.96; letter-spacing: -0.075em; } .mp-insights-archive .posts-grid { padding-top: 46px; } .mp-pages-ready .mp-page-hero__inner, .mp-pages-ready .mp-page-section, .mp-pages-ready .mp-page-cta__inner, .mp-pages-ready .post-card { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 680ms cubic-bezier(0.16, 0.8, 0.2, 1), transform 680ms cubic-bezier(0.16, 0.8, 0.2, 1); } .mp-pages-ready .is-mp-visible { opacity: 1; transform: translate3d(0, 0, 0); } .mp-pages-ready .post-card { --page-tilt-x: 0deg; --page-tilt-y: 0deg; transform: perspective(950px) translate3d(0, 28px, 0) rotateX(var(--page-tilt-x)) rotateY(var(--page-tilt-y)); transition: opacity 680ms cubic-bezier(0.16, 0.8, 0.2, 1), transform 180ms ease-out, box-shadow var(--mp-transition); } .mp-pages-ready .post-card.is-mp-visible { transform: perspective(950px) translate3d(0, 0, 0) rotateX(var(--page-tilt-x)) rotateY(var(--page-tilt-y)); } @media (max-width: 900px) { .mp-page-hero, .mp-page-hero__inner { min-height: 650px; } .mp-page-hero__pixels { right: -2%; opacity: 0.38; } .mp-page-hero-art { top: 545px; right: auto; left: 50%; width: min(calc(100% - 48px), 720px); height: min(72vw, 520px); margin: 0; translate: -50% 0; } .has-mp-page-art .mp-page-hero { min-height: 1080px; } .has-mp-page-art .mp-page-hero__inner { justify-content: flex-start; min-height: 650px; padding-right: 0; padding-top: 105px; } .mp-page-section__heading, .mp-page-split, .mp-contact-grid { grid-template-columns: 1fr; gap: 35px; } .mp-editable-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .mp-page-hero, .mp-page-hero__inner { min-height: 560px; } .mp-page-hero__title { font-size: clamp(2.65rem, 12vw, 4.25rem); } .mp-page-hero__pixels { top: 29%; right: -12%; grid-template-columns: repeat(3, 35px); } .mp-page-hero-art { width: calc(100% - 28px); height: 390px; top: 510px; } .has-mp-page-art .mp-page-hero { min-height: 930px; } .has-mp-page-art .mp-page-hero__inner { min-height: 590px; padding-top: 82px; } .mp-page-section { padding: 54px 0; } .mp-page-section h2, .mp-page-split h2, .mp-contact-grid h2 { font-size: clamp(2.25rem, 9.5vw, 3.35rem); } .mp-editable-grid, .mp-contact-form { grid-template-columns: 1fr; } .mp-editable-card { min-height: 290px; } .mp-contact-form__field--wide, .mp-contact-form__contact-note, .mp-contact-form__optional, .mp-contact-form__consent, .mp-contact-form__actions { grid-column: auto; } .mp-contact-form__optional-grid { grid-template-columns: 1fr; } .mp-contact-form__optional-grid .mp-contact-form__field:last-child { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { .mp-page-hero__pixels, .mp-editable-card, .mp-page-hero-art { transform: none !important; } .mp-page-hero-art__orbit { animation: none; } } .mp-search-intent { padding-block: clamp(60px, 7vw, 96px); border-block: 1px solid var(--mp-line-soft); background: radial-gradient(circle at 9% 88%, rgba(231, 31, 47, 0.055), transparent 27%), radial-gradient(circle at 90% 12%, rgba(27, 103, 222, 0.055), transparent 28%), rgba(247, 250, 248, 0.72); } .mp-search-intent__heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.58fr); align-items: end; gap: clamp(28px, 6vw, 92px); margin-bottom: clamp(34px, 4.5vw, 52px); } .mp-search-intent__heading .mp-kicker { grid-column: 1 / -1; margin-bottom: calc(clamp(28px, 6vw, 92px) * -0.72); } .mp-search-intent__heading h2 { max-width: 900px; margin: 0; font-size: clamp(2.35rem, 1.9rem + 1.85vw, 4.15rem); line-height: 1.04; letter-spacing: -0.045em; text-wrap: balance; } .mp-search-intent__heading > p { max-width: 650px; margin: 0; color: var(--mp-muted); line-height: 1.78; } .mp-search-intent__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .mp-search-intent__grid article { min-height: 270px; padding: clamp(26px, 3.2vw, 42px); border: 1px solid var(--mp-line-soft); border-radius: 28px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 20px 62px rgba(37, 39, 43, 0.05); } .mp-search-intent__grid article > span { color: var(--mp-muted); font: 800 0.62rem/1 "SFMono-Regular", Consolas, monospace; letter-spacing: 0.12em; } .mp-search-intent__grid h3 { margin: 58px 0 15px; font-size: clamp(1.3rem, 1.14rem + 0.55vw, 1.85rem); line-height: 1.15; text-wrap: balance; } .mp-search-intent__grid p { margin: 0; color: var(--mp-muted); line-height: 1.72; } .mp-search-intent__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .mp-search-intent__links a { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 11px 16px; border: 1px solid var(--mp-line); border-radius: 999px; background: rgba(255, 255, 255, 0.78); color: var(--mp-ink); font-size: 0.78rem; font-weight: 800; text-decoration: none; } .mp-search-intent__links a:hover { border-color: rgba(27, 103, 222, 0.32); color: var(--mp-blue); } .mp-search-answer { position: relative; margin-top: clamp(30px, 4vw, 52px); margin-bottom: clamp(34px, 5vw, 58px); padding: clamp(24px, 3.4vw, 38px); border: 1px solid var(--mp-line-soft); border-inline-start: 4px solid var(--mp-red); border-radius: 22px; background: radial-gradient(circle at 94% 12%, rgba(27, 103, 222, 0.065), transparent 28%), #fff; box-shadow: 0 18px 54px rgba(37, 39, 43, 0.045); } .mp-search-answer::after { position: absolute; top: 18px; right: 20px; width: 8px; height: 8px; background: var(--mp-blue); box-shadow: 9px 9px 0 rgba(231, 31, 47, 0.88); content: ""; } [dir="rtl"] .mp-search-answer::after { right: auto; left: 20px; } .mp-search-answer__label { display: block; margin-bottom: 13px; color: var(--mp-muted); font-size: 0.67rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; } .mp-search-answer p { max-width: 850px; margin: 0 0 18px; font-size: clamp(1.05rem, 0.99rem + 0.25vw, 1.22rem); font-weight: 620; line-height: 1.72; } .mp-search-answer a { color: var(--mp-blue); font-size: 0.78rem; font-weight: 800; text-decoration: none; } @media (max-width: 860px) { .mp-search-intent__heading { grid-template-columns: 1fr; gap: 18px; } .mp-search-intent__heading .mp-kicker { grid-column: auto; margin-bottom: 0; } .mp-search-intent__grid { grid-template-columns: 1fr 1fr; } .mp-search-intent__grid article:last-child { grid-column: 1 / -1; } } @media (max-width: 580px) { .mp-search-intent { padding-block: 52px; } .mp-search-intent__heading h2 { font-size: clamp(2.05rem, 9.5vw, 3rem); } .mp-search-intent__grid { grid-template-columns: 1fr; } .mp-search-intent__grid article, .mp-search-intent__grid article:last-child { grid-column: auto; min-height: 225px; } .mp-search-intent__grid h3 { margin-top: 46px; } } .single-entry .mp-article-intro { margin-bottom: clamp(32px, 4vw, 52px); color: var(--mp-ink); font-size: clamp(1.12rem, 1.02rem + 0.45vw, 1.4rem); font-weight: 600; line-height: 1.78; } .single-entry .entry-content h2 { scroll-margin-top: calc(var(--mp-header-height) + 24px); } .single-entry__breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--mp-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .single-entry__breadcrumb a { color: inherit; text-decoration: none; } .single-entry__breadcrumb a:hover { color: var(--mp-red); } .single-entry__review { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-top: 22px; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--mp-line-soft); border-radius: 26px; background: rgba(255, 255, 255, 0.75); } .single-entry__review-mark { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 62px; height: 62px; padding: 10px; border: 1px solid var(--mp-line-soft); border-radius: 18px; background: #fff; transform: rotate(8deg); } .single-entry__review-photo { display: block; width: 62px; height: 62px; border: 1px solid var(--mp-line-soft); border-radius: 18px; object-fit: cover; } .single-entry__review-mark i { background: rgba(37, 39, 43, 0.07); } .single-entry__review-mark i:nth-child(1) { background: var(--mp-red); } .single-entry__review-mark i:nth-child(4) { background: var(--mp-blue); } .single-entry__review span, .single-entry__review small { color: var(--mp-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .single-entry__review h2 { margin: 6px 0 8px; font-size: clamp(1.35rem, 1.2rem + 0.55vw, 1.85rem); } .single-entry__review p { max-width: 650px; margin: 0 0 8px; color: var(--mp-muted); line-height: 1.65; } .single-entry__service-link { display: flex; width: max-content; margin: 24px 0 0; } .single-entry__related { margin-top: clamp(70px, 9vw, 120px); } .single-entry__related > header { max-width: 800px; margin-bottom: 38px; } .single-entry__related > header h2 { margin: 12px 0 0; font-size: clamp(2rem, 1.65rem + 1.5vw, 3.4rem); line-height: 1.06; letter-spacing: -0.045em; } .single-entry__related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .single-entry__related-grid article { overflow: hidden; border: 1px solid var(--mp-line-soft); border-radius: 24px; background: #fff; box-shadow: 0 18px 55px rgba(37, 39, 43, 0.05); } .single-entry__related-image { display: block; height: 210px; overflow: hidden; border-bottom: 1px solid var(--mp-line-soft); } .single-entry__related-image picture, .single-entry__related-image img { display: block; width: 100%; height: 100%; } .single-entry__related-image img { object-fit: cover; transition: transform 0.5s ease; } .single-entry__related-grid article:hover .single-entry__related-image img { transform: scale(1.045); } .single-entry__related-grid article > div { padding: 25px; } .single-entry__related-grid h3 { margin: 0 0 24px; font-size: clamp(1.2rem, 1.06rem + 0.48vw, 1.62rem); line-height: 1.2; } .single-entry__related-grid h3 a { color: var(--mp-ink); text-decoration: none; } @media (max-width: 850px) { .single-entry__review { grid-template-columns: 66px 1fr; } .single-entry__review .mp-inline-link { grid-column: 2; justify-self: start; } .single-entry__related-grid { grid-template-columns: 1fr 1fr; } .single-entry__related-grid article:last-child { display: none; } } @media (max-width: 580px) { .single-entry__review { grid-template-columns: 1fr; } .single-entry__review .mp-inline-link { grid-column: auto; } .single-entry__related-grid { grid-template-columns: 1fr; } .single-entry__related-grid article:last-child { display: block; } } .mp-article-table-wrap { max-width: 100%; margin: 28px 0 34px; overflow-x: auto; border: 1px solid var(--mp-line-soft); border-radius: 18px; background: #fff; -webkit-overflow-scrolling: touch; } .mp-article-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.93rem; line-height: 1.55; } .mp-article-table th, .mp-article-table td { padding: 15px 18px; border-block-end: 1px solid var(--mp-line-soft); text-align: start; vertical-align: top; } .mp-article-table th { background: #f7f9fb; color: var(--mp-ink); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; } .mp-article-table tr:last-child td { border-block-end: 0; } .mp-article-table tbody tr:hover { background: rgba(36, 107, 219, 0.035); } .mp-context-faq { position: relative; overflow: hidden; padding-block: clamp(60px, 7vw, 96px); border-top: 1px solid var(--mp-line-soft); background: radial-gradient(circle at 8% 24%, rgba(239, 35, 60, 0.055), transparent 27%), radial-gradient(circle at 92% 76%, rgba(36, 107, 219, 0.06), transparent 29%), rgba(248, 250, 251, 0.66); } .mp-context-faq::after { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(37, 39, 43, 0.12) 1px, transparent 1px); background-size: 28px 28px; content: ""; mask-image: linear-gradient(120deg, transparent 20%, black 58%, transparent 92%); opacity: 0.2; pointer-events: none; } .mp-context-faq__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr); align-items: start; gap: clamp(42px, 8vw, 122px); } .mp-context-faq__heading { position: sticky; top: calc(var(--mp-header-height) + 28px); } .mp-context-faq__heading h2 { max-width: 610px; margin: 13px 0 18px; font-size: clamp(2.15rem, 1.65rem + 1.9vw, 4rem); line-height: 1.04; letter-spacing: -0.05em; } .mp-context-faq__heading p { max-width: 560px; margin: 0; color: var(--mp-muted); font-size: 0.94rem; line-height: 1.75; } .mp-context-faq__items { border-top: 1px solid var(--mp-line); background: rgba(255, 255, 255, 0.38); } .mp-context-faq details { border-bottom: 1px solid var(--mp-line); } .mp-context-faq summary { position: relative; padding: 25px 50px 25px 4px; color: var(--mp-ink); cursor: pointer; font-size: clamp(1rem, 0.95rem + 0.22vw, 1.16rem); font-weight: 800; line-height: 1.45; list-style: none; overflow-wrap: anywhere; } .mp-context-faq summary:focus-visible { outline: 3px solid rgba(36, 107, 219, 0.32); outline-offset: 4px; } .mp-context-faq summary::-webkit-details-marker { display: none; } .mp-context-faq summary::after { position: absolute; top: 20px; right: 6px; color: var(--mp-blue); content: "+"; font-size: 1.5rem; font-weight: 500; } .mp-context-faq details[open] summary::after { color: var(--mp-red); content: "−"; } .mp-context-faq details p { max-width: 780px; margin: 0; padding: 0 50px 27px 4px; color: var(--mp-muted); line-height: 1.78; } [dir="rtl"] .mp-context-faq summary { padding-right: 4px; padding-left: 50px; } [dir="rtl"] .mp-context-faq summary::after { right: auto; left: 6px; } [dir="rtl"] .mp-context-faq details p { padding-right: 4px; padding-left: 50px; } @media (max-width: 900px) { .mp-context-faq__grid { grid-template-columns: 1fr; gap: 38px; } .mp-context-faq__heading { position: static; } } @media (max-width: 560px) { .mp-context-faq { padding-block: 52px; } .mp-context-faq__heading h2 { font-size: clamp(2rem, 10vw, 2.85rem); } .mp-context-faq summary { padding-block: 21px; } } .mp-ai-decision-library{background:#111722;color:#fff}.mp-ai-decision-library h2{max-width:760px;color:#fff}.mp-ai-decision-library>div>p{max-width:760px;color:#cbd5e1}.mp-ai-decision-library__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:2rem;background:#334155;border:1px solid #334155}.mp-ai-decision-library__grid article{min-height:180px;padding:1.5rem;background:#151d29}.mp-ai-decision-library__grid h3{margin:0 0 .75rem}.mp-ai-decision-library__grid a{color:#fff;text-decoration:none}.mp-ai-decision-library__grid a:hover,.mp-ai-decision-library__grid a:focus-visible{color:#ff2f6d}.mp-ai-decision-library__grid p{margin:0;color:#cbd5e1}@media(max-width:760px){.mp-ai-decision-library__grid{grid-template-columns:1fr}.mp-ai-decision-library__grid article{min-height:auto}}
/* multipixels-footer-source */
.mp-footer-source { --footer-tilt-x: -8deg; --footer-tilt-y: 10deg; --footer-cloud-x: 0px; --footer-art-x: 0px; --footer-art-y: 0px; --footer-art-rx: -1deg; --footer-art-ry: 2deg; position: relative; isolation: isolate; min-height: 410px; overflow: visible; padding: clamp(112px, 11vw, 170px) 0 clamp(64px, 7vw, 96px); border-bottom: 1px solid var(--mp-line-soft); background: radial-gradient(circle at 50% 0%, rgba(223, 242, 228, 0.88), transparent 28%), radial-gradient(circle at 18% 63%, rgba(231, 31, 47, 0.09), transparent 27%), radial-gradient(circle at 82% 52%, rgba(27, 103, 222, 0.085), transparent 27%), rgba(248, 250, 249, 0.98); } .mp-footer-source::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(248, 250, 249, 0.98) 0%, rgba(248, 250, 249, 0.86) 37%, transparent 66%); pointer-events: none; } .mp-footer-source::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, transparent 49.7%, rgba(37, 39, 43, 0.035) 50%, transparent 50.3%), linear-gradient(transparent 49.7%, rgba(37, 39, 43, 0.03) 50%, transparent 50.3%); background-size: 62px 62px; -webkit-mask-image: radial-gradient(circle at 50% 0%, black, transparent 54%); mask-image: radial-gradient(circle at 50% 0%, black, transparent 54%); } .mp-footer-source__particles { position: absolute; z-index: 3; top: 12px; left: calc(50% + var(--footer-cloud-x)); width: 1px; height: 1px; pointer-events: none; transition: left 220ms ease-out; } .mp-footer-source__art { position: absolute; z-index: 0; top: 4%; right: 1%; width: min(64vw, 980px); height: 92%; margin: 0; opacity: 0.82; pointer-events: none; transform: perspective(1200px) translate3d(var(--footer-art-x), var(--footer-art-y), 0) rotateX(var(--footer-art-rx)) rotateY(var(--footer-art-ry)); transform-style: preserve-3d; transition: transform 240ms ease-out; -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 28%, black 100%); mask-image: linear-gradient(90deg, transparent 0%, black 28%, black 100%); } .mp-footer-source__art img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .mp-footer-source__particles i { position: absolute; top: 0; left: 0; width: 7px; height: 7px; border: 1px solid rgba(37, 39, 43, 0.08); background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 18px rgba(37, 39, 43, 0.08); opacity: 0; animation: mp-footer-pixel-flight var(--fly-duration) cubic-bezier(0.22, 0.6, 0.35, 1) var(--fly-delay) infinite; } .mp-footer-source__particles i:nth-child(4n) { background: var(--mp-red); } .mp-footer-source__particles i:nth-child(7n) { background: var(--mp-blue); } .mp-footer-source.is-interacting .mp-footer-source__particles i { animation-duration: calc(var(--fly-duration) * 0.58); } @keyframes mp-footer-pixel-flight { 0% { opacity: 0; transform: translate3d(0, 4px, 0) scale(0.45); } 14% { opacity: 0.88; } 70% { opacity: 0.48; } 100% { opacity: 0; transform: translate3d(var(--fly-x), calc(var(--fly-y) * -1), 0) rotate(135deg) scale(0.9); } } .mp-footer-emitter { position: absolute; z-index: 5; top: 0; left: 50%; display: grid; width: 126px; padding: 0; border: 0; background: transparent; color: var(--mp-ink); cursor: pointer; place-items: center; transform: translate(-50%, -48%); } .mp-footer-emitter__core { display: grid; grid-template-columns: repeat(5, 14px); gap: 3px; padding: 13px; border: 1px solid rgba(37, 39, 43, 0.1); border-radius: 17px; background: rgba(255, 255, 255, 0.84); box-shadow: 0 20px 50px rgba(37, 39, 43, 0.12); transform: perspective(480px) rotateX(var(--footer-tilt-x)) rotateY(var(--footer-tilt-y)) rotateZ(45deg); transform-style: preserve-3d; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: box-shadow var(--mp-transition), transform 180ms ease-out; } .mp-footer-emitter__core i { width: 14px; height: 14px; border: 1px solid rgba(37, 39, 43, 0.08); background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(226, 232, 229, 0.8)); } .mp-footer-emitter__core i:nth-child(5), .mp-footer-emitter__core i:nth-child(17) { background: var(--mp-red); } .mp-footer-emitter__core i:nth-child(9), .mp-footer-emitter__core i:nth-child(21) { background: var(--mp-blue); } .mp-footer-emitter:hover .mp-footer-emitter__core, .mp-footer-emitter:focus-visible .mp-footer-emitter__core { box-shadow: 0 28px 64px rgba(37, 39, 43, 0.17); transform: perspective(480px) rotateX(var(--footer-tilt-x)) rotateY(var(--footer-tilt-y)) rotateZ(54deg) scale(1.05); } .mp-footer-emitter.is-bursting .mp-footer-emitter__core { animation: mp-footer-source-pulse 500ms cubic-bezier(0.16, 0.8, 0.2, 1); } @keyframes mp-footer-source-pulse { 45% { transform: perspective(480px) rotateX(-15deg) rotateY(18deg) rotateZ(90deg) scale(0.86); } } .mp-footer-emitter__label { margin-top: 20px; color: var(--mp-muted); font-size: 0.48rem; font-weight: 900; letter-spacing: 0.14em; white-space: nowrap; } .mp-footer-source__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 44px; } .mp-footer-source__inner > div { max-width: 680px; } .mp-footer-source__inner h2 { max-width: 850px; margin: 0 0 22px; font-size: clamp(3.5rem, 2.4rem + 4vw, 7rem); line-height: 0.92; letter-spacing: -0.07em; } .mp-footer-source__inner p { max-width: 620px; margin: 0; color: var(--mp-muted); } @media (max-width: 760px) { .mp-footer-source { min-height: 470px; padding-top: 120px; } .mp-footer-source__inner { grid-template-columns: 1fr; align-items: start; } .mp-footer-source__art { top: 10%; right: -28%; width: 120%; height: 76%; opacity: 0.32; -webkit-mask-image: linear-gradient(to bottom, black, transparent 92%); mask-image: linear-gradient(to bottom, black, transparent 92%); } .mp-footer-source::after { background: linear-gradient(to bottom, rgba(248, 250, 249, 0.72), rgba(248, 250, 249, 0.94)); } .mp-footer-source__inner h2 { font-size: clamp(3rem, 14vw, 4.8rem); } } @media (prefers-reduced-motion: reduce) { .mp-footer-source__particles i { animation: none; opacity: 0.28; transform: translate3d(calc(var(--fly-x) * 0.32), calc(var(--fly-y) * -0.25), 0); } .mp-footer-emitter__core { transform: rotate(45deg); } .mp-footer-source__art { transform: none; } }
/* multipixels-footer-v2 */
.site-footer { position: relative; z-index: 3; margin-top: clamp(76px, 9vw, 132px); padding-top: clamp(42px, 5vw, 72px); overflow: visible; border-top: 0; background: #fff; } .mp-footer-pixel-edge { position: absolute; z-index: 2; inset: -74px 0 auto; height: 76px; pointer-events: none; } .mp-footer-pixel-edge::before { content: ""; position: absolute; inset: 46px 0 0; background: linear-gradient(90deg, #fff 0 4%, transparent 4% 4.6%, #fff 4.6% 10%, transparent 10% 10.35%, #fff 10.35% 18%, transparent 18% 18.7%, #fff 18.7% 28%, transparent 28% 28.4%, #fff 28.4% 41%, transparent 41% 41.35%, #fff 41.35% 55%, transparent 55% 55.8%, #fff 55.8% 67%, transparent 67% 67.45%, #fff 67.45% 81%, transparent 81% 81.7%, #fff 81.7% 92%, transparent 92% 92.4%, #fff 92.4% 100%); clip-path: polygon(0 48%, 3% 48%, 3% 22%, 5% 22%, 5% 56%, 9% 56%, 9% 35%, 11% 35%, 11% 64%, 18% 64%, 18% 30%, 20% 30%, 20% 70%, 28% 70%, 28% 45%, 30% 45%, 30% 78%, 41% 78%, 41% 48%, 43% 48%, 43% 84%, 55% 84%, 55% 42%, 57% 42%, 57% 73%, 67% 73%, 67% 50%, 69% 50%, 69% 80%, 81% 80%, 81% 38%, 83% 38%, 83% 67%, 92% 67%, 92% 30%, 94% 30%, 94% 58%, 100% 58%, 100% 100%, 0 100%); filter: drop-shadow(0 -10px 20px rgba(37, 39, 43, 0.035)); } .mp-footer-pixel-edge__particles { position: absolute; inset: 0; overflow: visible; } .mp-footer-pixel-edge__particles i { position: absolute; bottom: 3px; left: var(--edge-x); width: var(--edge-size); height: var(--edge-size); border: 1px solid rgba(37, 39, 43, 0.08); background: #fff; box-shadow: 0 5px 14px rgba(37, 39, 43, 0.08); opacity: 0; transform: translate3d(0, 0, 0) rotate(0); animation: mp-footer-pixel-flight var(--edge-duration) var(--edge-delay) ease-out infinite; } .mp-footer-pixel-edge__particles i:nth-child(7n), .mp-footer-pixel-edge__particles i:nth-child(13n) { border-color: transparent; background: var(--mp-red); } .mp-footer-pixel-edge__particles i:nth-child(9n), .mp-footer-pixel-edge__particles i:nth-child(17n) { border-color: transparent; background: var(--mp-blue); } .mp-footer-pixel-edge.is-interacting .mp-footer-pixel-edge__particles i { animation-duration: calc(var(--edge-duration) * 0.62); } @keyframes mp-footer-pixel-flight { 0% { opacity: 0; transform: translate3d(0, 5px, 0) rotate(0); } 16% { opacity: 0.82; } 78% { opacity: 0.28; } 100% { opacity: 0; transform: translate3d(var(--edge-drift), calc(var(--edge-rise) * -1), 0) rotate(135deg); } } .site-footer__main--v2 { display: grid; grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(150px, 0.65fr)); align-items: start; gap: clamp(32px, 5vw, 78px); padding-block: clamp(34px, 5vw, 68px); } .site-footer__brand .mp-brand-logo { width: min(240px, 100%); } .site-footer__brand p { max-width: 360px; margin: 24px 0 20px; font-size: .92rem; line-height: 1.75; } .site-footer__contact { display:grid; gap:10px; margin:0 0 19px; } .site-footer__contact a { display:inline-flex; align-items:center; width:max-content; max-width:100%; gap:9px; color:var(--mp-ink); font-size:.76rem; font-weight:750; text-decoration:none; overflow-wrap:anywhere; } .site-footer__contact a[data-mp-conversion="whatsapp_click"] { color:#118450; } .site-footer__contact a.site-footer__brief { color:var(--mp-blue); } .site-footer__contact a:hover { color:var(--mp-red); } .site-footer__contact span { width:17px; text-align:center; } .site-footer__contact .mp-action-icon { width:17px; height:17px; flex-basis:17px; } .site-footer__social { display:flex; flex-wrap:wrap; gap:8px 14px; margin:0 0 17px; } .site-footer__social a { color:var(--mp-muted); font-size:.68rem; font-weight:800; letter-spacing:.04em; text-decoration:none; } .site-footer__social a:hover { color:var(--mp-blue); } .site-footer__language { display: inline-flex; align-items: center; gap: 9px; color: var(--mp-blue); font-size: .76rem; font-weight: 800; text-decoration: none; } .site-footer__language:hover { color: var(--mp-red); } .site-footer__column h2 { margin: 4px 0 22px; color: var(--mp-muted); font-size: .66rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; } .footer-navigation { align-self: start; justify-self: stretch; } .footer-menu, .site-footer__links, .site-footer__markets { display: grid; justify-content: stretch; gap: 13px; margin: 0; padding: 0; list-style: none; } .footer-menu a, .site-footer__links a, .site-footer__markets li { color: var(--mp-ink); font-size: .82rem; font-weight: 650; line-height: 1.45; text-decoration: none; } .footer-menu a:hover, .site-footer__links a:hover { color: var(--mp-red); } .site-footer__markets li { position: relative; padding-inline-start: 14px; color: var(--mp-muted); } .site-footer__markets a { color:inherit; text-decoration:none; transition:color 180ms ease; } .site-footer__markets a:hover { color:var(--mp-ink); } .site-footer__markets li::before { content: ""; position: absolute; top: .6em; inset-inline-start: 0; width: 5px; height: 5px; background: var(--mp-red); box-shadow: 7px 0 0 rgba(27, 103, 222, .55); } [dir="rtl"] .site-footer__markets li::before { box-shadow: -7px 0 0 rgba(27, 103, 222, .55); } .site-footer__bottom { padding-block: 24px; } @media (max-width: 1000px) { .site-footer__main--v2 { grid-template-columns: 1.2fr repeat(2, .8fr); } .site-footer__main--v2 .site-footer__column:last-child { grid-column: 2 / -1; } } @media (max-width: 760px) { .site-footer { margin-top: 72px; padding-top: 32px; } .mp-footer-pixel-edge { inset-block-start: -58px; height: 60px; } .mp-footer-pixel-edge::before { inset-block-start: 34px; } .mp-footer-pixel-edge__particles i:nth-child(n+27) { display: none; } .site-footer__main--v2 { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } .site-footer__main--v2 .site-footer__column:last-child { grid-column: auto; } } @media (max-width: 520px) { .site-footer__main--v2 { grid-template-columns: 1fr; gap: 34px; } .site-footer__brand, .site-footer__main--v2 .site-footer__column:last-child { grid-column: auto; } .site-footer__bottom { align-items: flex-start; flex-direction: column; } .site-footer__contact a { font-size:.82rem; } } @media (prefers-reduced-motion: reduce) { .mp-footer-pixel-edge__particles i { animation: none; opacity: .34; transform: translateY(calc((var(--edge-rise) * -.32))); } }
/* multipixels-conversion */
.mp-inline-conversion { position: relative; z-index: 2; padding-block: clamp(22px, 3.5vw, 48px); } .mp-inline-conversion__card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(28px, 5vw, 72px); overflow: hidden; padding: clamp(30px, 4vw, 54px); border: 1px solid rgba(37, 39, 43, 0.1); border-radius: clamp(26px, 3vw, 40px); background: linear-gradient(120deg, rgba(234, 35, 52, 0.055), transparent 34%), linear-gradient(300deg, rgba(27, 103, 222, 0.07), transparent 38%), rgba(255, 255, 255, 0.92); box-shadow: 0 26px 80px rgba(37, 39, 43, 0.065); } .mp-inline-conversion__card::before, .mp-inline-conversion__card::after { position: absolute; width: 10px; height: 10px; content: ""; pointer-events: none; } .mp-inline-conversion__card::before { inset: 22px 22px auto auto; background: var(--mp-red); box-shadow: -15px 15px 0 rgba(234, 35, 52, 0.25), -30px 0 0 rgba(27, 103, 222, 0.5); } .mp-inline-conversion__card::after { inset: auto auto 24px 24px; background: var(--mp-blue); box-shadow: 15px -15px 0 rgba(27, 103, 222, 0.22), 30px 0 0 rgba(234, 35, 52, 0.46); } .mp-inline-conversion__copy { position: relative; z-index: 1; max-width: 770px; } .mp-inline-conversion__copy h2 { max-width: 720px; margin: 12px 0 12px; font-size: clamp(1.8rem, 3.4vw, 3.35rem); line-height: 1.02; letter-spacing: -0.045em; } .mp-inline-conversion__copy p { max-width: 680px; margin: 0; color: var(--mp-muted); font-size: clamp(0.92rem, 1.2vw, 1.02rem); line-height: 1.75; } .mp-inline-conversion__actions { position: relative; z-index: 1; justify-content: flex-end; min-width: min(100%, 310px); } .mp-inline-conversion__actions .mp-button { min-height: 50px; } .mp-sticky-contact { position: fixed; z-index: 940; inset-inline-end: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: flex; gap: 9px; opacity: 1; transform: translateY(0); transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease; visibility: visible; } .mp-sticky-contact.is-hidden, .menu-is-open .mp-sticky-contact { opacity: 0; pointer-events: none; transform: translateY(16px); visibility: hidden; } .mp-sticky-contact__button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; box-shadow: 0 16px 44px rgba(27, 31, 29, 0.19); font-size: 0.78rem; font-weight: 850; line-height: 1; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; } .mp-sticky-contact__button:hover { transform: translateY(-3px); box-shadow: 0 20px 54px rgba(27, 31, 29, 0.24); } .mp-sticky-contact__button .mp-action-icon { width: 20px; height: 20px; flex: 0 0 auto; } .mp-sticky-contact__button--whatsapp .mp-action-icon, .mp-sticky-contact__button--call .mp-action-icon { filter: brightness(0) invert(1); } .mp-sticky-contact__button--whatsapp { background: #16a765; color: #fff; } .mp-sticky-contact__button--whatsapp:hover { background: #118450; color: #fff; } .mp-sticky-contact__button--call { display: none; border-color: rgba(255, 255, 255, 0.16); background: var(--mp-ink); color: #fff; } .mp-sticky-contact__button--brief { border-color: rgba(37, 39, 43, 0.12); background: #fff; color: var(--mp-ink); cursor: pointer; } .mp-sticky-contact__button--brief:hover { border-color: rgba(36, 107, 219, 0.34); background: #f7faff; } .mp-lead-drawer { position: fixed; z-index: 1200; inset: 0; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 220ms ease, visibility 220ms ease; } .mp-lead-drawer.is-open { opacity: 1; pointer-events: auto; visibility: visible; } .mp-lead-drawer__backdrop { position: absolute; inset: 0; background: rgba(23, 27, 35, 0.34); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .mp-lead-drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; display: flex; width: min(760px, calc(100% - 40px)); max-width: 100%; flex-direction: column; overflow: hidden; background: radial-gradient(circle at 12% 8%, rgba(239, 35, 60, 0.08), transparent 26%), radial-gradient(circle at 92% 88%, rgba(36, 107, 219, 0.09), transparent 28%), #fff; box-shadow: -32px 0 90px rgba(27, 31, 39, 0.2); transform: translateX(104%); transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1); } [dir="rtl"] .mp-lead-drawer__panel { box-shadow: 32px 0 90px rgba(27, 31, 39, 0.2); transform: translateX(-104%); } .mp-lead-drawer.is-open .mp-lead-drawer__panel, [dir="rtl"] .mp-lead-drawer.is-open .mp-lead-drawer__panel { transform: translateX(0); } .mp-lead-drawer__header { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: clamp(28px, 5vw, 54px) clamp(24px, 5vw, 58px) 24px; border-bottom: 1px solid var(--mp-line-soft); } .mp-lead-drawer__header h2 { max-width: 610px; margin: 10px 0 12px; font-size: clamp(2rem, 1.55rem + 1.7vw, 3.55rem); line-height: 1.02; letter-spacing: -0.05em; } .mp-lead-drawer__header p { max-width: 610px; margin: 0; color: var(--mp-muted); font-size: 0.94rem; line-height: 1.7; } .mp-lead-drawer__close { display: inline-grid; width: 46px; height: 46px; place-items: center; border: 1px solid var(--mp-line); border-radius: 50%; background: rgba(255, 255, 255, 0.86); color: var(--mp-ink); cursor: pointer; font-size: 1.8rem; line-height: 1; } .mp-lead-drawer__close:hover, .mp-lead-drawer__close:focus-visible { border-color: var(--mp-blue); color: var(--mp-blue); } .mp-lead-drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: clamp(24px, 4vw, 46px) clamp(24px, 5vw, 58px); } .mp-lead-drawer__body .mp-contact-form { gap: 18px; } .mp-lead-drawer__direct { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 16px clamp(24px, 5vw, 58px) max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--mp-line-soft); background: rgba(248, 250, 251, 0.92); font-size: 0.78rem; } .mp-lead-drawer__direct span { color: var(--mp-muted); } .mp-lead-drawer__direct a { display: inline-flex; align-items: center; gap: 7px; color: var(--mp-ink); font-weight: 800; text-decoration: none; } .mp-lead-drawer__direct .mp-action-icon { width: 17px; height: 17px; flex-basis: 17px; } .mp-lead-drawer__direct a:hover { color: var(--mp-blue); } .mp-lead-drawer-is-open { overflow: hidden; } .mp-lead-drawer-is-open .mp-sticky-contact { opacity: 0; pointer-events: none; visibility: hidden; } @media (max-width: 900px) { #primary { padding-bottom: calc(74px + env(safe-area-inset-bottom)); } .mp-inline-conversion__card { grid-template-columns: 1fr; gap: 24px; } .mp-inline-conversion__actions { justify-content: flex-start; } .mp-sticky-contact { inset-inline: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 9px max(14px, env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); border-top: 1px solid rgba(37, 39, 43, 0.1); background: rgba(255, 255, 255, 0.92); box-shadow: 0 -14px 40px rgba(37, 39, 43, 0.1); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .mp-sticky-contact__button { width: 100%; min-height: 52px; padding-inline: 15px; box-shadow: none; font-size: 0.8rem; } .mp-sticky-contact__button:hover { transform: none; box-shadow: none; } .mp-sticky-contact__button--call { display: inline-flex; } .mp-sticky-contact__button--brief { background: var(--mp-ink); color: #fff; } .mp-sticky-contact__button--brief .mp-action-icon { filter: brightness(0) invert(1); } } @media (max-width: 560px) { .mp-lead-drawer__panel { width: 100%; } .mp-lead-drawer__header { padding-top: max(24px, env(safe-area-inset-top)); } .mp-lead-drawer__header h2 { font-size: clamp(1.9rem, 9vw, 2.7rem); } .mp-lead-drawer__body .mp-contact-form { grid-template-columns: 1fr; } .mp-lead-drawer__body .mp-contact-form__field--wide, .mp-lead-drawer__body .mp-contact-form__contact-note, .mp-lead-drawer__body .mp-contact-form__optional, .mp-lead-drawer__body .mp-contact-form__consent, .mp-lead-drawer__body .mp-contact-form__actions { grid-column: auto; } .mp-inline-conversion { padding-block: 18px; } .mp-inline-conversion__card { padding: 28px 22px; border-radius: 24px; } .mp-inline-conversion__copy h2 { font-size: clamp(1.75rem, 9vw, 2.45rem); } .mp-inline-conversion__actions { width: 100%; } .mp-inline-conversion__actions .mp-button { flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { .mp-sticky-contact, .mp-sticky-contact__button, .mp-lead-drawer, .mp-lead-drawer__panel { transition: none; } }
/* multipixels-portfolio-strip */
.mp-portfolio-strip { position: relative; z-index: 1; padding-block: clamp(64px, 8vw, 112px); overflow: hidden; border-top: 1px solid var(--mp-line-soft); background: radial-gradient(circle at 9% 18%, rgba(231, 31, 47, 0.07), transparent 25%), radial-gradient(circle at 91% 82%, rgba(27, 103, 222, 0.07), transparent 25%), rgba(248, 250, 249, 0.88); } .mp-portfolio-strip::before, .mp-portfolio-strip::after { position: absolute; width: 8px; height: 8px; content: ""; transform: rotate(14deg); pointer-events: none; } .mp-portfolio-strip::before { inset-block-start: 18%; inset-inline-start: 4%; background: var(--mp-red); box-shadow: 38px 24px 0 rgba(27, 103, 222, 0.35); } .mp-portfolio-strip::after { inset-inline-end: 5%; inset-block-end: 22%; background: var(--mp-blue); box-shadow: -34px -22px 0 rgba(231, 31, 47, 0.3); } .mp-portfolio-strip__header { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.55fr); align-items: end; gap: clamp(30px, 6vw, 92px); margin-bottom: clamp(34px, 5vw, 62px); } .mp-portfolio-strip__header h2 { max-width: 780px; margin: 0; font-size: clamp(2.25rem, 1.8rem + 2vw, 4.4rem); line-height: 1.04; letter-spacing: -0.05em; } .mp-portfolio-strip__header p { margin: 0 0 18px; color: var(--mp-muted); line-height: 1.75; } .mp-portfolio-strip__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .mp-portfolio-strip__card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--mp-line-soft); border-radius: 26px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 20px 60px rgba(37, 39, 43, 0.055); transition: transform 360ms cubic-bezier(0.16, 0.8, 0.2, 1), box-shadow 360ms ease; } .mp-portfolio-strip__card:hover { transform: translateY(-5px); box-shadow: 0 30px 80px rgba(37, 39, 43, 0.1); } .mp-portfolio-strip__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--mp-line-soft); background: #edf3f6; } .mp-portfolio-strip__media picture, .mp-portfolio-strip__media img { display: block; width: 100%; height: 100%; } .mp-portfolio-strip__media img { object-fit: cover; transition: transform 650ms cubic-bezier(0.16, 0.8, 0.2, 1); } .mp-portfolio-strip__card:hover .mp-portfolio-strip__media img { transform: scale(1.035); } .mp-portfolio-strip__body { display: flex; flex: 1; flex-direction: column; padding: clamp(22px, 2.5vw, 32px); } .mp-portfolio-strip__body > span { color: var(--mp-muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .mp-portfolio-strip__body h3 { margin: 12px 0; font-size: clamp(1.45rem, 1.25rem + 0.6vw, 2rem); line-height: 1.12; } .mp-portfolio-strip__body h3 a { text-decoration: none; } .mp-portfolio-strip__body p { margin: 0 0 22px; color: var(--mp-muted); font-size: 0.9rem; line-height: 1.7; } .mp-portfolio-strip__body .mp-inline-link { margin-top: auto; } [dir="rtl"] .mp-portfolio-strip__header h2 { letter-spacing: 0; } [dir="rtl"] .mp-portfolio-strip__body > span { letter-spacing: 0; } @media (max-width: 980px) { .mp-portfolio-strip__header { grid-template-columns: 1fr; gap: 22px; } .mp-portfolio-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mp-portfolio-strip__card:last-child { grid-column: 1 / -1; } } @media (max-width: 680px) { .mp-portfolio-strip { padding-block: 58px; } .mp-portfolio-strip__header h2 { font-size: clamp(2.25rem, 10vw, 3.2rem); } .mp-portfolio-strip__grid { grid-template-columns: none; grid-auto-columns: minmax(82%, 1fr); grid-auto-flow: column; gap: 12px; margin-inline: calc(var(--mp-page-gutter, 20px) * -1); padding-inline: var(--mp-page-gutter, 20px); overflow-x: auto; scrollbar-width: none; } .mp-portfolio-strip__grid::-webkit-scrollbar { display: none; } .mp-portfolio-strip__card, .mp-portfolio-strip__card:last-child { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { .mp-portfolio-strip__card, .mp-portfolio-strip__media img { transition: none; } }
/* multipixels-cube-hero */
.mp-cube-hero { position: relative; isolation: isolate; display: grid; min-height: 100svh; overflow: hidden; padding: calc(var(--mp-header-height) + 34px) 0 58px; background: radial-gradient(circle at 17% 72%, rgba(231, 31, 47, 0.09), transparent 27%), radial-gradient(circle at 72% 25%, rgba(27, 103, 222, 0.075), transparent 29%), radial-gradient(circle at 48% 48%, rgba(223, 242, 228, 0.48), transparent 38%), rgba(248, 250, 249, 0.58); } .mp-cube-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, transparent 49.95%, rgba(37, 39, 43, 0.035) 50%, transparent 50.05%), linear-gradient(transparent 49.95%, rgba(37, 39, 43, 0.025) 50%, transparent 50.05%); background-size: 96px 96px; -webkit-mask-image: radial-gradient(circle at 43% 51%, black, transparent 63%); mask-image: radial-gradient(circle at 43% 51%, black, transparent 63%); } .mp-cube-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(560px, 1.12fr) minmax(420px, 0.88fr); align-items: center; gap: clamp(42px, 6vw, 108px); min-height: calc(100svh - var(--mp-header-height) - 92px); } .mp-cube-hero__stage { position: relative; align-self: stretch; min-height: min(690px, calc(100svh - var(--mp-header-height) - 72px)); cursor: crosshair; } .mp-cube-hero__canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; transition: opacity 500ms ease; } .mp-cube-hero.is-canvas-ready .mp-cube-hero__canvas { opacity: 1; } .mp-cube-hero__trigger { position: absolute; z-index: 3; top: 50%; left: 50%; width: min(56%, 390px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 38%; background: transparent; color: inherit; cursor: pointer; text-decoration: none; transform: translate(-50%, -50%); } .mp-cube-hero__trigger::after { content: ""; position: absolute; inset: 13%; border: 1px solid transparent; border-radius: 34%; transition: border-color var(--mp-transition), box-shadow var(--mp-transition), transform var(--mp-transition); } .mp-cube-hero__trigger:hover::after, .mp-cube-hero__trigger:focus-visible::after { border-color: rgba(37, 39, 43, 0.13); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.28), 0 20px 60px rgba(37, 39, 43, 0.06); transform: scale(1.03); } .mp-cube-hero__trigger:focus-visible { outline: 2px solid var(--mp-blue); outline-offset: 5px; } .mp-cube-hero.is-exploded .mp-cube-hero__trigger { width: min(29%, 210px); } .mp-cube-fallback { position: absolute; z-index: 0; top: 50%; left: 50%; width: min(52%, 355px); aspect-ratio: 1; filter: drop-shadow(0 34px 34px rgba(30, 39, 34, 0.12)); transform: translate(-50%, -50%) rotate(-7deg); transition: opacity 300ms ease; } .mp-cube-hero.is-canvas-ready .mp-cube-fallback { opacity: 0; } .mp-cube-fallback::before, .mp-cube-fallback::after { content: ""; position: absolute; z-index: -1; border: 1px solid rgba(102, 116, 109, 0.19); background: rgba(255, 255, 255, 0.45); } .mp-cube-fallback::before { top: -11%; right: 10%; left: 9%; height: 18%; transform: skewX(-44deg); transform-origin: bottom; } .mp-cube-fallback::after { top: -2%; right: -10%; bottom: 10%; width: 18%; transform: skewY(-45deg); transform-origin: left; } .mp-cube-fallback__face { display: grid; grid-template-columns: repeat(7, 1fr); height: 100%; border: 1px solid rgba(102, 116, 109, 0.2); background: rgba(255, 255, 255, 0.48); } .mp-cube-fallback__face i { border: 1px solid rgba(89, 103, 96, 0.1); background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(226, 231, 228, 0.72)); } .mp-cube-fallback__face i:nth-child(9), .mp-cube-fallback__face i:nth-child(33) { background: var(--mp-red); } .mp-cube-fallback__face i:nth-child(20), .mp-cube-fallback__face i:nth-child(45) { background: var(--mp-blue); } .mp-cube-fallback__logo { position: absolute; top: 50%; left: 50%; width: 68%; padding: 7px 12px; background: rgba(255, 255, 255, 0.84); color: var(--mp-ink); transform: translate(-50%, -50%); } .mp-cube-fallback__logo img { width: 100%; height: auto; } .mp-cube-services { position: absolute; z-index: 4; inset: 0; pointer-events: none; } .mp-cube-services__item { --service-x: 50%; --service-y: 50%; position: absolute; top: 50%; left: 50%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; width: 176px; min-height: 54px; padding: 10px 12px; border: 1px solid rgba(37, 39, 43, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.76); box-shadow: 0 14px 34px rgba(37, 39, 43, 0.07); color: var(--mp-ink); opacity: 0; pointer-events: none; text-decoration: none; transform: translate(-50%, -50%) scale(0.48); visibility: hidden; backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px); transition: top 650ms cubic-bezier(0.16, 0.8, 0.2, 1), left 650ms cubic-bezier(0.16, 0.8, 0.2, 1), opacity 280ms ease, transform 650ms cubic-bezier(0.16, 0.8, 0.2, 1), visibility 650ms; } .mp-cube-services__item:nth-child(1) { --service-x: 14%; --service-y: 17%; } .mp-cube-services__item:nth-child(2) { --service-x: 50%; --service-y: 9%; } .mp-cube-services__item:nth-child(3) { --service-x: 86%; --service-y: 17%; } .mp-cube-services__item:nth-child(4) { --service-x: 14%; --service-y: 83%; } .mp-cube-services__item:nth-child(5) { --service-x: 50%; --service-y: 91%; } .mp-cube-services__item:nth-child(6) { --service-x: 86%; --service-y: 83%; } .mp-cube-hero.is-exploded .mp-cube-services__item { top: var(--service-y); left: var(--service-x); opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); visibility: visible; } .mp-cube-services__item:nth-child(odd) { border-top-color: rgba(231, 31, 47, 0.42); } .mp-cube-services__item:nth-child(even) { border-top-color: rgba(27, 103, 222, 0.42); } .mp-cube-services__item > span { color: var(--mp-muted); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 0.56rem; font-weight: 700; } .mp-cube-services__item strong { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.045em; line-height: 1.25; text-transform: uppercase; } .mp-cube-services__item > i { color: var(--mp-red); font-size: 0.75rem; font-style: normal; } .mp-cube-services__item:nth-child(even) > i { color: var(--mp-blue); } .mp-cube-services__item:hover, .mp-cube-services__item:focus-visible { border-color: rgba(37, 39, 43, 0.2); background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 42px rgba(37, 39, 43, 0.12); color: var(--mp-ink); transform: translate(-50%, -50%) scale(1.035); } .mp-cube-hero__instruction { position: absolute; z-index: 5; right: 12px; bottom: 14px; display: flex; align-items: center; gap: 11px; color: var(--mp-muted); font-size: 0.57rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .mp-cube-hero__instruction-expanded { display: none; } .mp-cube-hero.is-exploded .mp-cube-hero__instruction-collapsed { display: none; } .mp-cube-hero.is-exploded .mp-cube-hero__instruction-expanded { display: inline; } .mp-cube-hero__instruction > i { position: relative; width: 16px; height: 16px; border: 1px solid rgba(37, 39, 43, 0.32); transform: rotate(30deg) skewY(-5deg); } .mp-cube-hero__instruction > i::before { content: ""; position: absolute; top: -4px; right: 3px; width: 4px; height: 4px; background: var(--mp-red); box-shadow: -8px 14px 0 var(--mp-blue); } .mp-cube-hero__content { position: relative; z-index: 6; max-width: 610px; } .mp-cube-hero__content h1 { margin-bottom: 26px; font-size: clamp(3rem, 2.45rem + 2.25vw, 5.15rem); line-height: 1; letter-spacing: -0.062em; } .mp-dot--red { color: var(--mp-red); } .mp-dot--blue { color: var(--mp-blue); } .mp-cube-hero__content > p { max-width: 545px; margin-bottom: 30px; color: var(--mp-muted); font-size: clamp(1rem, 0.94rem + 0.3vw, 1.16rem); line-height: 1.65; } .mp-cube-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; } .mp-cube-hero__action-trigger { cursor: pointer; } .mp-cube-hero__cube-link { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--mp-blue); font: inherit; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; } .mp-cube-hero.is-static-cube .mp-cube-hero__canvas { display: none; } .mp-cube-hero__cube-link:hover, .mp-cube-hero__cube-link:focus-visible { color: var(--mp-red); } .mp-cube-hero__action-trigger i { font-size: 1rem; font-style: normal; transition: transform 450ms ease; } .mp-cube-hero.is-exploded .mp-cube-hero__action-trigger i { transform: rotate(180deg); } .mp-cube-hero__text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--mp-ink); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; } .mp-cube-hero__text-link span { color: var(--mp-blue); transition: transform var(--mp-transition); } .mp-cube-hero__text-link:hover span { transform: translate(3px, -3px); } .mp-cube-hero__signals { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 34px 0 0; padding: 0; color: var(--mp-muted); font-size: 0.62rem; font-weight: 750; letter-spacing: 0.13em; list-style: none; text-transform: uppercase; } .mp-cube-hero__signals li { position: relative; padding-left: 12px; } .mp-cube-hero__signals li::before { content: ""; position: absolute; top: 50%; left: 0; width: 4px; height: 4px; background: var(--mp-red); transform: translateY(-50%); } .mp-cube-hero__signals li:nth-child(even)::before { background: var(--mp-blue); } .mp-cube-hero__side-note { position: absolute; z-index: 3; top: 50%; left: 20px; color: rgba(37, 39, 43, 0.46); font-size: 0.52rem; font-weight: 800; letter-spacing: 0.2em; transform: translateY(-50%) rotate(-90deg); } .mp-cube-hero__side-note::after { content: ""; display: inline-block; width: 60px; height: 1px; margin-left: 13px; background: rgba(37, 39, 43, 0.22); vertical-align: middle; } .mp-cube-hero__scroll { position: absolute; z-index: 7; right: 50%; bottom: 16px; display: flex; align-items: center; gap: 10px; color: var(--mp-muted); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.16em; text-decoration: none; transform: translateX(50%); } .mp-cube-hero__scroll i { display: grid; width: 30px; height: 30px; border: 1px solid var(--mp-line); border-radius: 50%; background: rgba(255, 255, 255, 0.78); color: var(--mp-ink); font-style: normal; place-items: center; transition: transform var(--mp-transition), border-color var(--mp-transition); } .mp-cube-hero__scroll:hover i { border-color: var(--mp-red); transform: translateY(3px); } .mp-cube-hero__anchor { position: absolute; bottom: 0; left: 0; width: 1px; height: 1px; } .mp-ar .mp-cube-hero__inner { direction: ltr; } .mp-ar .mp-cube-hero__content { direction: rtl; text-align: right; } .mp-ar .mp-cube-hero__actions, .mp-ar .mp-cube-hero__signals { justify-content: flex-start; } .mp-ar .mp-cube-services__item { direction: rtl; } @media (max-width: 1200px) { .mp-cube-hero__inner { grid-template-columns: minmax(500px, 1.05fr) minmax(380px, 0.95fr); gap: 36px; } .mp-cube-services__item { width: 154px; padding-inline: 10px; } .mp-cube-services__item strong { font-size: 0.58rem; } .mp-cube-hero__side-note { display: none; } } @media (max-width: 960px) { .mp-cube-hero { min-height: auto; padding-top: calc(var(--mp-header-height) + 28px); } .mp-cube-hero__inner { grid-template-columns: 1fr; gap: 22px; min-height: auto; } .mp-cube-hero__stage { min-height: min(56vw, 430px); order: 2; } .mp-cube-hero__content { max-width: 760px; margin-inline: auto; order: 1; text-align: center; } .mp-cube-hero__canvas { display: none; } .mp-cube-hero__instruction { display: none; } .mp-ar .mp-cube-hero__content { text-align: center; } .mp-cube-hero__content > p { margin-inline: auto; } .mp-cube-hero__actions, .mp-cube-hero__signals { justify-content: center; } .mp-ar .mp-cube-hero__actions, .mp-ar .mp-cube-hero__signals { justify-content: center; } .mp-cube-hero__scroll { display: none; } } @media (max-width: 680px) { .mp-cube-hero { padding-top: calc(var(--mp-header-height) + 20px); padding-bottom: 42px; } .mp-cube-hero::before { background-size: 70px 70px; } .mp-cube-hero__stage { min-height: min(88vw, 380px); } .mp-cube-fallback { width: min(68%, 310px); } .mp-cube-hero__trigger { width: min(68%, 310px); } .mp-cube-services__item { width: min(43%, 154px); min-height: 48px; } .mp-cube-services__item:nth-child(1) { --service-x: 24%; --service-y: 12%; } .mp-cube-services__item:nth-child(2) { --service-x: 76%; --service-y: 12%; } .mp-cube-services__item:nth-child(3) { --service-x: 20%; --service-y: 50%; } .mp-cube-services__item:nth-child(4) { --service-x: 80%; --service-y: 50%; } .mp-cube-services__item:nth-child(5) { --service-x: 24%; --service-y: 88%; } .mp-cube-services__item:nth-child(6) { --service-x: 76%; --service-y: 88%; } .mp-cube-services__item > span { display: none; } .mp-cube-services__item strong { font-size: 0.55rem; } .mp-cube-hero__instruction { display: none; } .mp-cube-hero__content h1 { margin-bottom: 18px; font-size: clamp(2.35rem, 10.8vw, 3.35rem); line-height: 1.02; } .mp-cube-hero__content > p { margin-bottom: 22px; font-size: 0.96rem; line-height: 1.55; } .mp-cube-hero__actions { gap: 18px; } .mp-cube-hero__signals { margin-top: 24px; gap: 7px 14px; } } @media (max-width: 430px) { .mp-cube-hero__stage { min-height: 330px; } .mp-cube-services__item { width: 42%; padding: 8px 9px; } .mp-cube-hero__actions { align-items: stretch; flex-direction: column; } .mp-cube-hero__text-link { justify-content: center; min-height: 44px; } .mp-cube-hero__cube-link { width: 100%; } } @media (prefers-reduced-motion: reduce) { .mp-cube-hero__canvas, .mp-cube-services__item, .mp-cube-hero__trigger, .mp-cube-hero__action-trigger i { transition-duration: 0.01ms !important; } }
/* multipixels-home */
.site-main--home { overflow: clip; } body.home .site-footer__cta { display: none; } .mp-home-section { position: relative; padding: clamp(66px, 8vw, 116px) 0; } .mp-home-section::before { content: ""; position: absolute; z-index: -1; inset: 8% 0 auto; width: min(32vw, 470px); height: min(32vw, 470px); border-radius: 50%; background: rgba(223, 242, 228, 0.42); filter: blur(90px); pointer-events: none; } .mp-section-heading { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.58fr); align-items: end; gap: clamp(32px, 7vw, 110px); margin-bottom: clamp(34px, 5vw, 62px); } .mp-section-heading--compact { grid-template-columns: minmax(0, 1fr) auto; } .mp-section-heading h2, .mp-home-process__intro h2, .mp-home-about__content h2 { max-width: 920px; margin: 0; font-size: clamp(2.6rem, 2rem + 2.8vw, 5rem); line-height: 1.02; letter-spacing: -0.065em; } .mp-section-heading > p { max-width: 500px; margin: 0 0 6px; color: var(--mp-muted); font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem); line-height: 1.72; } .mp-inline-link { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 8px; color: var(--mp-ink); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; white-space: nowrap; } .mp-inline-link span { display: inline-grid; width: 30px; height: 30px; border: 1px solid var(--mp-line); border-radius: 50%; color: var(--mp-blue); place-items: center; transition: border-color var(--mp-transition), transform var(--mp-transition); } .mp-inline-link:hover { color: var(--mp-ink); } .mp-inline-link:hover span { border-color: var(--mp-red); transform: translate(3px, -3px); } .mp-home-ready [data-mp-reveal] { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity 720ms cubic-bezier(0.16, 0.8, 0.2, 1), transform 720ms cubic-bezier(0.16, 0.8, 0.2, 1); } .mp-home-ready [data-mp-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); } .mp-market-strip { position: relative; z-index: 3; overflow: hidden; border-block: 1px solid var(--mp-line-soft); background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .mp-market-strip__track { display: flex; width: max-content; animation: mp-market-loop 32s linear infinite; } .mp-market-strip__set { display: flex; align-items: center; flex-shrink: 0; gap: 30px; padding: 18px 15px; } .mp-market-strip__set span { color: #60676b; font-size: 0.62rem; font-weight: 850; letter-spacing: 0.17em; white-space: nowrap; } .mp-market-strip__set i { width: 5px; height: 5px; background: var(--mp-red); box-shadow: 9px 0 0 rgba(27, 103, 222, 0.72); } .mp-market-strip:hover .mp-market-strip__track { animation-play-state: paused; } @keyframes mp-market-loop { to { transform: translateX(-50%); } } .mp-home-services { background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), transparent 24%), radial-gradient(circle at 92% 28%, rgba(27, 103, 222, 0.055), transparent 23%); } .mp-home-services::before { right: -8%; left: auto; background: rgba(27, 103, 222, 0.08); } .mp-services-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; perspective: 1200px; } .mp-service-card { --tilt-x: 0deg; --tilt-y: 0deg; --glow-x: 50%; --glow-y: 50%; position: relative; isolation: isolate; display: flex; grid-column: span 3; flex-direction: column; min-height: 355px; overflow: hidden; padding: clamp(24px, 3vw, 38px); border: 1px solid rgba(37, 39, 43, 0.09); border-radius: clamp(20px, 2.3vw, 30px); background: radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.96), transparent 27%), rgba(255, 255, 255, 0.66); box-shadow: 0 20px 70px rgba(43, 56, 49, 0.055); color: var(--mp-ink); text-decoration: none; transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style: preserve-3d; transition: opacity 720ms cubic-bezier(0.16, 0.8, 0.2, 1), transform 180ms ease, border-color var(--mp-transition), box-shadow var(--mp-transition); } .mp-home-ready .mp-service-card[data-mp-reveal] { opacity: 0; transform: perspective(1000px) translateY(34px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); } .mp-home-ready .mp-service-card[data-mp-reveal].is-visible { opacity: 1; transform: perspective(1000px) translateY(0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); } .mp-service-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, transparent 49.7%, rgba(37, 39, 43, 0.035) 50%, transparent 50.3%), linear-gradient(transparent 49.7%, rgba(37, 39, 43, 0.035) 50%, transparent 50.3%); background-size: 52px 52px; -webkit-mask-image: linear-gradient(to bottom right, black, transparent 66%); mask-image: linear-gradient(to bottom right, black, transparent 66%); } .mp-service-card::after { content: ""; position: absolute; top: 0; left: 30px; width: 54px; height: 2px; background: var(--mp-red); box-shadow: 62px 0 0 var(--mp-blue); } .mp-service-card--feature { grid-column: span 6; grid-row: span 2; min-height: 726px; background: radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.98), transparent 25%), linear-gradient(145deg, rgba(231, 31, 47, 0.055), rgba(255, 255, 255, 0.75) 44%, rgba(27, 103, 222, 0.055)); } .mp-service-card--wide { grid-column: span 6; } .mp-service-card:hover, .mp-service-card:focus-visible { border-color: rgba(37, 39, 43, 0.18); box-shadow: 0 28px 85px rgba(43, 56, 49, 0.1); color: var(--mp-ink); } .mp-service-card__number { position: relative; z-index: 2; color: var(--mp-muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; } .mp-service-card__visual { position: absolute; z-index: 1; top: 54px; right: -5%; width: 78%; height: 48%; overflow: hidden; border-radius: 22px; opacity: 0.88; transform: translateZ(14px) rotateY(-4deg) rotateX(2deg); transform-origin: center; transition: opacity 450ms ease, transform 650ms cubic-bezier(0.16, 0.8, 0.2, 1); -webkit-mask-image: linear-gradient(to bottom, black 58%, transparent 100%); mask-image: linear-gradient(to bottom, black 58%, transparent 100%); } .mp-service-card__visual img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .mp-service-card--feature .mp-service-card__visual { top: 70px; right: -2%; width: 88%; height: 54%; } .mp-service-card:hover .mp-service-card__visual { opacity: 1; transform: translate3d(-4px, -6px, 38px) rotateY(2deg) rotateX(-1deg) scale(1.035); } .mp-service-card__pixel { position: absolute; top: clamp(26px, 3vw, 42px); right: clamp(24px, 3vw, 42px); display: grid; grid-template-columns: repeat(3, 13px); gap: 4px; transform: translateZ(24px) rotate(45deg); transition: transform 480ms cubic-bezier(0.16, 0.8, 0.2, 1); } .mp-service-card--feature .mp-service-card__pixel { top: 18%; right: 13%; grid-template-columns: repeat(3, clamp(24px, 3vw, 42px)); gap: 7px; } .mp-service-card__visual + .mp-service-card__pixel { z-index: 2; opacity: 0.72; } .mp-service-card__pixel i { aspect-ratio: 1; border: 1px solid rgba(37, 39, 43, 0.11); background: rgba(255, 255, 255, 0.72); box-shadow: 4px 4px 0 rgba(37, 39, 43, 0.045); } .mp-service-card__pixel i:nth-child(3), .mp-service-card__pixel i:nth-child(7) { background: rgba(231, 31, 47, 0.82); } .mp-service-card__pixel i:nth-child(5) { background: rgba(27, 103, 222, 0.8); } .mp-service-card:hover .mp-service-card__pixel { transform: translateZ(40px) rotate(51deg) scale(1.07); } .mp-service-card__content { position: relative; z-index: 2; max-width: 520px; margin-top: auto; transform: translateZ(28px); } .mp-service-card__content h3 { margin-bottom: 15px; font-size: clamp(1.45rem, 1.15rem + 1vw, 2.25rem); line-height: 1.02; } .mp-service-card--feature .mp-service-card__content h3 { max-width: 530px; font-size: clamp(2.2rem, 1.85rem + 1.8vw, 4rem); } .mp-service-card__content > p { max-width: 440px; margin-bottom: 22px; color: var(--mp-muted); font-size: 0.92rem; line-height: 1.62; } .mp-service-card__content ul, .mp-work-card__content ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; } .mp-service-card__content li, .mp-work-card__content li { padding: 6px 9px; border: 1px solid var(--mp-line-soft); border-radius: 999px; background: rgba(255, 255, 255, 0.48); color: #646b6e; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .mp-service-card__arrow { position: absolute; right: 28px; bottom: 26px; color: var(--mp-red); font-size: 1rem; transform: translateZ(34px); transition: transform var(--mp-transition); } .mp-service-card:hover .mp-service-card__arrow { transform: translate3d(4px, -4px, 34px); } .mp-home-work { border-block: 1px solid var(--mp-line-soft); background: rgba(255, 255, 255, 0.38); } .mp-home-work::before { left: -7%; background: rgba(231, 31, 47, 0.07); } .mp-work-list { display: grid; gap: 20px; } .mp-work-card { --work-x: 0px; --work-y: 0px; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(340px, 0.82fr); min-height: 550px; overflow: hidden; border: 1px solid var(--mp-line-soft); border-radius: clamp(24px, 3vw, 40px); background: rgba(255, 255, 255, 0.7); box-shadow: 0 26px 90px rgba(43, 56, 49, 0.065); } .mp-work-card:nth-child(even) .mp-work-card__media { grid-column: 2; } .mp-work-card:nth-child(even) .mp-work-card__content { grid-row: 1; grid-column: 1; } .mp-work-card__media { position: relative; overflow: hidden; min-height: 520px; background: #f2f5f3; } .mp-work-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 45%); pointer-events: none; } .mp-work-card__media picture, .mp-work-card__media img { width: 100%; height: 100%; } .mp-work-card__media img { object-fit: cover; transform: scale(1.055) translate3d(var(--work-x), var(--work-y), 0); transition: transform 220ms ease-out; } .mp-work-card__view { position: absolute; z-index: 2; right: 22px; bottom: 22px; display: grid; width: 76px; height: 76px; border: 1px solid rgba(37, 39, 43, 0.1); border-radius: 50%; background: rgba(255, 255, 255, 0.82); color: var(--mp-ink); font-size: 0.56rem; font-weight: 900; letter-spacing: 0.12em; place-items: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background var(--mp-transition), color var(--mp-transition), transform var(--mp-transition); } .mp-work-card__media:hover .mp-work-card__view { background: var(--mp-red); color: var(--mp-white); transform: rotate(8deg) scale(1.05); } .mp-work-card__content { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 5vw, 76px); } .mp-work-card__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; } .mp-work-card__meta span { display: grid; width: 30px; height: 30px; border-radius: 7px; background: var(--mp-ink); color: var(--mp-white); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.58rem; place-items: center; } .mp-work-card__meta p { margin: 0; color: var(--mp-muted); font-size: 0.58rem; font-weight: 850; letter-spacing: 0.14em; } .mp-work-card__content h3 { margin-bottom: 22px; font-size: clamp(2.15rem, 1.75rem + 1.7vw, 3.75rem); line-height: 1.02; } .mp-work-card__content h3 a { text-decoration: none; } .mp-work-card__content h3 a:hover { color: var(--mp-red); } .mp-work-card__content > p { margin-bottom: 28px; color: var(--mp-muted); font-size: 0.98rem; line-height: 1.7; } .mp-home-process { background: radial-gradient(circle at 8% 68%, rgba(231, 31, 47, 0.055), transparent 24%), radial-gradient(circle at 90% 18%, rgba(27, 103, 222, 0.05), transparent 26%); } .mp-home-process__layout { display: grid; grid-template-columns: minmax(360px, 0.82fr) minmax(480px, 1fr); align-items: start; gap: clamp(60px, 10vw, 150px); } .mp-home-process__intro { position: sticky; top: calc(var(--mp-header-height) + 46px); } .mp-home-process__intro h2 { margin-bottom: 30px; font-size: clamp(2.6rem, 2.05rem + 2.2vw, 4.6rem); } .mp-home-process__intro > p { max-width: 470px; color: var(--mp-muted); font-size: 1.02rem; } .mp-process-core { --process-accent: var(--mp-red); --core-rotate-x: 8deg; --core-rotate-y: -10deg; display: grid; grid-template-columns: repeat(4, 22px); gap: 5px; width: max-content; margin-top: 54px; padding: 22px; border: 1px solid var(--mp-line-soft); border-radius: 20px; background: rgba(255, 255, 255, 0.64); box-shadow: var(--mp-shadow-soft); transform: perspective(700px) rotateX(var(--core-rotate-x)) rotateY(var(--core-rotate-y)) rotateZ(-7deg); transform-style: preserve-3d; transition: transform 550ms cubic-bezier(0.16, 0.8, 0.2, 1); } .mp-process-core > div { display: contents; } .mp-process-core i { width: 22px; height: 22px; border: 1px solid rgba(37, 39, 43, 0.08); background: rgba(239, 243, 241, 0.85); transition: background 400ms ease, transform 400ms ease; } .mp-process-core i:nth-of-type(1), .mp-process-core i:nth-of-type(4) { background: var(--process-accent); } .mp-process-core[data-active-step="1"] { --process-accent: var(--mp-blue); transform: perspective(700px) rotateX(var(--core-rotate-x)) rotateY(var(--core-rotate-y)) rotateZ(2deg); } .mp-process-core[data-active-step="2"] { --process-accent: var(--mp-red); transform: perspective(700px) rotateX(var(--core-rotate-x)) rotateY(var(--core-rotate-y)) rotateZ(8deg) scale(1.04); } .mp-process-core[data-active-step="3"] { --process-accent: var(--mp-blue); transform: perspective(700px) rotateX(var(--core-rotate-x)) rotateY(var(--core-rotate-y)) rotateZ(0deg) scale(1.08); } .mp-process-steps { position: relative; margin: 0; padding: 0; list-style: none; } .mp-process-steps::before { content: ""; position: absolute; top: 34px; bottom: 34px; left: 31px; width: 1px; background: var(--mp-line); } .mp-process-step { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 28px; min-height: 230px; padding: 12px 0 48px; } .mp-process-step__marker { position: relative; z-index: 1; display: flex; align-items: center; flex-direction: column; } .mp-process-step__marker span { display: grid; width: 62px; height: 62px; border: 1px solid var(--mp-line); border-radius: 18px; background: rgba(255, 255, 255, 0.9); color: var(--mp-muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.65rem; place-items: center; transition: background 450ms ease, border-color 450ms ease, color 450ms ease, transform 450ms cubic-bezier(0.16, 0.8, 0.2, 1); } .mp-process-step__marker i { width: 5px; height: 5px; margin-top: 16px; background: var(--mp-red); box-shadow: 0 10px 0 rgba(27, 103, 222, 0.54); opacity: 0; transition: opacity 350ms ease; } .mp-process-step__label { display: block; margin: 8px 0 16px; color: var(--mp-red); font-size: 0.6rem; font-weight: 900; letter-spacing: 0.16em; } .mp-process-step:nth-child(even) .mp-process-step__label { color: var(--mp-blue); } .mp-process-step h3 { max-width: 550px; margin-bottom: 17px; font-size: clamp(1.75rem, 1.45rem + 1vw, 2.6rem); } .mp-process-step p { max-width: 590px; margin: 0; color: var(--mp-muted); font-size: 0.96rem; } .mp-process-step.is-active .mp-process-step__marker span { border-color: var(--mp-ink); background: var(--mp-ink); color: var(--mp-white); transform: rotate(-6deg) scale(1.08); } .mp-process-step.is-active .mp-process-step__marker i { opacity: 1; } .mp-home-about { border-block: 1px solid var(--mp-line-soft); background: rgba(255, 255, 255, 0.48); } .mp-home-about::before { right: 12%; left: auto; background: rgba(27, 103, 222, 0.065); } .mp-home-about__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.95fr); align-items: center; gap: clamp(52px, 9vw, 140px); } .mp-home-about__media { --about-x: 0px; --about-y: 0px; position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--mp-line-soft); border-radius: clamp(26px, 4vw, 50px); background: #f2f5f3; box-shadow: var(--mp-shadow-soft); } .mp-home-about__media picture, .mp-home-about__media img { width: 100%; height: 100%; } .mp-home-about__media img { object-fit: cover; transform: scale(1.07) translate3d(var(--about-x), var(--about-y), 0); transition: transform 220ms ease-out; } .mp-home-about__media-label { position: absolute; right: 22px; bottom: 22px; padding: 9px 12px; border: 1px solid rgba(37, 39, 43, 0.09); border-radius: 999px; background: rgba(255, 255, 255, 0.82); color: var(--mp-ink); font-size: 0.56rem; font-weight: 900; letter-spacing: 0.13em; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } .mp-home-about__content h2 { margin-bottom: 28px; font-size: clamp(2.6rem, 2rem + 2.35vw, 4.7rem); } .mp-home-about__content p { max-width: 580px; color: var(--mp-muted); } .mp-home-about__content .mp-home-about__lead { color: var(--mp-ink); font-size: clamp(1.12rem, 1rem + 0.45vw, 1.34rem); line-height: 1.62; } .mp-home-about__content .mp-inline-link { margin-top: 12px; } .mp-home-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(48px, 7vw, 86px); border-block: 1px solid var(--mp-line); } .mp-home-stat { position: relative; padding: clamp(30px, 4vw, 54px) clamp(18px, 3vw, 42px); } .mp-home-stat + .mp-home-stat { border-left: 1px solid var(--mp-line); } .mp-home-stat strong { display: block; margin-bottom: 13px; font-size: clamp(2.8rem, 2.25rem + 2.2vw, 4.8rem); line-height: 0.9; letter-spacing: -0.07em; } .mp-home-stat:nth-child(odd) strong { color: var(--mp-red); } .mp-home-stat:nth-child(even) strong { color: var(--mp-blue); } .mp-home-stat span { color: var(--mp-muted); font-size: 0.57rem; font-weight: 850; letter-spacing: 0.13em; } .mp-home-insights { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.58)), radial-gradient(circle at 82% 18%, rgba(223, 242, 228, 0.72), transparent 28%); } .mp-insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; perspective: 1200px; } .mp-insight-card { --tilt-x: 0deg; --tilt-y: 0deg; min-width: 0; } .mp-insight-card > a { position: relative; display: flex; flex-direction: column; min-height: 530px; padding: 16px 16px 30px; border: 1px solid var(--mp-line-soft); border-radius: 26px; background: rgba(255, 255, 255, 0.7); box-shadow: 0 20px 65px rgba(43, 56, 49, 0.055); color: var(--mp-ink); text-decoration: none; transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style: preserve-3d; transition: border-color var(--mp-transition), box-shadow var(--mp-transition), transform 180ms ease; } .mp-insight-card > a:hover { border-color: rgba(37, 39, 43, 0.18); box-shadow: 0 28px 80px rgba(43, 56, 49, 0.09); color: var(--mp-ink); } .mp-insight-card__visual { position: relative; display: grid; min-height: 270px; overflow: hidden; border-radius: 17px; background: radial-gradient(circle at 50% 45%, rgba(231, 31, 47, 0.1), transparent 34%), #f1f4f2; place-items: center; } .mp-insight-card--blue .mp-insight-card__visual { background: radial-gradient(circle at 50% 45%, rgba(27, 103, 222, 0.12), transparent 34%), #f1f4f2; } .mp-insight-card--split .mp-insight-card__visual { background: radial-gradient(circle at 35% 45%, rgba(231, 31, 47, 0.09), transparent 30%), radial-gradient(circle at 65% 55%, rgba(27, 103, 222, 0.1), transparent 30%), #f1f4f2; } .mp-insight-card__visual > span { position: absolute; z-index: 2; top: 17px; left: 18px; padding: 5px 7px; border-radius: 7px; background: rgba(255, 255, 255, 0.78); color: var(--mp-muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.58rem; font-weight: 850; } .mp-insight-card__visual > div { display: grid; grid-template-columns: repeat(4, 26px); gap: 5px; transform: rotate(-9deg); transition: transform 600ms cubic-bezier(0.16, 0.8, 0.2, 1); } .mp-insight-card__visual > img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(0.16, 0.8, 0.2, 1); } .mp-insight-card > a:hover .mp-insight-card__visual > img { transform: scale(1.045); } .mp-insight-card__visual i { width: 26px; height: 26px; border: 1px solid rgba(37, 39, 43, 0.08); background: rgba(255, 255, 255, 0.82); box-shadow: 5px 6px 10px rgba(37, 39, 43, 0.05); } .mp-insight-card--red .mp-insight-card__visual i:nth-child(3n), .mp-insight-card--split .mp-insight-card__visual i:nth-child(5n) { background: rgba(231, 31, 47, 0.82); } .mp-insight-card--blue .mp-insight-card__visual i:nth-child(4n + 1), .mp-insight-card--split .mp-insight-card__visual i:nth-child(4n) { background: rgba(27, 103, 222, 0.82); } .mp-insight-card > a:hover .mp-insight-card__visual > div { transform: rotate(0deg) scale(1.08); } .mp-insight-card__meta { display: flex; justify-content: space-between; gap: 15px; margin: 24px 4px 18px; color: var(--mp-muted); font-size: 0.54rem; font-weight: 850; letter-spacing: 0.1em; } .mp-insight-card h3 { margin: 0 44px 0 4px; font-size: clamp(1.35rem, 1.13rem + 0.65vw, 1.9rem); line-height: 1.12; } .mp-insight-card__arrow { position: absolute; right: 28px; bottom: 32px; color: var(--mp-red); transition: transform var(--mp-transition); } .mp-insight-card--blue .mp-insight-card__arrow { color: var(--mp-blue); } .mp-insight-card > a:hover .mp-insight-card__arrow { transform: translate(4px, -4px); } .mp-insights-empty { grid-column: 1 / -1; padding: 34px; border: 1px dashed var(--mp-line); border-radius: 24px; color: var(--mp-muted); text-align: center; } .mp-insights-empty p { margin: 0; } .mp-home-cta { --cta-x: 0px; --cta-y: 0px; position: relative; isolation: isolate; overflow: hidden; padding: clamp(100px, 14vw, 210px) 0; border-top: 1px solid var(--mp-line-soft); background: radial-gradient(circle at 18% 66%, rgba(231, 31, 47, 0.12), transparent 27%), radial-gradient(circle at 83% 22%, rgba(27, 103, 222, 0.11), transparent 28%), linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(223, 242, 228, 0.5)); } .mp-home-cta::before { content: ""; position: absolute; z-index: -1; inset: 12% 9%; border: 1px solid rgba(37, 39, 43, 0.06); border-radius: 46px; background: rgba(255, 255, 255, 0.42); box-shadow: 0 40px 110px rgba(43, 56, 49, 0.07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .mp-home-cta__pixels { position: absolute; inset: 0; pointer-events: none; transform: translate3d(var(--cta-x), var(--cta-y), 0); transition: transform 260ms ease-out; } .mp-home-cta__pixels i { position: absolute; top: var(--pixel-y); left: var(--pixel-x); width: 7px; height: 7px; border: 1px solid rgba(37, 39, 43, 0.08); background: rgba(255, 255, 255, 0.85); box-shadow: 0 7px 14px rgba(37, 39, 43, 0.06); animation: mp-cta-float 5.5s ease-in-out var(--pixel-delay) infinite alternate; } .mp-home-cta__pixels i:nth-child(5n) { background: var(--mp-red); } .mp-home-cta__pixels i:nth-child(7n) { background: var(--mp-blue); } @keyframes mp-cta-float { to { transform: translateY(-14px) rotate(45deg); } } .mp-home-cta__inner { position: relative; z-index: 2; max-width: 1040px; text-align: center; } .mp-home-cta__inner .mp-kicker { justify-content: center; } .mp-home-cta h2 { margin-bottom: 28px; font-size: clamp(3rem, 2.15rem + 4vw, 6.25rem); line-height: 0.98; letter-spacing: -0.075em; } .mp-home-cta h2 span { color: var(--mp-red); } .mp-home-cta__inner > p { max-width: 620px; margin: 0 auto 36px; color: var(--mp-muted); font-size: clamp(1rem, 0.94rem + 0.3vw, 1.18rem); } .mp-home-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px; } @media (max-width: 1100px) { .mp-section-heading { grid-template-columns: 1fr; gap: 25px; } .mp-section-heading--compact { grid-template-columns: minmax(0, 1fr) auto; } .mp-services-grid { grid-template-columns: repeat(2, 1fr); } .mp-service-card, .mp-service-card--wide { grid-column: span 1; min-height: 360px; } .mp-service-card--feature { grid-column: span 2; grid-row: auto; min-height: 560px; } .mp-work-card { grid-template-columns: minmax(0, 1fr) minmax(330px, 0.8fr); min-height: 560px; } .mp-home-process__layout { grid-template-columns: minmax(320px, 0.75fr) minmax(420px, 1fr); gap: 70px; } .mp-home-about__grid { grid-template-columns: 1fr 0.9fr; gap: 60px; } .mp-insight-card > a { min-height: 500px; } .mp-insight-card__visual { min-height: 235px; } } @media (max-width: 860px) { .mp-home-section { padding: clamp(62px, 10vw, 90px) 0; } .mp-section-heading--compact { grid-template-columns: 1fr; } .mp-work-card, .mp-work-card:nth-child(even) { grid-template-columns: 1fr; min-height: 0; } .mp-work-card:nth-child(even) .mp-work-card__media, .mp-work-card:nth-child(even) .mp-work-card__content { grid-row: auto; grid-column: auto; } .mp-work-card__media { min-height: auto; aspect-ratio: 4 / 3; } .mp-work-card__content { padding: clamp(34px, 8vw, 64px); } .mp-home-process__layout { grid-template-columns: 1fr; gap: 72px; } .mp-home-process__intro { position: relative; top: auto; } .mp-process-core { margin-top: 38px; } .mp-home-about__grid { grid-template-columns: 1fr; } .mp-home-about__media { max-width: 720px; } .mp-home-stats { grid-template-columns: repeat(2, 1fr); } .mp-home-stat:nth-child(3) { border-top: 1px solid var(--mp-line); border-left: 0; } .mp-home-stat:nth-child(4) { border-top: 1px solid var(--mp-line); } .mp-insights-grid { grid-template-columns: 1fr; } .mp-insight-card > a { display: grid; grid-template-columns: minmax(260px, 0.9fr) 1fr; grid-template-rows: auto 1fr; gap: 0 28px; min-height: 330px; } .mp-insight-card__visual { grid-row: 1 / 3; min-height: 296px; } .mp-insight-card__meta { align-self: end; margin-top: 28px; } .mp-insight-card h3 { margin: 0 38px 30px 4px; } } @media (max-width: 620px) { .mp-home-section { padding: 58px 0; } .mp-section-heading { margin-bottom: 40px; } .mp-section-heading h2, .mp-home-process__intro h2, .mp-home-about__content h2 { font-size: clamp(2.25rem, 9.5vw, 3.35rem); } .mp-market-strip__set { gap: 24px; padding-block: 15px; } .mp-services-grid { grid-template-columns: 1fr; } .mp-service-card, .mp-service-card--feature, .mp-service-card--wide { grid-column: auto; min-height: 345px; padding: 27px; } .mp-service-card--feature { min-height: 450px; } .mp-service-card--feature .mp-service-card__pixel { top: 19%; right: 11%; grid-template-columns: repeat(3, 28px); } .mp-service-card--feature .mp-service-card__content h3 { font-size: clamp(2.3rem, 11vw, 3.6rem); } .mp-service-card__arrow { right: 22px; bottom: 23px; } .mp-work-list { gap: 18px; } .mp-work-card__content { padding: 30px 24px 36px; } .mp-work-card__content h3 { font-size: clamp(2.2rem, 10.5vw, 3.4rem); } .mp-work-card__view { width: 62px; height: 62px; } .mp-process-step { grid-template-columns: 50px 1fr; gap: 18px; min-height: 250px; } .mp-process-steps::before { left: 24px; } .mp-process-step__marker span { width: 50px; height: 50px; border-radius: 15px; } .mp-process-step h3 { font-size: 1.65rem; } .mp-process-core { grid-template-columns: repeat(4, 18px); gap: 4px; padding: 18px; } .mp-process-core i { width: 18px; height: 18px; } .mp-home-about__grid { gap: 42px; } .mp-home-stats { grid-template-columns: 1fr; margin-top: 64px; } .mp-home-stat + .mp-home-stat, .mp-home-stat:nth-child(3) { border-top: 1px solid var(--mp-line); border-left: 0; } .mp-home-stat { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 20px; padding: 24px 10px; } .mp-home-stat strong { margin: 0; font-size: 4.2rem; } .mp-insight-card > a { display: flex; min-height: 500px; } .mp-insight-card__visual { min-height: 255px; } .mp-insight-card__meta { align-self: auto; } .mp-home-cta { padding: 100px 0; } .mp-home-cta::before { inset: 8% 14px; border-radius: 28px; } .mp-home-cta h2 { font-size: clamp(2.75rem, 12vw, 4.25rem); } .mp-home-cta__actions { align-items: stretch; flex-direction: column; } .mp-home-cta__actions .mp-cube-hero__text-link { justify-content: center; min-height: 44px; } } [dir="rtl"] .mp-work-card:nth-child(even) .mp-work-card__media { grid-column: 2; } [dir="rtl"] .mp-process-steps::before { right: 31px; left: auto; } [dir="rtl"] .mp-insight-card__visual > span { right: 18px; left: auto; } [dir="rtl"] .mp-insight-card h3 { margin-right: 4px; margin-left: 44px; } [dir="rtl"] .mp-insight-card__arrow { right: auto; left: 28px; transform: scaleX(-1); } @media (max-width: 860px) { [dir="rtl"] .mp-work-card:nth-child(even) .mp-work-card__media { grid-row: auto; grid-column: auto; } } @media (prefers-reduced-motion: reduce) { .mp-market-strip__track, .mp-home-cta__pixels i { animation: none; } .mp-market-strip__track { width: 100%; } .mp-market-strip__set { flex-wrap: wrap; justify-content: center; width: 100%; } .mp-market-strip__set[aria-hidden="true"] { display: none; } .mp-service-card, .mp-insight-card > a, .mp-work-card__media img, .mp-home-about__media img, .mp-home-cta__pixels { transform: none !important; } }
/* multipixels-home-layout-v2 */
.site-main--home .mp-home-section { padding-block: clamp(72px, 8vw, 108px); } .site-main--home .mp-section-heading { margin-bottom: clamp(32px, 4vw, 48px); } .mp-services-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; gap: 18px; } .mp-service-card, .mp-service-card--feature, .mp-service-card--wide { position: relative; display: flex; grid-column: span 4; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; border: 1px solid var(--mp-line-soft); border-radius: 28px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 24px 70px rgba(37, 39, 43, 0.065); transform: none; } .mp-service-card:nth-child(1) { grid-column: span 7; grid-row: span 2; } .mp-service-card:nth-child(2), .mp-service-card:nth-child(3) { grid-column: span 5; } .mp-service-card:nth-child(4) { grid-column: span 8; } .mp-service-card:nth-child(5), .mp-service-card:nth-child(6) { grid-column: span 4; } .mp-service-card__number { position: absolute; z-index: 3; top: 18px; right: auto; bottom: auto; left: 18px; padding: 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 8px 24px rgba(37, 39, 43, 0.08); color: var(--mp-ink); } .mp-service-card__visual, .mp-service-card--feature .mp-service-card__visual { position: relative; z-index: 1; inset: auto; display: block; width: 100%; height: 230px; overflow: hidden; border-bottom: 1px solid var(--mp-line-soft); background: #f4f7f5; opacity: 1; transform: none; -webkit-mask-image: none; mask-image: none; } .mp-service-card:nth-child(1) .mp-service-card__visual { height: 390px; } .mp-service-card:nth-child(4) .mp-service-card__visual { height: 270px; } .mp-service-card__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: normal; transform: scale(1.01); } .mp-service-card:hover .mp-service-card__visual { transform: none; } .mp-service-card:hover .mp-service-card__visual img { transform: scale(1.045); } .mp-service-card__content { position: relative; z-index: 2; display: flex; flex: 1; flex-direction: column; padding: 28px 30px 30px; background: rgba(255, 255, 255, 0.98); } .mp-service-card__content h3, .mp-service-card--feature .mp-service-card__content h3 { max-width: 100%; margin-bottom: 12px; font-size: clamp(1.65rem, 1.35rem + 0.8vw, 2.45rem); line-height: 1.08; } .mp-service-card__content > p { max-width: 610px; margin-bottom: 20px; color: var(--mp-muted); } .mp-service-card__content ul { margin-top: auto; } .mp-service-card__pixel { display: none; } .mp-service-card::before { display: none; } .mp-service-card__arrow { z-index: 4; right: 24px; bottom: 24px; } [dir="rtl"] .mp-service-card__number { right: 18px; left: auto; } [dir="rtl"] .mp-service-card__arrow { right: auto; left: 24px; } .mp-carousel-controls { display: flex; justify-content: flex-end; gap: 10px; margin: -18px 0 22px; } .mp-carousel-controls button { display: grid; width: 46px; height: 46px; padding: 0; border: 1px solid var(--mp-line); border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: var(--mp-ink); font-size: 1.1rem; cursor: pointer; place-items: center; transition: background var(--mp-transition), color var(--mp-transition), transform var(--mp-transition); } .mp-carousel-controls button:hover { background: var(--mp-ink); color: var(--mp-white); transform: translateY(-2px); } .mp-home-accountability { border-block: 1px solid var(--mp-line-soft); background: radial-gradient(circle at 12% 88%, rgba(231, 31, 47, 0.06), transparent 24%), radial-gradient(circle at 88% 12%, rgba(27, 103, 222, 0.065), transparent 25%), rgba(247, 250, 248, 0.72); } .mp-accountability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .mp-accountability-grid article { --tilt-x: 0deg; --tilt-y: 0deg; min-height: 300px; padding: clamp(28px, 3.4vw, 44px); border: 1px solid var(--mp-line-soft); border-radius: 28px; background: rgba(255, 255, 255, 0.91); box-shadow: 0 22px 62px rgba(37, 39, 43, 0.05); transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); } .mp-accountability-grid article > span { color: var(--mp-muted); font: 800 0.62rem/1 "SFMono-Regular", Consolas, monospace; letter-spacing: 0.13em; } .mp-accountability-grid h3 { margin: 92px 0 15px; font-size: clamp(1.5rem, 1.28rem + 0.72vw, 2.12rem); line-height: 1.08; } .mp-accountability-grid p { margin: 0; color: var(--mp-muted); line-height: 1.72; } .mp-accountability-stack { display: grid; grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.45fr) auto; align-items: center; gap: clamp(26px, 5vw, 72px); margin-top: 18px; padding: clamp(30px, 4vw, 52px); border: 1px solid var(--mp-line-soft); border-radius: 28px; background: rgba(255, 255, 255, 0.82); } .mp-accountability-stack p { max-width: 390px; margin: 13px 0 0; color: var(--mp-muted); line-height: 1.65; } .mp-accountability-stack ul { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; } .mp-accountability-stack li { padding: 9px 13px; border: 1px solid var(--mp-line); border-radius: 999px; background: #fff; font-size: 0.67rem; font-weight: 800; letter-spacing: 0.06em; } @media (max-width: 980px) { .mp-accountability-stack { grid-template-columns: 1fr; } .mp-accountability-stack .mp-inline-link { justify-self: start; } } @media (max-width: 760px) { .mp-accountability-grid { grid-template-columns: 1fr; } .mp-accountability-grid article { min-height: 230px; } .mp-accountability-grid h3 { margin-top: 58px; } } [dir="rtl"] .mp-carousel-controls { justify-content: flex-start; } .mp-work-list { display: grid; grid-auto-columns: min(88%, 960px); grid-auto-flow: column; gap: 22px; overflow-x: auto; padding: 4px 2px 26px; scroll-behavior: smooth; scrollbar-width: thin; overscroll-behavior-inline: contain; } .mp-work-card { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(310px, 0.88fr); min-height: 520px; overflow: hidden; border: 1px solid var(--mp-line-soft); border-radius: 32px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 24px 70px rgba(37, 39, 43, 0.065); } .mp-work-card__media { min-height: 100%; overflow: hidden; border: 0; border-radius: 0; } .mp-work-card:nth-child(even) .mp-work-card__media, [dir="rtl"] .mp-work-card:nth-child(even) .mp-work-card__media { grid-row: auto; grid-column: auto; } .mp-work-card:nth-child(even) .mp-work-card__content { grid-row: auto; grid-column: auto; } .mp-work-card__media picture, .mp-work-card__media img { width: 100%; height: 100%; } .mp-work-card__media img { object-fit: cover; } .mp-work-card__content { align-self: stretch; padding: clamp(34px, 4vw, 58px); background: #fff; } .mp-work-card__content h3 { font-size: clamp(2rem, 1.6rem + 1.45vw, 3.45rem); } .mp-insights-grid { display: grid; grid-auto-columns: min(42%, 470px); grid-auto-flow: column; grid-template-columns: none; gap: 18px; overflow-x: auto; padding: 3px 2px 25px; scroll-behavior: smooth; scrollbar-width: thin; overscroll-behavior-inline: contain; } .mp-insight-card > a { height: 100%; min-height: 430px; grid-template-rows: 210px auto auto 1fr; } .mp-insight-card__visual { width: 100%; height: 210px; } .mp-ar .mp-cube-hero__stage, .mp-ar .mp-cube-hero__canvas, .mp-ar .mp-cube-hero__trigger, .mp-ar .mp-cube-services { direction: ltr; } .mp-cube-hero__trigger:focus, .mp-cube-hero__trigger:focus-visible { outline: 0; } .mp-cube-hero__trigger:focus-visible::after { border-color: rgba(37, 39, 43, 0.25); border-radius: 28%; box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.42); } @media (max-width: 960px) { .mp-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mp-service-card, .mp-service-card:nth-child(n) { grid-column: span 1; grid-row: auto; } .mp-service-card:nth-child(1), .mp-service-card:nth-child(4) { grid-column: span 2; } .mp-service-card:nth-child(1) .mp-service-card__visual { height: 330px; } .mp-work-list { grid-auto-columns: 92%; } .mp-work-card { grid-template-columns: 1fr; } .mp-work-card__media { min-height: 360px; } .mp-insights-grid { grid-auto-columns: min(64%, 440px); } } @media (max-width: 620px) { .site-main--home .mp-home-section { padding-block: 64px; } .mp-services-grid { grid-template-columns: 1fr; } .mp-service-card, .mp-service-card:nth-child(n) { grid-column: 1; } .mp-service-card__visual, .mp-service-card:nth-child(1) .mp-service-card__visual, .mp-service-card:nth-child(4) .mp-service-card__visual { height: 240px; } .mp-service-card__content { padding: 24px 22px 26px; } .mp-carousel-controls { margin-top: -8px; } .mp-work-list, .mp-insights-grid { grid-auto-columns: 91%; } .mp-work-card { min-height: 0; } .mp-work-card__media { min-height: 260px; } .mp-work-card__content { padding: 28px 24px 34px; } .mp-insight-card > a { min-height: 410px; } } .mp-home-markets { border-block: 1px solid var(--mp-line-soft); background: radial-gradient(circle at 87% 18%, rgba(27, 103, 222, 0.055), transparent 26%), radial-gradient(circle at 8% 84%, rgba(231, 31, 47, 0.05), transparent 26%), rgba(248, 250, 249, 0.72); } .mp-home-markets__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .mp-home-markets__grid a { position: relative; min-height: 285px; padding: clamp(25px, 2.8vw, 38px); overflow: hidden; border: 1px solid var(--mp-line-soft); border-radius: 27px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 20px 60px rgba(37, 39, 43, 0.052); text-decoration: none; transition: transform var(--mp-transition), box-shadow var(--mp-transition); } .mp-home-markets__grid a:hover { box-shadow: 0 30px 78px rgba(37, 39, 43, 0.09); transform: translateY(-5px); } .mp-home-markets__grid a > span { color: var(--mp-muted); font: 800 0.62rem/1 "SFMono-Regular", Consolas, monospace; letter-spacing: 0.14em; } .mp-home-markets__grid h3 { margin: 80px 0 14px; font-size: clamp(1.65rem, 1.4rem + 0.7vw, 2.35rem); line-height: 1.05; } .mp-home-markets__grid p { margin: 0; color: var(--mp-muted); font-size: 0.84rem; line-height: 1.68; } .mp-home-markets__grid i { position: absolute; right: 24px; bottom: 22px; color: var(--mp-red); font-style: normal; } [dir="rtl"] .mp-home-markets__grid i { right: auto; left: 24px; } @media (max-width: 900px) { .mp-home-markets__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .mp-home-markets__grid { grid-template-columns: 1fr; } .mp-home-markets__grid a { min-height: 230px; } .mp-home-markets__grid h3 { margin-top: 55px; } } .mp-home-acquisition{padding:clamp(4.5rem,8vw,8rem) 0;background:#11151d;color:#fff}.mp-home-acquisition header{max-width:860px;margin-bottom:2.5rem}.mp-home-acquisition header h2{font-size:clamp(2.2rem,4.4vw,4.5rem);line-height:1.02;letter-spacing:-.04em;margin:.8rem 0 1.2rem}.mp-home-acquisition header p{max-width:720px;color:#c9cdd5;line-height:1.7}.mp-home-acquisition .mp-container>div{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#343944;border:1px solid #343944}.mp-home-acquisition a{position:relative;display:block;min-height:280px;padding:2rem;background:#11151d;color:#fff;text-decoration:none;transition:background .2s ease}.mp-home-acquisition a:hover{background:#1a202b}.mp-home-acquisition a>span{color:#ff4f86;font-weight:800}.mp-home-acquisition h3{font-size:1.45rem;margin:2.8rem 0 1rem}.mp-home-acquisition a p{color:#bfc4ce;line-height:1.65}.mp-home-acquisition a i{position:absolute;right:1.5rem;bottom:1.5rem;color:#ff4f86}@media(max-width:820px){.mp-home-acquisition .mp-container>div{grid-template-columns:1fr}.mp-home-acquisition a{min-height:0}} .mp-home-acquisition header h2,.mp-home-acquisition h3{color:#fff}.mp-home-acquisition header>p{color:#c9cdd5}.mp-home-acquisition a>p{color:#d9dde5}
/* multipixels-solutions */
.mp-solutions { --sol-radius: 28px; --sol-card: rgba(255, 255, 255, 0.94); --sol-shadow: 0 24px 70px rgba(37, 39, 43, 0.07); } .mp-sol-section { padding-block: clamp(56px, 7vw, 100px); } .mp-sol-heading { max-width: 760px; margin-bottom: clamp(26px, 3.4vw, 44px); } .mp-sol-heading h2 { margin: 12px 0 10px; font-size: clamp(1.9rem, 1.3rem + 2vw, 3.2rem); line-height: 1.04; letter-spacing: -0.04em; } .mp-sol-heading p { margin: 0; color: var(--mp-muted); } .mp-sol-hero { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 96px); background: radial-gradient(circle at 88% 18%, rgba(27, 103, 222, 0.09), transparent 32%), radial-gradient(circle at 6% 86%, rgba(231, 31, 47, 0.07), transparent 30%), var(--mp-paper); } .mp-sol-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: clamp(28px, 4.5vw, 72px); } .mp-sol-back { display: inline-block; margin-bottom: 18px; color: var(--mp-muted); font-size: 0.78rem; font-weight: 700; text-decoration: none; } .mp-sol-back:hover { color: var(--mp-red); } .mp-sol-hero h1 { margin: 14px 0 18px; font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.05em; } .mp-sol-hero__lead { max-width: 620px; margin: 0 0 24px; color: var(--mp-muted); font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.12rem); line-height: 1.75; } .mp-sol-price { display: inline-grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 10px; margin-bottom: 22px; padding: 14px 20px; border: 1px solid var(--mp-line-soft); border-radius: 18px; background: #fff; box-shadow: 0 14px 40px rgba(37, 39, 43, 0.06); } .mp-sol-price span { color: var(--mp-muted); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .mp-sol-price strong { color: var(--mp-ink); font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; } .mp-sol-price small { grid-column: 1 / -1; color: var(--mp-muted); font-size: 0.78rem; } .mp-sol-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .mp-sol-actions .mp-button--glow .mp-action-icon, .mp-sol-actions .mp-button--whatsapp .mp-action-icon { filter: brightness(0) invert(1); } .mp-sol-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; } .mp-sol-chips li { padding: 7px 12px; border: 1px solid var(--mp-line-soft); border-radius: 999px; background: rgba(255, 255, 255, 0.86); color: var(--mp-ink); font-size: 0.74rem; font-weight: 700; } .mp-sol-chips li.is-support { border-color: rgba(22, 167, 101, 0.35); background: rgba(22, 167, 101, 0.08); color: #0f7a4a; } .mp-sol-chips li.is-support::before { content: "✓ "; } .mp-sol-hero__visual { margin: 0; } .mp-sol-hero__visual > img { display: block; width: 100%; height: auto; border-radius: var(--sol-radius); box-shadow: 0 40px 100px rgba(22, 24, 28, 0.16); } .mp-sol-stack { position: relative; aspect-ratio: 1.25; } .mp-sol-stack__img { position: absolute; width: 74%; height: auto; border: 1px solid var(--mp-line-soft); border-radius: 18px; box-shadow: 0 30px 80px rgba(22, 24, 28, 0.16); transition: transform 600ms cubic-bezier(0.2, 0.75, 0.2, 1); } .mp-sol-stack__img--0 { inset: 0 auto auto 0; z-index: 3; } .mp-sol-stack__img--1 { inset: 18% 0 auto auto; z-index: 2; transform: rotate(2deg); } .mp-sol-stack__img--2 { inset: auto auto 0 12%; z-index: 1; transform: rotate(-2deg); } .mp-sol-stack:hover .mp-sol-stack__img--1 { transform: rotate(3deg) translate(10px, -6px); } .mp-sol-stack:hover .mp-sol-stack__img--2 { transform: rotate(-3deg) translate(-8px, 8px); } .mp-sol-products__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .mp-sol-product { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--mp-line-soft); border-radius: var(--sol-radius); background: var(--sol-card); box-shadow: var(--sol-shadow); transition: transform var(--mp-transition), box-shadow var(--mp-transition); } .mp-sol-product:hover { box-shadow: 0 34px 90px rgba(37, 39, 43, 0.12); transform: translateY(-4px); } .mp-sol-product__media { display: block; aspect-ratio: 1.44; overflow: hidden; border-bottom: 1px solid var(--mp-line-soft); background: #eef1f0; } .mp-sol-product__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 700ms ease; } .mp-sol-product:hover .mp-sol-product__media img { transform: scale(1.04); } .mp-sol-product__body { display: flex; flex: 1; flex-direction: column; padding: 26px 26px 24px; } .mp-sol-product__body small, .mp-solution-card__body small { color: var(--mp-red); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .mp-sol-product__body h3 { margin: 8px 0 10px; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem); line-height: 1.12; } .mp-sol-product__body h3 a { color: inherit; text-decoration: none; } .mp-sol-product__body p { margin: 0 0 14px; color: var(--mp-muted); font-size: 0.9rem; line-height: 1.65; } .mp-sol-product__body ul { display: grid; gap: 7px; margin: 0 0 20px; padding: 0; list-style: none; } .mp-sol-product__body li { position: relative; padding-inline-start: 20px; font-size: 0.86rem; font-weight: 600; } .mp-sol-product__body li::before { position: absolute; top: 0.5em; inset-inline-start: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--mp-blue); content: ""; } .mp-sol-product__body li:nth-child(even)::before { background: var(--mp-red); } .mp-sol-product__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--mp-line-soft); color: var(--mp-muted); font-size: 0.82rem; } .mp-sol-product__foot strong { color: var(--mp-ink); font-size: 1.2rem; } .mp-sol-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .mp-sol-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mp-sol-card { position: relative; padding: 28px 26px; border: 1px solid var(--mp-line-soft); border-radius: 24px; background: var(--sol-card); box-shadow: 0 16px 50px rgba(37, 39, 43, 0.05); transition: transform var(--mp-transition), border-color var(--mp-transition); } .mp-sol-card:hover { border-color: rgba(27, 103, 222, 0.28); transform: translateY(-3px); } .mp-sol-card > span { color: var(--mp-red); font: 800 0.72rem/1 "SFMono-Regular", Consolas, monospace; } .mp-sol-card > i { display: block; width: 14px; height: 14px; margin-bottom: 18px; border-radius: 3px; background: var(--mp-blue); box-shadow: 18px 0 0 rgba(231, 31, 47, 0.8), 9px 9px 0 rgba(27, 103, 222, 0.25); } .mp-sol-card h3 { margin: 12px 0 8px; font-size: 1.12rem; line-height: 1.25; } .mp-sol-card p { margin: 0; color: var(--mp-muted); font-size: 0.9rem; line-height: 1.65; } .mp-sol-fit { border-block: 1px solid var(--mp-line-soft); background: #fff; } .mp-sol-fit__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(26px, 5vw, 80px); } .mp-sol-fit__audience { margin: 14px 0 0; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); font-weight: 600; line-height: 1.55; } .mp-sol-fit__problem h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.08; letter-spacing: -0.035em; } .mp-sol-fit__problem p { margin: 0; color: var(--mp-muted); line-height: 1.75; } .mp-sol-spotlights .mp-container { display: grid; gap: clamp(40px, 6vw, 90px); } .mp-sol-spot { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(26px, 5vw, 76px); } .mp-sol-spot.is-flipped .mp-sol-spot__copy { order: 2; } .mp-sol-spot__num { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--mp-ink); color: #fff; font: 800 0.75rem/1 "SFMono-Regular", Consolas, monospace; } .mp-sol-spot h2 { margin: 18px 0 12px; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.08; letter-spacing: -0.035em; } .mp-sol-spot p { margin: 0; color: var(--mp-muted); line-height: 1.75; } .mp-sol-spot__media, .mp-sol-gallery__grid button { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--mp-line-soft); border-radius: 22px; background: #fff; box-shadow: var(--sol-shadow); cursor: zoom-in; } .mp-sol-spot__media img { display: block; width: auto; max-width: 100%; height: auto; max-height: 560px; margin-inline: auto; object-fit: contain; transition: transform 700ms ease; } .mp-sol-spot__media:hover img { transform: scale(1.02); } .mp-sol-journey { background: radial-gradient(circle at 90% 10%, rgba(27, 103, 222, 0.32), transparent 36%), radial-gradient(circle at 6% 92%, rgba(231, 31, 47, 0.26), transparent 36%), #16181c; color: #fff; } .mp-sol-journey .mp-sol-heading h2 { color: #fff; } .mp-sol-journey .mp-kicker { color: rgba(255, 255, 255, 0.66); } .mp-sol-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: sol-step; } .mp-sol-steps li { position: relative; padding: 56px 20px 24px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; background: rgba(255, 255, 255, 0.05); font-size: 0.92rem; line-height: 1.6; counter-increment: sol-step; } .mp-sol-steps li::before { position: absolute; top: 20px; inset-inline-start: 20px; color: #ff6b77; content: "0" counter(sol-step); font: 800 0.8rem/1 "SFMono-Regular", Consolas, monospace; } .mp-sol-gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .mp-sol-gallery__grid figure { margin: 0; } .mp-sol-gallery__grid img { display: block; width: 100%; aspect-ratio: 1.44; object-fit: cover; object-position: top center; transition: transform 600ms ease; } .mp-sol-gallery__grid button:hover img { transform: scale(1.05); } .mp-sol-gallery__grid figcaption { margin-top: 9px; color: var(--mp-muted); font-size: 0.8rem; font-weight: 600; } .mp-sol-support__inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); padding: clamp(30px, 4.5vw, 64px); border: 1px solid rgba(22, 167, 101, 0.22); border-radius: 34px; background: linear-gradient(140deg, rgba(22, 167, 101, 0.08), transparent 45%), #fff; box-shadow: var(--sol-shadow); } .mp-sol-support__head h2 { margin: 12px 0 14px; font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); line-height: 1.04; letter-spacing: -0.04em; } .mp-sol-support__head p { margin: 0 0 16px; color: var(--mp-muted); line-height: 1.75; } .mp-sol-support__head small { display: block; color: #0f7a4a; font-weight: 700; } .mp-sol-support__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } .mp-sol-support__list li { padding: 20px 20px 18px; border: 1px solid var(--mp-line-soft); border-radius: 18px; background: var(--mp-paper); } .mp-sol-support__list strong { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; font-size: 0.98rem; } .mp-sol-support__list strong::before { display: inline-grid; flex: 0 0 22px; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #16a765; color: #fff; content: "✓"; font-size: 0.7rem; } .mp-sol-support__list span { color: var(--mp-muted); font-size: 0.86rem; line-height: 1.6; } .mp-sol-process__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; } .mp-sol-process__list li { position: relative; padding: 0 18px 0 0; } [dir="rtl"] .mp-sol-process__list li { padding: 0 0 0 18px; } .mp-sol-process__list li > span { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 14px; background: var(--mp-ink); color: #fff; font-weight: 800; } .mp-sol-process__list li:nth-child(even) > span { background: var(--mp-red); } .mp-sol-process__list li::after { position: absolute; top: 22px; inset-inline: 52px 8px; height: 1px; background: repeating-linear-gradient(90deg, var(--mp-line) 0 6px, transparent 6px 12px); content: ""; } .mp-sol-process__list li:last-child::after { display: none; } .mp-sol-process__list strong { display: block; margin-bottom: 6px; } .mp-sol-process__list p { margin: 0; color: var(--mp-muted); font-size: 0.88rem; line-height: 1.6; } .mp-sol-faq__inner { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(24px, 5vw, 80px); } .mp-sol-faq__list details { border-bottom: 1px solid var(--mp-line); } .mp-sol-faq__list summary { position: relative; padding: 20px 36px 20px 0; font-weight: 700; cursor: pointer; list-style: none; } [dir="rtl"] .mp-sol-faq__list summary { padding: 20px 0 20px 36px; } .mp-sol-faq__list summary::-webkit-details-marker { display: none; } .mp-sol-faq__list summary::after { position: absolute; top: 18px; inset-inline-end: 0; color: var(--mp-red); content: "+"; font-size: 1.4rem; line-height: 1; transition: transform var(--mp-transition); } .mp-sol-faq__list details[open] summary::after { transform: rotate(45deg); } .mp-sol-faq__list details p { margin: 0 0 20px; color: var(--mp-muted); line-height: 1.75; } .mp-sol-cta__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 60px); padding: clamp(30px, 4.5vw, 60px); border-radius: 34px; background: radial-gradient(circle at 92% 8%, rgba(27, 103, 222, 0.45), transparent 36%), radial-gradient(circle at 4% 96%, rgba(231, 31, 47, 0.35), transparent 36%), #16181c; color: #fff; } .mp-sol-cta__card .mp-kicker { color: rgba(255, 255, 255, 0.66); } .mp-sol-cta__card h2 { margin: 10px 0 10px; color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.8rem); line-height: 1.05; letter-spacing: -0.04em; } .mp-sol-cta__card p { margin: 0; color: rgba(255, 255, 255, 0.74); } .mp-sol-lightbox { position: fixed; z-index: 100000; inset: 0; display: grid; place-items: center; padding: 24px; } .mp-sol-lightbox[hidden] { display: none; } .mp-sol-lightbox__backdrop { position: absolute; inset: 0; background: rgba(14, 15, 18, 0.86); backdrop-filter: blur(4px); } .mp-sol-lightbox figure { position: relative; z-index: 1; max-width: min(1400px, 100%); margin: 0; opacity: 0; transform: scale(0.97); transition: opacity 260ms ease, transform 360ms cubic-bezier(0.2, 0.75, 0.2, 1); } .mp-sol-lightbox.is-open figure { opacity: 1; transform: none; } .mp-sol-lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 120px); margin: 0 auto; border-radius: 14px; background: #fff; } .mp-sol-lightbox figcaption { margin-top: 12px; color: #fff; font-weight: 700; text-align: center; } .mp-sol-lightbox__close, .mp-sol-lightbox__nav { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--mp-ink); font-size: 1.5rem; line-height: 1; cursor: pointer; } .mp-sol-lightbox__close { top: -18px; inset-inline-end: -18px; } .mp-sol-lightbox__nav { top: 50%; transform: translateY(-50%); } .mp-sol-lightbox__nav.is-prev { inset-inline-start: -22px; } .mp-sol-lightbox__nav.is-next { inset-inline-end: -22px; } [dir="rtl"] .mp-sol-lightbox__nav.is-prev, [dir="rtl"] .mp-sol-lightbox__nav.is-next { transform: translateY(-50%) scaleX(-1); } body.mp-sol-lightbox-open { overflow: hidden; } .mp-solutions-teaser { background: radial-gradient(circle at 92% 12%, rgba(27, 103, 222, 0.06), transparent 30%), transparent; } .mp-solutions-teaser__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .mp-sol-related .mp-solutions-teaser__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mp-solution-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--mp-line-soft); border-radius: 26px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 22px 64px rgba(37, 39, 43, 0.06); color: inherit; text-decoration: none; transition: transform var(--mp-transition), box-shadow var(--mp-transition); } .mp-solution-card:hover { box-shadow: 0 32px 84px rgba(37, 39, 43, 0.12); transform: translateY(-4px); } .mp-solution-card__media { display: block; aspect-ratio: 1.55; overflow: hidden; border-bottom: 1px solid var(--mp-line-soft); background: #eef1f0; } .mp-solution-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 700ms ease; } .mp-solution-card:hover .mp-solution-card__media img { transform: scale(1.05); } .mp-solution-card__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 22px 24px 22px; } .mp-solution-card__body strong { font-size: 1.35rem; line-height: 1.15; } .mp-solution-card__body > span { color: var(--mp-muted); font-size: 0.88rem; line-height: 1.6; } .mp-solution-card__body em { margin-top: auto; padding-top: 12px; color: var(--mp-ink); font-style: normal; font-weight: 800; } .mp-solution-card__body em i { color: var(--mp-red); font-style: normal; } .mp-solutions-teaser__all { margin: 24px 0 0; } @media (max-width: 1100px) { .mp-sol-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mp-sol-steps, .mp-sol-process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .mp-sol-process__list li::after { display: none; } .mp-sol-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .mp-sol-hero__inner, .mp-sol-fit__inner, .mp-sol-spot, .mp-sol-support__inner, .mp-sol-faq__inner, .mp-sol-cta__card { grid-template-columns: 1fr; } .mp-sol-spot.is-flipped .mp-sol-spot__copy { order: 0; } .mp-sol-products__grid, .mp-solutions-teaser__grid { grid-template-columns: 1fr; } .mp-sol-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mp-sol-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mp-sol-related .mp-solutions-teaser__grid { grid-template-columns: 1fr; } } @media (max-width: 620px) { .mp-sol-cards, .mp-sol-cards--4, .mp-sol-support__list, .mp-sol-steps, .mp-sol-process__list { grid-template-columns: 1fr; } .mp-sol-actions .mp-button { flex: 1 1 100%; } .mp-sol-lightbox__nav.is-prev { inset-inline-start: 4px; } .mp-sol-lightbox__nav.is-next { inset-inline-end: 4px; } .mp-sol-lightbox__close { top: -52px; inset-inline-end: 0; } } @media (prefers-reduced-motion: reduce) { .mp-sol-stack__img, .mp-sol-product__media img, .mp-solution-card__media img, .mp-sol-gallery__grid img, .mp-sol-lightbox figure { transition: none; } }
/* multipixels-experience */
.site-header__inner { grid-template-columns: auto 1fr auto auto auto; gap: clamp(14px, 2.6vw, 44px); } .header-cta--brief { position: relative; overflow: hidden; border-color: var(--mp-ink); background: var(--mp-ink); color: var(--mp-white); } .header-cta--brief .mp-action-icon { width: 18px; height: 18px; flex-basis: 18px; filter: brightness(0) invert(1); } .header-cta--brief:hover { border-color: var(--mp-red); background: var(--mp-red); color: var(--mp-white); } @media (max-width: 1280px) { .header-cta--brief { display: none; } .site-header__inner { grid-template-columns: auto 1fr auto auto; } } @media (max-width: 1100px) { .site-header__inner { grid-template-columns: auto 1fr auto; } } @media (max-width: 900px) { .site-header__inner { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; } } .mp-button, .header-cta { position: relative; isolation: isolate; } .mp-button::after, .header-cta--brief::after, .mp-cube-hero__lead::after { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.34) 48%, transparent 70%); background-size: 250% 100%; background-position: 130% 0; content: ""; pointer-events: none; transition: background-position 700ms cubic-bezier(0.2, 0.75, 0.2, 1); } .mp-button:hover::after, .mp-button:focus-visible::after, .header-cta--brief:hover::after, .mp-cube-hero__lead:hover::after { background-position: -30% 0; } .mp-button--glow { border-color: var(--mp-red); background: var(--mp-red); box-shadow: 0 14px 34px rgba(231, 31, 47, 0.28); } .mp-button--glow:hover { border-color: var(--mp-ink); background: var(--mp-ink); box-shadow: 0 18px 40px rgba(37, 39, 43, 0.22); } .mp-cube-hero__lead { overflow: hidden; animation: mp-x-pulse 3.6s ease-in-out 2.2s 3; } @keyframes mp-x-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(231, 31, 47, 0); } 45% { box-shadow: 0 0 0 10px rgba(231, 31, 47, 0.12); } 70% { box-shadow: 0 0 0 18px rgba(231, 31, 47, 0); } } .mp-service-cta-tile { position: relative; display: flex; grid-column: span 8; flex-direction: column; justify-content: center; gap: 6px; min-height: 100%; overflow: hidden; padding: clamp(30px, 4vw, 56px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 28px; background: radial-gradient(circle at 88% 12%, rgba(27, 103, 222, 0.42), transparent 34%), radial-gradient(circle at 10% 92%, rgba(231, 31, 47, 0.32), transparent 36%), #16181c; box-shadow: 0 28px 80px rgba(22, 24, 28, 0.22); color: #fff; } .mp-service-cta-tile .mp-kicker { color: rgba(255, 255, 255, 0.66); } .mp-service-cta-tile h3 { max-width: 620px; margin: 8px 0 10px; color: #fff; font-size: clamp(1.8rem, 1.3rem + 1.5vw, 3rem); line-height: 1.04; letter-spacing: -0.04em; } .mp-service-cta-tile p { max-width: 560px; margin: 0 0 22px; color: rgba(255, 255, 255, 0.74); line-height: 1.7; } .mp-service-cta-tile__actions { display: flex; flex-wrap: wrap; gap: 12px; } .mp-service-cta-tile__actions .mp-action-icon { filter: brightness(0) invert(1); } .mp-service-cta-tile__pixels { position: absolute; inset: 26px 26px auto auto; display: grid; grid-template-columns: repeat(3, 12px); gap: 5px; opacity: 0.9; } [dir="rtl"] .mp-service-cta-tile__pixels { inset: 26px auto auto 26px; } .mp-service-cta-tile__pixels i { width: 12px; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); animation: mp-x-pixel 4.8s ease-in-out infinite; } .mp-service-cta-tile__pixels i:nth-child(2) { background: var(--mp-red); animation-delay: 0.4s; } .mp-service-cta-tile__pixels i:nth-child(4) { background: var(--mp-blue); animation-delay: 0.9s; } .mp-service-cta-tile__pixels i:nth-child(6) { animation-delay: 1.3s; } @keyframes mp-x-pixel { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-6px); opacity: 0.55; } } @media (max-width: 960px) { .mp-service-cta-tile { grid-column: span 2; } } @media (max-width: 620px) { .mp-service-cta-tile { grid-column: 1; } .mp-service-cta-tile__actions .mp-button { flex: 1 1 100%; } } .mp-work-list, .mp-insights-grid { overflow-y: hidden; overscroll-behavior-y: auto; touch-action: pan-x pan-y; } .mp-work-card__content ul li:empty { display: none; } .mp-google-proof__stats .mp-x-figure { display: block; margin-bottom: 8px; color: var(--mp-ink); font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 800; line-height: 1; letter-spacing: -0.05em; } .mp-google-proof__stats .mp-x-figure small { margin-inline-end: 0.2em; font-size: 0.48em; letter-spacing: 0.02em; vertical-align: 0.3em; } .mp-google-proof__stats .mp-x-figure::after { display: inline-block; width: 8px; height: 8px; margin-inline-start: 6px; border-radius: 2px; background: var(--mp-red); content: ""; vertical-align: 0.5em; } .mp-google-proof__stats article:nth-child(even) .mp-x-figure::after { background: var(--mp-blue); } .mp-google-proof__stats .mp-x-label { display: block; color: var(--mp-muted); font-size: 0.86rem; font-weight: 600; line-height: 1.45; } .mp-google-proof__stats article { transition: background var(--mp-transition), transform var(--mp-transition); } .mp-google-proof__stats article:hover { background: #fff; } .mp-x-progress { position: fixed; z-index: 1000; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--mp-red), var(--mp-blue)); transform: scaleX(var(--mp-x-progress, 0)); transform-origin: left center; pointer-events: none; } [dir="rtl"] .mp-x-progress { transform-origin: right center; } .admin-bar .mp-x-progress { top: 32px; } @media (max-width: 782px) { .admin-bar .mp-x-progress { top: 46px; } } .mp-x-motion .mp-x-reveal { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 700ms cubic-bezier(0.2, 0.75, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.75, 0.2, 1); transition-delay: calc(var(--mp-x-i, 0) * 70ms); } .mp-x-motion .mp-x-reveal.is-x-in { opacity: 1; transform: none; } .mp-x-nudge { position: fixed; z-index: 90; bottom: 22px; left: 22px; display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; width: min(360px, calc(100vw - 44px)); padding: 20px 20px 18px; border: 1px solid var(--mp-line-soft); border-radius: 22px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 28px 70px rgba(22, 24, 28, 0.18); opacity: 0; transform: translate3d(0, 24px, 0) scale(0.98); visibility: hidden; transition: opacity 360ms ease, transform 460ms cubic-bezier(0.2, 0.75, 0.2, 1), visibility 0s linear 460ms; } [dir="rtl"] .mp-x-nudge { right: 22px; left: auto; } .mp-x-nudge.is-x-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; } .mp-x-nudge strong { grid-column: 1; font-size: 1rem; line-height: 1.3; } .mp-x-nudge p { grid-column: 1 / -1; margin: 0 0 10px; color: var(--mp-muted); font-size: 0.86rem; line-height: 1.55; } .mp-x-nudge__close { grid-column: 2; grid-row: 1; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--mp-paper); color: var(--mp-ink); font-size: 1.1rem; line-height: 1; cursor: pointer; } .mp-x-nudge__actions { display: flex; grid-column: 1 / -1; gap: 8px; } .mp-x-nudge__actions .mp-button { flex: 1; min-height: 42px; padding-inline: 0.9rem; font-size: 0.64rem; } .mp-x-nudge__actions .mp-action-icon { width: 18px; height: 18px; flex-basis: 18px; } @media (max-width: 680px) { .mp-x-nudge { bottom: 92px; left: 14px; width: calc(100vw - 28px); } [dir="rtl"] .mp-x-nudge { right: 14px; } } @media (prefers-reduced-motion: reduce) { .mp-x-motion .mp-x-reveal, .mp-x-nudge { transition: none; transform: none; } .mp-x-motion .mp-x-reveal { opacity: 1; } .mp-cube-hero__lead, .mp-service-cta-tile__pixels i { animation: none; } .mp-button::after, .header-cta--brief::after, .mp-cube-hero__lead::after { display: none; } } @media print { .mp-x-progress, .mp-x-nudge { display: none !important; } } .mp-pixel-field { position: relative; pointer-events: none; } .mp-pixel-field__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .mp-pixel-field--band { width: min(calc(100% - 48px), 1220px); height: clamp(44px, 5vw, 64px); margin: clamp(6px, 1.2vw, 16px) auto; pointer-events: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .mp-pixel-field--hero { position: absolute; z-index: -1; inset: auto 0 0 0; height: clamp(70px, 9vw, 130px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); } @media (max-width: 680px) { .mp-pixel-field--band { width: calc(100% - 28px); height: 44px; } .mp-pixel-field--hero { height: 64px; } } @media print { .mp-pixel-field { display: none !important; } }
/* multipixels-hostinger */
.mp-hostinger-badge { display: block; height: auto; max-width: 100%; } .site-footer__bottom { align-items: center; flex-wrap: wrap; } .mp-hostinger-footer { display: inline-flex; align-items: center; gap: 10px; margin-inline-start: auto; padding: 6px 12px 6px 8px; border: 1px solid rgba(103, 61, 230, .18); border-radius: 999px; background: rgba(103, 61, 230, .05); color: var(--mp-ink); font-size: .72rem; font-weight: 600; text-decoration: none; transition: border-color var(--mp-transition), background var(--mp-transition), transform var(--mp-transition); } .mp-hostinger-footer:hover, .mp-hostinger-footer:focus-visible { border-color: rgba(103, 61, 230, .45); background: rgba(103, 61, 230, .1); transform: translateY(-1px); } .mp-hostinger-footer .mp-hostinger-badge { width: 92px; } @media (max-width: 760px) { .mp-hostinger-footer { margin-inline-start: 0; } } .mp-hostinger-band { position: relative; z-index: 2; padding-block: clamp(36px, 5vw, 64px); } .mp-hostinger-band__card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 3vw, 40px); padding: clamp(24px, 3.4vw, 40px); border: 1px solid rgba(103, 61, 230, .2); border-radius: var(--mp-radius-lg); background: radial-gradient(120% 140% at 0% 0%, rgba(103, 61, 230, .12), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(231, 31, 47, .06), transparent 60%), var(--mp-white); box-shadow: var(--mp-shadow-soft); } .mp-hostinger-band__badge { display: grid; place-items: center; padding: 22px; border-radius: var(--mp-radius-md); background: rgba(103, 61, 230, .07); } .mp-hostinger-band__badge .mp-hostinger-badge { width: clamp(120px, 14vw, 168px); } .mp-hostinger-band__copy h2 { margin: 8px 0 10px; font-size: clamp(1.3rem, 2.2vw, 1.85rem); line-height: 1.2; } .mp-hostinger-band__copy p { margin: 0 0 10px; color: var(--mp-muted); max-width: 62ch; } .mp-hostinger-band__copy small { display: block; color: var(--mp-muted); font-size: .72rem; opacity: .85; } .mp-hostinger-band__actions { display: grid; gap: 12px; justify-items: start; } .mp-hostinger-band__cta { background: #673de6; border-color: #673de6; color: #fff; white-space: nowrap; } .mp-hostinger-band__cta:hover, .mp-hostinger-band__cta:focus-visible { background: #5025d1; border-color: #5025d1; color: #fff; } @media (max-width: 980px) { .mp-hostinger-band__card { grid-template-columns: 1fr; } .mp-hostinger-band__badge { justify-self: start; padding: 16px; } .mp-hostinger-band__cta { white-space: normal; } } .mp-hostinger-inline { display: flex; align-items: center; gap: 20px; margin: 32px 0; padding: 20px 22px; border: 1px solid rgba(103, 61, 230, .22); border-radius: var(--mp-radius-md); background: rgba(103, 61, 230, .06); } .mp-hostinger-inline .mp-hostinger-badge { flex: 0 0 auto; width: 112px; } .mp-hostinger-inline > div { flex: 1 1 auto; min-width: 0; } .mp-hostinger-inline strong { display: block; margin-bottom: 4px; } .mp-hostinger-inline p { margin: 0; font-size: .92rem; color: var(--mp-muted); } .mp-hostinger-inline .mp-button { flex: 0 0 auto; background: #673de6; border-color: #673de6; color: #fff; text-decoration: none; } @media (max-width: 680px) { .mp-hostinger-inline { flex-direction: column; align-items: flex-start; } } .mp-article-disclosure { margin-top: 28px; padding: 14px 16px; border-inline-start: 3px solid #673de6; border-radius: 8px; background: rgba(103, 61, 230, .05); color: var(--mp-muted); font-size: .82rem; }