.v2-hero { position: relative; overflow: hidden; min-height: 520px; border-radius: 10px; padding: 88px 72px; background-color: #001429; background-image: radial-gradient(ellipse 62% 48% at 73% 24%, rgba(0, 150, 230, 0.30) 0%, rgba(0, 104, 174, 0.22) 24%, rgba(0, 55, 105, 0.12) 48%, rgba(0, 25, 55, 0.00) 72%), radial-gradient(ellipse 78% 42% at 58% 100%, rgba(0, 116, 190, 0.24) 0%, rgba(0, 62, 112, 0.16) 35%, rgba(0, 25, 55, 0.00) 72%), linear-gradient(115deg, #001225 0%, #001429 18%, #001c36 36%, #012a4b 58%, #053761 82%, #073f6c 100%); } .v2-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 12, 27, 0.95) 0%, rgba(0, 17, 34, 0.88) 24%, rgba(0, 30, 58, 0.48) 46%, rgba(0, 38, 72, 0.14) 72%, rgba(0, 25, 50, 0.18) 100%); } .v2-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 56%, rgba(0, 8, 20, 0.22) 100%); } .v2-map-bg { position: absolute; inset: 0; pointer-events: none; background-image: url('../img/mapa.svg'); background-repeat: no-repeat; background-position: right 4% top 0; background-size: min(1180px, 82vw) auto; opacity: 0.46; mix-blend-mode: screen; filter: saturate(1.15) contrast(1.05); } .v2-hero__content { position: relative; z-index: 3; max-width: 560px; } .v2-hero__content h1 { margin: 0 0 16px; color: #fff; font-size: clamp(40px, 4vw, 62px); line-height: 1.06; } .v2-hero__content p { margin: 0 0 28px; color: rgba(255, 255, 255, 0.92); font-size: clamp(18px, 1.5vw, 24px); } .v2-cta { display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 24px; border-radius: 6px; text-decoration: none; color: #fff; font-weight: 800; background: linear-gradient(135deg, #ef4136, #ff5a4d); } .v2-benefits { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .v2-benefit { min-height: 170px; border-radius: 8px; padding: 22px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 248, 252, 0.98) 100%); border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: 0 18px 44px rgba(0, 14, 35, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.86); } .v2-benefit h3 { margin: 0 0 8px; color: #001b3d; font-size: 1.15rem; line-height: 1.22; } .v2-benefit p { margin: 0; color: #102846; font-size: 0.95rem; line-height: 1.45; } @media (max-width: 1180px) { .v2-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .v2-hero { padding: 56px 24px; min-height: 420px; } .v2-benefits { grid-template-columns: 1fr; } } /* Body background only for /v2/ */ body.v2-body { background-color: #001429 !important; background-image: radial-gradient(ellipse 62% 48% at 73% 24%, rgba(0,150,230,0.30) 0%, rgba(0,104,174,0.22) 24%, rgba(0,55,105,0.12) 48%, rgba(0,25,55,0.00) 72%), radial-gradient(ellipse 78% 42% at 58% 100%, rgba(0,116,190,0.24) 0%, rgba(0,62,112,0.16) 35%, rgba(0,25,55,0.00) 72%), linear-gradient(115deg, #001225 0%, #001429 18%, #001c36 36%, #012a4b 58%, #053761 82%, #073f6c 100%) !important; background-repeat: no-repeat !important; background-size: cover !important; background-attachment: fixed !important; } body.v2-body #center, body.v2-body #footer { background: transparent; } /* Force override also on to prevent old global gradient bleed */ html.v2-html { background-color: #001429 !important; background-image: radial-gradient(ellipse 62% 48% at 73% 24%, rgba(0,150,230,0.30) 0%, rgba(0,104,174,0.22) 24%, rgba(0,55,105,0.12) 48%, rgba(0,25,55,0.00) 72%), radial-gradient(ellipse 78% 42% at 58% 100%, rgba(0,116,190,0.24) 0%, rgba(0,62,112,0.16) 35%, rgba(0,25,55,0.00) 72%), linear-gradient(115deg, #001225 0%, #001429 18%, #001c36 36%, #012a4b 58%, #053761 82%, #073f6c 100%) !important; background-repeat: no-repeat !important; background-size: cover !important; background-attachment: fixed !important; } html.v2-html body.v2-body { background: transparent !important; } /* Flatten v2 surfaces: html is the only background source */ html.v2-html body.v2-body, html.v2-html body.v2-body main#center, html.v2-html body.v2-body section.v2-hero { background: transparent !important; background-image: none !important; } html.v2-html body.v2-body section.v2-hero::before, html.v2-html body.v2-body section.v2-hero::after, html.v2-html body.v2-body .v2-map-bg { display: none !important; } html.v2-html body.v2-body section.v2-hero { border-radius: 0 !important; } /* Widen the entire middle area on /v2/ */ html.v2-html body.v2-body main#center, html.v2-html body.v2-body footer#footer { width: min(1520px, calc(100vw - 56px)) !important; max-width: 1520px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } @media (max-width: 1400px) { html.v2-html body.v2-body main#center, html.v2-html body.v2-body footer#footer { width: calc(100vw - 36px) !important; } } @media (max-width: 900px) { html.v2-html body.v2-body main#center, html.v2-html body.v2-body footer#footer { width: calc(100vw - 22px) !important; } } /* Remove global section max-width constraint from main.css on /v2/ */ html.v2-html body.v2-body main#center section.v2-hero, html.v2-html body.v2-body main#center section.v2-benefits { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } html.v2-html body.v2-body main#center section.v2-hero { margin-top: 0 !important; margin-bottom: 0 !important; } /* Hard force center width on /v2/ (override 1280 constraints) */ html.v2-html body.v2-body #center { width: calc(100% - 56px) !important; max-width: 1520px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; } html.v2-html body.v2-body #center > * { max-width: none !important; } @media (max-width: 1400px) { html.v2-html body.v2-body #center { width: calc(100% - 36px) !important; } } @media (max-width: 900px) { html.v2-html body.v2-body #center { width: calc(100% - 22px) !important; } } /* Full-width footer container for /v2/ */ html.v2-html body.v2-body footer#footer { width: calc(100% - 56px) !important; max-width: 1520px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; } html.v2-html body.v2-body footer#footer .footer-container { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; } @media (max-width: 1400px) { html.v2-html body.v2-body footer#footer { width: calc(100% - 36px) !important; } } @media (max-width: 900px) { html.v2-html body.v2-body footer#footer { width: calc(100% - 22px) !important; } } /* ===================================================== V2 PROJECT ALIGNMENT (hypercon_layout_css_brief_codex.md) ===================================================== */ html.v2-html { --hc-navy-950: #00192f; --hc-navy-900: #002748; --hc-navy-850: #00345c; --hc-navy-800: #00426f; --hc-blue-500: #009fe3; --hc-blue-300: #5fd7ff; --hc-red-500: #ef4136; --hc-red-600: #df3028; --hc-white: #ffffff; --hc-offwhite: #f6f9fc; --hc-text-dark: #001b3d; --hc-text-muted: #607089; --hc-border-light: rgba(255, 255, 255, 0.18); --hc-card-shadow: 0 18px 50px rgba(0, 20, 45, 0.25); --hc-radius-lg: 12px; } html.v2-html body.v2-body #center { font-family: "IBM Plex Sans", "Lato", "Segoe UI", system-ui, -apple-system, sans-serif; } html.v2-html body.v2-body .v2-hero { min-height: 500px; padding: 82px 0 38px; } html.v2-html body.v2-body .v2-hero__content { max-width: 520px; padding-left: 24px; } html.v2-html body.v2-body .v2-hero__content h1 { margin: 0 0 24px; font-size: clamp(48px, 4.2vw, 58px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; } html.v2-html body.v2-body .v2-hero__content p { margin: 0 0 28px; font-size: clamp(20px, 1.6vw, 22px); line-height: 1.55; color: rgba(255, 255, 255, 0.92); } html.v2-html body.v2-body .v2-cta { min-height: 50px; padding: 0 24px; border-radius: 6px; background: linear-gradient(135deg, var(--hc-red-500), #ff5a4d); box-shadow: 0 12px 30px rgba(239, 65, 54, 0.28); } html.v2-html body.v2-body .v2-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 8px; margin-bottom: 16px; } html.v2-html body.v2-body .v2-benefit { min-height: 168px; border-radius: 8px; padding: 24px 22px; display: grid; grid-template-columns: 66px 1fr; gap: 16px; align-items: start; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 18px 45px rgba(0, 18, 45, 0.22); color: var(--hc-text-dark); } html.v2-html body.v2-body .v2-benefit__icon { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #18315c; background: #e9eff5; box-shadow: inset 0 0 0 1px rgba(0, 45, 85, 0.05); } html.v2-html body.v2-body .v2-benefit__copy h3 { margin: 0 0 10px; font-size: 1.2rem; line-height: 1.22; font-weight: 800; color: var(--hc-text-dark); } html.v2-html body.v2-body .v2-benefit__copy p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: #102846; } html.v2-html body.v2-body #footer .footer-container { display: grid; grid-template-columns: 0.95fr 1.3fr 1.08fr; gap: 12px; margin-top: 0; } html.v2-html body.v2-body #footer .footer-col { min-height: 320px; border-radius: 8px; padding: 28px; background: linear-gradient(145deg, rgba(0, 25, 47, 0.88), rgba(0, 65, 105, 0.58)); border: 1px solid rgba(120, 200, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 45px rgba(0, 0, 0, 0.22); color: #fff; } html.v2-html body.v2-body #footer .footer-col h3, html.v2-html body.v2-body #footer .footer-col p, html.v2-html body.v2-body #footer .footer-col span, html.v2-html body.v2-body #footer .footer-col a, html.v2-html body.v2-body #footer .footer-blog-menu a, html.v2-html body.v2-body #footer .footer-blog-menu i { color: rgba(255, 255, 255, 0.92); } html.v2-html body.v2-body #footer .footer-col h3 { margin-bottom: 12px; font-size: 1.25rem; line-height: 1.25; font-weight: 800; } html.v2-html body.v2-body #footer .footer-col p, html.v2-html body.v2-body #footer .footer-about-text span, html.v2-html body.v2-body #footer .footer-blog-menu { font-size: 0.92rem; line-height: 1.6; } html.v2-html body.v2-body #footer .footer-section, html.v2-html body.v2-body #footer .footer-blog-menu li { border-top-color: rgba(255, 255, 255, 0.14); border-bottom-color: rgba(255, 255, 255, 0.12); } html.v2-html body.v2-body #footer .footer-about p { background: transparent; box-shadow: none; border: 0; padding: 0; } html.v2-html body.v2-body #footer .footer-avatar { width: 58px; height: 58px; } html.v2-html body.v2-body #footer .footer-about-text h3 { margin: 0; font-size: 0.82rem; font-weight: 700; } html.v2-html body.v2-body #footer .readers-title { font-size: 1.7rem !important; text-align: center; } html.v2-html body.v2-body #footer .footer-bottom { color: #d7e7ff; } @media (max-width: 1180px) { html.v2-html body.v2-body .v2-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.v2-html body.v2-body #footer .footer-container { grid-template-columns: 1fr; } } @media (max-width: 900px) { html.v2-html body.v2-body .v2-hero { min-height: 420px; padding: 56px 0 28px; } html.v2-html body.v2-body .v2-hero__content { max-width: 100%; padding-left: 16px; padding-right: 16px; } html.v2-html body.v2-body .v2-benefits { grid-template-columns: 1fr; } html.v2-html body.v2-body .v2-benefit { grid-template-columns: 58px 1fr; } } /* V2 footer: blue Font Awesome icons in contact/address rows */ html.v2-html body.v2-body #footer .footer-col h3 i, html.v2-html body.v2-body #footer .footer-col p i, html.v2-html body.v2-body #footer .footer-blog-menu i { color: #5fd7ff !important; } /* Footer icon correction on /v2/: keep contact/phone/mail icons in footer text color */ html.v2-html body.v2-body #footer .footer-col h3 i, html.v2-html body.v2-body #footer .footer-col p i, html.v2-html body.v2-body #footer .footer-blog-menu i { color: rgba(255, 255, 255, 0.92) !important; } /* v2-benefits should not have gray section background */ html.v2-html body.v2-body section.v2-benefits { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } /* Keep hero slogan on one line on desktop */ html.v2-html body.v2-body .v2-hero__content h1 { white-space: nowrap; } @media (max-width: 1100px) { html.v2-html body.v2-body .v2-hero__content h1 { white-space: normal; } } /* Ensure hero title has enough horizontal room on desktop */ html.v2-html body.v2-body .v2-hero__content { max-width: 680px !important; } html.v2-html body.v2-body .v2-hero__content h1 { width: max-content; max-width: 100%; } @media (max-width: 1100px) { html.v2-html body.v2-body .v2-hero__content { max-width: 100% !important; } html.v2-html body.v2-body .v2-hero__content h1 { width: auto; } } /* Align hero content start with section left edge */ html.v2-html body.v2-body .v2-hero__content { padding-left: 0 !important; margin-left: 0 !important; } /* Hard left alignment: remove any inherited section offset */ html.v2-html body.v2-body main#center section.v2-hero { margin-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } html.v2-html body.v2-body .v2-hero__content { position: relative; left: 0 !important; transform: none !important; padding-left: 0 !important; margin-left: 0 !important; } /* v2 cleanup: hero without dedicated map image */ html.v2-html body.v2-body .v2-map-bg, html.v2-html body.v2-body .v2-network-underlay, html.v2-html body.v2-body .network-map { display: none !important; background-image: none !important; } html.v2-html body.v2-body section.v2-hero::before, html.v2-html body.v2-body section.v2-hero::after { content: none !important; background: none !important; } /* v2: hero uses only global html background */ html.v2-html body.v2-body section.v2-hero, html.v2-html body.v2-body main#center section.v2-hero, html.v2-html body.v2-body .v2-hero { background: transparent !important; background-image: none !important; } /* v2 final hero artwork: single transparent SVG layer */ html.v2-html body.v2-body .v2-map-bg, html.v2-html body.v2-body .v2-network-underlay, html.v2-html body.v2-body .network-map { display: none !important; background-image: none !important; } html.v2-html body.v2-body section.v2-hero::before, html.v2-html body.v2-body section.v2-hero::after { content: none !important; background: none !important; } html.v2-html body.v2-body section.v2-hero, html.v2-html body.v2-body main#center section.v2-hero, html.v2-html body.v2-body .v2-hero { background-color: transparent !important; background-image: url('/static/img/professional.svg?v=20260609-1') !important; background-repeat: no-repeat !important; background-position: calc(100% - 0px) calc(50% + 50px) !important; background-size: min(1160px, 82vw) auto !important; } @media (max-width: 900px) { html.v2-html body.v2-body section.v2-hero, html.v2-html body.v2-body main#center section.v2-hero, html.v2-html body.v2-body .v2-hero { background-position: right -40px top 30px !important; background-size: min(760px, 120vw) auto !important; } } /* v2 footer contact: separator below phone/email in Pozostan w kontakcie */ html.v2-html body.v2-body #footer .footer-section.footer-contact-direct { border-top: none !important; padding-top: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important; padding-bottom: 8px; margin-bottom: 8px; } /* v2: avoid double separator after direct contact block */ html.v2-html body.v2-body #footer .footer-section.footer-contact-direct + .footer-section { border-top: none !important; margin-top: 0 !important; padding-top: 8px !important; } /* v2 footer about text: slightly darker than white */ html.v2-html body.v2-body #footer .footer-about p, html.v2-html body.v2-body #footer .footer-about p span { color: #d3d3d3 !important; } /* v2 footer text unification: middle and right panels */ html.v2-html body.v2-body #footer .footer-col p, html.v2-html body.v2-body #footer .footer-col span, html.v2-html body.v2-body #footer .footer-col a, html.v2-html body.v2-body #footer .footer-blog-menu a, html.v2-html body.v2-body #footer .footer-about-text span { color: #d3d3d3 !important; } /* v2 footer-bottom darker text */ html.v2-html body.v2-body #footer .footer-bottom, html.v2-html body.v2-body #footer .footer-bottom p { color: #ddd !important; } /* v2 footer about paragraph rhythm aligned with benefit copy */ html.v2-html body.v2-body #footer .footer-about p { line-height: 1.5 !important; } /* v2 footer about typography matched to benefit copy */ html.v2-html body.v2-body #footer .footer-about p, html.v2-html body.v2-body #footer .footer-about p span { font-family: "IBM Plex Sans", "Lato", "Segoe UI", system-ui, -apple-system, sans-serif !important; font-size: 0.95rem !important; font-weight: 400 !important; line-height: 1.5 !important; } /* v2 header width aligned with center/footer width */ html.v2-html body.v2-body #top .top-container { width: min(1520px, calc(100vw - 56px)) !important; max-width: 1520px !important; margin-left: auto !important; margin-right: auto !important; } @media (max-width: 1400px) { html.v2-html body.v2-body #top .top-container { width: calc(100vw - 36px) !important; } } @media (max-width: 900px) { html.v2-html body.v2-body #top .top-container { width: calc(100vw - 22px) !important; } } /* v2 mobile hero artwork tuning: keep graphic large and away from left slogan */ @media (max-width: 900px) { html.v2-html body.v2-body section.v2-hero, html.v2-html body.v2-body main#center section.v2-hero, html.v2-html body.v2-body .v2-hero { background-position: calc(100% + 140px) calc(100% + 10px) !important; background-size: max(980px, 170vw) auto !important; } } @media (max-width: 640px) { html.v2-html body.v2-body section.v2-hero, html.v2-html body.v2-body main#center section.v2-hero, html.v2-html body.v2-body .v2-hero { background-position: calc(100% + 170px) calc(100% + 20px) !important; background-size: max(900px, 210vw) auto !important; } } /* v2 mobile: disable hero artwork for cleaner professional look */ @media (max-width: 900px) { html.v2-html body.v2-body section.v2-hero, html.v2-html body.v2-body main#center section.v2-hero, html.v2-html body.v2-body .v2-hero { background-image: none !important; } } /* v2 mobile hard-disable hero artwork (phones incl. landscape) */ @media (max-width: 1100px), (hover: none) and (pointer: coarse) { html.v2-html body.v2-body section.v2-hero, html.v2-html body.v2-body main#center section.v2-hero, html.v2-html body.v2-body .v2-hero { background-image: none !important; background-color: transparent !important; } } /* Services v2: same layout as home, cards in 2 columns */ html.v2-html body.v2-body.v2-services .v2-benefits.v2-benefits--services { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px; } html.v2-html body.v2-body.v2-services .v2-benefits.v2-benefits--services .v2-benefit { min-height: 190px; } @media (max-width: 900px) { html.v2-html body.v2-body.v2-services .v2-benefits.v2-benefits--services { grid-template-columns: 1fr !important; } } /* Blog v2: keep existing blocks, but in new visual shell */ html.v2-html body.v2-body.v2-blog .v2-hero { min-height: 360px; } html.v2-html body.v2-body.v2-blog .v2-blog-section { margin-top: 12px; } html.v2-html body.v2-body.v2-blog .blog-columns { gap: 14px; } html.v2-html body.v2-body.v2-blog .blog-column { background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 18px 45px rgba(0, 18, 45, 0.22); border-radius: 8px; } html.v2-html body.v2-body.v2-blog .blog-column h3 { color: #001b3d; } html.v2-html body.v2-body.v2-blog .blog-column li i { color: #18315c; } html.v2-html body.v2-body.v2-blog .blog-column a { color: #102846; border-bottom: 1px solid rgba(16, 40, 70, 0.14); } html.v2-html body.v2-body.v2-blog .blog-column a:hover { color: #ef4136; } /* Blog post detail in v2 style */ html.v2-html body.v2-body.v2-blog .post-wrapper .blok-col-post { background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 18px 45px rgba(0, 18, 45, 0.22); border-radius: 8px; } /* Blog v2 cleanup: no gray section background + dedicated hero without map artwork */ html.v2-html body.v2-body.v2-blog section.container-center.v2-blog-section { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; } html.v2-html body.v2-body.v2-blog .v2-hero { background-image: none !important; background-color: transparent !important; position: relative; } html.v2-html body.v2-body.v2-blog .v2-hero::after { content: ""; position: absolute; right: 44px; top: 34px; font-family: "IBM Plex Sans", "Lato", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: clamp(90px, 14vw, 180px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: rgba(160, 225, 255, 0.22); pointer-events: none; } @media (max-width: 900px) { html.v2-html body.v2-body.v2-blog .v2-hero::after { right: 16px; top: 56px; font-size: clamp(72px, 26vw, 120px); color: rgba(160, 225, 255, 0.16); } } /* Blog v2 hero artwork: dedicated blog.svg (not homepage graphic) */ html.v2-html body.v2-body.v2-blog .v2-hero { background-image: url('/static/img/blog.svg?v=20260609-1') !important; background-repeat: no-repeat !important; background-position: right 6% center !important; background-size: min(820px, 55vw) auto !important; } html.v2-html body.v2-body.v2-blog .v2-hero::after { content: none !important; } @media (max-width: 1100px), (hover: none) and (pointer: coarse) { html.v2-html body.v2-body.v2-blog .v2-hero { background-image: url('/static/img/blog.svg?v=20260609-1') !important; background-position: right -20px top 40px !important; background-size: min(700px, 120vw) auto !important; } } /* Blog v2 hero artwork as visible layer */ html.v2-html body.v2-body.v2-blog .v2-hero { background-image: none !important; background-color: transparent !important; } html.v2-html body.v2-body.v2-blog .v2-blog-hero-art { position: absolute; right: 34px; top: 28px; width: min(820px, 56vw); height: min(560px, 72%); background: url('/static/img/blog.svg?v=20260609-2') right center / contain no-repeat; opacity: 0.30; filter: brightness(0) invert(1); pointer-events: none; } html.v2-html body.v2-body.v2-blog .v2-hero__content { position: relative; z-index: 2; } @media (max-width: 1100px), (hover: none) and (pointer: coarse) { html.v2-html body.v2-body.v2-blog .v2-blog-hero-art { right: -12px; top: 44px; width: min(700px, 115vw); height: min(460px, 66%); opacity: 0.22; } } /* Blog v2 hard isolation: remove homepage mesh entirely, keep only blog.svg */ html.v2-html body.v2-body.v2-blog main#center section.v2-hero, html.v2-html body.v2-body.v2-blog section.v2-hero, html.v2-html body.v2-body.v2-blog .v2-hero { background-image: none !important; background-color: transparent !important; } html.v2-html body.v2-body.v2-blog section.v2-hero::before, html.v2-html body.v2-body.v2-blog section.v2-hero::after, html.v2-html body.v2-body.v2-blog .v2-hero::before, html.v2-html body.v2-body.v2-blog .v2-hero::after { content: none !important; background: none !important; } html.v2-html body.v2-body.v2-blog .v2-map-bg, html.v2-html body.v2-body.v2-blog .v2-network-underlay, html.v2-html body.v2-body.v2-blog .network-map { display: none !important; background-image: none !important; } html.v2-html body.v2-body.v2-blog .v2-blog-hero-art { background: url('/static/img/blog.svg?v=20260609-3') right center / contain no-repeat !important; opacity: 0.95 !important; filter: none !important; } /* Manufacturing-X v2: cards in two columns, same visual language as home */ html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px; } html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx .v2-benefit { min-height: 210px; } html.v2-html body.v2-body.v2-manufacturing .v2-benefit__long p { margin: 0; } html.v2-html body.v2-body.v2-manufacturing .v2-benefit__long ul { margin: 0; padding-left: 18px; color: #102846; line-height: 1.5; font-size: 0.95rem; } html.v2-html body.v2-body.v2-manufacturing .v2-benefit__long li + li { margin-top: 4px; } @media (max-width: 900px) { html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx { grid-template-columns: 1fr !important; } } /* Manufacturing-X v2 layout: inverted pyramid (2 + 2 narrower + 1 centered) */ html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 16px; } html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx > .v2-benefit:nth-child(1) { grid-column: 1 / 4; } html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx > .v2-benefit:nth-child(2) { grid-column: 4 / 7; } html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx > .v2-benefit:nth-child(3) { grid-column: 2 / 4; } html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx > .v2-benefit:nth-child(4) { grid-column: 4 / 6; } html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx > .v2-benefit:nth-child(5) { grid-column: 3 / 5; } @media (max-width: 1100px) { html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx > .v2-benefit { grid-column: auto !important; } } @media (max-width: 900px) { html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx { grid-template-columns: 1fr !important; } } /* Manufacturing-X v2 hard override: clear inverted pyramid on desktop */ @media (min-width: 901px) { html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 16px !important; } html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx > .v2-benefit:nth-child(1) { grid-column: 1 / 7 !important; } html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx > .v2-benefit:nth-child(2) { grid-column: 7 / 13 !important; } html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx > .v2-benefit:nth-child(3) { grid-column: 3 / 7 !important; } html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx > .v2-benefit:nth-child(4) { grid-column: 7 / 11 !important; } html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx > .v2-benefit:nth-child(5) { grid-column: 5 / 9 !important; } } @media (max-width: 900px) { html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx { grid-template-columns: 1fr !important; } html.v2-html body.v2-body.v2-manufacturing .v2-benefits.v2-benefits--mx > .v2-benefit { grid-column: auto !important; } } /* Manufacturing-X hero uses Lottie instead of static professional.svg */ html.v2-html body.v2-body.v2-manufacturing section.v2-hero, html.v2-html body.v2-body.v2-manufacturing main#center section.v2-hero, html.v2-html body.v2-body.v2-manufacturing .v2-hero { background-image: none !important; background-color: transparent !important; } html.v2-html body.v2-body.v2-manufacturing .v2-mx-top-right { position: absolute; right: 70px; top: 64px; width: min(540px, 48vw); height: min(540px, 72%); z-index: 2; pointer-events: none; opacity: 0.88; } html.v2-html body.v2-body.v2-manufacturing #lottie-animation-mx { width: 100%; height: 100%; } html.v2-html body.v2-body.v2-manufacturing .v2-hero__content { position: relative; z-index: 3; } @media (max-width: 1100px) { html.v2-html body.v2-body.v2-manufacturing .v2-mx-top-right { right: 38px; top: 88px; width: min(420px, 72vw); height: min(420px, 58%); opacity: 0.72; } } @media (max-width: 900px) { html.v2-html body.v2-body.v2-manufacturing .v2-mx-top-right { display: none; } } /* Manufacturing-X Lottie tuning: extra ring + domain tags */ html.v2-html body.v2-body.v2-manufacturing #lottie-animation-mx { position: relative; } html.v2-html body.v2-body.v2-manufacturing #lottie-animation-mx::after { content: ""; position: absolute; inset: 5%; border: 1.5px solid rgba(95, 215, 255, 0.38); border-radius: 50%; box-shadow: 0 0 24px rgba(95, 215, 255, 0.18); } html.v2-html body.v2-body.v2-manufacturing .v2-mx-tags { position: absolute; inset: 0; pointer-events: none; } html.v2-html body.v2-body.v2-manufacturing .v2-mx-tag { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(0, 28, 54, 0.62); border: 1px solid rgba(95, 215, 255, 0.32); color: #d7f4ff; font-size: 0.78rem; line-height: 1; white-space: nowrap; } html.v2-html body.v2-body.v2-manufacturing .v2-mx-tag i { color: #5fd7ff; } html.v2-html body.v2-body.v2-manufacturing .v2-mx-tag--aero { top: 8%; right: 8%; } html.v2-html body.v2-body.v2-manufacturing .v2-mx-tag--catena { top: 34%; right: -2%; } html.v2-html body.v2-body.v2-manufacturing .v2-mx-tag--factory { top: 60%; right: 2%; } html.v2-html body.v2-body.v2-manufacturing .v2-mx-tag--robot { top: 74%; right: 22%; } html.v2-html body.v2-body.v2-manufacturing .v2-mx-tag--health { top: 20%; right: 44%; } @media (max-width: 1100px) { html.v2-html body.v2-body.v2-manufacturing .v2-mx-tag { font-size: 0.72rem; padding: 5px 8px; } } @media (max-width: 900px) { html.v2-html body.v2-body.v2-manufacturing .v2-mx-tags { display: none; } } /* Disabled CTA for staged sections */ .v2-cta.v2-cta--disabled { pointer-events: none; cursor: default; opacity: 0.92; } /* Services hero: dedicated city badges matching Lottie tag style */ html.v2-html body.v2-body.v2-services section.v2-hero, html.v2-html body.v2-body.v2-services main#center section.v2-hero, html.v2-html body.v2-body.v2-services .v2-hero { background-color: transparent !important; background-image: url('/static/img/professional_services.svg?v=20260609-2') !important; background-repeat: no-repeat !important; background-position: calc(100% - 0px) calc(50% + 50px) !important; background-size: min(1160px, 82vw) auto !important; } html.v2-html body.v2-body.v2-services .v2-services-cities { position: absolute; inset: 0; z-index: 2; pointer-events: none; } html.v2-html body.v2-body.v2-services .v2-city-badge { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 999px; background: rgba(0, 28, 54, 0.62); border: 1px solid rgba(95, 215, 255, 0.32); color: #d7f4ff; font-size: 0.84rem; line-height: 1; white-space: nowrap; transform: translate(-10px, calc(-100% - 26px)) !important; } html.v2-html body.v2-body.v2-services .v2-city-amsterdam { top: 24%; left: 60.3%; } html.v2-html body.v2-body.v2-services .v2-city-warsaw { top: 30%; left: 90%; } html.v2-html body.v2-body.v2-services .v2-city-dresden { top: 77%; left: 39.9%; } html.v2-html body.v2-body.v2-services .v2-city-prague { top: 92%; left: 55.5%; } html.v2-html body.v2-body.v2-services .v2-city-wroclaw { top: 64%; left: 69.5%; } html.v2-html body.v2-body.v2-services .v2-city-katowice { top: 80%; left: 85.9%; } @media (max-width: 1100px) { html.v2-html body.v2-body.v2-services section.v2-hero, html.v2-html body.v2-body.v2-services main#center section.v2-hero, html.v2-html body.v2-body.v2-services .v2-hero { background-position: right -40px top 30px !important; background-size: min(760px, 120vw) auto !important; } html.v2-html body.v2-body.v2-services .v2-city-badge { font-size: 0.76rem; padding: 5px 9px; } } @media (max-width: 900px) { html.v2-html body.v2-body.v2-services .v2-services-cities { display: none; } } /* Services/Home mobile hard override: no hero artwork on mobile/touch */ @media (max-width: 1100px), (hover: none) and (pointer: coarse) { html.v2-html body.v2-body.v2-services section.v2-hero, html.v2-html body.v2-body.v2-services main#center section.v2-hero, html.v2-html body.v2-body.v2-services .v2-hero { background-image: none !important; background-color: transparent !important; } html.v2-html body.v2-body.v2-services .v2-services-cities { display: none !important; } } /* Blog mobile hard override: no hero artwork */ @media (max-width: 1100px), (hover: none) and (pointer: coarse) { html.v2-html body.v2-body.v2-blog .v2-blog-hero-art { display: none !important; background: none !important; } html.v2-html body.v2-body.v2-blog section.v2-hero, html.v2-html body.v2-body.v2-blog main#center section.v2-hero, html.v2-html body.v2-body.v2-blog .v2-hero { background-image: none !important; background-color: transparent !important; } } /* Home hero: smaller ampersand in main headline */ html.v2-html body.v2-body.v2-home .v2-hero__content h1 .v2-amp { font-size: 0.72em; font-weight: 700; opacity: 0.95; vertical-align: 0.06em; }