/* 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-rtl */
body { direction: rtl; font-family: "MP Cairo", "Tahoma", sans-serif; font-size: 17px; line-height: 1.9; } body h1, body h2, body h3, body h4, body h5, body h6 { line-height: 1.18; letter-spacing: 0; } body .mp-kicker, body .mp-button, body .wp-element-button, body .header-cta, body .mp-menu a { letter-spacing: 0; text-transform: none; } .mp-page-hero__title { max-width: 980px; font-size: clamp(2.9rem, 2.15rem + 3.4vw, 5.8rem); line-height: 1.04; } .mp-page-hero-art { right: auto; left: max(24px, calc((100vw - var(--mp-container)) / 2)); --art-rotate-y: 5deg; } .has-mp-page-art .mp-page-hero__inner { padding-right: 0; padding-left: min(48vw, 680px); } .has-mp-page-art .mp-page-hero__title { max-width: 650px; } .mp-page-hero__lead, .mp-page-section__heading > p, .mp-page-split > div > p { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.28rem); line-height: 1.9; } .mp-ar .mp-cube-hero__content h1 { font-size: clamp(2.8rem, 2.3rem + 2vw, 4.7rem); line-height: 1.12; } .mp-page-section h2, .mp-page-split h2, .mp-contact-grid h2 { line-height: 1.15; letter-spacing: 0; } blockquote { padding-right: 1.6rem; padding-left: 0; border-right: 3px solid var(--mp-red); border-left: 0; } .site-header__inner, .site-footer__main, .site-footer__cta-inner, .mp-footer-source__inner { direction: rtl; } .mp-wordmark { direction: ltr; } .mp-menu .sub-menu { right: -20px; left: auto; } .mp-kicker::before { box-shadow: -9px 0 0 rgba(27, 103, 222, 0.4); } .mp-page-checklist li { padding: 20px 50px 20px 0; } .mp-page-checklist li::before { right: 0; left: auto; } .mp-insight-card__arrow, .mp-inline-link span, .mp-button span, .header-cta span { transform: scaleX(-1); } .post-card__meta, .single-entry__meta { justify-content: flex-start; } .nav-next { text-align: left; } .nav-previous { text-align: right; } .search-field { border-right: 1px solid var(--mp-line); border-left: 0; border-radius: 0 999px 999px 0; } .search-submit { border-radius: 999px 0 0 999px; } @media (max-width: 900px) { .mp-page-hero-art { right: auto; left: 50%; } .has-mp-page-art .mp-page-hero__inner { padding-right: 0; padding-left: 0; } .primary-navigation { right: auto; left: 0; box-shadow: 24px 0 80px rgba(34, 43, 39, 0.12); transform: translateX(-105%); } .mp-menu .sub-menu { padding-right: 16px; padding-left: 0; } }
/* multipixels-commercial-growth */
.mp-commercial { background: #fff; color: #17191d; } .mp-commercial h1, .mp-commercial h2, .mp-commercial h3 { letter-spacing: -0.035em; } .mp-commercial__hero { padding: clamp(7rem, 12vw, 11rem) 0 clamp(4rem, 8vw, 7rem); background: radial-gradient( circle at 85% 15%, rgba(244, 51, 111, 0.13), transparent 28% ), #f8f9fb; } .mp-commercial__hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.65fr); gap: clamp(2rem, 6vw, 7rem); align-items: end; } .mp-commercial__hero h1 { max-width: 820px; font-size: clamp(3rem, 6vw, 5.8rem); line-height: 0.98; margin: 0.6rem 0 1.5rem; } .mp-commercial__hero p { font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.7; max-width: 760px; } .mp-commercial__actions { margin-top: 2rem; } .mp-commercial__micro { font-size: 0.82rem !important; opacity: 0.68; margin-top: 1rem; } .mp-commercial__fit { padding: 2rem; border: 1px solid #dfe2e8; border-radius: 1.6rem; background: rgba(255, 255, 255, 0.86); box-shadow: 0 24px 80px rgba(22, 25, 30, 0.08); } .mp-commercial__fit strong { font-size: 0.75rem; letter-spacing: 0.15em; } .mp-commercial__fit ul { padding-left: 1.15rem; margin: 1.5rem 0; display: grid; gap: 0.9rem; } .mp-commercial__fit a, .mp-commercial__related a, .mp-commercial__proof-links a { font-weight: 700; color: #e72967; } .mp-commercial__problem, .mp-commercial__scope, .mp-commercial__proof, .mp-commercial__faq, .mp-commercial__related, .mp-commercial__cta { padding: clamp(4.5rem, 8vw, 8rem) 0; } .mp-commercial__narrow { max-width: 920px; } .mp-commercial__problem h2, .mp-commercial__scope h2, .mp-commercial__proof h2, .mp-commercial__faq h2, .mp-commercial__cta h2 { font-size: clamp(2.2rem, 4.5vw, 4.6rem); line-height: 1.02; margin: 0.8rem 0 1.4rem; } .mp-commercial__problem p, .mp-commercial__proof p, .mp-commercial__cta p { font-size: 1.15rem; line-height: 1.8; } .mp-commercial__scope { background: #12161e; color: #fff; } .mp-commercial__scope header { max-width: 800px; } .mp-commercial__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #343a44; border: 1px solid #343a44; margin-top: 3rem; } .mp-commercial__grid article { background: #12161e; padding: 2rem; min-height: 290px; } .mp-commercial__grid article > span { color: #ff4f86; font-weight: 800; } .mp-commercial__grid h3 { font-size: 1.45rem; margin: 2.5rem 0 1rem; } .mp-commercial__grid p { line-height: 1.65; color: #c8cbd2; } .mp-commercial__proof > .mp-container, .mp-commercial__cta > .mp-container { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 7vw, 8rem); align-items: start; } .mp-commercial__proof-links, .mp-commercial__related .mp-container > div { display: grid; gap: 1rem; } .mp-commercial__proof-links a, .mp-commercial__related a { padding: 1.1rem 0; border-bottom: 1px solid #dfe2e8; } .mp-commercial__faq { background: #f5f6f8; } .mp-commercial__faq details { border-top: 1px solid #d5d8df; padding: 1.5rem 0; } .mp-commercial__faq details:last-child { border-bottom: 1px solid #d5d8df; } .mp-commercial__faq summary { font-size: 1.2rem; font-weight: 750; cursor: pointer; } .mp-commercial__faq details p { line-height: 1.75; max-width: 780px; } .mp-commercial__related .mp-container > div { grid-template-columns: repeat(3, 1fr); margin-top: 1.5rem; } .mp-commercial__cta { background: #edf9f3; } .mp-commercial__cta .mp-contact-form-wrap { background: #fff; padding: 1.4rem; border-radius: 1.4rem; } .mp-commercial__cta .mp-contact-form { margin: 0; } @media (max-width: 980px) { .mp-commercial__hero-grid, .mp-commercial__proof > .mp-container, .mp-commercial__cta > .mp-container { grid-template-columns: 1fr; } .mp-commercial__grid { grid-template-columns: repeat(2, 1fr); } .mp-commercial__related .mp-container > div { grid-template-columns: 1fr; } } @media (max-width: 620px) { .mp-commercial__hero h1 { font-size: 2.65rem; line-height: 1.02; } .mp-commercial__grid { grid-template-columns: 1fr; } .mp-commercial__grid article { min-height: 0; } .mp-commercial__hero { padding-top: 6rem; } } .mp-commercial__scope h2, .mp-commercial__scope h3 { color: #fff; } .mp-commercial[dir="rtl"] { text-align: right; } .mp-commercial[dir="rtl"] .mp-commercial__fit ul { padding-left: 0; padding-right: 1.15rem; } .mp-commercial[dir="rtl"] .mp-commercial__related .mp-container > div, .mp-commercial[dir="rtl"] .mp-commercial__proof-links { text-align: right; } .mp-commercial[dir="rtl"] .mp-commercial__grid article { text-align: right; } .mp-commercial__review { display: inline-flex !important; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0 !important; padding: 0.55rem 0.8rem; border: 1px solid rgba(23, 25, 29, 0.12); border-radius: 999px; font-size: 0.78rem !important; line-height: 1.35 !important; color: #555d68; } .mp-commercial__review:before { content: "✓"; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #e72967; color: #fff; font-size: 0.66rem; font-weight: 800; }
/* 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; }