/* * Portmak visual refresh * Safir Denge temasının çekirdek dosyalarını değiştirmeden yüklenir. */ :root { --portmak-navy: #071a2c; --portmak-navy-2: #0c2d46; --portmak-blue: #0ca8e8; --portmak-blue-soft: #e7f7fe; --portmak-orange: #ff7a18; --portmak-ink: #132739; --portmak-text: #41556a; --portmak-line: #dce8f0; --portmak-surface: #ffffff; --portmak-shadow: 0 18px 42px rgba(8, 34, 57, .10); } body.portmak-visual-refresh { background: #f4f8fb; color: var(--portmak-text); } body.portmak-visual-refresh.home { background: #f7fafc; } /* Header: clearer industrial identity without changing the menu structure. */ body.portmak-visual-refresh #header { background: linear-gradient(105deg, var(--portmak-navy), var(--portmak-navy-2)); box-shadow: 0 7px 22px rgba(2, 19, 34, .20); } body.portmak-visual-refresh #header:before { display: none; } body.portmak-visual-refresh #headerInner { max-width: 1180px; background: transparent; } body.portmak-visual-refresh #header .innerContainer { min-height: 86px; } body.portmak-visual-refresh #logo { min-height: 86px; padding: 14px 34px 14px 14px; background: transparent; border-radius: 0; box-shadow: none; } body.portmak-visual-refresh #logo:after { display: none; } body.portmak-visual-refresh #logo .safir-logo { display: flex; align-items: center; } body.portmak-visual-refresh #logo .safir-logo img { display: block; width: auto; max-width: 220px; height: 42px; object-fit: contain; } body.portmak-visual-refresh #menu a { color: #dbeaf2; font-size: 13px; letter-spacing: .01em; } body.portmak-visual-refresh #menu>ul>li>a:before { background: rgba(255, 255, 255, .14); } body.portmak-visual-refresh #menu>ul>li:hover>a, body.portmak-visual-refresh #menu>ul>li.active>a { color: #76ddff; } body.portmak-visual-refresh #menu>ul>li:hover>a:after, body.portmak-visual-refresh #menu>ul>li.active>a:after { border-bottom-color: #76ddff; } body.portmak-visual-refresh #headerInner #menu .sub-menu { min-width: 250px; padding: 8px; border: 1px solid rgba(12, 47, 71, .12); border-top: 3px solid var(--portmak-blue); border-radius: 0 0 14px 14px; background: #fff; box-shadow: 0 16px 35px rgba(6, 31, 50, .16); } body.portmak-visual-refresh #headerInner #menu .sub-menu a { border-radius: 8px; color: var(--portmak-ink); } body.portmak-visual-refresh #headerInner #menu .sub-menu a:hover { color: var(--portmak-navy); background: var(--portmak-blue-soft); } /* Core reading surface and typographic hierarchy. */ body.portmak-visual-refresh:not(.home) #main { padding-top: 38px; padding-bottom: 42px; } body.portmak-visual-refresh .safirBox, body.portmak-visual-refresh #aside .safirWidget { border: 1px solid var(--portmak-line); border-radius: 18px; box-shadow: var(--portmak-shadow); } body.portmak-visual-refresh .safirBox { padding: 36px; } body.portmak-visual-refresh #aside .safirWidget { padding: 20px; box-shadow: 0 12px 30px rgba(8, 34, 57, .07); } body.portmak-visual-refresh .pageHeading { margin: -5px -5px 30px; padding: 0 5px 22px; border-bottom: 1px solid var(--portmak-line); } body.portmak-visual-refresh .pageHeading .inner { padding-left: 0; } body.portmak-visual-refresh .pageHeading .inner:before { width: 66px; height: 4px; left: 0; top: auto; bottom: -24px; border-radius: 999px; background: linear-gradient(90deg, var(--portmak-blue), var(--portmak-orange)); } body.portmak-visual-refresh .pageHeading .inner h1 { max-width: 920px; font-size: clamp(25px, 3vw, 37px); line-height: 1.18; letter-spacing: -.025em; color: var(--portmak-ink); } /* Calculator pages keep their editor-provided H1. This compact heading only * preserves the existing breadcrumb rhythm without creating a second H1. */ body.portmak-visual-refresh .pageHeading.portmak-tool-page-heading { margin-bottom: 22px; padding-bottom: 14px; } body.portmak-visual-refresh .pageHeading.portmak-tool-page-heading .inner:before { width: 46px; height: 3px; } body.portmak-visual-refresh .pageHeading.portmak-tool-page-heading #crumbs { display: block; margin-top: 6px; } body.portmak-visual-refresh .pageHeading .inner #crumbs, body.portmak-visual-refresh .pageHeading .inner #crumbs a { color: #718295; } body.portmak-visual-refresh .reading, body.portmak-visual-refresh .reading p, body.portmak-visual-refresh .reading li { font-size: 16px; line-height: 1.82; color: var(--portmak-text); text-align: left; } body.portmak-visual-refresh .reading h2, body.portmak-visual-refresh .reading .mainHeading { margin-top: 40px; padding: 13px 0 13px 17px; border-left: 4px solid var(--portmak-blue); font-size: clamp(22px, 2.4vw, 29px); line-height: 1.25; color: var(--portmak-ink); } body.portmak-visual-refresh .reading h3 { margin-top: 30px; font-size: 20px; line-height: 1.35; color: var(--portmak-navy); } body.portmak-visual-refresh .reading h4, body.portmak-visual-refresh .reading h5, body.portmak-visual-refresh .reading h6 { color: var(--portmak-navy); } body.portmak-visual-refresh .reading a { font-weight: 600; color: #087db2; text-decoration: underline; text-decoration-color: rgba(12, 168, 232, .35); text-underline-offset: 3px; } body.portmak-visual-refresh .reading a:hover { color: var(--portmak-navy); text-decoration-color: var(--portmak-orange); } body.portmak-visual-refresh .reading ul li::marker { color: var(--portmak-blue); } body.portmak-visual-refresh .reading table { display: block; max-width: 100%; overflow-x: auto; border: 1px solid var(--portmak-line); border-radius: 12px; background: #fff; } /* Existing widgets become softer technical cards; their data and behaviour stay unchanged. */ body.portmak-visual-refresh .widgetHeading, body.portmak-visual-refresh .mainHeading .text { color: var(--portmak-ink); } body.portmak-visual-refresh .advancedPostsWidget1 .item, body.portmak-visual-refresh .advancedPostsWidget2 .item, body.portmak-visual-refresh .listing.style1 .item, body.portmak-visual-refresh .listing.style2 .item, body.portmak-visual-refresh .referencesWidget .items a { border: 1px solid var(--portmak-line); border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(8, 34, 57, .07); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; } body.portmak-visual-refresh .advancedPostsWidget1 .item:hover, body.portmak-visual-refresh .advancedPostsWidget2 .item:hover, body.portmak-visual-refresh .listing.style1 .item:hover, body.portmak-visual-refresh .listing.style2 .item:hover, body.portmak-visual-refresh .referencesWidget .items a:hover { transform: translateY(-4px); border-color: rgba(12, 168, 232, .55); box-shadow: 0 18px 36px rgba(8, 34, 57, .14); } body.portmak-visual-refresh .advancedPostsWidget1 .item .thumb, body.portmak-visual-refresh .advancedPostsWidget2 .item .thumb, body.portmak-visual-refresh .listing .item .thumb, body.portmak-visual-refresh .referencesWidget .item .safirthumb { overflow: hidden; border-radius: 13px 13px 0 0; } body.portmak-visual-refresh .advancedPostsWidget1 .item img, body.portmak-visual-refresh .advancedPostsWidget2 .item img, body.portmak-visual-refresh .listing .item img, body.portmak-visual-refresh .referencesWidget .item img { transition: transform .35s ease; } body.portmak-visual-refresh .advancedPostsWidget1 .item:hover img, body.portmak-visual-refresh .advancedPostsWidget2 .item:hover img, body.portmak-visual-refresh .listing .item:hover img, body.portmak-visual-refresh .referencesWidget .item:hover img { transform: scale(1.045); } body.portmak-visual-refresh .safirButton .inner, body.portmak-visual-refresh form input[type=submit] { border-radius: 10px; } body.portmak-visual-refresh :focus-visible { outline: 3px solid rgba(12, 168, 232, .78); outline-offset: 3px; } /* Service and reference components inserted by edits/functions.php. */ .portmak-service-strip { position: relative; z-index: 8; border-bottom: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(100deg, #08243a, #0b3856); color: #d8eaf4; } .portmak-service-strip .innerContainer { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 58px; padding-top: 10px; padding-bottom: 10px; } .portmak-service-strip__points, .portmak-service-strip__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .portmak-service-strip__points span { font-size: 12px; white-space: nowrap; } .portmak-service-strip__points span + span { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .19); } .portmak-service-strip__points b { color: #fff; } .portmak-link-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 15px; border: 1px solid var(--portmak-blue); border-radius: 9px; background: var(--portmak-blue); color: #fff !important; font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none !important; transition: transform .2s ease, background .2s ease, border-color .2s ease; } .portmak-link-button:hover { transform: translateY(-1px); border-color: #44caff; background: #078bc6; color: #fff !important; } .portmak-link-button.is-outline { border-color: rgba(255, 255, 255, .45); background: transparent; } .portmak-link-button.is-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .10); } .portmak-reference-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -12px 0 26px; } .portmak-reference-badge span:not(.portmak-reference-badge__eyebrow) { padding: 7px 10px; border: 1px solid #cfeaf7; border-radius: 999px; background: #f1faff; color: #36708c; font-size: 12px; font-weight: 600; } .portmak-reference-badge__eyebrow { padding: 7px 10px; border-radius: 999px; background: var(--portmak-navy); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; } .portmak-service-cta { display: flex; align-items: center; justify-content: space-between; gap: 26px; margin: 42px 0 4px; padding: 30px; border: 1px solid #bfdfec; border-radius: 18px; background: radial-gradient(circle at 95% 0, rgba(12, 168, 232, .21), transparent 34%), linear-gradient(135deg, #f7fcff, #e8f7fd); box-shadow: 0 16px 34px rgba(8, 34, 57, .08); } .portmak-service-cta__copy { max-width: 680px; } .portmak-service-cta__copy > span { display: block; margin-bottom: 8px; color: #16729b; font-size: 11px; font-weight: 800; letter-spacing: .11em; } body.portmak-visual-refresh .reading .portmak-service-cta h2 { margin: 0; padding: 0; border: 0; font-size: clamp(21px, 2.4vw, 29px); } .portmak-service-cta__copy p { margin: 9px 0 0 !important; color: #4d6273 !important; } .portmak-service-cta__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 9px; } .portmak-service-cta .portmak-link-button.is-outline { border-color: #8bbfd3; background: transparent; color: #176783 !important; } .portmak-service-cta .portmak-link-button.is-outline:hover { border-color: var(--portmak-blue); background: #fff; color: #075f87 !important; } /* Footer and fixed support controls. */ body.portmak-visual-refresh #callUs { position: relative; overflow: hidden; padding: 22px 0; border-top: 1px solid rgba(120, 227, 255, .18); border-bottom: 1px solid rgba(120, 227, 255, .14); background: radial-gradient(circle at 82% 50%, rgba(16, 183, 239, .23), transparent 31%), linear-gradient(105deg, #061b2b, #0b3c59); } body.portmak-visual-refresh #callUs::after { position: absolute; right: 6%; top: -112px; width: 255px; height: 255px; border: 1px solid rgba(128, 228, 255, .16); border-radius: 50%; box-shadow: 0 0 0 34px rgba(128, 228, 255, .035), 0 0 0 68px rgba(128, 228, 255, .02); content: ""; pointer-events: none; } body.portmak-visual-refresh #callUs .innerContainer { position: relative; z-index: 1; display: flex; align-items: center; gap: 15px; min-height: 44px; } body.portmak-visual-refresh #callUs .icon, body.portmak-visual-refresh #callUs .text, body.portmak-visual-refresh #callUs .phone { float: none; } body.portmak-visual-refresh #callUs .icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(128, 228, 255, .34); border-radius: 10px; background: rgba(1, 22, 37, .34); color: #81e3ff; } body.portmak-visual-refresh #callUs .icon svg { width: 21px; height: 21px; margin: 0; } body.portmak-visual-refresh #callUs .text { margin: 0; color: #d6e8f0; font-size: 15px; font-weight: 650; line-height: 1.5; } body.portmak-visual-refresh #callUs .phone { margin-left: auto; font-size: clamp(22px, 2.35vw, 31px); font-weight: 700; letter-spacing: .01em; } body.portmak-visual-refresh #callUs .phone a { color: #fff; } body.portmak-visual-refresh #footer { position: relative; overflow: hidden; border-top: 1px solid rgba(116, 225, 255, .13); background: radial-gradient(circle at 11% 3%, rgba(13, 172, 235, .18), transparent 23%), radial-gradient(circle at 88% 87%, rgba(10, 105, 157, .18), transparent 27%), linear-gradient(128deg, #041521 0%, #082438 52%, #061a2a 100%); color: #b8cad4; } body.portmak-visual-refresh #footer::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(104, 219, 255, .038) 1px, transparent 1px), linear-gradient(90deg, rgba(104, 219, 255, .038) 1px, transparent 1px); background-size: 34px 34px; content: ""; pointer-events: none; } body.portmak-visual-refresh #footer::after { position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, rgba(87, 220, 255, .75) 17%, rgba(87, 220, 255, .23) 71%, transparent); content: ""; pointer-events: none; } body.portmak-visual-refresh #footerInner, body.portmak-visual-refresh #footer #footerBottom { position: relative; z-index: 1; } body.portmak-visual-refresh #footerInner { padding: 54px 0 46px; } body.portmak-visual-refresh #footer .innerContainer { overflow: visible; } body.portmak-visual-refresh #footer .columns { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .88fr) minmax(0, 1.3fr); gap: clamp(25px, 4vw, 56px); margin: 0; overflow: visible; } body.portmak-visual-refresh #footer .column { float: none; width: auto; min-width: 0; padding: 0; } body.portmak-visual-refresh #footer .column.menu, body.portmak-visual-refresh #footer .column.contact { padding-left: clamp(25px, 3vw, 42px); border-left: 1px solid rgba(148, 228, 255, .16); } body.portmak-visual-refresh #footer .widgetHeading { position: relative; margin: 0 0 18px; padding: 0 0 14px; border-bottom: 1px solid rgba(148, 228, 255, .14); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .095em; line-height: 1.3; text-transform: uppercase; } body.portmak-visual-refresh #footer .widgetHeading::after { position: absolute; bottom: -1px; left: 0; width: 52px; height: 2px; background: #48d5ff; box-shadow: 0 0 14px rgba(72, 213, 255, .55); content: ""; } body.portmak-visual-refresh #footer .column.about .columnContent { max-width: 345px; color: #b7cbd6; font-size: 13px; line-height: 1.8; } body.portmak-visual-refresh #footer .column.menu nav > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; } body.portmak-visual-refresh #footer .column.menu li { float: none; width: auto; padding: 0; } body.portmak-visual-refresh #footer .column.menu a { display: flex; align-items: center; min-height: 39px; padding: 8px 10px; border: 1px solid rgba(148, 228, 255, .15); border-radius: 8px; background: rgba(255, 255, 255, .045); color: #dcebf1; font-size: 12px; font-weight: 600; line-height: 1.35; } body.portmak-visual-refresh #footer .column.menu a::after { display: none; } body.portmak-visual-refresh #footer .column.menu a:hover { border-color: rgba(94, 216, 255, .55); background: rgba(14, 176, 235, .12); color: #fff; } body.portmak-visual-refresh #footer .column.contact .contactItem { margin: 0 0 10px; } body.portmak-visual-refresh #footer .column.contact .contactItem .item { display: flex; align-items: center; overflow: visible; } body.portmak-visual-refresh #footer .column.contact .contactItem .icon { display: inline-flex; float: none; flex: 0 0 37px; align-items: center; justify-content: center; width: 37px; height: 37px; border: 1px solid rgba(148, 228, 255, .21); border-radius: 9px; background: rgba(255, 255, 255, .055); color: #70ddff; } body.portmak-visual-refresh #footer .column.contact .contactItem .icon svg { width: 17px; height: 17px; margin: 0; } body.portmak-visual-refresh #footer .column.contact .contactItem .table, body.portmak-visual-refresh #footer .column.contact .contactItem .table .row, body.portmak-visual-refresh #footer .column.contact .contactItem .table .data { display: block; } body.portmak-visual-refresh #footer .column.contact .contactItem .table { min-height: 37px; } body.portmak-visual-refresh #footer .column.contact .contactItem .table .data { padding: 8px 0 8px 11px; color: #d8e7ed; font-size: 12px; line-height: 1.45; } body.portmak-visual-refresh #footer .safirSocial { gap: 7px; } body.portmak-visual-refresh #footer .safirSocial a { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; border: 1px solid rgba(148, 228, 255, .18); border-radius: 8px; background: rgba(255, 255, 255, .045); color: #9edff2; } body.portmak-visual-refresh #footer .safirSocial a:hover { border-color: rgba(94, 216, 255, .6); background: rgba(14, 176, 235, .14); color: #fff; } body.portmak-visual-refresh #footer .safirSocial li a svg { width: 14px; height: 14px; } body.portmak-visual-refresh #footer #footerBottom { border-top: 1px solid rgba(148, 228, 255, .13); background: rgba(1, 14, 24, .64); color: #91aab7; } body.portmak-visual-refresh #footer #footerBottom .innerContainer { display: flex; align-items: center; min-height: 68px; padding-top: 14px; padding-bottom: 14px; } body.portmak-visual-refresh #footer #footerBottom .text { padding-right: 66px; color: #9eb5c0; font-size: 12px; line-height: 1.55; } body.portmak-visual-refresh #footer .safirTop { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 100%; background: rgba(27, 174, 226, .12); color: #8fe2fb; } body.portmak-visual-refresh #footer .safirTop:hover { background: rgba(27, 174, 226, .25); color: #fff; } body.portmak-visual-refresh #footer .safirTop svg { width: 16px; height: 16px; margin: 0; } body.portmak-visual-refresh .whatsappButton { box-shadow: 0 11px 26px rgba(6, 30, 46, .28); } /* Keyboard skip link remains hidden until it is needed. */ .portmak-skip-link { position: fixed; left: 18px; top: -60px; z-index: 1000000; padding: 12px 15px; border-radius: 8px; background: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); color: var(--portmak-navy) !important; font-weight: 700; transition: top .18s ease; } .portmak-skip-link:focus { top: 16px; } body.portmak-scrolled #header { box-shadow: 0 9px 28px rgba(2, 19, 34, .30); } @media (max-width: 1100px) { body.portmak-visual-refresh #logo { min-height: 66px; padding: 12px 15px; } body.portmak-visual-refresh #logo .safir-logo img { height: 35px; } body.portmak-visual-refresh #mobileHeaderBlock .button { border-radius: 8px; background: rgba(255, 255, 255, .95); color: var(--portmak-navy); } .portmak-service-strip .innerContainer { justify-content: center; } } @media (max-width: 780px) { body.portmak-visual-refresh:not(.home) #main { padding-top: 16px; padding-bottom: 20px; } body.portmak-visual-refresh .safirBox { padding: 22px 18px; border-radius: 14px; } body.portmak-visual-refresh .pageHeading .inner h1 { font-size: 27px; } body.portmak-visual-refresh .reading, body.portmak-visual-refresh .reading p, body.portmak-visual-refresh .reading li { font-size: 15px; } .portmak-service-strip .innerContainer, .portmak-service-cta { align-items: stretch; flex-direction: column; } .portmak-service-strip__points, .portmak-service-strip__actions, .portmak-service-cta__actions { justify-content: center; } .portmak-service-strip__points span { white-space: normal; } .portmak-service-strip__points span + span { padding-left: 0; border-left: 0; } .portmak-service-cta { margin-top: 30px; padding: 22px; } .portmak-service-cta__actions .portmak-link-button { flex: 1 1 190px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* -------------------------------------------------------------------------- Conversion-focused homepage. Existing Safir/SiteOrigin widgets are kept; these styles only provide the new information hierarchy around them. -------------------------------------------------------------------------- */ body.portmak-visual-refresh.portmak-homepage { background: #f5f9fc; } body.portmak-visual-refresh .portmak-home { overflow: hidden; background: linear-gradient(rgba(237, 247, 252, .7) 1px, transparent 1px), linear-gradient(90deg, rgba(237, 247, 252, .7) 1px, transparent 1px), #f7fafc; background-size: 42px 42px, 42px 42px, auto; } body.portmak-visual-refresh #main.portmak-home { margin: 0 !important; padding-top: 0 !important; } body.portmak-visual-refresh .portmak-home-stage { position: relative; min-height: 420px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 78% 23%, rgba(42, 189, 239, .27), transparent 23%), linear-gradient(119deg, #061827 0%, #082d47 57%, #104665 100%); } body.portmak-visual-refresh .portmak-home-stage::after { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(3, 20, 35, .92) 0%, rgba(4, 27, 45, .83) 44%, rgba(4, 27, 45, .42) 74%, rgba(3, 20, 35, .18) 100%), linear-gradient(rgba(99, 218, 255, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 218, 255, .075) 1px, transparent 1px); background-size: auto, 34px 34px, 34px 34px; content: ""; } body.portmak-visual-refresh .portmak-home-stage::before { position: absolute; right: max(5vw, 50px); top: 50%; z-index: 1; width: min(37vw, 470px); aspect-ratio: 1; border: 1px solid rgba(117, 222, 255, .19); border-radius: 50%; box-shadow: 0 0 0 42px rgba(117, 222, 255, .035), 0 0 0 84px rgba(117, 222, 255, .022), inset 0 0 62px rgba(4, 179, 235, .09); content: ""; transform: translateY(-50%); animation: portmak-tech-halo-breathe 7s ease-in-out infinite; } body.portmak-visual-refresh .portmak-home-hero { position: relative; z-index: 2; display: flex; align-items: center; min-height: 420px; padding: 42px 0; color: #d5e8f2; } body.portmak-visual-refresh .portmak-home-hero > .innerContainer { position: relative; z-index: 3; overflow: visible; } body.portmak-visual-refresh .portmak-home-hero__content { position: relative; z-index: 1; max-width: 900px; } body.portmak-visual-refresh .portmak-home-hero__tech { position: absolute; top: 0; right: 0; bottom: 0; left: 48%; z-index: 1; overflow: hidden; pointer-events: none; } body.portmak-visual-refresh .portmak-tech-orbit { position: absolute; top: 50%; border: 1px solid rgba(123, 227, 255, .35); border-radius: 50%; will-change: transform, opacity; } body.portmak-visual-refresh .portmak-tech-orbit--outer { right: 7%; width: min(33vw, 430px); aspect-ratio: 1; box-shadow: 0 0 0 24px rgba(92, 216, 255, .035), 0 0 0 54px rgba(92, 216, 255, .018), inset 0 0 45px rgba(16, 180, 235, .09); animation: portmak-tech-orbit-outer 26s linear infinite; } body.portmak-visual-refresh .portmak-tech-orbit--inner { right: calc(7% + min(8vw, 106px)); width: min(17vw, 218px); aspect-ratio: 1; border-style: dashed; border-color: rgba(149, 238, 255, .5); box-shadow: inset 0 0 32px rgba(57, 201, 245, .12); animation: portmak-tech-orbit-inner 16s linear infinite; } body.portmak-visual-refresh .portmak-tech-core { position: absolute; top: 50%; right: calc(7% + min(15vw, 195px)); width: 18px; aspect-ratio: 1; border: 3px solid #c7f5ff; border-radius: 50%; background: #27c7f7; box-shadow: 0 0 0 8px rgba(35, 199, 247, .11), 0 0 28px rgba(85, 225, 255, .92); transform: translateY(-50%); will-change: transform, opacity; animation: portmak-tech-core-pulse 3.2s ease-in-out infinite; } body.portmak-visual-refresh .portmak-tech-scan { position: absolute; top: 12%; bottom: 12%; left: 5%; width: 2px; border-radius: 99px; background: linear-gradient(180deg, transparent, rgba(153, 239, 255, .95), transparent); box-shadow: 0 0 16px rgba(84, 221, 255, .92); opacity: 0; will-change: transform, opacity; animation: portmak-tech-scan 6.5s ease-in-out infinite; } body.portmak-visual-refresh .portmak-tech-circuit { position: absolute; top: 50%; right: -7%; width: min(52vw, 660px); height: auto; transform: translateY(-50%); overflow: visible; } body.portmak-visual-refresh .portmak-tech-trace { fill: none; stroke: rgba(127, 232, 255, .65); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 6 17; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(79, 215, 255, .46)); will-change: stroke-dashoffset, opacity; animation: portmak-tech-signal 4.8s linear infinite; } body.portmak-visual-refresh .portmak-tech-trace--two { animation-delay: -1.3s; } body.portmak-visual-refresh .portmak-tech-trace--three { animation-delay: -2.8s; } body.portmak-visual-refresh .portmak-tech-trace--four { animation-delay: -3.7s; } body.portmak-visual-refresh .portmak-tech-node { fill: #b7f4ff; stroke: #24c7f5; stroke-width: 3; filter: drop-shadow(0 0 6px rgba(93, 223, 255, .9)); transform-box: fill-box; transform-origin: center; will-change: transform, opacity; animation: portmak-tech-node-pulse 2.8s ease-in-out infinite; } body.portmak-visual-refresh .portmak-tech-node--two, body.portmak-visual-refresh .portmak-tech-node--four { animation-delay: -1.2s; } body.portmak-visual-refresh .portmak-tech-node--three { animation-delay: -2.1s; } body.portmak-visual-refresh .portmak-tech-node--five { animation-delay: -1.7s; } @keyframes portmak-tech-halo-breathe { 0%, 100% { opacity: .58; } 50% { opacity: 1; } } @keyframes portmak-tech-orbit-outer { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } } @keyframes portmak-tech-orbit-inner { from { transform: translateY(-50%) rotate(360deg); } to { transform: translateY(-50%) rotate(0deg); } } @keyframes portmak-tech-core-pulse { 0%, 100% { transform: translateY(-50%) scale(1); opacity: .78; } 50% { transform: translateY(-50%) scale(1.42); opacity: 1; } } @keyframes portmak-tech-scan { 0%, 14% { transform: translateX(0); opacity: 0; } 22% { opacity: .9; } 62% { transform: translateX(min(41vw, 530px)); opacity: .9; } 75%, 100% { transform: translateX(min(45vw, 580px)); opacity: 0; } } @keyframes portmak-tech-signal { to { stroke-dashoffset: -138; } } @keyframes portmak-tech-node-pulse { 0%, 100% { transform: scale(1); opacity: .65; } 50% { transform: scale(1.55); opacity: 1; } } body.portmak-visual-refresh .portmak-home-hero__eyebrow, body.portmak-visual-refresh .portmak-home-section-heading > p, body.portmak-visual-refresh .portmak-home-widget-section__intro > p, body.portmak-visual-refresh .portmak-home-process__intro > p, body.portmak-visual-refresh .portmak-home-contact-cta__copy > p { margin: 0 0 12px; color: #7ce0ff; font-size: 11px; font-weight: 800; letter-spacing: .14em; line-height: 1.2; } body.portmak-visual-refresh .portmak-home-hero h1 { margin: 0; max-width: 900px; color: #fff; font-size: clamp(32px, 3.6vw, 46px); font-weight: 750; line-height: 1.08; letter-spacing: -.035em; } body.portmak-visual-refresh .portmak-home-hero__description { margin: 14px 0 0; max-width: 650px; color: #d0e4ee; font-size: clamp(15px, 1.45vw, 17px); line-height: 1.55; } body.portmak-visual-refresh .portmak-home-hero__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 20px; } body.portmak-visual-refresh .portmak-home-hero .portmak-link-button { min-height: 42px; padding-right: 19px; padding-left: 19px; border-color: #19b5ee; background: #19b5ee; box-shadow: 0 12px 24px rgba(0, 14, 24, .23); } body.portmak-visual-refresh .portmak-home-hero .portmak-link-button:hover { border-color: #78ddfb; background: #078fc7; } body.portmak-visual-refresh .portmak-home-hero .portmak-link-button.is-outline { border-color: rgba(255, 255, 255, .58); background: rgba(255, 255, 255, .08); } body.portmak-visual-refresh .portmak-home-hero .portmak-link-button.is-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .17); } body.portmak-visual-refresh .portmak-home-hero__proof { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0; padding: 0; list-style: none; } body.portmak-visual-refresh .portmak-home-hero__proof li { position: relative; padding-left: 18px; color: #d5e9f3; font-size: 12px; font-weight: 600; } body.portmak-visual-refresh .portmak-home-hero__proof li::before { position: absolute; left: 0; top: .42em; width: 8px; height: 8px; border: 2px solid #5ed6fb; border-radius: 50%; content: ""; } body.portmak-visual-refresh .portmak-home-section { position: relative; padding: 68px 0; } body.portmak-visual-refresh .portmak-home-section-heading, body.portmak-visual-refresh .portmak-home-widget-section__intro { max-width: 790px; } body.portmak-visual-refresh .portmak-home-section-heading > p, body.portmak-visual-refresh .portmak-home-widget-section__intro > p { margin-bottom: 9px; color: #137aa5; } body.portmak-visual-refresh .portmak-home-section-heading h2, body.portmak-visual-refresh .portmak-home-widget-section__intro h2 { margin: 0; color: var(--portmak-ink); font-size: clamp(26px, 3.25vw, 38px); line-height: 1.16; letter-spacing: -.028em; } body.portmak-visual-refresh .portmak-home-section-heading__description, body.portmak-visual-refresh .portmak-home-widget-section__intro > span { display: block; margin: 13px 0 0; color: #5b7080; font-size: 16px; line-height: 1.7; } body.portmak-visual-refresh .portmak-home-priority { background: rgba(255, 255, 255, .91); } body.portmak-visual-refresh .portmak-priority-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-top: 30px; } body.portmak-visual-refresh .portmak-priority-card { position: relative; display: flex; flex-direction: column; min-height: 252px; padding: 22px; overflow: hidden; border: 1px solid #d6e7ef; border-radius: 15px; background: linear-gradient(rgba(12, 168, 232, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(12, 168, 232, .045) 1px, transparent 1px), linear-gradient(145deg, #fff, #f7fbfd); background-size: 22px 22px, 22px 22px, auto; box-shadow: 0 12px 28px rgba(8, 34, 57, .07); color: inherit; text-decoration: none !important; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } body.portmak-visual-refresh .portmak-priority-card::after { position: absolute; right: -44px; top: -44px; width: 115px; height: 115px; border: 1px solid rgba(12, 168, 232, .17); border-radius: 50%; box-shadow: 0 0 0 17px rgba(12, 168, 232, .035); content: ""; } body.portmak-visual-refresh .portmak-priority-card:hover { transform: translateY(-5px); border-color: rgba(12, 168, 232, .56); box-shadow: 0 22px 40px rgba(8, 34, 57, .14); } body.portmak-visual-refresh .portmak-priority-card__number { display: inline-flex; align-items: center; justify-content: center; width: 37px; height: 30px; margin-bottom: 19px; border-radius: 8px; background: var(--portmak-navy); color: #7ce0ff; font-size: 11px; font-weight: 800; letter-spacing: .08em; } body.portmak-visual-refresh .portmak-priority-card h3 { position: relative; z-index: 1; margin: 0; color: var(--portmak-ink); font-size: 18px; line-height: 1.32; } body.portmak-visual-refresh .portmak-priority-card p { position: relative; z-index: 1; margin: 10px 0 18px; color: #607485; font-size: 13px; line-height: 1.67; } body.portmak-visual-refresh .portmak-priority-card__link { position: relative; z-index: 1; margin-top: auto; color: #087ba9; font-size: 13px; font-weight: 800; } body.portmak-visual-refresh .portmak-home-text-link { display: inline-flex; gap: 7px; margin-top: 24px; color: #076f9c; font-size: 14px; font-weight: 800; text-decoration: none; } body.portmak-visual-refresh .portmak-home-text-link:hover { color: var(--portmak-navy); } body.portmak-visual-refresh .portmak-home a:focus-visible, body.portmak-visual-refresh .portmak-home details:focus-within { outline: 3px solid rgba(25, 181, 238, .78); outline-offset: 4px; } body.portmak-visual-refresh .portmak-home-widget-section { position: relative; padding: 64px 0 0; scroll-margin-top: 30px; } body.portmak-visual-refresh .portmak-home-widget-section__intro { margin-bottom: 27px; } body.portmak-visual-refresh .portmak-home-widget-section .safirWidget { position: relative; margin-top: 0; } body.portmak-visual-refresh .portmak-home-widget-section__footer { padding-bottom: 64px; } body.portmak-visual-refresh .portmak-home-widget-section__footer .portmak-home-text-link { margin-top: 0; } body.portmak-visual-refresh .portmak-home .safirWidget .widgetHeading .title, body.portmak-visual-refresh .portmak-home .safirWidget h2.widgetTitle, body.portmak-visual-refresh .portmak-home .safirWidget h3.widgetTitle { margin: 0; font: inherit; } body.portmak-visual-refresh .portmak-home-process { margin-top: 0; background: radial-gradient(circle at 88% 5%, rgba(13, 172, 235, .25), transparent 23%), linear-gradient(120deg, #061b2b, #0a354f); color: #d4e6ef; } body.portmak-visual-refresh .portmak-home-process__main { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; } body.portmak-visual-refresh .portmak-home-process__intro > p { color: #7ae0ff; } body.portmak-visual-refresh .portmak-home-process__intro h2 { margin: 0; color: #fff; font-size: clamp(27px, 3.2vw, 40px); line-height: 1.17; letter-spacing: -.028em; } body.portmak-visual-refresh .portmak-home-process__intro > p:last-child { margin: 16px 0 0; color: #c2d8e3; font-size: 16px; line-height: 1.7; } body.portmak-visual-refresh .portmak-home-process__steps { display: grid; gap: 1px; margin: 0; padding: 1px; border: 1px solid rgba(132, 225, 255, .24); border-radius: 16px; background: rgba(132, 225, 255, .17); list-style: none; } body.portmak-visual-refresh .portmak-home-process__steps li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 15px; align-items: start; padding: 20px; background: rgba(4, 27, 44, .68); } body.portmak-visual-refresh .portmak-home-process__steps li:first-child { border-radius: 15px 15px 0 0; } body.portmak-visual-refresh .portmak-home-process__steps li:last-child { border-radius: 0 0 15px 15px; } body.portmak-visual-refresh .portmak-home-process__number { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(126, 224, 255, .52); border-radius: 10px; background: rgba(255, 255, 255, .07); color: #83e2ff; font-size: 11px; font-weight: 800; letter-spacing: .08em; } body.portmak-visual-refresh .portmak-home-process__steps h3 { margin: 1px 0 5px; color: #fff; font-size: 16px; line-height: 1.35; } body.portmak-visual-refresh .portmak-home-process__steps p { margin: 0; color: #c2d8e3; font-size: 13px; line-height: 1.63; } body.portmak-visual-refresh .portmak-home-process__technical { padding-top: 28px; } body.portmak-visual-refresh .portmak-home-process__technical-label { margin: 0 0 12px; color: #7ce0ff; font-size: 11px; font-weight: 800; letter-spacing: .14em; line-height: 1.2; } body.portmak-visual-refresh .portmak-home-process__technical-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } body.portmak-visual-refresh .portmak-home-process__technical-card { padding: 17px 18px; border: 1px solid rgba(132, 225, 255, .22); border-radius: 12px; background: rgba(4, 27, 44, .54); } body.portmak-visual-refresh .portmak-home-process__technical-card > span { display: inline-block; margin-bottom: 13px; color: #83e2ff; font-size: 12px; font-weight: 800; letter-spacing: .1em; } body.portmak-visual-refresh .portmak-home-process__technical-card h3 { margin: 0 0 7px; color: #fff; font-size: 16px; line-height: 1.32; } body.portmak-visual-refresh .portmak-home-process__technical-card p { margin: 0; color: #c2d8e3; font-size: 13px; line-height: 1.6; } body.portmak-visual-refresh .portmak-home-repairs { padding-top: 64px; padding-bottom: 0; background: #f3f9fc; } body.portmak-visual-refresh .portmak-home-repairs .safirWidget, body.portmak-visual-refresh .portmak-home-blog .safirWidget { padding-bottom: 0; } body.portmak-visual-refresh .portmak-home-repairs .safirWidget > .innerContainer > .widgetHeading, body.portmak-visual-refresh .portmak-home-blog .safirWidget > .innerContainer > .widgetHeading { display: none; } body.portmak-visual-refresh .portmak-home-about { position: relative; overflow: hidden; padding-top: 0; background: #fff; } body.portmak-visual-refresh .portmak-home-about .aboutWidget { position: relative; background: transparent; color: #486273; padding-bottom: 0; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .innerContainer { overflow: visible; padding-top: 42px; padding-bottom: 34px; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .aboutContainer { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(330px, .78fr); align-items: start; gap: clamp(34px, 5vw, 62px); margin: 0; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .infoBlock, body.portmak-visual-refresh .portmak-home-about .aboutWidget.showPosts .infoBlock { float: none; width: auto; padding: 0; color: #496474; font-size: 14px; line-height: 1.8; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .widgetHeading { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 0; border: 0; color: #163044; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .widgetHeading::before, body.portmak-visual-refresh .portmak-home-about .aboutWidget .widgetHeading::after { display: none; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .widgetHeading .icon, body.portmak-visual-refresh .portmak-home-about .aboutWidget .widgetHeading .safiricon { color: #087eab; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .widgetHeading .icon svg, body.portmak-visual-refresh .portmak-home-about .aboutWidget .widgetHeading .safiricon svg { width: 18px; height: 18px; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .widgetHeading .text { display: block; flex: 1 1 auto; min-width: 0; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .widgetHeading .title { margin: 0; color: #132e42; font-size: 22px; font-weight: 800; line-height: 1.22; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .description p { margin: 0 0 12px; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .description p:last-child { margin-bottom: 0; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .description p:first-child { color: #38576a; font-size: 15px; font-weight: 500; line-height: 1.76; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock { float: none; width: auto; margin: 0; padding: 19px 20px 17px; border: 1px solid #dcecf2; border-radius: 12px; background: #f8fcfe; box-shadow: 0 12px 28px rgba(11, 55, 78, .045); overflow: visible; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock .widgetHeading { margin: 0 0 8px; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock .widgetHeading .title { font-size: 16px; line-height: 1.35; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock .items { display: grid; gap: 0; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock .item-container, body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock .item { margin: 0; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock .item { display: flex; align-items: center; padding: 10px 0; border: 0; border-top: 1px solid #dbeaf0; border-radius: 0; background: transparent; box-shadow: none; transition: background-color .2s ease; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock .item-container:first-child .item { border-top: 0; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock .item:hover { background: rgba(255, 255, 255, .72); } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock .item .thumb { float: none; flex: 0 0 68px; width: 68px; margin: 0 11px 0 0; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock .item .thumb a { display: block; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock .item .safirthumb { min-height: 56px; padding-bottom: 0; border-radius: 7px; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock .item .detail { flex: 1 1 auto; min-width: 0; height: auto; min-height: 56px; margin: 0; color: #5a7484; font-size: 12px; line-height: 1.42; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock .item .title { margin: 0; font-size: 13px; font-weight: 800; line-height: 1.36; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock .item .title a, body.portmak-visual-refresh .portmak-home-about .aboutWidget.darkBg .postsBlock .item .title a { color: #173247; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock .item .title a:hover { color: #087da9; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock .item .summary { display: none; } body.portmak-visual-refresh .portmak-home-blog { background: radial-gradient(circle at 88% 0, rgba(16, 181, 240, .18), transparent 28%), linear-gradient(124deg, #071b2b, #0b3148); color: #d3e4ec; } body.portmak-visual-refresh .portmak-home-blog .portmak-home-widget-section__intro > p { color: #7ce0ff; } body.portmak-visual-refresh .portmak-home-blog .portmak-home-widget-section__intro h2 { color: #fff; } body.portmak-visual-refresh .portmak-home-blog .advancedPostsWidget2.darkBg { background: transparent; } body.portmak-visual-refresh .portmak-home-blog .advancedPostsWidget2 .widgetHeading .title { color: #fff; } body.portmak-visual-refresh .portmak-home-blog .advancedPostsWidget2 .widgetHeading .allLink { border: 1px solid rgba(139, 226, 255, .28); border-radius: 7px; background: rgba(255, 255, 255, .06); color: #bfeeff; } body.portmak-visual-refresh .portmak-home-blog .advancedPostsWidget2 .item { border-color: rgba(148, 228, 255, .23); background: #fff; box-shadow: 0 12px 27px rgba(0, 12, 23, .2); } body.portmak-visual-refresh .portmak-home-blog .advancedPostsWidget2 .item .title, body.portmak-visual-refresh .portmak-home-blog .advancedPostsWidget2 .item .title a { color: #132739; font-weight: 750; } body.portmak-visual-refresh .portmak-home-blog .advancedPostsWidget2 .item .title a:hover { color: #087aa7; } body.portmak-visual-refresh .portmak-home-blog .advancedPostsWidget2 .item .title::after { background: #d9e8ef; } body.portmak-visual-refresh .portmak-home-blog .advancedPostsWidget2 .item .desc { color: #596f7e; } body.portmak-visual-refresh .portmak-home-blog .advancedPostsWidget2 .list > .item-container:nth-child(n + 4) { display: none; } body.portmak-visual-refresh .portmak-home-faq { background: #fff; } body.portmak-visual-refresh .portmak-faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 29px; } body.portmak-visual-refresh .portmak-faq-list details { padding: 0 20px; border: 1px solid #d9e8ef; border-radius: 13px; background: #fbfdfe; transition: border-color .2s ease, box-shadow .2s ease; } body.portmak-visual-refresh .portmak-faq-list details[open] { border-color: rgba(12, 168, 232, .52); box-shadow: 0 10px 24px rgba(8, 34, 57, .08); } body.portmak-visual-refresh .portmak-faq-list summary { position: relative; padding: 19px 25px 19px 0; cursor: pointer; color: var(--portmak-ink); font-size: 15px; font-weight: 750; line-height: 1.45; list-style: none; } body.portmak-visual-refresh .portmak-faq-list summary::-webkit-details-marker { display: none; } body.portmak-visual-refresh .portmak-faq-list summary::after { position: absolute; right: 0; top: 18px; width: 17px; height: 17px; border: 1px solid #a8d8e9; border-radius: 50%; color: #0a7ea9; content: "+"; font-size: 16px; font-weight: 600; line-height: 15px; text-align: center; } body.portmak-visual-refresh .portmak-faq-list details[open] summary::after { content: "–"; } body.portmak-visual-refresh .portmak-faq-list p { margin: -1px 0 19px; color: #5b7080; font-size: 14px; line-height: 1.7; } body.portmak-visual-refresh .portmak-home-contact-cta { position: relative; overflow: hidden; padding: 54px 0; background: radial-gradient(circle at 88% 0, rgba(19, 184, 241, .3), transparent 25%), linear-gradient(115deg, #061827, #0b3753); color: #d6e8f0; } body.portmak-visual-refresh .portmak-home-contact-cta::after { position: absolute; right: 4%; top: -95px; width: 275px; height: 275px; border: 1px solid rgba(129, 226, 255, .2); border-radius: 50%; box-shadow: 0 0 0 38px rgba(129, 226, 255, .04), 0 0 0 76px rgba(129, 226, 255, .025); content: ""; } body.portmak-visual-refresh .portmak-home-contact-cta .innerContainer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 30px; } body.portmak-visual-refresh .portmak-home-contact-cta__copy { max-width: 750px; } body.portmak-visual-refresh .portmak-home-contact-cta__copy h2 { margin: 0; color: #fff; font-size: clamp(26px, 3.2vw, 39px); line-height: 1.16; letter-spacing: -.025em; } body.portmak-visual-refresh .portmak-home-contact-cta__copy > span { display: block; margin-top: 13px; color: #c4dbe6; font-size: 15px; line-height: 1.7; } body.portmak-visual-refresh .portmak-home-contact-cta__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 10px; } body.portmak-visual-refresh .portmak-home-contact-cta .portmak-link-button { min-height: 44px; padding-right: 18px; padding-left: 18px; } body.portmak-visual-refresh .portmak-home-contact-cta .portmak-link-button.is-outline { border-color: rgba(255, 255, 255, .56); background: rgba(255, 255, 255, .07); } body.portmak-visual-refresh .portmak-home-contact-cta .portmak-link-button.is-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .15); } @media (max-width: 1080px) { body.portmak-visual-refresh .portmak-priority-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.portmak-visual-refresh .portmak-home-process__main { gap: 32px; } } @media (max-width: 780px) { body.portmak-visual-refresh .portmak-home-stage, body.portmak-visual-refresh .portmak-home-hero { min-height: 0 !important; } body.portmak-visual-refresh .portmak-home-hero__tech { left: 52%; opacity: .48; } body.portmak-visual-refresh .portmak-tech-orbit--outer { right: -20%; width: 74vw; } body.portmak-visual-refresh .portmak-tech-orbit--inner { right: 7%; width: 39vw; } body.portmak-visual-refresh .portmak-tech-core { right: 29%; } body.portmak-visual-refresh .portmak-tech-circuit { right: -88%; width: 148vw; } body.portmak-visual-refresh .portmak-tech-scan { display: none; } body.portmak-visual-refresh .portmak-home-stage::after { background: linear-gradient(180deg, rgba(3, 20, 35, .83), rgba(3, 20, 35, .89)), linear-gradient(rgba(99, 218, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 218, 255, .06) 1px, transparent 1px); background-size: auto, 28px 28px, 28px 28px; } body.portmak-visual-refresh .portmak-home-hero { padding: 42px 0 44px; } body.portmak-visual-refresh .portmak-home-hero h1 { font-size: clamp(30px, 8.5vw, 38px); } body.portmak-visual-refresh .portmak-home-hero__proof { gap: 10px; } body.portmak-visual-refresh .portmak-home-hero__proof li { width: 100%; } body.portmak-visual-refresh .portmak-home-section, body.portmak-visual-refresh .portmak-home-widget-section { padding-top: 46px; padding-bottom: 46px; } body.portmak-visual-refresh .portmak-home-about { padding-top: 0; } body.portmak-visual-refresh .portmak-home-repairs { padding-top: 46px; padding-bottom: 0; } body.portmak-visual-refresh .portmak-priority-grid, body.portmak-visual-refresh .portmak-home-process__technical-grid, body.portmak-visual-refresh .portmak-faq-list { grid-template-columns: 1fr; } body.portmak-visual-refresh .portmak-priority-card { min-height: 0; } body.portmak-visual-refresh .portmak-home-process__main { grid-template-columns: 1fr; } body.portmak-visual-refresh .portmak-home-process__steps li { padding: 17px; } body.portmak-visual-refresh .portmak-home-about .aboutWidget, body.portmak-visual-refresh .portmak-home-blog .safirWidget { padding-bottom: 0; } body.portmak-visual-refresh .portmak-home-blog { padding-bottom: 0; } body.portmak-visual-refresh .portmak-home-widget-section__footer { padding-bottom: 46px; } body.portmak-visual-refresh .portmak-home-contact-cta { padding: 42px 0; } body.portmak-visual-refresh .portmak-home-contact-cta .innerContainer { align-items: stretch; flex-direction: column; } body.portmak-visual-refresh .portmak-home-contact-cta__actions .portmak-link-button, body.portmak-visual-refresh .portmak-home-hero__actions .portmak-link-button { flex: 1 1 100%; } } /* -------------------------------------------------------------------------- Update-safe page templates: contact, team, references and landing pages. These classes exist only in edits/templates and do not alter SiteOrigin rows. -------------------------------------------------------------------------- */ body.portmak-visual-refresh .portmak-template-shell { position: relative; z-index: 5; } body.portmak-visual-refresh .portmak-page-hero { position: relative; overflow: hidden; margin-bottom: 28px; padding: clamp(30px, 5vw, 58px); border: 1px solid rgba(108, 216, 255, .24); border-radius: 22px; background: radial-gradient(circle at 87% 12%, rgba(12, 168, 232, .32), transparent 23%), radial-gradient(circle at 102% 92%, rgba(255, 122, 24, .20), transparent 29%), linear-gradient(122deg, #06192a 0%, #0a2e49 54%, #123d58 100%); box-shadow: 0 24px 48px rgba(5, 25, 42, .20); color: #dbeef7; } body.portmak-visual-refresh .portmak-page-hero::before { position: absolute; top: -35%; right: -5%; width: min(44vw, 490px); aspect-ratio: 1; border: 1px solid rgba(124, 224, 255, .21); border-radius: 50%; box-shadow: 0 0 0 42px rgba(124, 224, 255, .04), 0 0 0 84px rgba(124, 224, 255, .03); content: ""; } body.portmak-visual-refresh .portmak-page-hero::after { position: absolute; inset: 0; opacity: .25; pointer-events: none; background-image: linear-gradient(rgba(159, 230, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(159, 230, 255, .12) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(90deg, #000, transparent 84%); content: ""; } body.portmak-visual-refresh .portmak-page-hero__content, body.portmak-visual-refresh .portmak-page-hero__breadcrumbs { position: relative; z-index: 1; } body.portmak-visual-refresh .portmak-page-hero__content { max-width: 850px; } body.portmak-visual-refresh .portmak-page-hero__eyebrow, body.portmak-visual-refresh .portmak-section-heading > p, body.portmak-visual-refresh .portmak-contact-process__eyebrow { margin: 0 0 10px; color: #79dcff; font-size: 11px; font-weight: 800; letter-spacing: .13em; line-height: 1.2; } body.portmak-visual-refresh .portmak-page-hero h1 { margin: 0; max-width: 760px; color: #fff; font-size: clamp(30px, 4.3vw, 52px); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; } body.portmak-visual-refresh .portmak-page-hero__description { margin: 18px 0 0; max-width: 720px; color: #c6dce8; font-size: clamp(15px, 1.8vw, 18px); line-height: 1.7; } body.portmak-visual-refresh .portmak-page-hero__breadcrumbs { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .15); } body.portmak-visual-refresh .portmak-page-hero #crumbs, body.portmak-visual-refresh .portmak-page-hero #crumbs a { color: #a9c4d2; } body.portmak-visual-refresh .portmak-page-hero #crumbs a:hover { color: #fff; } body.portmak-visual-refresh .portmak-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } body.portmak-visual-refresh .portmak-page-hero .portmak-link-button { min-height: 42px; border-color: #19b5ee; background: #19b5ee; box-shadow: 0 8px 20px rgba(4, 17, 30, .18); } body.portmak-visual-refresh .portmak-page-hero .portmak-link-button:hover { border-color: #69d7fb; background: #0795cf; } body.portmak-visual-refresh .portmak-page-hero .portmak-link-button.is-outline { border-color: rgba(255, 255, 255, .58); background: rgba(255, 255, 255, .08); } body.portmak-visual-refresh .portmak-page-hero .portmak-link-button.is-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .16); } body.portmak-visual-refresh .portmak-section-heading { margin-bottom: 22px; } body.portmak-visual-refresh .portmak-section-heading > p { margin-bottom: 8px; color: #147ca5; } body.portmak-visual-refresh .portmak-section-heading h2 { margin: 0; max-width: 760px; color: var(--portmak-ink); font-size: clamp(24px, 3vw, 34px); line-height: 1.2; letter-spacing: -.022em; } /* Contact page. */ body.portmak-visual-refresh .portmak-contact-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .8fr); gap: 24px; margin-bottom: 26px; } body.portmak-visual-refresh .portmak-contact-details, body.portmak-visual-refresh .portmak-contact-process, body.portmak-visual-refresh .portmak-contact-editorial, body.portmak-visual-refresh .portmak-contact-form, body.portmak-visual-refresh .portmak-team-values, body.portmak-visual-refresh .portmak-team-editorial, body.portmak-visual-refresh .portmak-reference-intro, body.portmak-visual-refresh .portmak-reference-editorial, body.portmak-visual-refresh .portmak-full-page__content { border: 1px solid var(--portmak-line); border-radius: 18px; background: #fff; box-shadow: 0 14px 34px rgba(8, 34, 57, .07); } body.portmak-visual-refresh .portmak-contact-details, body.portmak-visual-refresh .portmak-contact-process, body.portmak-visual-refresh .portmak-team-values, body.portmak-visual-refresh .portmak-reference-intro { padding: clamp(23px, 3vw, 34px); } body.portmak-visual-refresh .portmak-contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } body.portmak-visual-refresh .portmak-contact-card { display: flex; align-items: flex-start; gap: 13px; min-height: 110px; padding: 16px; border: 1px solid #d9e9f1; border-radius: 14px; background: linear-gradient(135deg, #fff, #f7fbfd); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } body.portmak-visual-refresh .portmak-contact-card:hover { transform: translateY(-2px); border-color: rgba(12, 168, 232, .55); box-shadow: 0 12px 22px rgba(8, 34, 57, .09); } body.portmak-visual-refresh .portmak-contact-card__icon { display: inline-flex; flex: 0 0 42px; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--portmak-blue-soft); color: #097faf; } body.portmak-visual-refresh .portmak-contact-card__icon .icon, body.portmak-visual-refresh .portmak-contact-card__icon svg { width: 20px; height: 20px; } body.portmak-visual-refresh .portmak-contact-card__copy { min-width: 0; color: #536a7b; font-size: 13px; line-height: 1.6; } body.portmak-visual-refresh .portmak-contact-card__copy h3 { margin: 0 0 4px; color: var(--portmak-ink); font-size: 14px; line-height: 1.35; } body.portmak-visual-refresh .portmak-contact-card__copy a { color: #116e94; font-weight: 700; word-break: break-word; } body.portmak-visual-refresh .portmak-contact-card__copy a:hover { color: var(--portmak-navy); } body.portmak-visual-refresh .portmak-contact-social .safirSocial { gap: 7px; margin-top: 8px; } body.portmak-visual-refresh .portmak-contact-social .safirSocial a { display: flex; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 8px; background: #e9f6fb; color: #19779e; } body.portmak-visual-refresh .portmak-contact-process { position: relative; overflow: hidden; border-color: #a5d8eb; background: radial-gradient(circle at 100% 0, rgba(12, 168, 232, .17), transparent 38%), linear-gradient(145deg, #08263d, #0b3855); color: #d3e8f3; } body.portmak-visual-refresh .portmak-contact-process::after { position: absolute; right: -42px; bottom: -46px; width: 170px; height: 170px; border: 1px solid rgba(139, 224, 255, .21); border-radius: 50%; box-shadow: 0 0 0 28px rgba(139, 224, 255, .045); content: ""; } body.portmak-visual-refresh .portmak-contact-process > * { position: relative; z-index: 1; } body.portmak-visual-refresh .portmak-contact-process__eyebrow { color: #70d8fb; } body.portmak-visual-refresh .portmak-contact-process h2 { margin: 0 0 22px; color: #fff; font-size: 24px; line-height: 1.2; } body.portmak-visual-refresh .portmak-step-list { display: grid; gap: 17px; margin: 0; padding: 0; list-style: none; } body.portmak-visual-refresh .portmak-step-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; } body.portmak-visual-refresh .portmak-step-list li > span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(132, 225, 255, .37); border-radius: 9px; background: rgba(255, 255, 255, .06); color: #7ce0ff; font-size: 10px; font-weight: 800; } body.portmak-visual-refresh .portmak-step-list strong { display: block; margin-bottom: 2px; color: #fff; font-size: 14px; } body.portmak-visual-refresh .portmak-step-list p { margin: 0; font-size: 12px; line-height: 1.55; } body.portmak-visual-refresh .portmak-contact-editorial, body.portmak-visual-refresh .portmak-team-editorial, body.portmak-visual-refresh .portmak-reference-editorial, body.portmak-visual-refresh .portmak-full-page__content, body.portmak-visual-refresh .portmak-contact-form { margin-top: 26px; padding: clamp(23px, 3vw, 38px); } body.portmak-visual-refresh .portmak-contact-form { background: radial-gradient(circle at 96% 0, rgba(12, 168, 232, .13), transparent 30%), #fff; } /* Team page and its gallery. */ body.portmak-visual-refresh .portmak-value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } body.portmak-visual-refresh .portmak-value-card { min-height: 170px; padding: 19px; border: 1px solid #d9e9f1; border-radius: 14px; background: linear-gradient(145deg, #fafdff, #edf8fc); } body.portmak-visual-refresh .portmak-value-card > span { display: inline-block; margin-bottom: 17px; color: #187ba3; font-size: 11px; font-weight: 800; letter-spacing: .1em; } body.portmak-visual-refresh .portmak-value-card h3 { margin: 0 0 7px; color: var(--portmak-ink); font-size: 18px; } body.portmak-visual-refresh .portmak-value-card p { margin: 0; color: #5c7282; font-size: 13px; line-height: 1.65; } body.portmak-visual-refresh .portmak-crew-gallery { margin: 34px 0 2px; } body.portmak-visual-refresh .portmak-crew-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } body.portmak-visual-refresh .portmak-crew-card { overflow: hidden; border: 1px solid var(--portmak-line); border-radius: 16px; background: #fff; box-shadow: 0 12px 28px rgba(8, 34, 57, .07); transition: transform .24s ease, box-shadow .24s ease; } body.portmak-visual-refresh .portmak-crew-card:hover { transform: translateY(-4px); box-shadow: 0 20px 38px rgba(8, 34, 57, .14); } body.portmak-visual-refresh .portmak-crew-card__media { position: relative; margin: 0; overflow: hidden; aspect-ratio: 1 / .93; background: #eaf4f8; } body.portmak-visual-refresh .portmak-crew-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } body.portmak-visual-refresh .portmak-crew-card:hover .portmak-crew-card__media img { transform: scale(1.045); } body.portmak-visual-refresh .portmak-crew-card__body { min-height: 108px; padding: 17px 18px; background: linear-gradient(135deg, #fff, #f5fbfd); } body.portmak-visual-refresh .portmak-crew-card__body h3 { margin: 0; color: var(--portmak-ink); font-size: 17px; line-height: 1.3; } body.portmak-visual-refresh .portmak-crew-card__body > p { margin: 4px 0 0; color: #5c7787; font-size: 13px; } body.portmak-visual-refresh .portmak-crew-card__social { display: flex; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; } body.portmak-visual-refresh .portmak-crew-card__social a { display: flex; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 8px; background: #e9f6fb; color: #1a759a; } body.portmak-visual-refresh .portmak-crew-card__social svg { width: 14px; height: 14px; } /* References page and its click-to-enlarge service cards. */ body.portmak-visual-refresh .portmak-reference-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } body.portmak-visual-refresh .portmak-reference-flow > div { position: relative; padding: 18px 18px 18px 49px; border-left: 3px solid #20aee4; border-radius: 0 12px 12px 0; background: #f5fbfe; } body.portmak-visual-refresh .portmak-reference-flow span { position: absolute; left: 13px; top: 18px; color: #157da4; font-size: 10px; font-weight: 800; } body.portmak-visual-refresh .portmak-reference-flow strong { display: block; margin-bottom: 5px; color: var(--portmak-ink); font-size: 15px; } body.portmak-visual-refresh .portmak-reference-flow p { margin: 0; color: #627989; font-size: 13px; line-height: 1.6; } body.portmak-visual-refresh .portmak-reference-gallery { margin: 34px 0 2px; } body.portmak-visual-refresh .portmak-reference-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } body.portmak-visual-refresh .portmak-reference-card { overflow: hidden; border: 1px solid var(--portmak-line); border-radius: 16px; background: #fff; box-shadow: 0 12px 28px rgba(8, 34, 57, .07); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; } body.portmak-visual-refresh .portmak-reference-card:hover { transform: translateY(-4px); border-color: rgba(12, 168, 232, .52); box-shadow: 0 20px 38px rgba(8, 34, 57, .15); } body.portmak-visual-refresh .portmak-reference-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 1.18 / 1; background: linear-gradient(140deg, #eaf5f9, #dceef5); color: #fff; } body.portmak-visual-refresh .portmak-reference-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .36s ease, filter .25s ease; } body.portmak-visual-refresh .portmak-reference-card__media::after { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, transparent, rgba(4, 25, 40, .76)); transition: opacity .25s ease; content: ""; } body.portmak-visual-refresh .portmak-reference-card__media > span { position: absolute; left: 16px; bottom: 14px; z-index: 1; opacity: 0; transform: translateY(6px); padding: 7px 10px; border-radius: 8px; background: rgba(255, 255, 255, .95); color: var(--portmak-navy); font-size: 11px; font-weight: 800; transition: opacity .25s ease, transform .25s ease; } body.portmak-visual-refresh .portmak-reference-card:hover .portmak-reference-card__media img { transform: scale(1.05); filter: saturate(1.08); } body.portmak-visual-refresh .portmak-reference-card:hover .portmak-reference-card__media::after, body.portmak-visual-refresh .portmak-reference-card:hover .portmak-reference-card__media > span { opacity: 1; } body.portmak-visual-refresh .portmak-reference-card:hover .portmak-reference-card__media > span { transform: translateY(0); } body.portmak-visual-refresh .portmak-reference-card__body { min-height: 150px; padding: 18px; } body.portmak-visual-refresh .portmak-reference-card__body > p { margin: 0 0 8px; color: #1d7ca2; font-size: 10px; font-weight: 800; letter-spacing: .095em; } body.portmak-visual-refresh .portmak-reference-card__body h3 { margin: 0; color: var(--portmak-ink); font-size: 17px; line-height: 1.34; } body.portmak-visual-refresh .portmak-reference-card__body > div { margin-top: 8px; color: #647a89; font-size: 13px; line-height: 1.6; } /* Full and blank templates retain flexible SiteOrigin content areas. */ body.portmak-visual-refresh .portmak-full-page__content > :first-child, body.portmak-visual-refresh .portmak-contact-editorial > :first-child, body.portmak-visual-refresh .portmak-team-editorial > :first-child, body.portmak-visual-refresh .portmak-reference-editorial > :first-child { margin-top: 0; } body.portmak-visual-refresh .portmak-blank-page { width: 100%; max-width: none; margin: 0 !important; padding: 0 !important; } body.portmak-visual-refresh .portmak-blank-page__content { overflow: hidden; background: #fff; } body.portmak-visual-refresh .portmak-blank-page__title { margin: 0; padding: clamp(28px, 5vw, 62px) max(20px, calc((100vw - 1180px) / 2)); background: linear-gradient(120deg, #071a2c, #0b3855); color: #fff; font-size: clamp(30px, 4vw, 52px); line-height: 1.1; letter-spacing: -.03em; } @media (max-width: 980px) { body.portmak-visual-refresh .portmak-contact-layout { grid-template-columns: 1fr; } body.portmak-visual-refresh .portmak-value-grid, body.portmak-visual-refresh .portmak-reference-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.portmak-visual-refresh .portmak-crew-gallery__grid, body.portmak-visual-refresh .portmak-reference-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { body.portmak-visual-refresh .portmak-page-hero { margin-right: -5px; margin-left: -5px; padding: 30px 22px; border-radius: 16px; } body.portmak-visual-refresh .portmak-page-hero h1 { font-size: 31px; } body.portmak-visual-refresh .portmak-contact-details, body.portmak-visual-refresh .portmak-contact-process, body.portmak-visual-refresh .portmak-team-values, body.portmak-visual-refresh .portmak-reference-intro, body.portmak-visual-refresh .portmak-contact-editorial, body.portmak-visual-refresh .portmak-team-editorial, body.portmak-visual-refresh .portmak-reference-editorial, body.portmak-visual-refresh .portmak-full-page__content, body.portmak-visual-refresh .portmak-contact-form { padding: 21px 18px; border-radius: 14px; } body.portmak-visual-refresh .portmak-contact-cards, body.portmak-visual-refresh .portmak-value-grid, body.portmak-visual-refresh .portmak-reference-flow, body.portmak-visual-refresh .portmak-crew-gallery__grid, body.portmak-visual-refresh .portmak-reference-gallery__grid { grid-template-columns: 1fr; } body.portmak-visual-refresh .portmak-contact-card { min-height: 0; } body.portmak-visual-refresh .portmak-value-card { min-height: 0; } body.portmak-visual-refresh .portmak-hero-actions .portmak-link-button { flex: 1 1 190px; } body.portmak-visual-refresh .portmak-reference-card__media > span { opacity: 1; transform: none; } body.portmak-visual-refresh .portmak-reference-card__media::after { opacity: .42; } } @media (prefers-reduced-motion: reduce) { body.portmak-visual-refresh .portmak-home-stage::before, body.portmak-visual-refresh .portmak-tech-orbit, body.portmak-visual-refresh .portmak-tech-core, body.portmak-visual-refresh .portmak-tech-scan, body.portmak-visual-refresh .portmak-tech-trace, body.portmak-visual-refresh .portmak-tech-node { animation: none !important; } body.portmak-visual-refresh .portmak-tech-scan { display: none; } } @media (max-width: 1000px) { body.portmak-visual-refresh #footer .columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.portmak-visual-refresh #footer .column.contact { grid-column: 1 / -1; padding-top: 28px; padding-left: 0; border-top: 1px solid rgba(148, 228, 255, .16); border-left: 0; } } @media (max-width: 700px) { body.portmak-visual-refresh #callUs { padding: 22px 0; } body.portmak-visual-refresh #callUs .innerContainer { align-items: flex-start; flex-wrap: wrap; } body.portmak-visual-refresh #callUs .text { flex: 1 1 calc(100% - 59px); font-size: 14px; } body.portmak-visual-refresh #callUs .phone { width: 100%; margin-left: 0; padding-left: 59px; font-size: 25px; } body.portmak-visual-refresh #footerInner { padding: 40px 0 30px; } body.portmak-visual-refresh #footer .columns { grid-template-columns: 1fr; gap: 28px; } body.portmak-visual-refresh #footer .column.menu, body.portmak-visual-refresh #footer .column.contact { grid-column: auto; padding-top: 28px; padding-left: 0; border-top: 1px solid rgba(148, 228, 255, .16); border-left: 0; } body.portmak-visual-refresh #footer .column.menu nav > ul { grid-template-columns: 1fr; } body.portmak-visual-refresh #footer #footerBottom .innerContainer { min-height: 62px; } } @media (max-width: 900px) { body.portmak-visual-refresh .portmak-home-about .aboutWidget .aboutContainer { grid-template-columns: 1fr; gap: 25px; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock { padding: 18px 20px 16px; border: 1px solid #dcecf2; } } @media (max-width: 700px) { body.portmak-visual-refresh .portmak-home-about .aboutWidget .innerContainer { padding-right: 16px; padding-left: 16px; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .widgetHeading { margin-bottom: 16px; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock { padding: 16px; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock .item .thumb { flex-basis: 62px; width: 62px; margin-right: 10px; } body.portmak-visual-refresh .portmak-home-about .aboutWidget .postsBlock .item .safirthumb { min-height: 52px; padding-bottom: 0; } } /* AC motor drive service page: focused content hierarchy and technical visual system. */ body.portmak-ac-vfd-page .safirBox { overflow: hidden; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; margin: -36px -36px 38px; padding: clamp(34px, 5vw, 62px) clamp(28px, 5vw, 58px) 26px; overflow: hidden; background: radial-gradient(circle at 83% 16%, rgba(33, 190, 241, .26), transparent 22%), radial-gradient(circle at 95% 88%, rgba(7, 87, 133, .54), transparent 34%), linear-gradient(124deg, #051925 0%, #082d45 56%, #0b4566 100%); color: #edf9ff; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(108, 223, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(108, 223, 255, .06) 1px, transparent 1px); background-size: 34px 34px; content: ""; pointer-events: none; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero::after { position: absolute; right: -88px; top: -100px; width: 320px; height: 320px; border: 1px solid rgba(140, 235, 255, .20); border-radius: 50%; box-shadow: 0 0 0 38px rgba(140, 235, 255, .035), 0 0 0 76px rgba(140, 235, 255, .025); content: ""; pointer-events: none; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero__content, body.portmak-ac-vfd-page .portmak-ac-vfd-hero__actions, body.portmak-ac-vfd-page .portmak-ac-vfd-hero__breadcrumbs { position: relative; z-index: 1; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero__eyebrow, body.portmak-ac-vfd-page .portmak-section-kicker { margin: 0 0 10px !important; color: #64d8fb !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .12em; line-height: 1.3 !important; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero h1 { max-width: 780px; margin: 0; color: #fff; font-size: clamp(33px, 4.5vw, 57px); line-height: 1.05; letter-spacing: -.045em; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero__lead { max-width: 715px; margin: 17px 0 0 !important; color: #d5e9f3 !important; font-size: 17px !important; line-height: 1.72 !important; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero__facts { display: flex; flex-wrap: wrap; gap: 9px 20px; margin: 22px 0 0; padding: 0; list-style: none; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero__facts li { position: relative; padding-left: 16px; color: #e1f4fb; font-size: 13px; font-weight: 650; line-height: 1.45; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero__facts li::before { position: absolute; left: 0; top: .46em; width: 6px; height: 6px; border: 2px solid #52d6fb; border-radius: 50%; content: ""; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero__actions { display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; gap: 9px; padding-top: 5px; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero__actions .portmak-link-button { min-height: 43px; white-space: nowrap; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero__actions .portmak-link-button.is-outline, body.portmak-ac-vfd-page .portmak-ac-vfd-contact .portmak-link-button.is-outline { border-color: rgba(255, 255, 255, .52); background: rgba(2, 23, 38, .20); color: #fff !important; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero__breadcrumbs { grid-column: 1 / -1; margin-top: 8px; padding-top: 15px; border-top: 1px solid rgba(168, 234, 255, .18); color: #b9d5e1; font-size: 12px; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero__breadcrumbs a { color: #cdeaf5; } /* AC motor service title area: lightweight, inline signal animation. */ body.portmak-ac-vfd-page .portmak-page-hero--ac-motor { display: grid; grid-template-areas: "content visual" "breadcrumbs breadcrumbs"; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); align-items: center; column-gap: clamp(20px, 3vw, 46px); min-height: 364px; } body.portmak-ac-vfd-page .portmak-page-hero--ac-motor .portmak-page-hero__content { grid-area: content; max-width: 650px; } body.portmak-ac-vfd-page .portmak-page-hero--ac-motor .portmak-page-hero__breadcrumbs { grid-area: breadcrumbs; position: relative; z-index: 2; } body.portmak-ac-vfd-page .portmak-ac-signal-visual { position: relative; grid-area: visual; align-self: stretch; display: grid; min-width: 0; place-items: center; overflow: hidden; border: 1px solid rgba(112, 225, 255, .25); border-radius: 18px; background: radial-gradient(circle at 18% 48%, rgba(45, 205, 255, .16), transparent 21%), radial-gradient(circle at 84% 43%, rgba(84, 218, 255, .16), transparent 23%), linear-gradient(135deg, rgba(2, 28, 45, .86), rgba(12, 65, 91, .66)); box-shadow: inset 0 0 34px rgba(73, 207, 255, .06), 0 16px 30px rgba(0, 8, 18, .18); } body.portmak-ac-vfd-page .portmak-ac-signal-visual::before, body.portmak-ac-vfd-page .portmak-ac-signal-visual::after { position: absolute; content: ""; pointer-events: none; } body.portmak-ac-vfd-page .portmak-ac-signal-visual::before { inset: 0; opacity: .38; background-image: linear-gradient(rgba(138, 236, 255, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(138, 236, 255, .10) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent); } body.portmak-ac-vfd-page .portmak-ac-signal-visual::after { width: 150px; height: 150px; border: 1px solid rgba(118, 227, 255, .18); border-radius: 50%; box-shadow: 0 0 0 28px rgba(118, 227, 255, .035), 0 0 0 56px rgba(118, 227, 255, .02); right: -52px; bottom: -72px; } body.portmak-ac-vfd-page .portmak-ac-signal-visual svg { position: relative; z-index: 1; display: block; width: 100%; max-width: 600px; height: auto; overflow: visible; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__guide { stroke: rgba(137, 231, 255, .15); stroke-dasharray: 4 8; stroke-width: 1; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__connector, body.portmak-ac-vfd-page .portmak-ac-signal-visual__shaft { stroke: #73e4ff; stroke-linecap: round; stroke-width: 5; filter: url(#portmak-ac-signal-glow); } body.portmak-ac-vfd-page .portmak-ac-signal-visual__chassis, body.portmak-ac-vfd-page .portmak-ac-signal-visual__motor-body { fill: url(#portmak-ac-signal-metal); stroke: rgba(137, 234, 255, .82); stroke-width: 2; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__display { fill: rgba(4, 26, 43, .9); stroke: #43d2ff; stroke-width: 2; box-shadow: 0 0 18px rgba(54, 204, 255, .32); } body.portmak-ac-vfd-page .portmak-ac-signal-visual__mini-wave, body.portmak-ac-vfd-page .portmak-ac-signal-visual__motor-lines { fill: none; stroke: #65dcff; stroke-linecap: round; stroke-width: 2.5; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__led { fill: #78ecff; filter: url(#portmak-ac-signal-glow); animation: portmak-ac-signal-led 1.4s ease-in-out infinite; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__led--delay { animation-delay: .38s; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__led--slow { animation-delay: .76s; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__fan-ring, body.portmak-ac-vfd-page .portmak-ac-signal-visual__rotor-ring { fill: rgba(4, 31, 48, .64); stroke: rgba(128, 232, 255, .75); stroke-width: 2; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__fan path, body.portmak-ac-vfd-page .portmak-ac-signal-visual__rotor path { fill: #4bd3f9; stroke: rgba(221, 253, 255, .74); stroke-width: 1; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__fan circle, body.portmak-ac-vfd-page .portmak-ac-signal-visual__rotor circle { fill: #e1fbff; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__fan { transform-box: fill-box; transform-origin: center; animation: portmak-ac-signal-rotor 7s linear infinite reverse; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__rotor { transform-box: fill-box; transform-origin: center; animation: portmak-ac-signal-rotor 4s linear infinite; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__terminals rect { fill: #0a3148; stroke: #69dfff; stroke-width: 1.5; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__wave-shadow, body.portmak-ac-vfd-page .portmak-ac-signal-visual__wave-track, body.portmak-ac-vfd-page .portmak-ac-signal-visual__wave-flow { fill: none; stroke-linecap: round; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__wave-shadow { stroke: rgba(69, 208, 255, .24); stroke-width: 12; filter: url(#portmak-ac-signal-glow); } body.portmak-ac-vfd-page .portmak-ac-signal-visual__wave-track { stroke: rgba(142, 241, 255, .55); stroke-width: 3; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__wave-flow { stroke: url(#portmak-ac-signal-wave); stroke-dasharray: 12 20; stroke-width: 5; filter: url(#portmak-ac-signal-glow); animation: portmak-ac-signal-flow 1.6s linear infinite; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__node { fill: #e8fdff; filter: url(#portmak-ac-signal-glow); transform-box: fill-box; transform-origin: center; animation: portmak-ac-signal-node 1.8s ease-in-out infinite; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__node--2 { animation-delay: .24s; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__node--3 { animation-delay: .48s; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__node--4 { animation-delay: .72s; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__node--5 { animation-delay: .96s; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__motor-base { fill: #0c2d43; stroke: rgba(122, 226, 255, .6); stroke-width: 2; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__label, body.portmak-ac-vfd-page .portmak-ac-signal-visual__signal-copy { fill: #cef5ff; font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: .14em; } body.portmak-ac-vfd-page .portmak-ac-signal-visual__signal-copy { fill: #64ddff; font-size: 10px; } @keyframes portmak-ac-signal-flow { to { stroke-dashoffset: -64; } } @keyframes portmak-ac-signal-node { 0%, 100% { opacity: .25; transform: scale(.62); } 48% { opacity: 1; transform: scale(1.3); } } @keyframes portmak-ac-signal-led { 0%, 100% { opacity: .34; } 50% { opacity: 1; } } @keyframes portmak-ac-signal-rotor { to { transform: rotate(360deg); } } @media (max-width: 880px) { body.portmak-ac-vfd-page .portmak-page-hero--ac-motor { grid-template-areas: "content" "visual" "breadcrumbs"; grid-template-columns: minmax(0, 1fr); min-height: 0; } body.portmak-ac-vfd-page .portmak-ac-signal-visual { width: min(100%, 580px); min-height: 218px; margin: 20px auto 0; } } @media (max-width: 500px) { body.portmak-ac-vfd-page .portmak-page-hero--ac-motor { padding: 28px 20px; } body.portmak-ac-vfd-page .portmak-ac-signal-visual { min-height: 168px; border-radius: 14px; } } @media (prefers-reduced-motion: reduce) { body.portmak-ac-vfd-page .portmak-ac-signal-visual *, body.portmak-ac-vfd-page .portmak-ac-signal-visual::before, body.portmak-ac-vfd-page .portmak-ac-signal-visual::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } body.portmak-ac-vfd-page .reading > .portmak-ac-vfd-overview, body.portmak-ac-vfd-page .reading > .portmak-ac-vfd-section, body.portmak-ac-vfd-page .reading > .portmak-ac-vfd-process, body.portmak-ac-vfd-page .reading > .portmak-ac-vfd-brands, body.portmak-ac-vfd-page .reading > .portmak-ac-vfd-faq, body.portmak-ac-vfd-page .reading > .portmak-ac-vfd-contact, body.portmak-ac-vfd-page .reading > .portmak-ac-vfd-references { margin: 0 0 52px; } body.portmak-ac-vfd-page .reading .portmak-ac-vfd-overview h2, body.portmak-ac-vfd-page .reading .portmak-ac-vfd-section h2, body.portmak-ac-vfd-page .reading .portmak-ac-vfd-process h2, body.portmak-ac-vfd-page .reading .portmak-ac-vfd-brands h2, body.portmak-ac-vfd-page .reading .portmak-ac-vfd-faq h2, body.portmak-ac-vfd-page .reading .portmak-ac-vfd-contact h2, body.portmak-ac-vfd-page .reading .portmak-ac-vfd-references > h2 { margin: 0; padding: 0; border: 0; color: var(--portmak-ink); font-size: clamp(24px, 3vw, 34px); line-height: 1.18; letter-spacing: -.025em; } body.portmak-ac-vfd-page .reading .portmak-ac-vfd-overview p, body.portmak-ac-vfd-page .reading .portmak-ac-vfd-section p, body.portmak-ac-vfd-page .reading .portmak-ac-vfd-process p, body.portmak-ac-vfd-page .reading .portmak-ac-vfd-brands p, body.portmak-ac-vfd-page .reading .portmak-ac-vfd-faq p, body.portmak-ac-vfd-page .reading .portmak-ac-vfd-contact p { font-size: 16px; line-height: 1.78; } body.portmak-ac-vfd-page .portmak-ac-vfd-overview { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(255px, .72fr); gap: clamp(24px, 4vw, 58px); align-items: start; } body.portmak-ac-vfd-page .portmak-ac-vfd-overview__copy > h2 + p { margin-top: 18px; } body.portmak-ac-vfd-page .portmak-ac-vfd-overview__copy p + p { margin-top: 12px; } body.portmak-ac-vfd-page .portmak-ac-vfd-quick { position: relative; padding: 24px; overflow: hidden; border: 1px solid #c4e6f3; border-radius: 16px; background: linear-gradient(145deg, #f4fcff, #e5f5fb); box-shadow: 0 14px 30px rgba(8, 34, 57, .08); } body.portmak-ac-vfd-page .portmak-ac-vfd-quick::after { position: absolute; right: -27px; top: -27px; width: 94px; height: 94px; border: 1px solid rgba(12, 168, 232, .25); border-radius: 50%; box-shadow: 0 0 0 17px rgba(12, 168, 232, .045); content: ""; } body.portmak-ac-vfd-page .portmak-ac-vfd-quick__label { display: block; margin-bottom: 8px; color: #1a7198; font-size: 10px; font-weight: 800; letter-spacing: .11em; } body.portmak-ac-vfd-page .portmak-ac-vfd-quick strong { display: block; position: relative; z-index: 1; color: var(--portmak-navy); font-size: 20px; line-height: 1.25; } body.portmak-ac-vfd-page .portmak-ac-vfd-quick ul { position: relative; z-index: 1; margin: 16px 0 0; padding: 0; list-style: none; } body.portmak-ac-vfd-page .portmak-ac-vfd-quick li { position: relative; padding: 9px 0 9px 20px; border-top: 1px solid rgba(84, 151, 180, .17); color: #3d5d6e; font-size: 13px; line-height: 1.5; } body.portmak-ac-vfd-page .portmak-ac-vfd-quick li::before { position: absolute; left: 1px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--portmak-blue); box-shadow: 0 0 0 3px rgba(12, 168, 232, .11); content: ""; } body.portmak-ac-vfd-page .portmak-ac-vfd-section { padding: 34px; border: 1px solid var(--portmak-line); border-radius: 18px; background: #fff; box-shadow: 0 14px 32px rgba(8, 34, 57, .06); } body.portmak-ac-vfd-page .portmak-ac-vfd-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 25px; } body.portmak-ac-vfd-page .portmak-ac-vfd-card-grid article { min-height: 174px; padding: 21px 18px; border: 1px solid #d8eaf2; border-radius: 14px; background: linear-gradient(145deg, #fbfeff, #eef8fc); } body.portmak-ac-vfd-page .reading .portmak-ac-vfd-card-grid h3, body.portmak-ac-vfd-page .reading .portmak-ac-vfd-process h3 { margin: 0; color: var(--portmak-navy); font-size: 17px; line-height: 1.32; } body.portmak-ac-vfd-page .portmak-ac-vfd-card-grid p { margin: 10px 0 0 !important; color: #557080 !important; font-size: 13px !important; line-height: 1.62 !important; } body.portmak-ac-vfd-page .portmak-ac-vfd-process { padding: 34px; border: 1px solid var(--portmak-line); border-radius: 18px; background: linear-gradient(145deg, #fff, #f3fbfe); box-shadow: 0 14px 32px rgba(8, 34, 57, .06); } body.portmak-ac-vfd-page .portmak-ac-vfd-process .portmak-section-kicker { color: #1a7198 !important; } body.portmak-ac-vfd-page .reading .portmak-ac-vfd-process h2, body.portmak-ac-vfd-page .reading .portmak-ac-vfd-process h3 { color: var(--portmak-ink); } body.portmak-ac-vfd-page .portmak-ac-vfd-process ol { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; } body.portmak-ac-vfd-page .portmak-ac-vfd-process ol::before { position: absolute; left: 6%; right: 6%; top: 18px; height: 2px; background: linear-gradient(90deg, #8ddcf4, #0ca8e8, #8ddcf4); content: ""; } body.portmak-ac-vfd-page .portmak-ac-vfd-process li { position: relative; display: block; min-width: 0; padding: 0 13px 0 0; border: 0; border-radius: 0; background: transparent; } body.portmak-ac-vfd-page .portmak-ac-vfd-process li::before { display: none !important; content: none !important; } body.portmak-ac-vfd-page .portmak-ac-vfd-process li > span { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 4px solid #edf9fd; border-radius: 50%; background: var(--portmak-blue); box-shadow: 0 4px 12px rgba(12, 168, 232, .27); color: #fff; font-size: 11px; font-weight: 800; } body.portmak-ac-vfd-page .portmak-ac-vfd-process li > div { padding: 15px 2px 0; } body.portmak-ac-vfd-page .reading .portmak-ac-vfd-process h3 { font-size: 17px; } body.portmak-ac-vfd-page .portmak-ac-vfd-process p { margin: 7px 0 0 !important; color: #587080 !important; font-size: 13px !important; line-height: 1.55 !important; } body.portmak-ac-vfd-page .portmak-ac-vfd-brands { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: clamp(26px, 5vw, 64px); align-items: center; padding: 10px 0; } body.portmak-ac-vfd-page .portmak-ac-vfd-brands h2 + p { margin-top: 17px; } body.portmak-ac-vfd-page .portmak-ac-vfd-brands ul { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; } body.portmak-ac-vfd-page .portmak-ac-vfd-brands li { padding: 9px 12px; border: 1px solid #cfe7f1; border-radius: 999px; background: #f4fbfe; color: #16698c; font-size: 13px; font-weight: 700; line-height: 1.2; } body.portmak-ac-vfd-page .portmak-ac-vfd-faq { padding-top: 5px; } body.portmak-ac-vfd-page .portmak-ac-vfd-faq details { margin-top: 11px; padding: 0 19px; border: 1px solid #d7e7ee; border-radius: 12px; background: #fff; box-shadow: 0 7px 18px rgba(8, 34, 57, .045); } body.portmak-ac-vfd-page .portmak-ac-vfd-faq summary { padding: 17px 25px 17px 0; cursor: pointer; color: var(--portmak-ink); font-size: 16px; font-weight: 750; line-height: 1.45; } body.portmak-ac-vfd-page .portmak-ac-vfd-faq details[open] { border-color: #a8dced; background: #f9fdff; } body.portmak-ac-vfd-page .portmak-ac-vfd-faq details p { margin: -2px 0 18px !important; color: #526b7b !important; font-size: 14px !important; line-height: 1.7 !important; } body.portmak-ac-vfd-page .portmak-ac-vfd-contact { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 31px; border: 1px solid #c0e1ed; border-radius: 18px; background: radial-gradient(circle at 94% 8%, rgba(12, 168, 232, .20), transparent 31%), linear-gradient(135deg, #f7fcff, #e5f5fb); } body.portmak-ac-vfd-page .portmak-ac-vfd-contact > div:first-child { max-width: 690px; } body.portmak-ac-vfd-page .portmak-ac-vfd-contact > div:first-child > span { display: block; margin-bottom: 8px; color: #16729b; font-size: 11px; font-weight: 800; letter-spacing: .11em; } body.portmak-ac-vfd-page .portmak-ac-vfd-contact p { margin: 9px 0 0 !important; color: #4d6273 !important; } body.portmak-ac-vfd-page .portmak-ac-vfd-contact__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 9px; } body.portmak-ac-vfd-page .portmak-ac-vfd-contact .portmak-link-button.is-outline { border-color: #8bbfd3; background: transparent; color: #176783 !important; } body.portmak-ac-vfd-page .portmak-ac-vfd-references #pg-554-4 { margin-top: 28px; padding-top: 34px; border-top: 1px solid var(--portmak-line); } @media (max-width: 1000px) { body.portmak-ac-vfd-page .portmak-ac-vfd-card-grid, body.portmak-ac-vfd-page .portmak-ac-vfd-process ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.portmak-ac-vfd-page .portmak-ac-vfd-process ol::before { display: none; } body.portmak-ac-vfd-page .portmak-ac-vfd-process li { padding: 16px; border: 1px solid #d7eaf2; border-radius: 12px; background: #fff; } body.portmak-ac-vfd-page .portmak-ac-vfd-process li > div { padding-top: 12px; } } @media (max-width: 780px) { body.portmak-ac-vfd-page .portmak-ac-vfd-hero { grid-template-columns: 1fr; margin: -22px -18px 30px; padding: 35px 23px 20px; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero__actions { justify-content: flex-start; padding-top: 0; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero__breadcrumbs { margin-top: 1px; } body.portmak-ac-vfd-page .portmak-ac-vfd-overview, body.portmak-ac-vfd-page .portmak-ac-vfd-brands { grid-template-columns: 1fr; } body.portmak-ac-vfd-page .portmak-ac-vfd-section, body.portmak-ac-vfd-page .portmak-ac-vfd-process, body.portmak-ac-vfd-page .portmak-ac-vfd-contact { padding: 24px 20px; } body.portmak-ac-vfd-page .portmak-ac-vfd-contact { align-items: flex-start; flex-direction: column; } } @media (max-width: 560px) { body.portmak-ac-vfd-page .portmak-ac-vfd-hero h1 { font-size: 34px; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero__lead { font-size: 16px !important; } body.portmak-ac-vfd-page .portmak-ac-vfd-card-grid, body.portmak-ac-vfd-page .portmak-ac-vfd-process ol { grid-template-columns: 1fr; } body.portmak-ac-vfd-page .portmak-ac-vfd-card-grid article { min-height: 0; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero__actions, body.portmak-ac-vfd-page .portmak-ac-vfd-contact__actions { width: 100%; } body.portmak-ac-vfd-page .portmak-ac-vfd-hero__actions .portmak-link-button, body.portmak-ac-vfd-page .portmak-ac-vfd-contact__actions .portmak-link-button { flex: 1 1 100%; } body.portmak-ac-vfd-page .reading > .portmak-ac-vfd-overview, body.portmak-ac-vfd-page .reading > .portmak-ac-vfd-section, body.portmak-ac-vfd-page .reading > .portmak-ac-vfd-process, body.portmak-ac-vfd-page .reading > .portmak-ac-vfd-brands, body.portmak-ac-vfd-page .reading > .portmak-ac-vfd-faq, body.portmak-ac-vfd-page .reading > .portmak-ac-vfd-contact, body.portmak-ac-vfd-page .reading > .portmak-ac-vfd-references { margin-bottom: 38px; } } /* Industrial PC service page: animated IPC visual and repair-focused layout. */ body.portmak-industrial-pc-page .portmak-page-hero--industrial-pc { display: grid; grid-template-areas: "content visual" "breadcrumbs breadcrumbs"; grid-template-columns: minmax(0, 1.04fr) minmax(355px, .96fr); align-items: center; column-gap: clamp(20px, 3vw, 48px); min-height: 382px; background: radial-gradient(circle at 81% 18%, rgba(48, 201, 246, .24), transparent 25%), radial-gradient(circle at 100% 92%, rgba(9, 92, 132, .36), transparent 34%), linear-gradient(124deg, #061a2a 0%, #0b3550 56%, #0f4562 100%); } body.portmak-industrial-pc-page .portmak-page-hero--industrial-pc .portmak-page-hero__content { grid-area: content; max-width: 650px; } body.portmak-industrial-pc-page .portmak-page-hero--industrial-pc .portmak-page-hero__breadcrumbs { grid-area: breadcrumbs; position: relative; z-index: 2; } body.portmak-industrial-pc-page .portmak-ipc-visual { position: relative; grid-area: visual; align-self: stretch; display: grid; min-width: 0; place-items: center; overflow: hidden; border: 1px solid rgba(126, 231, 255, .27); border-radius: 18px; background: radial-gradient(circle at 51% 45%, rgba(33, 200, 244, .16), transparent 29%), linear-gradient(145deg, rgba(3, 28, 45, .90), rgba(11, 69, 98, .70)); box-shadow: inset 0 0 38px rgba(78, 214, 255, .07), 0 16px 30px rgba(0, 8, 18, .18); } body.portmak-industrial-pc-page .portmak-ipc-visual::before, body.portmak-industrial-pc-page .portmak-ipc-visual::after { position: absolute; content: ""; pointer-events: none; } body.portmak-industrial-pc-page .portmak-ipc-visual::before { inset: 0; opacity: .34; background-image: linear-gradient(rgba(159, 237, 255, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(159, 237, 255, .11) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } body.portmak-industrial-pc-page .portmak-ipc-visual::after { width: 175px; height: 175px; right: -68px; bottom: -83px; border: 1px solid rgba(129, 231, 255, .19); border-radius: 50%; box-shadow: 0 0 0 29px rgba(129, 231, 255, .035), 0 0 0 58px rgba(129, 231, 255, .02); } body.portmak-industrial-pc-page .portmak-ipc-visual svg { position: relative; z-index: 1; display: block; width: 100%; max-width: 620px; height: auto; overflow: visible; } body.portmak-industrial-pc-page .portmak-ipc-visual__guide { stroke: rgba(137, 231, 255, .16); stroke-dasharray: 4 8; stroke-width: 1; } body.portmak-industrial-pc-page .portmak-ipc-visual__circuit { fill: none; stroke: rgba(112, 225, 255, .48); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } body.portmak-industrial-pc-page .portmak-ipc-visual__circuit-dot, body.portmak-industrial-pc-page .portmak-ipc-visual__status { fill: #8ff3ff; filter: url(#portmak-ipc-glow); animation: portmak-ipc-led 1.55s ease-in-out infinite; } body.portmak-industrial-pc-page .portmak-ipc-visual__circuit-dot--delay, body.portmak-industrial-pc-page .portmak-ipc-visual__status--delay { animation-delay: .44s; } body.portmak-industrial-pc-page .portmak-ipc-visual__circuit-dot--slow, body.portmak-industrial-pc-page .portmak-ipc-visual__status--slow { animation-delay: .88s; } body.portmak-industrial-pc-page .portmak-ipc-visual__io-case, body.portmak-industrial-pc-page .portmak-ipc-visual__panel-case, body.portmak-industrial-pc-page .portmak-ipc-visual__box-case { fill: url(#portmak-ipc-case); stroke: rgba(143, 237, 255, .84); stroke-width: 2; } body.portmak-industrial-pc-page .portmak-ipc-visual__io-display, body.portmak-industrial-pc-page .portmak-ipc-visual__screen, body.portmak-industrial-pc-page .portmak-ipc-visual__control-strip { fill: url(#portmak-ipc-screen); stroke: rgba(77, 214, 255, .82); stroke-width: 1.5; } body.portmak-industrial-pc-page .portmak-ipc-visual__screen-bezel { fill: rgba(2, 20, 32, .93); stroke: rgba(185, 247, 255, .62); stroke-width: 1.5; } body.portmak-industrial-pc-page .portmak-ipc-visual__io-lines, body.portmak-industrial-pc-page .portmak-ipc-visual__screen-grid, body.portmak-industrial-pc-page .portmak-ipc-visual__control-lines, body.portmak-industrial-pc-page .portmak-ipc-visual__box-fins { fill: none; stroke: rgba(128, 229, 255, .58); stroke-linecap: round; stroke-width: 1.5; } body.portmak-industrial-pc-page .portmak-ipc-visual__core-ring { fill: rgba(3, 32, 51, .8); stroke: #80ebff; stroke-width: 2; } body.portmak-industrial-pc-page .portmak-ipc-visual__core { fill: #55dfff; filter: url(#portmak-ipc-glow); transform-box: fill-box; transform-origin: center; animation: portmak-ipc-core 2.2s ease-in-out infinite; } body.portmak-industrial-pc-page .portmak-ipc-visual__chart, body.portmak-industrial-pc-page .portmak-ipc-visual__scan-line { fill: none; stroke: #9bf4ff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; filter: url(#portmak-ipc-glow); } body.portmak-industrial-pc-page .portmak-ipc-visual__scan-line { stroke-width: 1.5; stroke-dasharray: 8 9; transform-box: fill-box; transform-origin: center; animation: portmak-ipc-scan 2.6s ease-in-out infinite; } body.portmak-industrial-pc-page .portmak-ipc-visual__port, body.portmak-industrial-pc-page .portmak-ipc-visual__box-port { fill: #061e2d; stroke: #62ddff; stroke-width: 1.5; } body.portmak-industrial-pc-page .portmak-ipc-visual__data-track, body.portmak-industrial-pc-page .portmak-ipc-visual__data-flow { fill: none; stroke-linecap: round; stroke-linejoin: round; } body.portmak-industrial-pc-page .portmak-ipc-visual__data-track { stroke: rgba(121, 230, 255, .30); stroke-width: 8; filter: url(#portmak-ipc-glow); } body.portmak-industrial-pc-page .portmak-ipc-visual__data-flow { stroke: url(#portmak-ipc-data); stroke-dasharray: 11 18; stroke-width: 4; filter: url(#portmak-ipc-glow); animation: portmak-ipc-data-flow 1.55s linear infinite; } body.portmak-industrial-pc-page .portmak-ipc-visual__label, body.portmak-industrial-pc-page .portmak-ipc-visual__caption { fill: #d1f7ff; font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: .13em; } body.portmak-industrial-pc-page .portmak-ipc-visual__label--main { font-size: 12px; } body.portmak-industrial-pc-page .portmak-ipc-visual__caption { fill: #65ddff; font-size: 10px; } @keyframes portmak-ipc-data-flow { to { stroke-dashoffset: -58; } } @keyframes portmak-ipc-led { 0%, 100% { opacity: .34; } 50% { opacity: 1; } } @keyframes portmak-ipc-core { 0%, 100% { transform: scale(.78); opacity: .58; } 50% { transform: scale(1.24); opacity: 1; } } @keyframes portmak-ipc-scan { 0%, 100% { opacity: .2; transform: translateY(-10px); } 50% { opacity: 1; transform: translateY(70px); } } body.portmak-industrial-pc-page .reading > .portmak-ipc-device-types, body.portmak-industrial-pc-page .reading > .portmak-ipc-use-cases { margin: 0 0 52px; } body.portmak-industrial-pc-page .portmak-ipc-device-types { padding: 34px; border: 1px solid #d6eaf3; border-radius: 18px; background: linear-gradient(145deg, #f8fdff, #eef8fc); } body.portmak-industrial-pc-page .portmak-ipc-device-types header { max-width: 760px; margin: 0 auto 25px; text-align: center; } body.portmak-industrial-pc-page .portmak-ipc-device-types h2, body.portmak-industrial-pc-page .portmak-ipc-use-cases h2 { margin: 0; padding: 0; border: 0; color: var(--portmak-ink); font-size: clamp(24px, 3vw, 34px); line-height: 1.18; letter-spacing: -.025em; } body.portmak-industrial-pc-page .portmak-ipc-device-types header > p:last-child { margin: 14px 0 0; color: #516875; font-size: 15px; line-height: 1.7; } body.portmak-industrial-pc-page .portmak-ipc-device-types__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } body.portmak-industrial-pc-page .portmak-ipc-device-types__grid article { min-height: 184px; padding: 20px 17px; border: 1px solid #d7eaf2; border-radius: 14px; background: #fff; box-shadow: 0 10px 22px rgba(7, 39, 61, .05); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } body.portmak-industrial-pc-page .portmak-ipc-device-types__grid article:hover { transform: translateY(-4px); border-color: #8dd7ee; box-shadow: 0 16px 29px rgba(7, 39, 61, .10); } body.portmak-industrial-pc-page .portmak-ipc-device-types__grid span { display: grid; width: 38px; height: 38px; margin-bottom: 21px; place-items: center; border: 1px solid #b8e3f2; border-radius: 10px; background: #eaf9fe; color: #137ba4; font-size: 11px; font-weight: 850; letter-spacing: .08em; } body.portmak-industrial-pc-page .portmak-ipc-device-types h3 { margin: 0; color: #102d42; font-size: 17px; line-height: 1.25; } body.portmak-industrial-pc-page .portmak-ipc-device-types p { margin: 9px 0 0; color: #5e7480; font-size: 14px; line-height: 1.58; } body.portmak-industrial-pc-page .portmak-ipc-use-cases { padding: 4px 0 0; text-align: center; } body.portmak-industrial-pc-page .portmak-ipc-use-cases h2 { margin-top: 5px; } body.portmak-industrial-pc-page .portmak-ipc-use-cases ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 23px 0 0; padding: 0; list-style: none; } body.portmak-industrial-pc-page .portmak-ipc-use-cases li { padding: 11px 15px; border: 1px solid #d5e8f0; border-radius: 999px; background: #fff; color: #1e5068; font-size: 14px; font-weight: 700; box-shadow: 0 8px 18px rgba(7, 39, 61, .04); } body.portmak-industrial-pc-page .portmak-ipc-references #pg-498-7 { margin-top: 28px; padding-top: 34px; border-top: 1px solid var(--portmak-line); } @media (max-width: 980px) { body.portmak-industrial-pc-page .portmak-page-hero--industrial-pc { grid-template-areas: "content" "visual" "breadcrumbs"; grid-template-columns: minmax(0, 1fr); min-height: 0; } body.portmak-industrial-pc-page .portmak-ipc-visual { width: min(100%, 620px); min-height: 245px; margin: 22px auto 0; } body.portmak-industrial-pc-page .portmak-ipc-device-types__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { body.portmak-industrial-pc-page .portmak-ipc-device-types { padding: 25px 20px; } body.portmak-industrial-pc-page .portmak-ipc-device-types__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 500px) { body.portmak-industrial-pc-page .portmak-page-hero--industrial-pc { padding: 28px 20px; } body.portmak-industrial-pc-page .portmak-ipc-visual { min-height: 178px; border-radius: 14px; } body.portmak-industrial-pc-page .portmak-ipc-device-types__grid { grid-template-columns: 1fr; } body.portmak-industrial-pc-page .portmak-ipc-device-types__grid article { min-height: 0; } } @media (prefers-reduced-motion: reduce) { body.portmak-industrial-pc-page .portmak-ipc-visual *, body.portmak-industrial-pc-page .portmak-ipc-visual::before, body.portmak-industrial-pc-page .portmak-ipc-visual::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* -------------------------------------------------------------------------- * Arıza bildirim sayfası * -------------------------------------------------------------------------- */ body.portmak-fault-report-page #main.portmak-fault-report { max-width: none; padding: 32px 0 68px; } body.portmak-fault-report-page .portmak-fault-report__wrap { max-width: 1180px; } body.portmak-fault-report-page .portmak-fault-report__article { display: grid; gap: 28px; } body.portmak-fault-report-page .portmak-fault-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: 36px; min-height: 390px; padding: 56px 62px; overflow: hidden; border: 1px solid rgba(102, 220, 249, .24); border-radius: 24px; background: radial-gradient(circle at 92% 18%, rgba(50, 190, 234, .20), transparent 33%), radial-gradient(circle at 61% 103%, rgba(13, 92, 134, .45), transparent 43%), linear-gradient(122deg, #061c2b 0%, #082d46 57%, #0d4660 100%); box-shadow: 0 21px 46px rgba(4, 33, 53, .17); } body.portmak-fault-report-page .portmak-fault-hero::before, body.portmak-fault-report-page .portmak-fault-hero::after { position: absolute; content: ''; pointer-events: none; } body.portmak-fault-report-page .portmak-fault-hero::before { inset: 0; opacity: .17; background-image: linear-gradient(rgba(139, 236, 255, .3) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 236, 255, .3) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .64) 55%, transparent 100%); } body.portmak-fault-report-page .portmak-fault-hero::after { width: 370px; height: 370px; right: -113px; top: -163px; border: 1px solid rgba(114, 230, 255, .28); border-radius: 50%; box-shadow: 0 0 0 42px rgba(112, 227, 255, .04), 0 0 0 84px rgba(112, 227, 255, .03); } body.portmak-fault-report-page .portmak-fault-hero__copy, body.portmak-fault-report-page .portmak-fault-visual { position: relative; z-index: 1; } body.portmak-fault-report-page .portmak-fault-hero__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } body.portmak-fault-report-page .portmak-fault-hero__eyebrow, body.portmak-fault-report-page .portmak-fault-form-panel__heading > p, body.portmak-fault-report-page .portmak-fault-support__eyebrow, body.portmak-fault-report-page .portmak-fault-process header > p, body.portmak-fault-report-page .portmak-fault-faq > div > p { margin: 0 0 14px; color: #69dcff; font-size: 11px; font-weight: 850; letter-spacing: .16em; line-height: 1.2; } body.portmak-fault-report-page .portmak-fault-hero h1 { max-width: 620px; margin: 0; color: #fff; font-size: clamp(39px, 5vw, 62px); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; } body.portmak-fault-report-page .portmak-fault-hero__lead { max-width: 640px; margin: 21px 0 0; color: #d7edf6; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.7; } body.portmak-fault-report-page .portmak-fault-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } body.portmak-fault-report-page .portmak-fault-hero .portmak-link-button { min-height: 46px; padding: 0 19px; border-color: #16bde9; background: #16bde9; box-shadow: 0 10px 22px rgba(3, 174, 224, .24); color: #fff; } body.portmak-fault-report-page .portmak-fault-hero .portmak-link-button:hover, body.portmak-fault-report-page .portmak-fault-hero .portmak-link-button:focus-visible { transform: translateY(-2px); background: #29c9ef; box-shadow: 0 13px 25px rgba(3, 174, 224, .30); } body.portmak-fault-report-page .portmak-fault-hero .portmak-link-button.is-outline { border-color: rgba(208, 244, 255, .68); background: rgba(3, 27, 42, .24); box-shadow: none; color: #eefbff; } body.portmak-fault-report-page .portmak-fault-hero .portmak-link-button.is-outline:hover, body.portmak-fault-report-page .portmak-fault-hero .portmak-link-button.is-outline:focus-visible { border-color: #87eaff; background: rgba(65, 205, 242, .12); } body.portmak-fault-report-page .portmak-fault-hero__facts { display: flex; flex-wrap: wrap; gap: 9px 20px; margin: 25px 0 0; padding: 0; list-style: none; color: #cce6ef; font-size: 12px; font-weight: 700; line-height: 1.5; } body.portmak-fault-report-page .portmak-fault-hero__facts li { position: relative; padding-left: 14px; } body.portmak-fault-report-page .portmak-fault-hero__facts li::before { position: absolute; left: 0; top: .49em; width: 6px; height: 6px; border: 1px solid #62e3ff; border-radius: 50%; content: ''; } body.portmak-fault-report-page .portmak-fault-visual { display: flex; align-items: center; min-width: 0; } body.portmak-fault-report-page .portmak-fault-visual svg { display: block; width: 100%; height: auto; max-height: 310px; } body.portmak-fault-report-page .portmak-fault-visual__grid { fill: none; stroke: rgba(116, 226, 255, .12); stroke-width: 1; } body.portmak-fault-report-page .portmak-fault-visual__guide { fill: none; stroke: rgba(146, 236, 255, .32); stroke-dasharray: 5 10; stroke-width: 1.5; } body.portmak-fault-report-page .portmak-fault-visual__device-case, body.portmak-fault-report-page .portmak-fault-visual__analysis-case { fill: url(#portmak-fault-device); stroke: rgba(153, 236, 255, .82); stroke-width: 2; } body.portmak-fault-report-page .portmak-fault-visual__screen { fill: rgba(3, 29, 45, .86); stroke: #65ddfa; stroke-width: 1.5; } body.portmak-fault-report-page .portmak-fault-visual__screen-line, body.portmak-fault-report-page .portmak-fault-visual__vents, body.portmak-fault-report-page .portmak-fault-visual__terminal { fill: none; stroke: rgba(135, 230, 252, .75); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } body.portmak-fault-report-page .portmak-fault-visual__led, body.portmak-fault-report-page .portmak-fault-visual__status, body.portmak-fault-report-page .portmak-fault-visual__signal-node { filter: url(#portmak-fault-glow); transform-box: fill-box; transform-origin: center; } body.portmak-fault-report-page .portmak-fault-visual__led--cyan, body.portmak-fault-report-page .portmak-fault-visual__status, body.portmak-fault-report-page .portmak-fault-visual__signal-node { fill: #77ecff; animation: portmak-fault-led 1.7s ease-in-out infinite; } body.portmak-fault-report-page .portmak-fault-visual__led--alert { fill: #ffaf5e; animation: portmak-fault-alert 1.25s ease-in-out infinite; } body.portmak-fault-report-page .portmak-fault-visual__led--delay, body.portmak-fault-report-page .portmak-fault-visual__status--delay, body.portmak-fault-report-page .portmak-fault-visual__signal-node--two { animation-delay: .46s; } body.portmak-fault-report-page .portmak-fault-visual__status--slow, body.portmak-fault-report-page .portmak-fault-visual__signal-node--three { animation-delay: .88s; } body.portmak-fault-report-page .portmak-fault-visual__signal-track, body.portmak-fault-report-page .portmak-fault-visual__signal-flow { fill: none; stroke-linecap: round; stroke-linejoin: round; } body.portmak-fault-report-page .portmak-fault-visual__signal-track { stroke: rgba(97, 220, 252, .28); stroke-width: 8; } body.portmak-fault-report-page .portmak-fault-visual__signal-flow { stroke: url(#portmak-fault-flow); stroke-dasharray: 10 18; stroke-width: 4; filter: url(#portmak-fault-glow); animation: portmak-fault-flow 1.6s linear infinite; } body.portmak-fault-report-page .portmak-fault-visual__analysis-ring { fill: rgba(6, 55, 76, .55); stroke: #80eaff; stroke-width: 2; } body.portmak-fault-report-page .portmak-fault-visual__analysis-core { fill: #5ce4fd; filter: url(#portmak-fault-glow); transform-box: fill-box; transform-origin: center; animation: portmak-fault-core 2.15s ease-in-out infinite; } body.portmak-fault-report-page .portmak-fault-visual__scan { fill: none; stroke: #cefaff; stroke-dasharray: 10 9; stroke-linecap: round; stroke-width: 2; filter: url(#portmak-fault-glow); animation: portmak-fault-scan 2.4s ease-in-out infinite; } body.portmak-fault-report-page .portmak-fault-visual__label, body.portmak-fault-report-page .portmak-fault-visual__caption { fill: #d0f7ff; font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: .12em; } body.portmak-fault-report-page .portmak-fault-visual__caption { fill: #65ddff; font-size: 10px; } @keyframes portmak-fault-flow { to { stroke-dashoffset: -56; } } @keyframes portmak-fault-led { 0%, 100% { opacity: .38; transform: scale(.74); } 50% { opacity: 1; transform: scale(1.28); } } @keyframes portmak-fault-alert { 0%, 100% { opacity: .45; transform: scale(.76); } 50% { opacity: 1; transform: scale(1.35); } } @keyframes portmak-fault-core { 0%, 100% { opacity: .55; transform: scale(.76); } 50% { opacity: 1; transform: scale(1.23); } } @keyframes portmak-fault-scan { 0%, 100% { opacity: .22; transform: translateY(-22px); } 50% { opacity: 1; transform: translateY(31px); } } body.portmak-fault-report-page .portmak-fault-form-grid { display: grid; grid-template-columns: minmax(0, 1.46fr) minmax(300px, .74fr); gap: 22px; align-items: start; } body.portmak-fault-report-page .portmak-fault-form-panel, body.portmak-fault-report-page .portmak-fault-support, body.portmak-fault-report-page .portmak-fault-process, body.portmak-fault-report-page .portmak-fault-faq { border: 1px solid #d5e6ee; border-radius: 20px; box-shadow: 0 15px 34px rgba(9, 42, 62, .07); } body.portmak-fault-report-page .portmak-fault-form-panel { padding: 39px 42px 43px; background: #fff; } body.portmak-fault-report-page .portmak-fault-form-panel__heading { padding-bottom: 25px; border-bottom: 1px solid #e2edf2; } body.portmak-fault-report-page .portmak-fault-form-panel__heading > p, body.portmak-fault-report-page .portmak-fault-process header > p, body.portmak-fault-report-page .portmak-fault-faq > div > p { margin-bottom: 10px; color: #109ac9; } body.portmak-fault-report-page .portmak-fault-form-panel h2, body.portmak-fault-report-page .portmak-fault-support h2, body.portmak-fault-report-page .portmak-fault-process h2, body.portmak-fault-report-page .portmak-fault-faq h2 { margin: 0; padding: 0; border: 0; color: #102f45; font-size: clamp(25px, 3vw, 33px); font-weight: 800; letter-spacing: -.035em; line-height: 1.16; } body.portmak-fault-report-page .portmak-fault-form-panel__heading > span { display: block; max-width: 660px; margin-top: 12px; color: #597080; font-size: 15px; line-height: 1.65; } body.portmak-fault-report-page .portmak-fault-progress { margin: 23px 0 30px; padding: 15px 17px; border: 1px solid #d9ebf3; border-radius: 13px; background: #f5fbfe; } body.portmak-fault-report-page .portmak-fault-progress__copy { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: #4c6878; font-size: 12px; line-height: 1.4; } body.portmak-fault-report-page .portmak-fault-progress__copy b { color: #1b799b; font-weight: 750; text-align: right; } body.portmak-fault-report-page .portmak-fault-progress__track { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: #d9ebf2; } body.portmak-fault-report-page .portmak-fault-progress__track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #14aede, #64e5ff); box-shadow: 0 0 13px rgba(20, 174, 222, .55); transition: width .25s ease; } body.portmak-fault-report-page .portmak-fault-form__content, body.portmak-fault-report-page .portmak-fault-form__content .wpforms-container, body.portmak-fault-report-page .portmak-fault-form__content .forminator-ui, body.portmak-fault-report-page .portmak-fault-form__content .wpcf7 { max-width: none; margin: 0; } body.portmak-fault-report-page .portmak-fault-form__content .wpcf7 form > p, body.portmak-fault-report-page .portmak-fault-form__content .wpcf7-form p, body.portmak-fault-report-page .portmak-fault-form__content .wpforms-field, body.portmak-fault-report-page .portmak-fault-form__content .forminator-field, body.portmak-fault-report-page .portmak-fault-form__content form > p { margin: 0 0 20px; } body.portmak-fault-report-page .portmak-fault-form__content label, body.portmak-fault-report-page .portmak-fault-form__content .wpforms-field-label, body.portmak-fault-report-page .portmak-fault-form__content .forminator-label { display: block; margin: 0 0 7px; color: #214357; font-size: 14px; font-weight: 750; line-height: 1.45; } body.portmak-fault-report-page .portmak-fault-form__content .wpcf7-form-control-wrap, body.portmak-fault-report-page .portmak-fault-form__content .wpforms-field-container, body.portmak-fault-report-page .portmak-fault-form__content .forminator-input-wrap { display: block; } body.portmak-fault-report-page .portmak-fault-form__content input:not([type='submit']):not([type='button']):not([type='reset']):not([type='checkbox']):not([type='radio']), body.portmak-fault-report-page .portmak-fault-form__content select, body.portmak-fault-report-page .portmak-fault-form__content textarea { box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 12px 14px; border: 1px solid #c9dce5; border-radius: 10px; outline: 0; background: #fff; box-shadow: 0 1px 0 rgba(4, 41, 62, .01); color: #17384c; font-family: inherit; font-size: 15px; line-height: 1.45; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } body.portmak-fault-report-page .portmak-fault-form__content textarea { min-height: 145px; resize: vertical; } body.portmak-fault-report-page .portmak-fault-form__content input[type='file'] { padding: 9px 11px; background: #f8fcfe; font-size: 13px; } body.portmak-fault-report-page .portmak-fault-form__content input:focus, body.portmak-fault-report-page .portmak-fault-form__content select:focus, body.portmak-fault-report-page .portmak-fault-form__content textarea:focus { border-color: #1db8e5; background: #fcfeff; box-shadow: 0 0 0 4px rgba(29, 184, 229, .13); } body.portmak-fault-report-page .portmak-fault-form__content input::placeholder, body.portmak-fault-report-page .portmak-fault-form__content textarea::placeholder { color: #92a5b1; opacity: 1; } body.portmak-fault-report-page .portmak-fault-form__content input[type='checkbox'], body.portmak-fault-report-page .portmak-fault-form__content input[type='radio'] { width: 17px; height: 17px; margin-right: 7px; vertical-align: -3px; accent-color: #11abd9; } body.portmak-fault-report-page .portmak-fault-form__content input[type='submit'], body.portmak-fault-report-page .portmak-fault-form__content button[type='submit'], body.portmak-fault-report-page .portmak-fault-form__content .wpforms-submit, body.portmak-fault-report-page .portmak-fault-form__content .forminator-button-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; margin-top: 4px; padding: 0 23px; border: 1px solid #0eaad9; border-radius: 9px; background: linear-gradient(135deg, #12b4e3, #088ab9); box-shadow: 0 10px 20px rgba(10, 156, 203, .20); color: #fff; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1; text-shadow: none; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } body.portmak-fault-report-page .portmak-fault-form__content input[type='submit']:hover, body.portmak-fault-report-page .portmak-fault-form__content input[type='submit']:focus-visible, body.portmak-fault-report-page .portmak-fault-form__content button[type='submit']:hover, body.portmak-fault-report-page .portmak-fault-form__content button[type='submit']:focus-visible, body.portmak-fault-report-page .portmak-fault-form__content .wpforms-submit:hover, body.portmak-fault-report-page .portmak-fault-form__content .forminator-button-submit:hover { transform: translateY(-2px); box-shadow: 0 13px 24px rgba(10, 156, 203, .29); filter: brightness(1.06); } body.portmak-fault-report-page .portmak-fault-form__content .wpcf7-not-valid-tip, body.portmak-fault-report-page .portmak-fault-form__content .wpforms-error, body.portmak-fault-report-page .portmak-fault-form__content .forminator-error-message { margin-top: 6px; color: #b94630; font-size: 12px; font-weight: 650; } body.portmak-fault-report-page .portmak-fault-form__content .wpcf7-response-output, body.portmak-fault-report-page .portmak-fault-form__content .wpforms-confirmation-container, body.portmak-fault-report-page .portmak-fault-form__content .forminator-response-message { margin: 20px 0 0; padding: 13px 15px; border: 1px solid #a7dceb; border-radius: 10px; background: #effbff; color: #17657f; font-size: 14px; line-height: 1.55; } body.portmak-fault-report-page .portmak-fault-support { padding: 34px 31px; background: radial-gradient(circle at 92% 8%, rgba(38, 196, 238, .24), transparent 29%), linear-gradient(145deg, #0a2b41, #0b4963); color: #d7eef5; } body.portmak-fault-report-page .portmak-fault-support__eyebrow { margin-bottom: 11px; color: #79e4ff; } body.portmak-fault-report-page .portmak-fault-support h2 { color: #fff; font-size: 25px; letter-spacing: -.025em; } body.portmak-fault-report-page .portmak-fault-support > p:not(.portmak-fault-support__eyebrow) { margin: 15px 0 0; color: #c9e2eb; font-size: 14px; line-height: 1.7; } body.portmak-fault-report-page .portmak-fault-support__actions { display: grid; gap: 9px; margin-top: 23px; } body.portmak-fault-report-page .portmak-fault-support__actions a { display: flex; align-items: center; gap: 10px; min-height: 47px; padding: 0 14px; border: 1px solid rgba(173, 237, 252, .39); border-radius: 9px; background: rgba(1, 25, 38, .22); color: #f3fcff; font-size: 13px; font-weight: 750; text-decoration: none; transition: border-color .18s ease, background .18s ease, transform .18s ease; } body.portmak-fault-report-page .portmak-fault-support__actions a:hover, body.portmak-fault-report-page .portmak-fault-support__actions a:focus-visible { border-color: #87e9ff; background: rgba(69, 210, 244, .14); transform: translateY(-2px); } body.portmak-fault-report-page .portmak-fault-support__actions span { display: grid; width: 24px; height: 24px; place-items: center; color: #78e6ff; } body.portmak-fault-report-page .portmak-fault-support__actions svg { width: 19px; height: 19px; } body.portmak-fault-report-page .portmak-fault-support__points { display: grid; gap: 13px; margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(180, 236, 249, .19); list-style: none; } body.portmak-fault-report-page .portmak-fault-support__points li { display: grid; grid-template-columns: 29px minmax(0, 1fr); gap: 9px; align-items: start; color: #d2eaf2; font-size: 13px; line-height: 1.5; } body.portmak-fault-report-page .portmak-fault-support__points b { color: #72e7ff; font-size: 11px; letter-spacing: .09em; } body.portmak-fault-report-page .portmak-fault-support__note { display: grid; gap: 5px; margin-top: 25px; padding: 16px; border: 1px solid rgba(139, 230, 250, .26); border-radius: 11px; background: rgba(0, 26, 39, .24); } body.portmak-fault-report-page .portmak-fault-support__note strong { color: #8eeeff; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } body.portmak-fault-report-page .portmak-fault-support__note span { color: #cce5ed; font-size: 12px; line-height: 1.58; } body.portmak-fault-report-page .portmak-fault-process { padding: 37px 40px 39px; background: linear-gradient(145deg, #fff, #f3fafc); } body.portmak-fault-report-page .portmak-fault-process header { max-width: 690px; } body.portmak-fault-report-page .portmak-fault-process header > p { margin-bottom: 10px; } body.portmak-fault-report-page .portmak-fault-process ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; } body.portmak-fault-report-page .portmak-fault-process li { min-height: 195px; padding: 20px 18px; border: 1px solid #d7e8ef; border-radius: 13px; background: #fff; box-shadow: 0 8px 17px rgba(6, 46, 69, .035); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } body.portmak-fault-report-page .portmak-fault-process li:hover { border-color: #9fddef; box-shadow: 0 15px 25px rgba(6, 46, 69, .08); transform: translateY(-3px); } body.portmak-fault-report-page .portmak-fault-process li > b { display: grid; width: 35px; height: 35px; margin-bottom: 22px; place-items: center; border: 1px solid #b8e4f1; border-radius: 9px; background: #eaf9fe; color: #137fa5; font-size: 11px; letter-spacing: .07em; } body.portmak-fault-report-page .portmak-fault-process h3 { margin: 0; color: #1c4055; font-size: 16px; font-weight: 800; line-height: 1.3; } body.portmak-fault-report-page .portmak-fault-process li p { margin: 9px 0 0; color: #647985; font-size: 13px; line-height: 1.62; } body.portmak-fault-report-page .portmak-fault-faq { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 38px; align-items: start; padding: 36px 39px; background: #fff; } body.portmak-fault-report-page .portmak-fault-faq__items { display: grid; gap: 9px; } body.portmak-fault-report-page .portmak-fault-faq details { border: 1px solid #d9e9ef; border-radius: 10px; background: #fbfdfe; } body.portmak-fault-report-page .portmak-fault-faq summary { position: relative; padding: 16px 45px 16px 17px; cursor: pointer; color: #24495d; font-size: 14px; font-weight: 750; line-height: 1.45; list-style: none; } body.portmak-fault-report-page .portmak-fault-faq summary::-webkit-details-marker { display: none; } body.portmak-fault-report-page .portmak-fault-faq summary::after { position: absolute; right: 17px; top: 50%; content: '+'; color: #118fbd; font-size: 24px; font-weight: 400; line-height: 1; transform: translateY(-53%); } body.portmak-fault-report-page .portmak-fault-faq details[open] summary::after { content: '–'; } body.portmak-fault-report-page .portmak-fault-faq details p { margin: -2px 17px 16px; color: #637a87; font-size: 14px; line-height: 1.65; } @media (max-width: 1050px) { body.portmak-fault-report-page .portmak-fault-hero { grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); padding: 48px 42px; } body.portmak-fault-report-page .portmak-fault-process ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 850px) { body.portmak-fault-report-page .portmak-fault-hero { grid-template-columns: 1fr; min-height: 0; } body.portmak-fault-report-page .portmak-fault-visual { width: min(100%, 580px); margin: -10px auto 0; } body.portmak-fault-report-page .portmak-fault-form-grid, body.portmak-fault-report-page .portmak-fault-faq { grid-template-columns: 1fr; } body.portmak-fault-report-page .portmak-fault-faq { gap: 24px; } } @media (max-width: 640px) { body.portmak-fault-report-page #main.portmak-fault-report { padding-top: 16px; padding-bottom: 40px; } body.portmak-fault-report-page .portmak-fault-report__wrap { width: auto; margin: 0 14px; } body.portmak-fault-report-page .portmak-fault-report__article { gap: 17px; } body.portmak-fault-report-page .portmak-fault-hero { gap: 22px; padding: 33px 23px 27px; border-radius: 16px; } body.portmak-fault-report-page .portmak-fault-hero h1 { font-size: 38px; } body.portmak-fault-report-page .portmak-fault-hero__lead { font-size: 16px; } body.portmak-fault-report-page .portmak-fault-hero__actions, body.portmak-fault-report-page .portmak-fault-hero__actions .portmak-link-button { width: 100%; } body.portmak-fault-report-page .portmak-fault-hero__actions .portmak-link-button { justify-content: center; } body.portmak-fault-report-page .portmak-fault-hero__facts { display: grid; gap: 8px; } body.portmak-fault-report-page .portmak-fault-visual { width: 110%; max-width: none; margin-left: -5%; } body.portmak-fault-report-page .portmak-fault-form-panel, body.portmak-fault-report-page .portmak-fault-support, body.portmak-fault-report-page .portmak-fault-process, body.portmak-fault-report-page .portmak-fault-faq { border-radius: 15px; } body.portmak-fault-report-page .portmak-fault-form-panel { padding: 29px 21px 31px; } body.portmak-fault-report-page .portmak-fault-support { padding: 29px 23px; } body.portmak-fault-report-page .portmak-fault-process, body.portmak-fault-report-page .portmak-fault-faq { padding: 29px 22px; } body.portmak-fault-report-page .portmak-fault-progress__copy { align-items: flex-start; flex-direction: column; gap: 3px; } body.portmak-fault-report-page .portmak-fault-progress__copy b { text-align: left; } body.portmak-fault-report-page .portmak-fault-process ol { grid-template-columns: 1fr; gap: 10px; margin-top: 23px; } body.portmak-fault-report-page .portmak-fault-process li { min-height: 0; padding: 19px 17px; } body.portmak-fault-report-page .portmak-fault-process li > b { margin-bottom: 15px; } } @media (prefers-reduced-motion: reduce) { body.portmak-fault-report-page .portmak-fault-visual *, body.portmak-fault-report-page .portmak-fault-hero .portmak-link-button, body.portmak-fault-report-page .portmak-fault-process li, body.portmak-fault-report-page .portmak-fault-support__actions a { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ------------------------------------------------------------------------- * Enhanced industrial service pages * Full-width, subject-specific pages that reuse the site's existing service * photos and load no carousel/lightbox UI on the selected page family. * ------------------------------------------------------------------------- */ body.portmak-enhanced-service-page #main.portmak-service-detail-shell { max-width: 1180px; padding-top: 36px; padding-bottom: 64px; } body.portmak-enhanced-service-page .portmak-service-detail { margin: 0; } body.portmak-enhanced-service-page .portmak-service-detail-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(330px, .96fr); gap: 25px 38px; align-items: center; min-height: 380px; margin: 0 0 28px; padding: 53px 64px 28px; overflow: hidden; border: 1px solid rgba(109, 218, 255, .28); border-radius: 26px; background: radial-gradient(circle at 82% 18%, rgba(51, 203, 255, .24), transparent 32%), linear-gradient(118deg, #061b2d 0%, #0b3147 58%, #0f607c 140%); box-shadow: 0 24px 47px rgba(5, 28, 44, .18); color: #fff; } body.portmak-enhanced-service-page .portmak-service-detail-hero::before, body.portmak-enhanced-service-page .portmak-service-detail-hero::after { position: absolute; pointer-events: none; content: ''; } body.portmak-enhanced-service-page .portmak-service-detail-hero::before { inset: 0; background-image: linear-gradient(rgba(120, 225, 255, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 225, 255, .065) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .42) 60%, transparent 100%); } body.portmak-enhanced-service-page .portmak-service-detail-hero::after { width: 410px; height: 410px; right: -168px; top: -210px; border: 1px solid rgba(116, 229, 255, .20); border-radius: 50%; box-shadow: 0 0 0 42px rgba(106, 224, 255, .035), 0 0 0 83px rgba(106, 224, 255, .025); } body.portmak-enhanced-service-page .portmak-service-detail-hero__copy, body.portmak-enhanced-service-page .portmak-service-detail-hero__visual, body.portmak-enhanced-service-page .portmak-service-detail-hero__breadcrumbs { position: relative; z-index: 1; } body.portmak-enhanced-service-page .portmak-service-detail-hero__eyebrow, body.portmak-enhanced-service-page .portmak-service-detail__kicker { margin: 0 0 13px; font-size: 11px; font-weight: 800; letter-spacing: .135em; line-height: 1.35; color: #5fdbff; } body.portmak-enhanced-service-page .portmak-service-detail-hero h1 { max-width: 680px; margin: 0; font-size: clamp(38px, 4.35vw, 59px); font-weight: 800; letter-spacing: -.045em; line-height: 1.04; color: #fff; } body.portmak-enhanced-service-page .portmak-service-detail-hero__lead { max-width: 690px; margin: 20px 0 0; font-size: 18px; line-height: 1.72; color: #d9edf5; } body.portmak-enhanced-service-page .portmak-service-detail-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } body.portmak-enhanced-service-page .portmak-service-detail-hero__actions .portmak-link-button, body.portmak-enhanced-service-page .portmak-service-detail-contact .portmak-link-button { min-height: 43px; padding: 10px 18px; border-radius: 10px; font-size: 13px; box-shadow: none; } body.portmak-enhanced-service-page .portmak-service-detail-hero__actions .portmak-link-button.is-outline, body.portmak-enhanced-service-page .portmak-service-detail-contact .portmak-link-button.is-outline { border-color: rgba(224, 247, 255, .58); background: rgba(8, 38, 57, .34); color: #fff; } body.portmak-enhanced-service-page .portmak-service-detail-hero__facts { display: flex; flex-wrap: wrap; gap: 9px 20px; margin: 24px 0 0; padding: 0; list-style: none; } body.portmak-enhanced-service-page .portmak-service-detail-hero__facts li { position: relative; padding-left: 15px; font-size: 12px; font-weight: 700; line-height: 1.5; color: #d1e9f3; } body.portmak-enhanced-service-page .portmak-service-detail-hero__facts li::before { position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border: 1px solid #65dbfa; border-radius: 50%; content: ''; } body.portmak-enhanced-service-page .portmak-service-detail-hero__visual { align-self: stretch; display: flex; align-items: center; justify-content: center; min-width: 0; } body.portmak-enhanced-service-page .portmak-service-detail-hero__breadcrumbs { grid-column: 1 / -1; margin-top: 0; padding-top: 17px; border-top: 1px solid rgba(219, 246, 255, .19); font-size: 13px; line-height: 1.45; color: #c3e8f4; } body.portmak-enhanced-service-page .portmak-service-detail-hero__breadcrumbs a { color: #b7e9fa; } body.portmak-enhanced-service-page .portmak-service-visual { position: relative; width: min(100%, 530px); padding: 3px; border: 1px solid rgba(107, 225, 255, .28); border-radius: 20px; background: linear-gradient(145deg, rgba(13, 62, 83, .66), rgba(4, 27, 42, .32)); box-shadow: inset 0 1px 0 rgba(218, 251, 255, .08), 0 19px 45px rgba(1, 19, 31, .20); } body.portmak-enhanced-service-page .portmak-service-visual::before { position: absolute; inset: 18px 25px; border: 1px solid rgba(74, 213, 255, .13); border-radius: 15px; content: ''; } body.portmak-enhanced-service-page .portmak-service-visual svg { display: block; position: relative; z-index: 1; width: 100%; height: auto; } body.portmak-enhanced-service-page .portmak-service-visual__grid { fill: none; stroke: rgba(111, 219, 249, .13); stroke-width: 1; } body.portmak-enhanced-service-page .portmak-service-visual__guide, body.portmak-enhanced-service-page .portmak-service-visual__line, body.portmak-enhanced-service-page .portmak-service-visual__screen-grid, body.portmak-enhanced-service-page .portmak-service-visual__chip-lines, body.portmak-enhanced-service-page .portmak-service-visual__circuit, body.portmak-enhanced-service-page .portmak-service-visual__power-rails, body.portmak-enhanced-service-page .portmak-service-visual__motor-fins, body.portmak-enhanced-service-page .portmak-service-visual__encoder-lines { fill: none; stroke: rgba(180, 241, 255, .56); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.3; } body.portmak-enhanced-service-page .portmak-service-visual__case, body.portmak-enhanced-service-page .portmak-service-visual__motor-case, body.portmak-enhanced-service-page .portmak-service-visual__slot, body.portmak-enhanced-service-page .portmak-service-visual__port, body.portmak-enhanced-service-page .portmak-service-visual__target-box { fill: url(#portmak-service-case); stroke: rgba(160, 237, 255, .64); stroke-width: 2; } body.portmak-enhanced-service-page .portmak-service-visual__screen, body.portmak-enhanced-service-page .portmak-service-visual__chip { fill: rgba(4, 35, 54, .9); stroke: rgba(123, 228, 255, .72); stroke-width: 2; } body.portmak-enhanced-service-page .portmak-service-visual__chart, body.portmak-enhanced-service-page .portmak-service-visual__scope-wave, body.portmak-enhanced-service-page .portmak-service-visual__target-cross, body.portmak-enhanced-service-page .portmak-service-visual__tool, body.portmak-enhanced-service-page .portmak-service-visual__tool-head, body.portmak-enhanced-service-page .portmak-service-visual__gripper, body.portmak-enhanced-service-page .portmak-service-visual__arm, body.portmak-enhanced-service-page .portmak-service-visual__shaft { fill: none; stroke: #69e0ff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; } body.portmak-enhanced-service-page .portmak-service-visual__flow { fill: none; stroke: url(#portmak-service-flow); stroke-dasharray: 15 23; stroke-linecap: round; stroke-width: 4; filter: url(#portmak-service-glow); animation: portmak-service-flow 3.1s linear infinite; } body.portmak-enhanced-service-page .portmak-service-visual__scan { fill: none; stroke: #baf8ff; stroke-dasharray: 34 165; stroke-linecap: round; stroke-width: 3; filter: url(#portmak-service-glow); animation: portmak-service-flow 2.15s linear infinite; } body.portmak-enhanced-service-page .portmak-service-visual__led, body.portmak-enhanced-service-page .portmak-service-visual__pulse { fill: #86edff; filter: url(#portmak-service-glow); animation: portmak-service-led 1.85s ease-in-out infinite; } body.portmak-enhanced-service-page .portmak-service-visual__led--delay, body.portmak-enhanced-service-page .portmak-service-visual__pulse--delay { animation-delay: .58s; } body.portmak-enhanced-service-page .portmak-service-visual__led--slow { animation-delay: 1.12s; } body.portmak-enhanced-service-page .portmak-service-visual__label { font-family: Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .13em; fill: #b9f2ff; } body.portmak-enhanced-service-page .portmak-service-visual__fan, body.portmak-enhanced-service-page .portmak-service-visual__rotor, body.portmak-enhanced-service-page .portmak-service-visual__encoder, body.portmak-enhanced-service-page .portmak-service-visual__lens, body.portmak-enhanced-service-page .portmak-service-visual__touch-ring, body.portmak-enhanced-service-page .portmak-service-visual__knob, body.portmak-enhanced-service-page .portmak-service-visual__joint { fill: rgba(20, 93, 120, .43); stroke: #91efff; stroke-width: 2.5; } body.portmak-enhanced-service-page .portmak-service-visual__touch-core, body.portmak-enhanced-service-page .portmak-service-visual__lens-core, body.portmak-enhanced-service-page .portmak-service-visual__joint, body.portmak-enhanced-service-page .portmak-service-visual__fan-blades, body.portmak-enhanced-service-page .portmak-service-visual__bolt, body.portmak-enhanced-service-page .portmak-service-visual__arm-base { fill: #54d8fb; stroke: #b8f6ff; stroke-linejoin: round; stroke-width: 1.5; } body.portmak-enhanced-service-page .portmak-service-visual__robot-arm, body.portmak-enhanced-service-page .portmak-service-visual__drive .portmak-service-visual__fan-blades, body.portmak-enhanced-service-page .portmak-service-visual__motor .portmak-service-visual__rotor, body.portmak-enhanced-service-page .portmak-service-visual__servo-motor .portmak-service-visual__rotor { transform-box: fill-box; transform-origin: center; } body.portmak-enhanced-service-page .portmak-service-visual__robot-arm { animation: portmak-service-robot 4.8s ease-in-out infinite; } body.portmak-enhanced-service-page .portmak-service-visual__drive .portmak-service-visual__fan-blades, body.portmak-enhanced-service-page .portmak-service-visual__motor .portmak-service-visual__rotor, body.portmak-enhanced-service-page .portmak-service-visual__servo-motor .portmak-service-visual__rotor { animation: portmak-service-rotate 5.8s linear infinite; } body.portmak-enhanced-service-page .portmak-service-visual__vision-beam { fill: rgba(71, 210, 249, .17); stroke: rgba(147, 239, 255, .58); stroke-width: 1.5; animation: portmak-service-vision 2.8s ease-in-out infinite; } body.portmak-enhanced-service-page .portmak-service-visual__power-rails { stroke-dasharray: 5 9; animation: portmak-service-flow 2.2s linear infinite; } body.portmak-enhanced-service-page .portmak-service-detail__content { padding: 0; } body.portmak-enhanced-service-page .portmak-service-detail__content > section { margin-top: 28px; } body.portmak-enhanced-service-page .portmak-service-detail__content h2 { margin: 0; padding: 0; border: 0; font-size: clamp(26px, 3vw, 37px); font-weight: 800; letter-spacing: -.035em; line-height: 1.15; color: #102d43; } body.portmak-enhanced-service-page .portmak-service-detail__content h3 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.25; color: #102d43; } body.portmak-enhanced-service-page .portmak-service-detail__content p, body.portmak-enhanced-service-page .portmak-service-detail__content li { font-size: 16px; line-height: 1.76; color: #496075; } body.portmak-enhanced-service-page .portmak-service-detail-overview { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(285px, .58fr); gap: 32px; padding: 43px 47px; border: 1px solid #d7e7f0; border-radius: 22px; background: #fff; box-shadow: 0 17px 38px rgba(15, 45, 67, .075); } body.portmak-enhanced-service-page .portmak-service-detail-overview__copy > p:not(.portmak-service-detail__kicker) { margin: 19px 0 0; } body.portmak-enhanced-service-page .portmak-service-detail-preflight { align-self: start; padding: 27px 27px 25px; border: 1px solid #cde7f3; border-radius: 17px; background: linear-gradient(145deg, #f3fbff, #e3f7fe); } body.portmak-enhanced-service-page .portmak-service-detail-preflight > span, body.portmak-enhanced-service-page .portmak-service-detail-devices > span, body.portmak-enhanced-service-page .portmak-service-detail-contact > div > span { display: block; margin-bottom: 11px; font-size: 11px; font-weight: 800; letter-spacing: .12em; line-height: 1.35; color: #1687b5; } body.portmak-enhanced-service-page .portmak-service-detail-preflight strong { display: block; font-size: 22px; line-height: 1.2; color: #10304a; } body.portmak-enhanced-service-page .portmak-service-detail-preflight ul, body.portmak-enhanced-service-page .portmak-service-detail-checks, body.portmak-enhanced-service-page .portmak-service-detail-devices ul { margin: 18px 0 0; padding: 0; list-style: none; } body.portmak-enhanced-service-page .portmak-service-detail-preflight li, body.portmak-enhanced-service-page .portmak-service-detail-checks li { position: relative; padding-left: 21px; } body.portmak-enhanced-service-page .portmak-service-detail-preflight li + li, body.portmak-enhanced-service-page .portmak-service-detail-checks li + li { margin-top: 10px; } body.portmak-enhanced-service-page .portmak-service-detail-preflight li::before, body.portmak-enhanced-service-page .portmak-service-detail-checks li::before { position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border: 2px solid #0fa7dc; border-radius: 50%; content: ''; } body.portmak-enhanced-service-page .portmak-service-detail-related, body.portmak-enhanced-service-page .portmak-service-detail-gallery { padding: 39px 47px 43px; border: 1px solid #d8e8f0; border-radius: 22px; background: #fff; } body.portmak-enhanced-service-page .portmak-service-detail-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-top: 27px; } body.portmak-enhanced-service-page .portmak-service-detail-related__grid a { position: relative; display: flex; min-height: 159px; flex-direction: column; padding: 24px 20px 20px; border: 1px solid #cae5ef; border-radius: 15px; background: linear-gradient(145deg, #fbfeff, #edf9fd); color: #102d43; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } body.portmak-enhanced-service-page .portmak-service-detail-related__grid a > span { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 19px; border-radius: 8px; background: #e2f8ff; font-size: 17px; font-weight: 800; color: #078fc3; } body.portmak-enhanced-service-page .portmak-service-detail-related__grid strong { font-size: 17px; font-weight: 800; line-height: 1.32; } body.portmak-enhanced-service-page .portmak-service-detail-related__grid small { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; line-height: 1.6; color: #557086; } body.portmak-enhanced-service-page .portmak-service-detail-related__grid a:hover, body.portmak-enhanced-service-page .portmak-service-detail-related__grid a:focus-visible { border-color: #64d2ef; box-shadow: 0 16px 28px rgba(12, 82, 110, .13); outline: 0; transform: translateY(-3px); } body.portmak-enhanced-service-page .portmak-service-detail-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 27px; } body.portmak-enhanced-service-page .portmak-service-detail-gallery figure { margin: 0; overflow: hidden; border: 1px solid #cbe4ee; border-radius: 14px; background: #edf6f9; } body.portmak-enhanced-service-page .portmak-service-detail-gallery figure:only-child { grid-column: 1 / -1; max-width: 520px; } body.portmak-enhanced-service-page .portmak-service-detail-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } body.portmak-enhanced-service-page .portmak-service-detail-gallery figure:only-child img { aspect-ratio: 16 / 9; } body.portmak-enhanced-service-page .portmak-service-detail-section { padding: 39px 47px 44px; border: 1px solid #d8e8f0; border-radius: 22px; background: #fff; } body.portmak-enhanced-service-page .portmak-service-detail-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; } body.portmak-enhanced-service-page .portmak-service-detail-card-grid article { position: relative; min-height: 184px; padding: 26px 22px 22px; overflow: hidden; border: 1px solid #c9e2ed; border-radius: 15px; background: linear-gradient(145deg, #f8fdff, #edf9fd); } body.portmak-enhanced-service-page .portmak-service-detail-card-grid article::before { position: absolute; left: 22px; top: 0; width: 42px; height: 4px; border-radius: 0 0 8px 8px; background: #19b8e9; content: ''; } body.portmak-enhanced-service-page .portmak-service-detail-card-grid p { margin: 13px 0 0; font-size: 14px; line-height: 1.65; } body.portmak-enhanced-service-page .portmak-service-detail-scope { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(285px, .9fr); gap: 32px; padding: 42px 47px; border: 1px solid #d8e8f0; border-radius: 22px; background: linear-gradient(130deg, #fff, #f4fbfe); } body.portmak-enhanced-service-page .portmak-service-detail-scope__copy > p:not(.portmak-service-detail__kicker) { margin: 19px 0 0; } body.portmak-enhanced-service-page .portmak-service-detail-devices { padding: 27px; border-radius: 17px; background: #072138; box-shadow: 0 16px 30px rgba(6, 35, 54, .14); } body.portmak-enhanced-service-page .portmak-service-detail-devices > span { color: #5fddff; } body.portmak-enhanced-service-page .portmak-service-detail-devices ul { display: flex; flex-wrap: wrap; gap: 9px; } body.portmak-enhanced-service-page .portmak-service-detail-devices li { padding: 8px 11px; border: 1px solid rgba(139, 230, 255, .28); border-radius: 8px; background: rgba(93, 213, 248, .08); font-size: 13px; font-weight: 700; line-height: 1.45; color: #d9f5fd; } body.portmak-enhanced-service-page .portmak-service-detail-references { padding: 39px 47px 44px; border: 1px solid #d8e8f0; border-radius: 22px; background: #fff; } body.portmak-enhanced-service-page .portmak-service-detail-references__content { margin-top: 20px; } body.portmak-enhanced-service-page .portmak-service-detail-references__content > .so-panel { width: 100%; margin: 0; } body.portmak-enhanced-service-page .portmak-service-detail-references__content .panel-grid { margin: 0; } body.portmak-enhanced-service-page .portmak-service-detail-references__content .panel-grid + .panel-grid { margin-top: 20px; } body.portmak-enhanced-service-page .portmak-service-detail-auto-references h2 { margin: 0; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.18; color: #0a2942; } body.portmak-enhanced-service-page .portmak-service-detail-auto-references__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; } body.portmak-enhanced-service-page .portmak-service-detail-auto-reference-card { min-width: 0; border: 1px solid #d4e8f0; border-radius: 15px; overflow: hidden; background: #fafdff; box-shadow: 0 10px 24px rgba(9, 48, 71, .06); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } body.portmak-enhanced-service-page .portmak-service-detail-auto-reference-card > a { display: block; height: 100%; color: inherit; text-decoration: none; } body.portmak-enhanced-service-page .portmak-service-detail-auto-reference-card__media { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(rgba(21, 157, 205, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 157, 205, .1) 1px, transparent 1px), linear-gradient(135deg, #08223a, #115371); background-size: 21px 21px, 21px 21px, auto; } body.portmak-enhanced-service-page .portmak-service-detail-auto-reference-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } body.portmak-enhanced-service-page .portmak-service-detail-auto-reference-card__placeholder { padding: 8px 12px; border: 1px solid rgba(103, 220, 255, .45); border-radius: 7px; font-size: 12px; font-weight: 900; letter-spacing: .12em; color: #b4efff; } body.portmak-enhanced-service-page .portmak-service-detail-auto-reference-card__copy { display: block; padding: 18px 18px 17px; } body.portmak-enhanced-service-page .portmak-service-detail-auto-reference-card__copy > span { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 900; letter-spacing: .12em; color: #119ece; } body.portmak-enhanced-service-page .portmak-service-detail-auto-reference-card h3 { margin: 0; font-size: 17px; line-height: 1.38; color: #0c2e48; } body.portmak-enhanced-service-page .portmak-service-detail-auto-reference-card small { display: block; margin-top: 14px; font-size: 13px; font-weight: 800; color: #147da5; } body.portmak-enhanced-service-page .portmak-service-detail-auto-reference-card small b { margin-left: 4px; font-size: 17px; line-height: 0; } body.portmak-enhanced-service-page .portmak-service-detail-auto-reference-card:hover { border-color: #70d7f0; box-shadow: 0 17px 30px rgba(9, 66, 93, .14); transform: translateY(-3px); } body.portmak-enhanced-service-page .portmak-service-detail-auto-reference-card:hover img { transform: scale(1.045); } body.portmak-enhanced-service-page .portmak-service-detail-process { padding: 44px 47px 47px; border: 1px solid rgba(105, 217, 252, .23); border-radius: 22px; background: radial-gradient(circle at 92% 8%, rgba(46, 190, 235, .23), transparent 28%), linear-gradient(135deg, #061d30, #0b3a54); box-shadow: 0 20px 40px rgba(6, 32, 49, .15); } body.portmak-enhanced-service-page .portmak-service-detail-process h2, body.portmak-enhanced-service-page .portmak-service-detail-process .portmak-service-detail__kicker { color: #fff; } body.portmak-enhanced-service-page .portmak-service-detail-process .portmak-service-detail__kicker { color: #65dcff; } body.portmak-enhanced-service-page .portmak-service-detail-process ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; } body.portmak-enhanced-service-page .portmak-service-detail-process li { min-height: 206px; padding: 23px 20px 20px; border: 1px solid rgba(136, 226, 252, .24); border-radius: 14px; background: rgba(255, 255, 255, .055); } body.portmak-enhanced-service-page .portmak-service-detail-process li > b { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; margin-bottom: 18px; border-radius: 8px; background: rgba(37, 196, 239, .18); font-size: 12px; color: #84e8ff; } body.portmak-enhanced-service-page .portmak-service-detail-process h3 { color: #fff; } body.portmak-enhanced-service-page .portmak-service-detail-process p { margin: 12px 0 0; font-size: 14px; line-height: 1.63; color: #c9e8f3; } body.portmak-enhanced-service-page .portmak-service-detail-faq { padding: 39px 47px 43px; border: 1px solid #d8e8f0; border-radius: 22px; background: #fff; } body.portmak-enhanced-service-page .portmak-service-detail-faq details { margin-top: 13px; padding: 0 21px; border: 1px solid #d1e6ee; border-radius: 11px; background: #f8fcfe; } body.portmak-enhanced-service-page .portmak-service-detail-faq summary { padding: 18px 30px 18px 0; cursor: pointer; font-size: 16px; font-weight: 800; line-height: 1.45; color: #17334a; } body.portmak-enhanced-service-page .portmak-service-detail-faq summary::marker { color: #0fa7dc; } body.portmak-enhanced-service-page .portmak-service-detail-faq p { margin: -2px 0 19px; font-size: 15px; line-height: 1.72; } body.portmak-enhanced-service-page .portmak-service-detail-contact { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 38px 47px; border: 1px solid #bfe4f1; border-radius: 20px; background: linear-gradient(110deg, #eaf9ff, #fafeff); } body.portmak-enhanced-service-page .portmak-service-detail-contact > div:first-child { max-width: 670px; } body.portmak-enhanced-service-page .portmak-service-detail-contact h2 { font-size: clamp(25px, 2.8vw, 34px); } body.portmak-enhanced-service-page .portmak-service-detail-contact p { margin: 15px 0 0; } body.portmak-enhanced-service-page .portmak-service-detail-contact__actions { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 10px; } body.portmak-enhanced-service-page .portmak-service-detail-contact .portmak-link-button.is-outline { border-color: #54889e; background: #fff; color: #15344c !important; } @keyframes portmak-service-flow { to { stroke-dashoffset: -76; } } @keyframes portmak-service-led { 0%, 100% { opacity: .34; } 50% { opacity: 1; } } @keyframes portmak-service-rotate { to { transform: rotate(360deg); } } @keyframes portmak-service-robot { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } } @keyframes portmak-service-vision { 0%, 100% { opacity: .38; } 50% { opacity: .9; } } @media (max-width: 1080px) { body.portmak-enhanced-service-page .portmak-service-detail-hero { grid-template-columns: minmax(0, 1fr) minmax(280px, .86fr); padding-right: 42px; padding-left: 42px; } body.portmak-enhanced-service-page .portmak-service-detail-card-grid, body.portmak-enhanced-service-page .portmak-service-detail-process ol, body.portmak-enhanced-service-page .portmak-service-detail-auto-references__grid, body.portmak-enhanced-service-page .portmak-service-detail-related__grid, body.portmak-enhanced-service-page .portmak-service-detail-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.portmak-enhanced-service-page .portmak-service-detail-card-grid article, body.portmak-enhanced-service-page .portmak-service-detail-process li { min-height: 0; } } @media (max-width: 820px) { body.portmak-enhanced-service-page #main.portmak-service-detail-shell { padding-top: 23px; padding-bottom: 42px; } body.portmak-enhanced-service-page .portmak-service-detail-hero { grid-template-columns: 1fr; gap: 18px; min-height: 0; padding: 37px 29px 24px; } body.portmak-enhanced-service-page .portmak-service-detail-hero__visual { order: -1; } body.portmak-enhanced-service-page .portmak-service-visual { width: min(100%, 475px); } body.portmak-enhanced-service-page .portmak-service-detail-hero__breadcrumbs { margin-top: 2px; } body.portmak-enhanced-service-page .portmak-service-detail-overview, body.portmak-enhanced-service-page .portmak-service-detail-scope { grid-template-columns: 1fr; gap: 25px; padding: 34px 29px; } body.portmak-enhanced-service-page .portmak-service-detail-section, body.portmak-enhanced-service-page .portmak-service-detail-related, body.portmak-enhanced-service-page .portmak-service-detail-gallery, body.portmak-enhanced-service-page .portmak-service-detail-references, body.portmak-enhanced-service-page .portmak-service-detail-process, body.portmak-enhanced-service-page .portmak-service-detail-faq { padding: 34px 29px; } body.portmak-enhanced-service-page .portmak-service-detail-contact { align-items: flex-start; flex-direction: column; padding: 34px 29px; } } @media (max-width: 560px) { body.portmak-enhanced-service-page #main.portmak-service-detail-shell { padding-right: 14px; padding-left: 14px; } body.portmak-enhanced-service-page .portmak-service-detail-hero { padding: 29px 20px 20px; border-radius: 17px; } body.portmak-enhanced-service-page .portmak-service-detail-hero h1 { font-size: 34px; } body.portmak-enhanced-service-page .portmak-service-detail-hero__lead { font-size: 16px; } body.portmak-enhanced-service-page .portmak-service-detail-hero__actions, body.portmak-enhanced-service-page .portmak-service-detail-contact__actions { width: 100%; } body.portmak-enhanced-service-page .portmak-service-detail-hero__actions .portmak-link-button, body.portmak-enhanced-service-page .portmak-service-detail-contact__actions .portmak-link-button { flex: 1 1 100%; justify-content: center; } body.portmak-enhanced-service-page .portmak-service-detail-hero__facts { display: grid; gap: 7px; } body.portmak-enhanced-service-page .portmak-service-detail-overview, body.portmak-enhanced-service-page .portmak-service-detail-scope, body.portmak-enhanced-service-page .portmak-service-detail-section, body.portmak-enhanced-service-page .portmak-service-detail-related, body.portmak-enhanced-service-page .portmak-service-detail-gallery, body.portmak-enhanced-service-page .portmak-service-detail-references, body.portmak-enhanced-service-page .portmak-service-detail-process, body.portmak-enhanced-service-page .portmak-service-detail-faq, body.portmak-enhanced-service-page .portmak-service-detail-contact { padding: 28px 20px; border-radius: 16px; } body.portmak-enhanced-service-page .portmak-service-detail__content h2 { font-size: 27px; } body.portmak-enhanced-service-page .portmak-service-detail-card-grid, body.portmak-enhanced-service-page .portmak-service-detail-process ol, body.portmak-enhanced-service-page .portmak-service-detail-auto-references__grid, body.portmak-enhanced-service-page .portmak-service-detail-related__grid, body.portmak-enhanced-service-page .portmak-service-detail-gallery__grid { grid-template-columns: 1fr; } body.portmak-enhanced-service-page .portmak-service-detail-faq details { padding-right: 16px; padding-left: 16px; } } @media (prefers-reduced-motion: reduce) { body.portmak-enhanced-service-page .portmak-service-visual * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* -------------------------------------------------------------------------- * Corporate, portal and gallery pages * -------------------------------------------------------------------------- */ body.portmak-service-tracking-page, body.portmak-staff-portal-page, body.portmak-bank-details-page, body.portmak-company-profile-page, body.portmak-technical-gallery-page { background: #eff5f8; } body.portmak-service-tracking-page #main.portmak-utility-shell, body.portmak-staff-portal-page #main.portmak-utility-shell, body.portmak-bank-details-page #main.portmak-utility-shell, body.portmak-company-profile-page #main.portmak-company-profile, body.portmak-technical-gallery-page #main.portmak-technical-gallery { padding-top: 42px; padding-bottom: 68px; } body.portmak-service-tracking-page .portmak-utility-page, body.portmak-staff-portal-page .portmak-utility-page, body.portmak-bank-details-page .portmak-utility-page, body.portmak-company-profile-page .portmak-company-profile__article, body.portmak-technical-gallery-page .portmak-technical-gallery__article { max-width: 1120px; margin: 0 auto; } .portmak-utility-hero, .portmak-company-profile__hero, .portmak-technical-gallery__hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .8fr); align-items: center; gap: 40px; overflow: hidden; min-height: 365px; padding: 58px 64px; border: 1px solid rgba(86, 205, 245, .28); border-radius: 25px; background: linear-gradient(120deg, rgba(2, 24, 42, .98), rgba(5, 57, 81, .94)), #082238; box-shadow: 0 26px 58px rgba(3, 31, 49, .17); isolation: isolate; } .portmak-utility-hero::before, .portmak-company-profile__hero::before, .portmak-technical-gallery__hero::before { position: absolute; z-index: -1; top: -170px; right: -120px; width: 510px; height: 510px; border: 1px solid rgba(115, 221, 255, .18); border-radius: 50%; box-shadow: 0 0 0 45px rgba(72, 190, 230, .035), 0 0 0 110px rgba(72, 190, 230, .025); content: ''; } .portmak-utility-hero::after, .portmak-company-profile__hero::after, .portmak-technical-gallery__hero::after { position: absolute; z-index: -1; inset: 0; opacity: .42; background-image: linear-gradient(rgba(129, 232, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(129, 232, 255, .08) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .3) 64%, transparent 100%); content: ''; } .portmak-utility-hero__copy, .portmak-company-profile__copy, .portmak-technical-gallery__hero > div:first-child { position: relative; z-index: 2; } .portmak-utility-hero__eyebrow, .portmak-company-profile__copy > p, .portmak-technical-gallery__hero > div:first-child > p { margin: 0 0 15px; color: #68d9fb; font-size: 12px; font-weight: 900; letter-spacing: 1.8px; line-height: 1.3; text-transform: uppercase; } .portmak-utility-hero h1, .portmak-company-profile__hero h1, .portmak-technical-gallery__hero h1 { max-width: 700px; margin: 0; color: #fff; font-size: clamp(39px, 4.6vw, 61px); font-weight: 900; letter-spacing: -1.8px; line-height: 1.04; } .portmak-utility-hero__lead, .portmak-company-profile__lead, .portmak-technical-gallery__hero > div:first-child > span { display: block; max-width: 660px; margin: 20px 0 0; color: rgba(236, 249, 255, .87); font-size: 18px; line-height: 1.75; } .portmak-utility-hero__actions, .portmak-company-profile__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; } .portmak-utility-hero .portmak-link-button, .portmak-company-profile__hero .portmak-link-button, .portmak-technical-gallery__cta .portmak-link-button { padding: 13px 20px; border-radius: 10px; font-size: 14px; font-weight: 800; } .portmak-utility-hero .portmak-link-button.is-outline, .portmak-company-profile__hero .portmak-link-button.is-outline { border-color: rgba(210, 248, 255, .74); background: rgba(3, 33, 52, .24); color: #fff !important; } .portmak-utility-hero__facts, .portmak-company-profile__copy > ul, .portmak-technical-gallery__hero ul { display: flex; flex-wrap: wrap; gap: 9px 22px; margin: 27px 0 0; padding: 0; list-style: none; color: rgba(234, 250, 255, .9); font-size: 13px; font-weight: 700; } .portmak-utility-hero__facts li, .portmak-company-profile__copy > ul li, .portmak-technical-gallery__hero li { position: relative; padding-left: 15px; } .portmak-utility-hero__facts li::before, .portmak-company-profile__copy > ul li::before, .portmak-technical-gallery__hero li::before { position: absolute; top: .52em; left: 0; width: 6px; height: 6px; border: 1px solid #5fe2ff; border-radius: 100%; box-shadow: 0 0 12px rgba(85, 220, 255, .7); content: ''; } .portmak-utility-hero__visual, .portmak-company-profile__visual, .portmak-technical-gallery__visual { position: relative; z-index: 1; min-height: 250px; } .portmak-utility-visual { display: block; width: min(100%, 495px); margin: 0 auto; overflow: visible; } .portmak-utility-visual__grid { fill: none; stroke: rgba(119, 224, 251, .14); stroke-width: 1; } .portmak-utility-visual__line { fill: none; stroke: rgba(66, 204, 240, .24); stroke-width: 3; } .portmak-utility-visual__flow { fill: none; stroke: #70e7ff; stroke-dasharray: 20 24; stroke-linecap: round; stroke-width: 3.2; filter: drop-shadow(0 0 5px rgba(121, 236, 255, .9)); animation: portmak-utility-flow 6s linear infinite; } .portmak-utility-visual__device rect, .portmak-utility-visual__dashboard rect { fill: rgba(6, 48, 70, .86); stroke: rgba(128, 232, 255, .72); stroke-width: 2; } .portmak-utility-visual__device path, .portmak-utility-visual__dashboard path { fill: none; stroke: #75e9ff; stroke-linecap: round; stroke-width: 2.5; } .portmak-utility-visual__device circle, .portmak-utility-visual__dashboard circle { fill: #70e7ff; filter: drop-shadow(0 0 4px #6ce5ff); } .portmak-utility-visual__node { fill: #ecffff; filter: drop-shadow(0 0 6px #73eaff); animation: portmak-utility-node 2.8s ease-in-out infinite; } .portmak-utility-visual__node--two { animation-delay: -.9s; } .portmak-utility-visual__node--three { animation-delay: -1.8s; } .portmak-utility-visual__label { fill: #b9f4ff; font-family: Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; } .portmak-utility-surface, .portmak-company-profile__intro, .portmak-company-profile__scope, .portmak-company-profile__process, .portmak-company-profile__capabilities, .portmak-technical-gallery__surface { margin-top: 25px; padding: 47px 50px; border: 1px solid #d0e4ec; border-radius: 22px; background: #fff; box-shadow: 0 16px 40px rgba(15, 59, 79, .055); } .portmak-utility-surface__intro, .portmak-technical-gallery__surface > header, .portmak-company-profile__scope > header, .portmak-company-profile__capabilities > header { max-width: 760px; } .portmak-utility-surface__intro > p, .portmak-technical-gallery__surface > header > p, .portmak-company-profile__scope > header > p, .portmak-company-profile__capabilities > header > p, .portmak-bank-details__note p, .portmak-utility-inline-cta p, .portmak-utility-support > div:first-child > p, .portmak-technical-gallery__cta p, .portmak-company-profile__process-copy > p, .portmak-company-profile__cta p { margin: 0 0 9px; color: #078abf; font-size: 12px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; } .portmak-utility-surface h2, .portmak-technical-gallery__surface h2, .portmak-company-profile__intro h2, .portmak-company-profile__scope h2, .portmak-company-profile__process h2, .portmak-company-profile__capabilities h2, .portmak-utility-support h2, .portmak-technical-gallery__cta h2, .portmak-company-profile__cta h2 { margin: 0; color: #092e4a; font-size: clamp(29px, 3vw, 40px); font-weight: 900; letter-spacing: -1px; line-height: 1.15; } .portmak-utility-surface__intro > span, .portmak-technical-gallery__surface > header > span, .portmak-company-profile__process-copy > span, .portmak-company-profile__cta > div > span, .portmak-technical-gallery__cta > div > span, .portmak-utility-support > div:first-child > span, .portmak-bank-details__note span { display: block; margin-top: 14px; color: #557184; font-size: 16px; line-height: 1.72; } /* Service tracking */ .portmak-service-tracking__portal-card, .portmak-staff-portal__access-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 34px; } .portmak-service-tracking__portal-card > div, .portmak-staff-portal__access-grid article { position: relative; display: grid; gap: 9px; min-height: 185px; padding: 25px 22px; border: 1px solid #d4e9f0; border-radius: 16px; background: linear-gradient(145deg, #fafdff, #eff9fc); } .portmak-service-tracking__portal-card b, .portmak-staff-portal__access-grid b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #087dad, #1bc4ef); font-size: 12px; } .portmak-service-tracking__portal-card strong, .portmak-staff-portal__access-grid h3 { margin: 6px 0 0; color: #0a3857; font-size: 18px; font-weight: 850; line-height: 1.28; } .portmak-service-tracking__portal-card span, .portmak-staff-portal__access-grid p { margin: 0; color: #567185; font-size: 14px; line-height: 1.65; } .portmak-service-tracking__editor-content { margin-top: 31px; } .portmak-service-tracking__editor-content:empty { display: none; } .portmak-service-tracking__editor-content > *:first-child { margin-top: 0; } .portmak-service-tracking__editor-content > *:last-child { margin-bottom: 0; } .portmak-utility-inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; padding: 24px 27px; border: 1px solid #a9dded; border-radius: 16px; background: linear-gradient(104deg, #ecfaff, #f9fdff); } .portmak-utility-inline-cta p { margin-bottom: 7px; } .portmak-utility-inline-cta strong { color: #093957; font-size: 19px; font-weight: 850; } .portmak-utility-inline-cta .portmak-link-button, .portmak-utility-support .portmak-link-button, .portmak-bank-details__note .portmak-link-button { flex: 0 0 auto; padding: 13px 19px; border-radius: 10px; font-size: 14px; font-weight: 800; } .portmak-utility-support, .portmak-bank-details__note, .portmak-technical-gallery__cta, .portmak-company-profile__cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 25px; padding: 38px 45px; border: 1px solid #bae2ef; border-radius: 21px; background: linear-gradient(105deg, #e8f9ff, #faffff); } .portmak-utility-support > div:first-child, .portmak-bank-details__note > div:first-child, .portmak-technical-gallery__cta > div, .portmak-company-profile__cta > div { max-width: 695px; } .portmak-utility-support__actions { display: flex; flex-wrap: wrap; gap: 9px; } /* Staff portal */ .portmak-utility-hero--staff { background: linear-gradient(120deg, rgba(3, 25, 44, .99), rgba(28, 54, 86, .94)), #09253c; } .portmak-staff-visual { position: relative; display: grid; place-items: center; min-height: 256px; } .portmak-staff-visual__card { position: relative; z-index: 2; display: grid; grid-template-columns: 52px 1fr; gap: 11px 13px; width: min(100%, 305px); padding: 25px; border: 1px solid rgba(118, 230, 255, .68); border-radius: 19px; background: linear-gradient(145deg, rgba(29, 85, 113, .92), rgba(4, 31, 50, .94)); box-shadow: 0 20px 42px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .08); transform: rotate(-3deg); } .portmak-staff-visual__chip { display: grid; grid-row: span 2; place-items: center; width: 52px; height: 52px; border-radius: 15px; color: #062238; background: linear-gradient(135deg, #99f5ff, #31c8f0); font-size: 21px; font-weight: 950; box-shadow: 0 0 27px rgba(73, 220, 255, .44); } .portmak-staff-visual__card b { align-self: end; color: #fff; font-size: 18px; font-weight: 850; } .portmak-staff-visual__card i { display: block; height: 7px; border-radius: 999px; background: rgba(195, 247, 255, .38); } .portmak-staff-visual__card i:nth-of-type(1) { grid-column: 1 / -1; width: 85%; } .portmak-staff-visual__card i:nth-of-type(2) { grid-column: 1 / -1; width: 63%; } .portmak-staff-visual__card i:nth-of-type(3) { grid-column: 1 / -1; width: 76%; } .portmak-staff-visual__card small { grid-column: 1 / -1; margin-top: 8px; color: #74e2fa; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; } .portmak-staff-visual__orbit { position: absolute; border: 1px solid rgba(103, 224, 255, .3); border-radius: 100%; animation: portmak-staff-orbit 16s linear infinite; } .portmak-staff-visual__orbit--one { width: 260px; height: 260px; } .portmak-staff-visual__orbit--two { width: 356px; height: 185px; transform: rotate(28deg); animation-duration: 22s; animation-direction: reverse; } .portmak-staff-visual__signal { position: absolute; width: 13px; height: 13px; border-radius: 100%; background: #a5f8ff; box-shadow: 0 0 16px #43dfff; animation: portmak-staff-signal 3.3s ease-in-out infinite; } .portmak-staff-visual__signal--one { top: 20px; right: 24px; } .portmak-staff-visual__signal--two { bottom: 24px; left: 24px; animation-delay: -1.5s; } /* Bank information */ .portmak-utility-hero--bank { background: linear-gradient(120deg, rgba(2, 26, 45, .99), rgba(10, 77, 101, .93)), #08334b; } .portmak-bank-visual { position: relative; display: grid; place-items: center; min-height: 250px; } .portmak-bank-visual__card { position: relative; z-index: 2; display: grid; grid-template-columns: 54px 1fr; gap: 13px; width: min(100%, 310px); padding: 27px; border: 1px solid rgba(139, 238, 255, .72); border-radius: 20px; background: linear-gradient(130deg, rgba(15, 105, 136, .84), rgba(3, 37, 58, .92)); box-shadow: 0 22px 50px rgba(0, 0, 0, .24); transform: rotate(4deg); } .portmak-bank-visual__card span { display: grid; grid-row: span 2; place-items: center; width: 54px; height: 54px; border-radius: 17px; color: #083049; background: linear-gradient(135deg, #aaf8ff, #41c7ec); font-size: 28px; font-weight: 900; } .portmak-bank-visual__card i { display: block; height: 8px; border-radius: 9px; background: rgba(224, 251, 255, .5); } .portmak-bank-visual__card i:nth-of-type(1) { width: 100%; } .portmak-bank-visual__card i:nth-of-type(2) { width: 74%; } .portmak-bank-visual__card i:nth-of-type(3) { width: 58%; } .portmak-bank-visual__card b { grid-column: 1 / -1; margin-top: 4px; color: #d7f9ff; font-size: 12px; letter-spacing: 3px; } .portmak-bank-visual__line { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, #62e4ff, transparent); box-shadow: 0 0 11px rgba(98, 228, 255, .7); animation: portmak-bank-line 4.4s ease-in-out infinite; } .portmak-bank-visual__line--one { top: 42px; left: 5px; width: 170px; transform: rotate(-18deg); } .portmak-bank-visual__line--two { right: 5px; bottom: 50px; width: 178px; transform: rotate(-18deg); animation-delay: -2s; } .portmak-bank-visual__node { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #a8f9ff; box-shadow: 0 0 15px #69e9ff; animation: portmak-utility-node 2.5s ease-in-out infinite; } .portmak-bank-visual__node--one { top: 34px; right: 68px; } .portmak-bank-visual__node--two { bottom: 36px; left: 58px; animation-delay: -1.25s; } .portmak-bank-details__editor { display: grid; gap: 12px; margin-top: 34px; } .portmak-bank-details__editor > :is(h1, h2, h3, h4, h5, h6) { margin: 20px 0 4px; padding: 0 0 12px; border-bottom: 2px solid #52c9e7; color: #0a3a59; font-size: 22px; font-weight: 900; } .portmak-bank-details__editor > :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; } .portmak-bank-details__editor > p, .portmak-bank-details__editor > li, .portmak-bank-details__editor td { position: relative; margin: 0; padding: 17px 20px; border: 1px solid #d8eaf1; border-radius: 12px; color: #284c62; background: #fbfeff; font-size: 16px; font-weight: 600; line-height: 1.65; } .portmak-bank-details__editor hr { width: 100%; height: 1px; margin: 18px 0; border: 0; background: linear-gradient(90deg, transparent, #9edfec, transparent); } .portmak-bank-details__editor ul, .portmak-bank-details__editor ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .portmak-bank-iban-row { display: flex !important; align-items: center; justify-content: space-between; gap: 15px; border-color: #99dce9 !important; background: linear-gradient(105deg, #eafeff, #faffff) !important; color: #073d5b !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 15px !important; letter-spacing: .35px; } .portmak-bank-iban-copy { flex: 0 0 auto; padding: 8px 11px; border: 1px solid #60c5dc; border-radius: 8px; cursor: pointer; color: #087ca6; background: #fff; font: inherit; font-family: inherit; font-size: 12px; font-weight: 800; transition: .18s ease; } .portmak-bank-iban-copy:hover, .portmak-bank-iban-copy:focus-visible { border-color: #0ca9d1; color: #fff; background: #099dca; outline: 0; } .portmak-bank-copy-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Parsed bank cards: the page keeps its data in SiteOrigin, while this layer * removes old column markup and presents each approved account consistently. */ .portmak-bank-account-list { display: grid; gap: 18px; margin-top: 34px; } .portmak-bank-account { overflow: hidden; border: 1px solid #d8e8ee; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px rgba(10, 59, 82, .06); } .portmak-bank-account.is-vakifbank { border-color: #e3c96b; background: linear-gradient(130deg, #fffdf5 0%, #fff 53%, #f8fcfe 100%); box-shadow: 0 15px 34px rgba(121, 96, 16, .11); } .portmak-bank-account__header { display: flex; align-items: center; gap: 20px; padding: 23px 26px; border-bottom: 1px solid #e5eff3; background: linear-gradient(105deg, rgba(241, 250, 253, .92), rgba(255, 255, 255, .94)); } .is-vakifbank .portmak-bank-account__header { border-bottom-color: #efe2ab; background: linear-gradient(105deg, #fff8d7, #fffdf4 54%, #f8fcfe); } .portmak-bank-account__header img { display: block; width: 152px; height: 62px; padding: 7px 11px; border: 1px solid #e0ebef; border-radius: 11px; object-fit: contain; object-position: center; background: #fff; } .portmak-bank-account__mark { display: grid; place-items: center; flex: 0 0 62px; width: 62px; height: 62px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #0a7399, #12add4); box-shadow: 0 10px 18px rgba(18, 151, 188, .21); font-size: 27px; font-weight: 900; } .portmak-bank-account__header span { display: block; margin-bottom: 5px; color: #1085ad; font-size: 11px; font-weight: 900; letter-spacing: 1.2px; } .is-vakifbank .portmak-bank-account__header span { color: #8c6c09; } .portmak-bank-account__header h3 { margin: 0; color: #093b59; font-size: 24px; font-weight: 900; line-height: 1.15; } .portmak-bank-account__details { margin: 0; padding: 7px 26px 13px; } .portmak-bank-account__details > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid #edf3f5; } .portmak-bank-account__details > div:last-child { border-bottom: 0; } .portmak-bank-account__details dt { color: #628092; font-size: 13px; font-weight: 850; letter-spacing: .5px; text-transform: uppercase; } .portmak-bank-account__details dd { min-width: 0; margin: 0; color: #123f59; font-size: 15px; font-weight: 700; line-height: 1.55; } .portmak-bank-account__iban dd { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .portmak-bank-account__iban code { min-width: 0; padding: 8px 10px; border: 1px solid #c8e6ee; border-radius: 8px; color: #063d59; background: #ecfbff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; font-weight: 750; letter-spacing: .3px; word-break: break-word; } .is-vakifbank .portmak-bank-account__iban code { border-color: #ead486; background: #fff9df; } .portmak-bank-account__copy { flex: 0 0 auto; padding: 9px 12px; border: 1px solid #55bdd7; border-radius: 8px; cursor: pointer; color: #087ea7; background: #fff; font: inherit; font-size: 12px; font-weight: 850; white-space: nowrap; transition: .18s ease; } .portmak-bank-account__copy:hover, .portmak-bank-account__copy:focus-visible { border-color: #079dca; color: #fff; background: #099dca; outline: 0; } .portmak-bank-account__recipient dd { max-width: 790px; } .portmak-bank-account__empty { margin: 30px 0 0; padding: 18px 20px; border: 1px solid #f0c7c7; border-radius: 12px; color: #7a3030; background: #fff7f7; } .portmak-bank-details__note strong { display: block; color: #093957; font-size: 24px; font-weight: 900; line-height: 1.3; } /* Company profile */ .portmak-company-profile__hero { background: linear-gradient(120deg, rgba(2, 23, 40, .99), rgba(5, 69, 94, .95)), #082840; } .portmak-profile-visual { position: relative; display: grid; place-items: center; min-height: 260px; } .portmak-profile-visual__core { position: relative; z-index: 2; display: grid; place-items: center; width: 102px; height: 102px; border: 1px solid rgba(213, 251, 255, .9); border-radius: 28px; color: #05263d; background: linear-gradient(135deg, #e6feff, #5ddcf4); box-shadow: 0 0 0 12px rgba(85, 217, 247, .11), 0 0 44px rgba(85, 219, 247, .55); font-size: 30px; font-weight: 950; letter-spacing: -1px; } .portmak-profile-visual__ring { position: absolute; border: 1px solid rgba(117, 231, 255, .34); border-radius: 50%; animation: portmak-profile-rotate 19s linear infinite; } .portmak-profile-visual__ring--one { width: 230px; height: 230px; } .portmak-profile-visual__ring--two { width: 355px; height: 170px; transform: rotate(34deg); animation-duration: 27s; animation-direction: reverse; } .portmak-profile-visual__line { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, #67e7ff, transparent); box-shadow: 0 0 14px rgba(102, 231, 255, .75); } .portmak-profile-visual__line--one { top: 58px; right: 8px; width: 150px; transform: rotate(-28deg); } .portmak-profile-visual__line--two { bottom: 52px; left: 3px; width: 154px; transform: rotate(-28deg); } .portmak-profile-visual__dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #b2fbff; box-shadow: 0 0 14px #57e1ff; animation: portmak-utility-node 3s ease-in-out infinite; } .portmak-profile-visual__dot--one { top: 42px; left: 51px; } .portmak-profile-visual__dot--two { right: 52px; bottom: 46px; animation-delay: -1s; } .portmak-profile-visual__dot--three { right: 18px; top: 129px; animation-delay: -2s; } .portmak-company-profile__intro { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 46px; } .portmak-company-profile__intro > div:first-child > p { margin: 0 0 9px; color: #078abf; font-size: 12px; font-weight: 900; letter-spacing: 1.5px; } .portmak-company-profile__intro .reading p { margin: 0 0 17px; color: #49677b; font-size: 16px; line-height: 1.82; } .portmak-company-profile__intro .reading p:last-child { margin-bottom: 0; } .portmak-company-profile__scope-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-top: 31px; } .portmak-company-profile__scope-grid article { min-height: 214px; padding: 24px 20px; border: 1px solid #d6e9ef; border-radius: 15px; background: linear-gradient(145deg, #fbfeff, #f2faff); } .portmak-company-profile__scope-grid b { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: #0d86af; background: #e0f6fc; font-size: 11px; font-weight: 900; } .portmak-company-profile__scope-grid h3 { margin: 19px 0 9px; color: #0a3b5b; font-size: 18px; font-weight: 850; line-height: 1.27; } .portmak-company-profile__scope-grid p { margin: 0; color: #547184; font-size: 14px; line-height: 1.65; } .portmak-company-profile__process { display: grid; grid-template-columns: minmax(265px, .7fr) minmax(0, 1.2fr); gap: 48px; background: linear-gradient(120deg, #06283e, #0b5974); border-color: #217f9e; } .portmak-company-profile__process h2, .portmak-company-profile__process-copy > span { color: #fff; } .portmak-company-profile__process-copy > p { color: #70e0fb; } .portmak-company-profile__process-copy > span { color: rgba(236, 251, 255, .8); } .portmak-company-profile__process ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .portmak-company-profile__process li { display: grid; gap: 8px; min-height: 145px; padding: 19px; border: 1px solid rgba(170, 239, 255, .22); border-radius: 14px; background: rgba(4, 40, 61, .39); } .portmak-company-profile__process li b { color: #6be4ff; font-size: 12px; font-weight: 900; letter-spacing: 1px; } .portmak-company-profile__process li strong { color: #fff; font-size: 17px; font-weight: 850; } .portmak-company-profile__process li span { color: rgba(227, 248, 253, .75); font-size: 14px; line-height: 1.6; } .portmak-company-profile__capabilities > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 31px; } .portmak-company-profile__capabilities article { padding: 25px 22px; border-top: 3px solid #3bc9e9; border-radius: 12px; background: #f0faff; } .portmak-company-profile__capabilities h3 { margin: 0 0 11px; color: #0b3d5c; font-size: 20px; font-weight: 850; } .portmak-company-profile__capabilities p { margin: 0; color: #547185; font-size: 14px; line-height: 1.65; } .portmak-company-profile__cta { margin-bottom: 0; } /* Technical gallery */ .portmak-technical-gallery__hero { background: linear-gradient(120deg, rgba(3, 26, 44, .99), rgba(8, 84, 103, .92)), #06324b; } .portmak-gallery-visual { position: relative; min-height: 256px; } .portmak-gallery-visual__frame { position: absolute; display: block; width: 190px; height: 137px; border: 1px solid rgba(151, 241, 255, .74); border-radius: 14px; background: linear-gradient(135deg, rgba(55, 183, 214, .42), transparent 44%), linear-gradient(145deg, rgba(8, 60, 85, .85), rgba(2, 31, 48, .94)); box-shadow: 0 14px 30px rgba(0, 0, 0, .22); } .portmak-gallery-visual__frame::before { position: absolute; bottom: 26px; left: 25px; width: 120px; height: 42px; border: 2px solid rgba(171, 247, 255, .75); border-bottom: 0; border-radius: 100% 100% 0 0; content: ''; } .portmak-gallery-visual__frame::after { position: absolute; top: 22px; right: 23px; width: 14px; height: 14px; border-radius: 50%; background: #88f2ff; box-shadow: 0 0 14px #5be8ff; content: ''; } .portmak-gallery-visual__frame--one { top: 25px; left: 44px; transform: rotate(-10deg); animation: portmak-gallery-card 7s ease-in-out infinite; } .portmak-gallery-visual__frame--two { top: 62px; right: 21px; transform: rotate(8deg); animation: portmak-gallery-card 7s ease-in-out -2.4s infinite; } .portmak-gallery-visual__frame--three { bottom: 18px; left: 128px; transform: rotate(-1deg); animation: portmak-gallery-card 7s ease-in-out -4.8s infinite; } .portmak-gallery-visual > i, .portmak-gallery-visual > b { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #a8f9ff; box-shadow: 0 0 16px #5feaff; animation: portmak-utility-node 2.7s ease-in-out infinite; } .portmak-gallery-visual > i { top: 8px; right: 65px; } .portmak-gallery-visual > b { bottom: 5px; left: 59px; animation-delay: -1.4s; } .portmak-technical-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 31px 0 0; } .portmak-technical-gallery__item { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; min-height: 0; margin: 0 !important; border: 1px solid #cce5ee; border-radius: 14px; background: #ecf5f8; box-shadow: 0 10px 25px rgba(14, 57, 78, .06); } .portmak-technical-gallery__item::after { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, transparent 45%, rgba(4, 42, 62, .7)); content: ''; pointer-events: none; transition: opacity .2s ease; } .portmak-technical-gallery__item:hover::after, .portmak-technical-gallery__item:focus-visible::after { opacity: 1; } .portmak-technical-gallery__item img { display: block; width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover; transition: transform .45s ease; } .portmak-technical-gallery__item:hover img { transform: scale(1.045); } .portmak-technical-gallery__item > span { position: absolute; z-index: 2; right: 16px; bottom: 13px; left: 16px; margin: 0; color: #fff; font-size: 13px; font-weight: 750; line-height: 1.4; text-shadow: 0 2px 10px rgba(0, 0, 0, .4); } .portmak-technical-gallery__editor { margin-top: 30px; } .portmak-technical-gallery__editor > :first-child { margin-top: 0; } .portmak-technical-gallery__editor > :last-child { margin-bottom: 0; } .portmak-technical-gallery__editor img { cursor: zoom-in; } .portmak-technical-gallery__cta { margin-bottom: 0; } .portmak-technical-gallery__cta .portmak-link-button.is-outline, .portmak-company-profile__cta .portmak-link-button.is-outline { border-color: #75a4b6; color: #123f57 !important; background: #fff; } .portmak-technical-gallery__cta { flex-wrap: wrap; } .portmak-technical-gallery__cta > div { margin-right: auto; } .portmak-gallery-lightbox-open { overflow: hidden; } .portmak-gallery-lightbox { position: fixed; z-index: 999999; inset: 0; display: grid; place-items: center; padding: 32px; } .portmak-gallery-lightbox[hidden] { display: none; } .portmak-gallery-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 17, 29, .88); backdrop-filter: blur(8px); } .portmak-gallery-lightbox__dialog { position: relative; z-index: 1; display: grid; place-items: center; width: min(1050px, 100%); max-height: calc(100vh - 64px); } .portmak-gallery-lightbox__dialog img { display: block; max-width: 100%; max-height: calc(100vh - 86px); border: 1px solid rgba(193, 244, 255, .5); border-radius: 12px; box-shadow: 0 24px 80px rgba(0, 0, 0, .48); } .portmak-gallery-lightbox__close { position: absolute; top: 12px; right: 12px; padding: 9px 13px; border: 1px solid rgba(220, 249, 255, .7); border-radius: 8px; cursor: pointer; color: #fff; background: rgba(4, 45, 65, .76); font-size: 13px; font-weight: 800; } .portmak-gallery-lightbox__close:hover, .portmak-gallery-lightbox__close:focus-visible { background: #0d9dc7; outline: 0; } @keyframes portmak-utility-flow { to { stroke-dashoffset: -176; } } @keyframes portmak-utility-node { 0%, 100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } } @keyframes portmak-staff-orbit { to { transform: rotate(360deg); } } @keyframes portmak-staff-signal { 0%, 100% { opacity: .35; transform: scale(.72); } 50% { opacity: 1; transform: scale(1.25); } } @keyframes portmak-bank-line { 0%, 100% { opacity: .2; transform: translateX(-10px) rotate(-18deg); } 50% { opacity: 1; transform: translateX(10px) rotate(-18deg); } } @keyframes portmak-profile-rotate { to { transform: rotate(360deg); } } @keyframes portmak-gallery-card { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } } @media (max-width: 1080px) { body.portmak-service-tracking-page #main.portmak-utility-shell, body.portmak-staff-portal-page #main.portmak-utility-shell, body.portmak-bank-details-page #main.portmak-utility-shell, body.portmak-company-profile-page #main.portmak-company-profile, body.portmak-technical-gallery-page #main.portmak-technical-gallery { padding-right: 22px; padding-left: 22px; } .portmak-utility-hero, .portmak-company-profile__hero, .portmak-technical-gallery__hero { padding: 47px 45px; } .portmak-company-profile__scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portmak-company-profile__scope-grid article { min-height: 0; } } @media (max-width: 820px) { body.portmak-service-tracking-page #main.portmak-utility-shell, body.portmak-staff-portal-page #main.portmak-utility-shell, body.portmak-bank-details-page #main.portmak-utility-shell, body.portmak-company-profile-page #main.portmak-company-profile, body.portmak-technical-gallery-page #main.portmak-technical-gallery { padding-top: 25px; padding-bottom: 45px; } .portmak-utility-hero, .portmak-company-profile__hero, .portmak-technical-gallery__hero { grid-template-columns: 1fr; gap: 18px; min-height: 0; padding: 37px 31px 28px; } .portmak-utility-hero__visual, .portmak-company-profile__visual, .portmak-technical-gallery__visual { order: -1; min-height: 210px; } .portmak-utility-visual { max-width: 410px; } .portmak-utility-surface, .portmak-company-profile__intro, .portmak-company-profile__scope, .portmak-company-profile__process, .portmak-company-profile__capabilities, .portmak-technical-gallery__surface { padding: 35px 31px; } .portmak-service-tracking__portal-card, .portmak-staff-portal__access-grid { grid-template-columns: 1fr; } .portmak-service-tracking__portal-card > div, .portmak-staff-portal__access-grid article { min-height: 0; } .portmak-company-profile__intro, .portmak-company-profile__process { grid-template-columns: 1fr; gap: 27px; } .portmak-company-profile__capabilities > div { grid-template-columns: 1fr; } .portmak-utility-support, .portmak-bank-details__note, .portmak-technical-gallery__cta, .portmak-company-profile__cta { align-items: flex-start; flex-direction: column; padding: 33px 31px; } .portmak-technical-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { body.portmak-service-tracking-page #main.portmak-utility-shell, body.portmak-staff-portal-page #main.portmak-utility-shell, body.portmak-bank-details-page #main.portmak-utility-shell, body.portmak-company-profile-page #main.portmak-company-profile, body.portmak-technical-gallery-page #main.portmak-technical-gallery { padding-right: 14px; padding-left: 14px; } .portmak-utility-hero, .portmak-company-profile__hero, .portmak-technical-gallery__hero { padding: 29px 21px 22px; border-radius: 17px; } .portmak-utility-hero h1, .portmak-company-profile__hero h1, .portmak-technical-gallery__hero h1 { font-size: 36px; } .portmak-utility-hero__lead, .portmak-company-profile__lead, .portmak-technical-gallery__hero > div:first-child > span { font-size: 16px; line-height: 1.65; } .portmak-utility-hero__actions, .portmak-company-profile__actions { width: 100%; } .portmak-utility-hero .portmak-link-button, .portmak-company-profile__hero .portmak-link-button { flex: 1 1 100%; justify-content: center; } .portmak-utility-hero__facts, .portmak-company-profile__copy > ul, .portmak-technical-gallery__hero ul { display: grid; gap: 8px; } .portmak-utility-hero__visual, .portmak-company-profile__visual, .portmak-technical-gallery__visual { min-height: 174px; } .portmak-utility-surface, .portmak-company-profile__intro, .portmak-company-profile__scope, .portmak-company-profile__process, .portmak-company-profile__capabilities, .portmak-technical-gallery__surface { padding: 28px 20px; border-radius: 16px; } .portmak-utility-surface h2, .portmak-technical-gallery__surface h2, .portmak-company-profile__intro h2, .portmak-company-profile__scope h2, .portmak-company-profile__process h2, .portmak-company-profile__capabilities h2, .portmak-utility-support h2, .portmak-technical-gallery__cta h2, .portmak-company-profile__cta h2 { font-size: 27px; } .portmak-utility-surface__intro > span, .portmak-technical-gallery__surface > header > span, .portmak-company-profile__process-copy > span, .portmak-company-profile__cta > div > span, .portmak-technical-gallery__cta > div > span, .portmak-utility-support > div:first-child > span, .portmak-bank-details__note span { font-size: 15px; } .portmak-utility-inline-cta { align-items: flex-start; flex-direction: column; padding: 22px 20px; } .portmak-utility-inline-cta .portmak-link-button { width: 100%; justify-content: center; } .portmak-bank-details__editor > p, .portmak-bank-details__editor > li, .portmak-bank-details__editor td { padding: 15px; font-size: 14px; } .portmak-bank-iban-row { align-items: flex-start; flex-direction: column; word-break: break-word; } .portmak-bank-iban-copy { width: 100%; } .portmak-bank-account__header { gap: 15px; padding: 20px; } .portmak-bank-account__header img { width: 128px; height: 56px; } .portmak-bank-account__details { padding-right: 20px; padding-left: 20px; } .portmak-bank-account__details > div { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; } .portmak-bank-account__iban dd { align-items: flex-start; flex-direction: column; } .portmak-bank-account__copy { width: 100%; } .portmak-company-profile__scope-grid, .portmak-company-profile__process ol, .portmak-technical-gallery__grid { grid-template-columns: 1fr; } .portmak-company-profile__scope-grid article, .portmak-company-profile__capabilities article { padding: 22px 19px; } .portmak-utility-support, .portmak-bank-details__note, .portmak-technical-gallery__cta, .portmak-company-profile__cta { padding: 28px 21px; border-radius: 16px; } .portmak-utility-support__actions { width: 100%; } .portmak-utility-support__actions .portmak-link-button { flex: 1 1 auto; justify-content: center; } .portmak-technical-gallery__item { min-height: 0; } .portmak-gallery-lightbox { padding: 16px; } .portmak-gallery-lightbox__dialog img { max-height: calc(100vh - 42px); } } @media (prefers-reduced-motion: reduce) { .portmak-utility-hero *, .portmak-company-profile__hero *, .portmak-technical-gallery__hero * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* Gallery surface correction: keep the header brighter than the service-page * hero while the actual photos are rendered through the standalone grid. */ body.portmak-technical-gallery-page .portmak-technical-gallery__hero { border-color: #badfe9; background: linear-gradient(125deg, #ffffff 0%, #f3fcff 50%, #dff6fb 100%); box-shadow: 0 22px 50px rgba(11, 75, 99, .10); } body.portmak-technical-gallery-page .portmak-technical-gallery__hero::before { border-color: rgba(18, 152, 190, .18); box-shadow: 0 0 0 45px rgba(42, 183, 218, .045), 0 0 0 110px rgba(42, 183, 218, .025); } body.portmak-technical-gallery-page .portmak-technical-gallery__hero::after { opacity: .58; background-image: linear-gradient(rgba(21, 153, 190, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 153, 190, .075) 1px, transparent 1px); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .18) 100%); } body.portmak-technical-gallery-page .portmak-technical-gallery__hero > div:first-child > p { color: #078abf; } body.portmak-technical-gallery-page .portmak-technical-gallery__hero h1 { color: #0b3a57; } body.portmak-technical-gallery-page .portmak-technical-gallery__hero > div:first-child > span { color: #45657a; } body.portmak-technical-gallery-page .portmak-technical-gallery__hero ul { color: #345a71; } body.portmak-technical-gallery-page .portmak-technical-gallery__hero li::before { border-color: #13a9cf; box-shadow: 0 0 10px rgba(19, 169, 207, .38); } body.portmak-technical-gallery-page .portmak-gallery-visual__frame { border-color: rgba(24, 152, 188, .55); background: linear-gradient(135deg, rgba(138, 233, 247, .72), transparent 47%), linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(213, 245, 250, .95)); box-shadow: 0 14px 28px rgba(22, 106, 135, .13); } body.portmak-technical-gallery-page .portmak-gallery-visual__frame::before { border-color: rgba(20, 144, 179, .58); } body.portmak-technical-gallery-page .portmak-gallery-visual__frame::after, body.portmak-technical-gallery-page .portmak-gallery-visual > i, body.portmak-technical-gallery-page .portmak-gallery-visual > b { background: #1fb3d5; box-shadow: 0 0 13px rgba(31, 179, 213, .52); } /* Public team page: light, welcoming and photo-independent. */ body.portmak-team-page .portmak-team-shell { max-width: 1180px; padding-top: 30px; padding-bottom: 56px; } body.portmak-team-page .portmak-team-page { color: var(--portmak-ink); } body.portmak-team-page .portmak-team-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 30px; overflow: hidden; padding: clamp(31px, 5vw, 58px); border: 1px solid #b8e3ef; border-radius: 24px; background: radial-gradient(circle at 94% 12%, rgba(21, 190, 224, .18), transparent 29%), linear-gradient(130deg, #ffffff 0%, #f2fcff 58%, #ddf7fb 100%); box-shadow: 0 22px 52px rgba(8, 68, 91, .10); } body.portmak-team-page .portmak-team-hero::before { position: absolute; inset: 0; opacity: .52; background-image: linear-gradient(rgba(16, 142, 178, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 142, 178, .07) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 45%, rgba(0,0,0,.85) 100%); content: ""; pointer-events: none; } body.portmak-team-page .portmak-team-hero__copy, body.portmak-team-page .portmak-team-hero__visual { position: relative; z-index: 1; } body.portmak-team-page .portmak-team-hero__eyebrow, body.portmak-team-page .portmak-team-intro > p, body.portmak-team-page .portmak-team-group__heading p, body.portmak-team-page .portmak-team-cta p { margin: 0 0 10px; color: #0b8db9; font-size: 11px; font-weight: 800; letter-spacing: .12em; } body.portmak-team-page .portmak-team-hero h1 { margin: 0; color: #0b3854; font-size: clamp(40px, 5.5vw, 64px); line-height: 1.02; letter-spacing: -.05em; } body.portmak-team-page .portmak-team-hero__lead { max-width: 670px; margin: 18px 0 0; color: #41677b; font-size: clamp(16px, 2vw, 20px); line-height: 1.62; } body.portmak-team-page .portmak-team-hero__facts { display: flex; flex-wrap: wrap; gap: 11px; margin: 26px 0 0; padding: 0; list-style: none; } body.portmak-team-page .portmak-team-hero__facts li { display: grid; gap: 2px; min-width: 112px; padding: 11px 14px; border: 1px solid rgba(23, 160, 198, .22); border-radius: 12px; background: rgba(255, 255, 255, .78); } body.portmak-team-page .portmak-team-hero__facts strong { color: #0d4c69; font-size: 20px; line-height: 1; } body.portmak-team-page .portmak-team-hero__facts span { color: #507182; font-size: 11px; font-weight: 700; } body.portmak-team-page .portmak-team-hero__visual { display: grid; place-items: center; min-height: 260px; } body.portmak-team-page .portmak-team-orbit { position: relative; width: min(258px, 100%); aspect-ratio: 1; } body.portmak-team-page .portmak-team-orbit__ring { position: absolute; border: 1px solid rgba(8, 143, 182, .35); border-radius: 50%; } body.portmak-team-page .portmak-team-orbit__ring--one { inset: 4px; } body.portmak-team-page .portmak-team-orbit__ring--two { inset: 33px; border-style: dashed; } body.portmak-team-page .portmak-team-orbit__core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 98px; height: 98px; transform: translate(-50%, -50%); border: 8px solid rgba(255, 255, 255, .92); border-radius: 50%; background: linear-gradient(135deg, #0c8fb9, #0e4d70); box-shadow: 0 16px 36px rgba(10, 85, 116, .25); color: #fff; font-size: 27px; font-weight: 900; letter-spacing: -.05em; } body.portmak-team-page .portmak-team-orbit__node { position: absolute; width: 14px; height: 14px; border: 4px solid #fff; border-radius: 50%; background: #15badd; box-shadow: 0 0 0 6px rgba(20, 178, 211, .13); } body.portmak-team-page .portmak-team-orbit__node--one { top: 18px; left: 39px; } body.portmak-team-page .portmak-team-orbit__node--two { right: 12px; bottom: 46px; background: #0d729a; } body.portmak-team-page .portmak-team-orbit__node--three { left: 22px; bottom: 27px; background: #65d8eb; } body.portmak-team-page .portmak-team-orbit > b { position: absolute; right: -14px; top: 36px; padding: 7px 9px; border: 1px solid rgba(22, 149, 184, .25); border-radius: 9px; background: rgba(255, 255, 255, .92); color: #26708d; font-size: 10px; font-weight: 800; letter-spacing: .08em; line-height: 1.3; text-align: center; } body.portmak-team-page .portmak-team-intro { margin: 24px 0 42px; padding: clamp(23px, 3vw, 37px); border: 1px solid #d7eaf0; border-radius: 18px; background: #fff; box-shadow: 0 14px 34px rgba(8, 34, 57, .055); } body.portmak-team-page .portmak-team-intro h2 { max-width: 880px; margin: 0; color: #113b53; font-size: clamp(25px, 3vw, 37px); line-height: 1.22; letter-spacing: -.03em; } body.portmak-team-page .portmak-team-intro > span { display: block; max-width: 850px; margin-top: 15px; color: #587484; font-size: 15px; line-height: 1.72; } body.portmak-team-page .portmak-team-group { margin-top: 40px; } body.portmak-team-page .portmak-team-group__heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .72fr); gap: 25px; align-items: end; margin-bottom: 18px; } body.portmak-team-page .portmak-team-group__heading h2 { margin: 0; color: #143e55; font-size: clamp(23px, 2.7vw, 32px); line-height: 1.16; letter-spacing: -.028em; } body.portmak-team-page .portmak-team-group__heading > span { padding-bottom: 3px; color: #607a88; font-size: 14px; line-height: 1.65; } body.portmak-team-page .portmak-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } body.portmak-team-page .portmak-team-member-card { position: relative; display: flex; align-items: center; gap: 15px; min-height: 130px; overflow: hidden; padding: 18px; border: 1px solid #d8e9ef; border-radius: 17px; background: linear-gradient(145deg, #fff, #f5fbfd); box-shadow: 0 10px 24px rgba(8, 34, 57, .055); transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; } body.portmak-team-page .portmak-team-member-card::after { position: absolute; right: -31px; bottom: -54px; width: 112px; height: 112px; border: 1px solid rgba(15, 157, 195, .11); border-radius: 50%; content: ""; } body.portmak-team-page .portmak-team-member-card:hover { transform: translateY(-4px); border-color: #9bdbe9; box-shadow: 0 18px 34px rgba(8, 61, 84, .12); } body.portmak-team-page .portmak-team-member-card__avatar { position: relative; z-index: 1; display: grid; flex: 0 0 59px; place-items: center; width: 59px; height: 59px; overflow: hidden; border-radius: 16px; background: linear-gradient(145deg, #0f8db5, #0c496b); box-shadow: 0 9px 19px rgba(7, 84, 115, .20); color: #fff; font-size: 18px; font-weight: 900; letter-spacing: -.04em; } body.portmak-team-page .portmak-team-member-card__avatar::before { position: absolute; inset: 7px; border: 1px solid rgba(255,255,255,.25); border-radius: 11px; content: ""; } body.portmak-team-page .portmak-team-member-card__avatar span { position: relative; z-index: 1; } body.portmak-team-page .portmak-team-member-card__avatar i { position: absolute; width: 29px; height: 1px; background: rgba(197,246,255,.52); transform: rotate(-42deg); } body.portmak-team-page .portmak-team-member-card__avatar i:last-child { width: 38px; transform: rotate(47deg); } body.portmak-team-page .portmak-team-member-card__body { position: relative; z-index: 1; min-width: 0; } body.portmak-team-page .portmak-team-member-card__body > p { margin: 0 0 4px; color: #1683a7; font-size: 11px; font-weight: 800; letter-spacing: .025em; } body.portmak-team-page .portmak-team-member-card__body h3 { margin: 0; color: #15394d; font-size: 18px; line-height: 1.24; } body.portmak-team-page .portmak-team-member-card__body ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; } body.portmak-team-page .portmak-team-member-card__body li { padding: 5px 7px; border-radius: 7px; background: #e6f7fb; color: #347189; font-size: 10px; font-weight: 700; line-height: 1.3; } body.portmak-team-page .portmak-team-group--management .portmak-team-grid { grid-template-columns: minmax(0, 1fr); } body.portmak-team-page .portmak-team-group--management .portmak-team-member-card { min-height: 150px; padding: 23px; background: linear-gradient(135deg, #f6fdff, #e4f8fc); } body.portmak-team-page .portmak-team-group--management .portmak-team-member-card__avatar { flex-basis: 71px; width: 71px; height: 71px; border-radius: 20px; font-size: 21px; } body.portmak-team-page .portmak-team-group--management .portmak-team-member-card__body h3 { font-size: 23px; } /* The team directory is intentionally rendered in the owner's hierarchy. */ body.portmak-team-page .portmak-team-group--directory .portmak-team-member-card:first-child { grid-column: 1 / -1; min-height: 150px; padding: 23px; background: linear-gradient(135deg, #f6fdff, #e4f8fc); } body.portmak-team-page .portmak-team-group--directory .portmak-team-member-card:first-child .portmak-team-member-card__avatar { flex-basis: 71px; width: 71px; height: 71px; border-radius: 20px; font-size: 21px; } body.portmak-team-page .portmak-team-group--directory .portmak-team-member-card:first-child .portmak-team-member-card__body h3 { font-size: 23px; } body.portmak-team-page .portmak-team-editor-content { margin-top: 35px; padding: 28px; border: 1px solid #d8e9ef; border-radius: 16px; background: #fff; } body.portmak-team-page .portmak-team-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; margin-top: 45px; padding: clamp(27px, 4vw, 43px); border-radius: 20px; background: linear-gradient(125deg, #0b4b69, #0c7699); box-shadow: 0 20px 41px rgba(7, 60, 83, .18); } body.portmak-team-page .portmak-team-cta p { color: #82e2f5; } body.portmak-team-page .portmak-team-cta h2 { max-width: 700px; margin: 0; color: #fff; font-size: clamp(25px, 3vw, 37px); line-height: 1.2; letter-spacing: -.032em; } body.portmak-team-page .portmak-team-cta > div > span { display: block; max-width: 690px; margin-top: 14px; color: #d7f2f8; font-size: 15px; line-height: 1.7; } body.portmak-team-page .portmak-team-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } body.portmak-team-page .portmak-team-cta .portmak-link-button { white-space: nowrap; background: #fff; color: #0a5e7e; } /* The legacy theme gives primary links a white text colour with higher * specificity. Force readable text for this light CTA button. */ body.portmak-team-page .portmak-team-cta__actions > a.portmak-link-button:not(.is-outline), body.portmak-team-page .portmak-team-cta__actions > a.portmak-link-button:not(.is-outline):visited, body.portmak-team-page .portmak-team-cta__actions > a.portmak-link-button:not(.is-outline):hover, body.portmak-team-page .portmak-team-cta__actions > a.portmak-link-button:not(.is-outline):focus { background: #fff !important; color: #0a5e7e !important; text-shadow: none !important; } body.portmak-team-page .portmak-team-cta .portmak-link-button.is-outline { border-color: rgba(255,255,255,.6); background: transparent; color: #fff; } @media (max-width: 980px) { body.portmak-team-page .portmak-team-hero, body.portmak-team-page .portmak-team-group__heading, body.portmak-team-page .portmak-team-cta { grid-template-columns: 1fr; } body.portmak-team-page .portmak-team-hero__visual { min-height: 185px; } body.portmak-team-page .portmak-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.portmak-team-page .portmak-team-cta__actions { justify-content: flex-start; } } @media (max-width: 640px) { body.portmak-team-page .portmak-team-shell { padding-top: 16px; padding-bottom: 32px; } body.portmak-team-page .portmak-team-hero { padding: 28px 21px; border-radius: 17px; } body.portmak-team-page .portmak-team-hero__visual { display: none; } body.portmak-team-page .portmak-team-hero h1 { font-size: 41px; } body.portmak-team-page .portmak-team-hero__facts li { flex: 1 1 90px; min-width: 0; } body.portmak-team-page .portmak-team-intro { margin-top: 17px; margin-bottom: 32px; padding: 23px 20px; border-radius: 15px; } body.portmak-team-page .portmak-team-group { margin-top: 33px; } body.portmak-team-page .portmak-team-group__heading { gap: 10px; margin-bottom: 15px; } body.portmak-team-page .portmak-team-grid { grid-template-columns: 1fr; } body.portmak-team-page .portmak-team-member-card { min-height: 116px; padding: 16px; } body.portmak-team-page .portmak-team-group--management .portmak-team-member-card { min-height: 132px; padding: 18px; } body.portmak-team-page .portmak-team-group--directory .portmak-team-member-card:first-child { min-height: 132px; padding: 18px; } body.portmak-team-page .portmak-team-cta { gap: 22px; margin-top: 34px; padding: 28px 21px; border-radius: 16px; } body.portmak-team-page .portmak-team-cta__actions { flex-direction: column; } body.portmak-team-page .portmak-team-cta .portmak-link-button { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { body.portmak-team-page .portmak-team-member-card { transition: none; } } /* Premium public hierarchy: a single, deliberate reading order without portraits. */ body.portmak-team-page .portmak-team-page--hierarchy .portmak-team-hero { grid-template-columns: minmax(0, 1.28fr) minmax(220px, .72fr); border-color: #b8dfe9; background: radial-gradient(circle at 86% 15%, rgba(50, 211, 230, .23), transparent 25%), radial-gradient(circle at 10% 100%, rgba(11, 118, 153, .09), transparent 31%), linear-gradient(135deg, #fafdff 0%, #edf9fc 55%, #dff5f9 100%); } body.portmak-team-page .portmak-team-page--hierarchy .portmak-team-hero__eyebrow { color: #087da5; letter-spacing: .15em; } body.portmak-team-page .portmak-team-page--hierarchy .portmak-team-hero h1 { max-width: 760px; font-size: clamp(38px, 5.1vw, 61px); } body.portmak-team-page .portmak-team-page--hierarchy .portmak-team-hero__facts li { min-width: 128px; border-color: rgba(11, 130, 165, .18); background: rgba(255, 255, 255, .86); box-shadow: 0 8px 19px rgba(8, 76, 102, .05); } body.portmak-team-page .portmak-team-hierarchy { position: relative; margin-top: 35px; padding: clamp(24px, 4vw, 48px); border: 1px solid #d5e8ee; border-radius: 23px; background: linear-gradient(145deg, #ffffff, #f6fbfd); box-shadow: 0 18px 46px rgba(10, 47, 67, .06); } body.portmak-team-page .portmak-team-hierarchy__heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .72fr); gap: 25px; align-items: end; padding-bottom: 23px; border-bottom: 1px solid #dcecf1; } body.portmak-team-page .portmak-team-hierarchy__heading p { margin: 0 0 9px; color: #0b8db9; font-size: 11px; font-weight: 850; letter-spacing: .14em; } body.portmak-team-page .portmak-team-hierarchy__heading h2 { margin: 0; color: #123e56; font-size: clamp(27px, 3.1vw, 39px); line-height: 1.1; letter-spacing: -.04em; } body.portmak-team-page .portmak-team-hierarchy__heading > span { padding-bottom: 3px; color: #597683; font-size: 14px; line-height: 1.7; } body.portmak-team-page .portmak-team-hierarchy__list { position: relative; display: grid; gap: 14px; margin: 31px 0 0; padding: 0; list-style: none; } body.portmak-team-page .portmak-team-hierarchy__list::before { position: absolute; left: 31px; top: 40px; bottom: 40px; width: 1px; background: linear-gradient(180deg, #0b7397 0%, rgba(15, 171, 198, .34) 76%, transparent 100%); content: ""; } body.portmak-team-page .portmak-team-hierarchy__item { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 17px; align-items: center; } body.portmak-team-page .portmak-team-hierarchy__position { position: relative; z-index: 1; display: grid; place-items: center; gap: 2px; width: 64px; min-height: 64px; border: 1px solid #b9e1e9; border-radius: 18px; background: #effbfe; box-shadow: 0 8px 20px rgba(8, 83, 112, .08); } body.portmak-team-page .portmak-team-hierarchy__position b { color: #0f607f; font-size: 17px; line-height: 1; letter-spacing: -.035em; } body.portmak-team-page .portmak-team-hierarchy__position i { color: #67909f; font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .12em; } body.portmak-team-page .portmak-team-hierarchy__card { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 17px; align-items: center; min-height: 100px; overflow: hidden; padding: 18px 21px; border: 1px solid #d8e9ef; border-radius: 18px; background: rgba(255, 255, 255, .96); box-shadow: 0 10px 24px rgba(8, 39, 55, .045); transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; } body.portmak-team-page .portmak-team-hierarchy__card::after { position: absolute; right: -32px; bottom: -55px; width: 125px; height: 125px; border: 1px solid rgba(15, 157, 195, .10); border-radius: 50%; content: ""; } body.portmak-team-page .portmak-team-hierarchy__card:hover { transform: translateX(4px); border-color: #9ad8e6; box-shadow: 0 17px 32px rgba(8, 61, 84, .10); } body.portmak-team-page .portmak-team-hierarchy__avatar { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 18px; background: linear-gradient(145deg, #1599bf, #0b4b6b); box-shadow: 0 10px 20px rgba(5, 78, 107, .20); color: #fff; font-size: 19px; font-weight: 900; letter-spacing: -.05em; } body.portmak-team-page .portmak-team-hierarchy__avatar::before { position: absolute; inset: 7px; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; content: ""; } body.portmak-team-page .portmak-team-hierarchy__avatar span { position: relative; z-index: 1; } body.portmak-team-page .portmak-team-hierarchy__avatar i { position: absolute; width: 30px; height: 1px; background: rgba(203, 246, 255, .52); transform: rotate(-42deg); } body.portmak-team-page .portmak-team-hierarchy__avatar i:last-child { width: 40px; transform: rotate(47deg); } body.portmak-team-page .portmak-team-hierarchy__body { position: relative; z-index: 1; min-width: 0; } body.portmak-team-page .portmak-team-hierarchy__body > p { margin: 0 0 4px; color: #1185a9; font-size: 11px; font-weight: 850; letter-spacing: .06em; } body.portmak-team-page .portmak-team-hierarchy__body h3 { margin: 0; color: #143e55; font-size: clamp(18px, 2vw, 22px); line-height: 1.2; letter-spacing: -.02em; } body.portmak-team-page .portmak-team-hierarchy__body ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; padding: 0; list-style: none; } body.portmak-team-page .portmak-team-hierarchy__body li { padding: 5px 8px; border-radius: 7px; background: #e9f8fb; color: #32738b; font-size: 10px; font-weight: 750; line-height: 1.35; } body.portmak-team-page .portmak-team-hierarchy__marker { position: relative; z-index: 1; width: 9px; height: 9px; margin-right: 2px; border-radius: 50%; background: #47c8dc; box-shadow: 0 0 0 6px rgba(71, 200, 220, .12); } body.portmak-team-page .portmak-team-hierarchy__item.is-lead .portmak-team-hierarchy__position { border-color: #1d6b87; background: #103f58; box-shadow: 0 11px 23px rgba(7, 64, 89, .20); } body.portmak-team-page .portmak-team-hierarchy__item.is-lead .portmak-team-hierarchy__position b, body.portmak-team-page .portmak-team-hierarchy__item.is-lead .portmak-team-hierarchy__position i { color: #fff; } body.portmak-team-page .portmak-team-hierarchy__item.is-lead .portmak-team-hierarchy__card { min-height: 144px; padding: 25px 27px; border-color: #0a5575; background: radial-gradient(circle at 86% 20%, rgba(53, 221, 234, .22), transparent 25%), linear-gradient(125deg, #073851, #0b617e 68%, #0b7896); box-shadow: 0 18px 34px rgba(6, 62, 88, .20); } body.portmak-team-page .portmak-team-hierarchy__item.is-lead .portmak-team-hierarchy__avatar { width: 76px; height: 76px; border-radius: 22px; background: linear-gradient(145deg, #50d3e4, #0c7ca0); font-size: 23px; } body.portmak-team-page .portmak-team-hierarchy__item.is-lead .portmak-team-hierarchy__body > p { color: #9ee9f3; } body.portmak-team-page .portmak-team-hierarchy__item.is-lead .portmak-team-hierarchy__body h3 { color: #fff; font-size: clamp(23px, 2.9vw, 31px); } body.portmak-team-page .portmak-team-hierarchy__item.is-lead .portmak-team-hierarchy__body li { background: rgba(208, 249, 255, .16); color: #e1fbff; } body.portmak-team-page .portmak-team-hierarchy__item.is-lead .portmak-team-hierarchy__marker { background: #b9f5fc; box-shadow: 0 0 0 7px rgba(185, 245, 252, .16); } @media (max-width: 980px) { body.portmak-team-page .portmak-team-page--hierarchy .portmak-team-hero, body.portmak-team-page .portmak-team-hierarchy__heading { grid-template-columns: 1fr; } body.portmak-team-page .portmak-team-hierarchy__heading { gap: 13px; } } @media (max-width: 640px) { body.portmak-team-page .portmak-team-page--hierarchy .portmak-team-hero h1 { font-size: clamp(34px, 10.5vw, 46px); } body.portmak-team-page .portmak-team-hierarchy { margin-top: 20px; padding: 22px 16px; border-radius: 17px; } body.portmak-team-page .portmak-team-hierarchy__heading { padding: 0 4px 18px; } body.portmak-team-page .portmak-team-hierarchy__heading h2 { font-size: 29px; } body.portmak-team-page .portmak-team-hierarchy__list { gap: 11px; margin-top: 23px; } body.portmak-team-page .portmak-team-hierarchy__list::before { left: 24px; top: 35px; bottom: 35px; } body.portmak-team-page .portmak-team-hierarchy__item { grid-template-columns: 49px minmax(0, 1fr); gap: 11px; } body.portmak-team-page .portmak-team-hierarchy__position { width: 49px; min-height: 49px; border-radius: 14px; } body.portmak-team-page .portmak-team-hierarchy__position b { font-size: 14px; } body.portmak-team-page .portmak-team-hierarchy__position i { display: none; } body.portmak-team-page .portmak-team-hierarchy__card { grid-template-columns: 53px minmax(0, 1fr); gap: 12px; min-height: 92px; padding: 15px; border-radius: 15px; } body.portmak-team-page .portmak-team-hierarchy__avatar { width: 53px; height: 53px; border-radius: 15px; font-size: 16px; } body.portmak-team-page .portmak-team-hierarchy__marker { display: none; } body.portmak-team-page .portmak-team-hierarchy__body > p { font-size: 10px; } body.portmak-team-page .portmak-team-hierarchy__body h3 { font-size: 17px; } body.portmak-team-page .portmak-team-hierarchy__item.is-lead .portmak-team-hierarchy__card { min-height: 125px; padding: 19px; } body.portmak-team-page .portmak-team-hierarchy__item.is-lead .portmak-team-hierarchy__avatar { width: 62px; height: 62px; border-radius: 18px; font-size: 19px; } body.portmak-team-page .portmak-team-hierarchy__item.is-lead .portmak-team-hierarchy__body h3 { font-size: 23px; } } @media (prefers-reduced-motion: reduce) { body.portmak-team-page .portmak-team-hierarchy__card { transition: none; } } /* Tiered organisation board for the public team page. */ body.portmak-team-page .portmak-team-page--organization .portmak-team-hero h1 { max-width: 750px; font-size: clamp(37px, 4.9vw, 59px); } body.portmak-team-page .portmak-team-organization { position: relative; margin-top: 35px; } body.portmak-team-page .portmak-team-organization__heading { position: relative; padding: clamp(25px, 3.4vw, 39px); border: 1px solid #d5e7ed; border-radius: 21px; background: linear-gradient(135deg, #fff, #f3fbfd); box-shadow: 0 14px 33px rgba(8, 51, 70, .055); } body.portmak-team-page .portmak-team-organization__heading::after { position: absolute; right: 31px; top: 31px; width: 86px; height: 86px; border: 1px solid rgba(12, 139, 176, .13); border-radius: 50%; box-shadow: 0 0 0 12px rgba(12, 139, 176, .045); content: ""; } body.portmak-team-page .portmak-team-organization__heading p { margin: 0 0 9px; color: #0b8db9; font-size: 11px; font-weight: 850; letter-spacing: .14em; } body.portmak-team-page .portmak-team-organization__heading h2 { max-width: 750px; margin: 0; color: #143e55; font-size: clamp(29px, 3.4vw, 43px); line-height: 1.08; letter-spacing: -.043em; } body.portmak-team-page .portmak-team-organization__heading > span { display: block; max-width: 730px; margin-top: 13px; color: #587783; font-size: 15px; line-height: 1.7; } body.portmak-team-page .portmak-team-organization__tiers { position: relative; display: grid; gap: 18px; margin-top: 19px; } body.portmak-team-page .portmak-team-organization__tier { position: relative; overflow: visible; padding: clamp(18px, 2.6vw, 28px); border: 1px solid #d7e8ee; border-radius: 20px; background: #fff; box-shadow: 0 12px 27px rgba(8, 45, 61, .045); } body.portmak-team-page .portmak-team-organization__tier:not(:last-child)::after { position: absolute; left: 50%; bottom: -19px; z-index: 1; width: 1px; height: 19px; background: linear-gradient(#78cbdc, rgba(120, 203, 220, .2)); content: ""; } body.portmak-team-page .portmak-team-organization__tier-heading { display: grid; grid-template-columns: 43px minmax(0, 1fr) minmax(235px, .85fr); gap: 14px; align-items: center; margin-bottom: 19px; } body.portmak-team-page .portmak-team-organization__tier-heading > span { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #bde4ec; border-radius: 13px; background: #effafd; color: #137898; font-size: 13px; font-weight: 900; letter-spacing: -.03em; } body.portmak-team-page .portmak-team-organization__tier-heading p { margin: 0 0 4px; color: #148eb3; font-size: 10px; font-weight: 850; letter-spacing: .09em; } body.portmak-team-page .portmak-team-organization__tier-heading h3 { margin: 0; color: #163f56; font-size: clamp(18px, 2vw, 24px); line-height: 1.16; letter-spacing: -.025em; } body.portmak-team-page .portmak-team-organization__tier-heading small { color: #67818d; font-size: 12px; line-height: 1.6; } body.portmak-team-page .portmak-team-organization__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } body.portmak-team-page .portmak-team-organization__card { position: relative; display: flex; gap: 15px; align-items: center; min-height: 130px; overflow: hidden; padding: 19px; border: 1px solid #d9e8ed; border-radius: 16px; background: linear-gradient(145deg, #fff, #f7fcfd); box-shadow: 0 8px 20px rgba(8, 46, 64, .04); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } body.portmak-team-page .portmak-team-organization__card::after { position: absolute; right: -35px; bottom: -54px; width: 118px; height: 118px; border: 1px solid rgba(15, 157, 195, .1); border-radius: 50%; content: ""; } body.portmak-team-page .portmak-team-organization__card:hover { transform: translateY(-3px); border-color: #9edbe7; box-shadow: 0 16px 30px rgba(7, 59, 82, .10); } body.portmak-team-page .portmak-team-organization__avatar { position: relative; z-index: 1; display: grid; flex: 0 0 59px; place-items: center; width: 59px; height: 59px; overflow: hidden; border-radius: 16px; background: linear-gradient(145deg, #159ac0, #0d4d6d); box-shadow: 0 9px 18px rgba(7, 79, 107, .18); color: #fff; font-size: 18px; font-weight: 900; letter-spacing: -.045em; } body.portmak-team-page .portmak-team-organization__avatar::before { position: absolute; inset: 7px; border: 1px solid rgba(255,255,255,.26); border-radius: 11px; content: ""; } body.portmak-team-page .portmak-team-organization__avatar span { position: relative; z-index: 1; } body.portmak-team-page .portmak-team-organization__avatar i { position: absolute; width: 29px; height: 1px; background: rgba(207,246,255,.52); transform: rotate(-42deg); } body.portmak-team-page .portmak-team-organization__avatar i:last-child { width: 38px; transform: rotate(47deg); } body.portmak-team-page .portmak-team-organization__body { position: relative; z-index: 1; min-width: 0; } body.portmak-team-page .portmak-team-organization__body > p { margin: 0 0 4px; color: #1386aa; font-size: 11px; font-weight: 850; letter-spacing: .035em; } body.portmak-team-page .portmak-team-organization__body h4 { margin: 0; color: #163f56; font-size: clamp(18px, 1.85vw, 22px); line-height: 1.2; letter-spacing: -.024em; } body.portmak-team-page .portmak-team-organization__body ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 0; padding: 0; list-style: none; } body.portmak-team-page .portmak-team-organization__body li { padding: 5px 7px; border-radius: 7px; background: #e7f7fa; color: #327389; font-size: 10px; font-weight: 750; line-height: 1.3; } body.portmak-team-page .portmak-team-organization__tier--leadership { border-color: #0c5271; background: radial-gradient(circle at 94% 9%, rgba(67, 215, 228, .23), transparent 26%), linear-gradient(125deg, #073951, #0b607e 66%, #0d7895); box-shadow: 0 18px 36px rgba(5, 60, 86, .18); } body.portmak-team-page .portmak-team-organization__tier--leadership .portmak-team-organization__tier-heading > span { border-color: rgba(187, 244, 250, .35); background: rgba(255,255,255,.11); color: #d7fbff; } body.portmak-team-page .portmak-team-organization__tier--leadership .portmak-team-organization__tier-heading p { color: #9deaf4; } body.portmak-team-page .portmak-team-organization__tier--leadership .portmak-team-organization__tier-heading h3 { color: #fff; } body.portmak-team-page .portmak-team-organization__tier--leadership .portmak-team-organization__tier-heading small { color: #c9eaf0; } body.portmak-team-page .portmak-team-organization__tier--leadership .portmak-team-organization__card { border-color: rgba(203, 245, 250, .22); background: rgba(255, 255, 255, .1); box-shadow: none; } body.portmak-team-page .portmak-team-organization__tier--leadership .portmak-team-organization__card:first-child { background: rgba(255,255,255,.17); } body.portmak-team-page .portmak-team-organization__tier--leadership .portmak-team-organization__avatar { background: linear-gradient(145deg, #55d6e5, #0a7498); box-shadow: 0 10px 21px rgba(1, 38, 56, .24); } body.portmak-team-page .portmak-team-organization__tier--leadership .portmak-team-organization__body > p { color: #9debf4; } body.portmak-team-page .portmak-team-organization__tier--leadership .portmak-team-organization__body h4 { color: #fff; font-size: clamp(21px, 2.1vw, 26px); } body.portmak-team-page .portmak-team-organization__tier--leadership .portmak-team-organization__body li { background: rgba(218, 250, 255, .14); color: #e3fbff; } body.portmak-team-page .portmak-team-organization__tier--coordination { border-color: #b8e1e9; background: linear-gradient(135deg, #f7fdff, #e8f8fb); } body.portmak-team-page .portmak-team-organization__tier--coordination .portmak-team-organization__card:first-child { border-color: #73c4d5; background: linear-gradient(145deg, #e3f8fb, #f9feff); } body.portmak-team-page .portmak-team-organization__tier--technical .portmak-team-organization__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } body.portmak-team-page .portmak-team-organization__tier--technical .portmak-team-organization__card { align-items: flex-start; flex-direction: column; justify-content: center; min-height: 180px; padding: 18px; } body.portmak-team-page .portmak-team-organization__tier--technical .portmak-team-organization__avatar { flex-basis: 53px; width: 53px; height: 53px; border-radius: 15px; font-size: 16px; } body.portmak-team-page .portmak-team-organization__tier--technical .portmak-team-organization__body > p { font-size: 10px; line-height: 1.35; } body.portmak-team-page .portmak-team-organization__tier--technical .portmak-team-organization__body h4 { font-size: 17px; } body.portmak-team-page .portmak-team-organization__tier--logistics { border-color: #d1e3e8; background: linear-gradient(135deg, #fbfeff, #edf7f9); } body.portmak-team-page .portmak-team-organization__tier--logistics .portmak-team-organization__card { min-height: 116px; background: rgba(255,255,255,.88); } @media (max-width: 1090px) { body.portmak-team-page .portmak-team-organization__tier--technical .portmak-team-organization__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { body.portmak-team-page .portmak-team-organization__tier-heading { grid-template-columns: 43px minmax(0, 1fr); } body.portmak-team-page .portmak-team-organization__tier-heading small { grid-column: 2; } body.portmak-team-page .portmak-team-organization__tier--technical .portmak-team-organization__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { body.portmak-team-page .portmak-team-organization { margin-top: 21px; } body.portmak-team-page .portmak-team-organization__heading { padding: 23px 20px; border-radius: 16px; } body.portmak-team-page .portmak-team-organization__heading::after { right: 18px; top: 23px; width: 57px; height: 57px; } body.portmak-team-page .portmak-team-organization__heading h2 { font-size: 31px; } body.portmak-team-page .portmak-team-organization__heading > span { font-size: 14px; } body.portmak-team-page .portmak-team-organization__tiers { gap: 13px; margin-top: 14px; } body.portmak-team-page .portmak-team-organization__tier { padding: 17px 14px; border-radius: 16px; } body.portmak-team-page .portmak-team-organization__tier:not(:last-child)::after { bottom: -14px; height: 14px; } body.portmak-team-page .portmak-team-organization__tier-heading { gap: 11px; margin: 0 4px 15px; } body.portmak-team-page .portmak-team-organization__tier-heading > span { width: 39px; height: 39px; border-radius: 11px; } body.portmak-team-page .portmak-team-organization__tier-heading h3 { font-size: 19px; } body.portmak-team-page .portmak-team-organization__tier-heading small { font-size: 11px; } body.portmak-team-page .portmak-team-organization__grid, body.portmak-team-page .portmak-team-organization__tier--technical .portmak-team-organization__grid { grid-template-columns: 1fr; gap: 10px; } body.portmak-team-page .portmak-team-organization__card { min-height: 106px; padding: 15px; border-radius: 14px; } body.portmak-team-page .portmak-team-organization__tier--technical .portmak-team-organization__card { flex-direction: row; align-items: center; min-height: 96px; } body.portmak-team-page .portmak-team-organization__body h4 { font-size: 18px; } body.portmak-team-page .portmak-team-organization__tier--leadership .portmak-team-organization__body h4 { font-size: 20px; } } @media (prefers-reduced-motion: reduce) { body.portmak-team-page .portmak-team-organization__card { transition: none; } } /* Search Console opportunity pages: compact, readable technical depth without * changing the saved SiteOrigin layout or its existing service CTA. */ body.portmak-opportunity-page .portmak-opportunity-content { box-sizing: border-box; margin: 26px 0 36px; padding: clamp(24px, 4vw, 43px); border: 1px solid #c9e6ed; border-radius: 22px; background: radial-gradient(circle at 92% 8%, rgba(36, 193, 218, .17), transparent 27%), linear-gradient(145deg, #f8feff, #edf9fb 58%, #fdfefe); box-shadow: 0 18px 36px rgba(18, 84, 105, .09); color: #163f56; } body.portmak-opportunity-page .portmak-opportunity-content__heading { max-width: 810px; margin-bottom: 24px; } body.portmak-opportunity-page .portmak-opportunity-content__heading > p, body.portmak-opportunity-page .portmak-opportunity-content__links > span { margin: 0 0 8px; color: #147b9e; font-size: 11px; font-weight: 850; letter-spacing: .1em; line-height: 1.4; } body.portmak-opportunity-page .portmak-opportunity-content h2 { margin: 0; color: #0a3e57; font-size: clamp(25px, 3.2vw, 37px); font-weight: 850; letter-spacing: -.035em; line-height: 1.16; } body.portmak-opportunity-page .portmak-opportunity-content__heading > span { display: block; margin-top: 14px; color: #3a6578; font-size: 16px; line-height: 1.72; } body.portmak-opportunity-page .portmak-opportunity-content__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; } body.portmak-opportunity-page .portmak-opportunity-content__card { box-sizing: border-box; min-height: 180px; padding: 21px 19px; border: 1px solid rgba(59, 145, 169, .22); border-radius: 16px; background: rgba(255, 255, 255, .84); box-shadow: 0 8px 18px rgba(22, 85, 105, .06); } body.portmak-opportunity-page .portmak-opportunity-content__card h3 { margin: 0 0 9px; color: #126a88; font-size: 18px; font-weight: 800; letter-spacing: -.015em; line-height: 1.28; } body.portmak-opportunity-page .portmak-opportunity-content__card p { margin: 0; color: #416d7e; font-size: 14px; line-height: 1.68; } body.portmak-opportunity-page .portmak-opportunity-content__links { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 25px; } body.portmak-opportunity-page .portmak-opportunity-content__links > span { width: 100%; margin-bottom: 1px; } body.portmak-opportunity-page .portmak-opportunity-content__links a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #b9dfe8; border-radius: 9px; background: rgba(255,255,255,.72); color: #116b89; font-size: 13px; font-weight: 750; line-height: 1.3; text-decoration: none; transition: background .18s ease, border-color .18s ease, transform .18s ease; } body.portmak-opportunity-page .portmak-opportunity-content__links a:hover, body.portmak-opportunity-page .portmak-opportunity-content__links a:focus { border-color: #53bace; background: #fff; transform: translateY(-1px); } body.portmak-opportunity-page .portmak-opportunity-content__links a b { font-size: 16px; line-height: 1; } body.portmak-opportunity-page .portmak-opportunity-content__cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 25px; padding: 19px 20px; border-radius: 15px; background: linear-gradient(125deg, #073e59, #0e718f); } body.portmak-opportunity-page .portmak-opportunity-content__cta p { max-width: 720px; margin: 0; color: #d8f5f9; font-size: 14px; line-height: 1.66; } body.portmak-opportunity-page .portmak-opportunity-content__cta .portmak-link-button, body.portmak-opportunity-page .portmak-opportunity-content__cta .portmak-link-button:visited { flex: 0 0 auto; background: #fff; color: #0a6280; white-space: nowrap; } body.portmak-opportunity-page .portmak-opportunity-content__note { margin: 17px 0 0; color: #5d7c89; font-size: 12px; line-height: 1.6; } @media (max-width: 850px) { body.portmak-opportunity-page .portmak-opportunity-content__grid { grid-template-columns: 1fr; } body.portmak-opportunity-page .portmak-opportunity-content__card { min-height: 0; } } @media (max-width: 620px) { body.portmak-opportunity-page .portmak-opportunity-content { margin: 22px 0 28px; padding: 23px 18px; border-radius: 17px; } body.portmak-opportunity-page .portmak-opportunity-content__heading > span { font-size: 15px; } body.portmak-opportunity-page .portmak-opportunity-content__cta { align-items: flex-start; flex-direction: column; gap: 15px; padding: 18px; } body.portmak-opportunity-page .portmak-opportunity-content__cta .portmak-link-button { width: 100%; text-align: center; } } @media (prefers-reduced-motion: reduce) { body.portmak-opportunity-page .portmak-opportunity-content__links a { transition: none; } } /* Bosch Rexroth / Indramat: seri kapsamı ve yazılım destek alanları. */ body.portmak-enhanced-service-page .portmak-service-detail-catalog, body.portmak-enhanced-service-page .portmak-service-detail-software { padding: 44px 47px 47px; border: 1px solid #d5e7f0; border-radius: 22px; background: #fff; box-shadow: 0 17px 38px rgba(15, 45, 67, .06); } body.portmak-enhanced-service-page .portmak-service-detail-catalog__intro, body.portmak-enhanced-service-page .portmak-service-detail-software > header > p:last-child { max-width: 960px; margin: 18px 0 0; } body.portmak-enhanced-service-page .portmak-service-detail-catalog__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-top: 29px; } body.portmak-enhanced-service-page .portmak-service-detail-catalog__grid article { display: flex; min-height: 168px; flex-direction: column; padding: 22px; border: 1px solid #d0e5ef; border-radius: 16px; background: linear-gradient(145deg, #fbfeff 0%, #eff9fc 100%); } body.portmak-enhanced-service-page .portmak-service-detail-catalog__grid article::before { width: 31px; height: 3px; margin-bottom: 15px; border-radius: 999px; background: linear-gradient(90deg, #0787af, #48cef1); content: ''; } body.portmak-enhanced-service-page .portmak-service-detail-catalog__grid h3 { font-size: 17px; } body.portmak-enhanced-service-page .portmak-service-detail-catalog__grid ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; } body.portmak-enhanced-service-page .portmak-service-detail-catalog__grid li { padding: 5px 8px; border: 1px solid #c7e1ed; border-radius: 7px; background: #fff; font-size: 11px; font-weight: 800; line-height: 1.36; color: #12384d; } body.portmak-enhanced-service-page .portmak-service-detail-software { border-color: #174d67; background: radial-gradient(circle at 88% 0%, rgba(67, 206, 241, .19), transparent 31%), linear-gradient(135deg, #061f34, #0b3048); } body.portmak-enhanced-service-page .portmak-service-detail-software h2, body.portmak-enhanced-service-page .portmak-service-detail-software h3 { color: #fff; } body.portmak-enhanced-service-page .portmak-service-detail-software > header > p:last-child { color: #c8dee8; } body.portmak-enhanced-service-page .portmak-service-detail-software__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 29px; } body.portmak-enhanced-service-page .portmak-service-detail-software__grid article { padding: 22px; border: 1px solid rgba(119, 218, 247, .22); border-radius: 15px; background: rgba(255, 255, 255, .055); } body.portmak-enhanced-service-page .portmak-service-detail-software__grid p { margin: 12px 0 0; font-size: 14px; line-height: 1.67; color: #c9dfe8; } body.portmak-enhanced-service-page .portmak-service-detail-software__note { margin: 21px 0 0; padding: 16px 18px; border-left: 3px solid #38cffa; background: rgba(42, 192, 235, .09); color: #d7eaf1; font-size: 13px; line-height: 1.7; } body.portmak-enhanced-service-page .portmak-service-detail-brand-note { margin: 18px 0 -3px; padding: 0 4px; font-size: 12px; line-height: 1.65; color: #6b8392; } @media (max-width: 1080px) { body.portmak-enhanced-service-page .portmak-service-detail-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.portmak-enhanced-service-page .portmak-service-detail-software__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { body.portmak-enhanced-service-page .portmak-service-detail-catalog, body.portmak-enhanced-service-page .portmak-service-detail-software { padding: 29px 20px 32px; border-radius: 16px; } body.portmak-enhanced-service-page .portmak-service-detail-catalog__grid, body.portmak-enhanced-service-page .portmak-service-detail-software__grid { grid-template-columns: 1fr; } body.portmak-enhanced-service-page .portmak-service-detail-catalog__grid article { min-height: 0; } } /* Otomatik Rexroth / Indramat iş referansları ve teknik yazılar. */ body.portmak-enhanced-service-page .portmak-service-detail-related-content { padding: 43px 47px 47px; border: 1px solid #d5e7f0; border-radius: 22px; background: linear-gradient(145deg, #fff, #f4fbfe); box-shadow: 0 17px 38px rgba(15, 45, 67, .06); } body.portmak-enhanced-service-page .portmak-service-detail-related-content > header > p:last-child { max-width: 890px; margin: 18px 0 0; } body.portmak-enhanced-service-page .portmak-service-detail-related-content__group { margin-top: 33px; padding-top: 29px; border-top: 1px solid #d7e7ee; } body.portmak-enhanced-service-page .portmak-service-detail-related-content__group-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; } body.portmak-enhanced-service-page .portmak-service-detail-related-content__group-heading h3 { font-size: 21px; } body.portmak-enhanced-service-page .portmak-service-detail-related-content__group-heading a { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: #087da6; text-decoration: none; } body.portmak-enhanced-service-page .portmak-service-detail-related-content__group-heading a:hover, body.portmak-enhanced-service-page .portmak-service-detail-related-content__group-heading a:focus-visible { color: #035f83; text-decoration: underline; } body.portmak-enhanced-service-page .portmak-service-detail-related-content__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 19px; } body.portmak-enhanced-service-page .portmak-service-detail-related-content__card { min-width: 0; overflow: hidden; border: 1px solid #cde4ee; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px rgba(12, 69, 93, .045); } body.portmak-enhanced-service-page .portmak-service-detail-related-content__card > a { display: flex; height: 100%; flex-direction: column; color: inherit; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } body.portmak-enhanced-service-page .portmak-service-detail-related-content__card:hover, body.portmak-enhanced-service-page .portmak-service-detail-related-content__card:focus-within { border-color: #69d3ed; box-shadow: 0 16px 29px rgba(12, 82, 110, .13); transform: translateY(-3px); } body.portmak-enhanced-service-page .portmak-service-detail-related-content__media { display: block; overflow: hidden; background: linear-gradient(135deg, #0b4c69, #117f9f); } body.portmak-enhanced-service-page .portmak-service-detail-related-content__media img, body.portmak-enhanced-service-page .portmak-service-detail-related-content__placeholder { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } body.portmak-enhanced-service-page .portmak-service-detail-related-content__placeholder { display: grid; place-items: center; background: radial-gradient(circle at 76% 22%, rgba(94, 222, 248, .34), transparent 26%), linear-gradient(135deg, #0a314a, #117c9e); font-size: 18px; font-weight: 900; letter-spacing: .08em; color: rgba(255, 255, 255, .88); } body.portmak-enhanced-service-page .portmak-service-detail-related-content__copy { display: flex; min-height: 188px; flex: 1; flex-direction: column; padding: 20px 19px 18px; } body.portmak-enhanced-service-page .portmak-service-detail-related-content__copy > span { margin-bottom: 9px; font-size: 10px; font-weight: 900; letter-spacing: .11em; color: #0b8ab4; } body.portmak-enhanced-service-page .portmak-service-detail-related-content__copy h4 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.32; color: #102d43; } body.portmak-enhanced-service-page .portmak-service-detail-related-content__copy small { display: block; margin-top: 10px; font-size: 13px; line-height: 1.56; color: #5c7486; } body.portmak-enhanced-service-page .portmak-service-detail-related-content__copy b { display: block; margin-top: auto; padding-top: 16px; font-size: 13px; color: #087da6; } body.portmak-enhanced-service-page .portmak-service-detail-related-content__copy i { font-style: normal; } @media (max-width: 1080px) { body.portmak-enhanced-service-page .portmak-service-detail-related-content__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { body.portmak-enhanced-service-page .portmak-service-detail-related-content { padding: 29px 20px 32px; border-radius: 16px; } body.portmak-enhanced-service-page .portmak-service-detail-related-content__group { margin-top: 26px; padding-top: 24px; } body.portmak-enhanced-service-page .portmak-service-detail-related-content__group-heading { align-items: flex-start; flex-direction: column; gap: 8px; } body.portmak-enhanced-service-page .portmak-service-detail-related-content__group-heading h3 { font-size: 19px; } body.portmak-enhanced-service-page .portmak-service-detail-related-content__grid { grid-template-columns: 1fr; } body.portmak-enhanced-service-page .portmak-service-detail-related-content__copy { min-height: 0; } } /* Compact homepage figures: occupy the existing hero's vertical space. */ body.portmak-visual-refresh .portmak-home-hero { padding: 28px 0; } body.portmak-visual-refresh .portmak-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 760px; margin: 22px 0 0; padding: 0; } body.portmak-visual-refresh .portmak-hero-stat { position: relative; display: flex; flex-direction: column-reverse; justify-content: center; gap: 5px; min-width: 0; padding: 13px 16px; overflow: hidden; border: 1px solid rgba(109, 216, 249, .23); border-radius: 10px; background: linear-gradient(120deg, rgba(16, 60, 80, .88), rgba(4, 30, 47, .84)); box-shadow: inset 0 1px rgba(255,255,255,.04); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } body.portmak-visual-refresh .portmak-hero-stat::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(111,224,255,.13) 48%, transparent 66%); transform: translateX(-140%); } body.portmak-visual-refresh .portmak-hero-stats.is-in-view .portmak-hero-stat::after { animation: portmak-stat-light 6s ease-in-out infinite; } body.portmak-visual-refresh .portmak-hero-stat:nth-child(2)::after { animation-delay: .3s; } body.portmak-visual-refresh .portmak-hero-stat:nth-child(3)::after { animation-delay: .6s; } body.portmak-visual-refresh .portmak-hero-stat:nth-child(4)::after { animation-delay: .9s; } body.portmak-visual-refresh .portmak-hero-stat dt { margin: 0; color: #c3dae6; font-size: 12px; font-weight: 600; line-height: 1.3; } body.portmak-visual-refresh .portmak-hero-stat dd { margin: 0; color: #fff; font-size: clamp(27px, 2.7vw, 34px); line-height: 1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } body.portmak-visual-refresh .portmak-hero-stat b { font: inherit; } body.portmak-visual-refresh .portmak-hero-stat i { margin-left: 3px; color: #5bdbff; font-style: normal; font-weight: 500; } body.portmak-visual-refresh .portmak-stat-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } body.portmak-visual-refresh .portmak-home-hero__proof { margin-top: 13px; } @keyframes portmak-stat-light { 0%, 45% { transform: translateX(-140%); } 75%, 100% { transform: translateX(140%); } } @media (hover: hover) { body.portmak-visual-refresh .portmak-hero-stat:hover { transform: translateY(-3px); border-color: rgba(92,221,255,.7); box-shadow: 0 6px 22px rgba(4,167,217,.12), inset 0 1px rgba(255,255,255,.08); } } @media (max-width: 780px) { body.portmak-visual-refresh .portmak-home-hero { padding: 24px 0; } body.portmak-visual-refresh .portmak-home-hero__eyebrow { margin-bottom: 10px; } body.portmak-visual-refresh .portmak-home-hero__actions { margin-top: 16px; gap: 8px; } body.portmak-visual-refresh .portmak-home-hero__actions .portmak-link-button { flex: 1 1 auto; padding-left: 10px; padding-right: 10px; font-size: 12px; } body.portmak-visual-refresh .portmak-hero-stats { margin-top: 16px; gap: 8px; } body.portmak-visual-refresh .portmak-hero-stat { padding: 11px 10px; } body.portmak-visual-refresh .portmak-hero-stat dt { font-size: 11px; } body.portmak-visual-refresh .portmak-home-hero__proof { gap: 6px 12px; margin-top: 12px; } body.portmak-visual-refresh .portmak-home-hero__proof li { width: auto; font-size: 11px; padding-left: 13px; } } @media (max-width: 520px) { body.portmak-visual-refresh .portmak-home-hero { padding: 14px 0; } body.portmak-visual-refresh .portmak-home-hero__actions { margin-top: 12px; } body.portmak-visual-refresh .portmak-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; } body.portmak-visual-refresh .portmak-hero-stat { padding: 8px 12px; gap: 4px; } body.portmak-visual-refresh .portmak-hero-stat dd { font-size: 27px; } body.portmak-visual-refresh .portmak-home-hero__description { margin-top: 8px; } body.portmak-visual-refresh .portmak-home-hero__proof { row-gap: 4px; } } @media (prefers-reduced-motion: reduce) { body.portmak-visual-refresh .portmak-hero-stats.is-in-view .portmak-hero-stat::after { animation: none; } body.portmak-visual-refresh .portmak-hero-stat { transition: none; } body.portmak-visual-refresh .portmak-hero-stat:hover { transform: none; } } /* Unified Portmak header; original WordPress menu links remain editable. */ body.portmak-visual-refresh #header.portmak-header { position: relative; z-index: 9990; width: 100%; background: #082033; border-bottom: 1px solid rgba(129,214,244,.16); box-shadow: 0 8px 24px rgba(2,18,30,.12); } .portmak-header *, .portmak-header *::before, .portmak-header *::after { box-sizing: border-box; } .portmak-header__inner { position: relative; display: flex; align-items: center; gap: 24px; width: calc(100% - 48px); max-width: 1180px; min-height: 88px; margin: 0 auto; } .portmak-brand { flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; } .portmak-brand .safir-logo { display: block; line-height: 1; } .portmak-brand .safir-logo img { display: block; width: 182px; max-width: 100%; height: auto; max-height: 44px; object-fit: contain; } .portmak-brand > span { color: #81aabc; font-size: 8px; font-weight: 700; line-height: 1.2; letter-spacing: .21em; } .portmak-nav { margin-left: auto; min-width: 0; } .portmak-nav ul { list-style: none; margin: 0; padding: 0; } .portmak-nav > ul { display: flex; align-items: center; gap: 3px; } .portmak-nav li { position: relative; } .portmak-nav a { display: block; color: #d9e7ef; font-size: 13px; font-weight: 650; line-height: 1.4; text-decoration: none; } .portmak-nav > ul > li { display: flex; align-items: center; min-height: 48px; border-radius: 7px; } .portmak-nav > ul > li > a { padding: 13px 9px; white-space: nowrap; } .portmak-nav > ul > li > a > .icon, .portmak-nav > ul > li > a > .themeicon { display: none; } .portmak-nav > ul > li:hover, .portmak-nav > ul > li:focus-within { background: rgba(114,213,246,.08); } .portmak-nav > ul > .current-menu-item > a, .portmak-nav > ul > .current-menu-ancestor > a, .portmak-nav > ul > li:hover > a { color: #65d7fc; } .portmak-nav .sub-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 20; width: 270px; max-width: calc(100vw - 48px); max-height: min(70vh, 560px); overflow-y: auto; padding: 9px; background: #f8fcff; border: 1px solid #d9e7ef; border-top: 2px solid #29b8e7; border-radius: 0 0 12px 12px; box-shadow: 0 18px 36px rgba(0,16,29,.2); } .portmak-nav li:hover > .sub-menu, .portmak-nav li:focus-within > .sub-menu, .portmak-nav li.is-open > .sub-menu { display: block; } .portmak-header.is-enhanced .portmak-nav li:not(.is-open) > .sub-menu { display: none; } .portmak-nav > ul > li:nth-last-child(-n+2) > .sub-menu { left: auto; right: 0; } .portmak-nav .sub-menu a { color: #254253; padding: 10px 12px; border-radius: 6px; font-size: 12px; font-weight: 550; } .portmak-nav .sub-menu a:hover, .portmak-nav .sub-menu a:focus-visible { background: #e7f4fa; color: #006d97; } .portmak-nav .sub-menu .icon { display: inline-block; margin-right: 7px; vertical-align: middle; color: #188caf; } .portmak-nav .sub-menu .sub-menu { position: static; width: auto; max-height: none; margin-left: 10px; border: 0; border-left: 2px solid #d8e9f1; box-shadow: none; padding: 0 0 0 5px; } .portmak-submenu-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; width: 26px; height: 36px; padding: 0; margin: 0 3px 0 -5px; border: 0; border-radius: 5px; background: transparent; color: #8eb8ca; cursor: pointer; } .portmak-submenu-toggle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .2s; } .portmak-submenu-toggle[aria-expanded=true] svg { transform: rotate(180deg); } .portmak-nav .sub-menu .portmak-submenu-toggle { position: absolute; top: 3px; right: 3px; color: #386276; } .portmak-nav .sub-menu li:has(> .portmak-submenu-toggle) > a { padding-right: 32px; } .portmak-header__tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .portmak-search { position: relative; } .portmak-search summary, .portmak-menu-toggle { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 40px; height: 40px; padding: 8px; border: 1px solid #355468; border-radius: 7px; background: transparent; color: #dfedf4; cursor: pointer; list-style: none; } .portmak-search summary::-webkit-details-marker { display: none; } .portmak-search summary svg, .portmak-menu-toggle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; } .portmak-search[open] summary, .portmak-search summary:hover { border-color: #50cefa; color: #50cefa; } .portmak-search form { position: absolute; top: calc(100% + 20px); right: 0; width: 350px; max-width: calc(100vw - 48px); padding: 18px; border: 1px solid #d9e7ef; border-radius: 10px; background: #f8fcff; box-shadow: 0 18px 36px rgba(0,16,29,.2); color: #244152; } .portmak-search label { display: block; margin-bottom: 9px; font-weight: 700; font-size: 13px; } .portmak-search form > div { display: flex; gap: 7px; } .portmak-search input { min-width: 0; width: 100%; padding: 10px; border: 1px solid #bdcfdb; border-radius: 5px; background: #fff; color: #203a4c; } .portmak-search button, .portmak-header__cta { border: 0; border-radius: 6px; padding: 11px 14px; background: #10ade3; color: #fff; font-size: 12px; font-weight: 750; white-space: nowrap; cursor: pointer; } .portmak-header__cta:hover { background: #0789b6; color: #fff; } .portmak-menu-toggle { display: none; font-size: 12px; font-weight: 650; } .portmak-header :is(a,button,summary,input):focus-visible { outline: 2px solid #18b4e8; outline-offset: 3px; } /* Bound the actual page containers, including animated decoration. */ body.portmak-homepage { overflow-x: clip; } body.portmak-homepage .portmak-home-hero > .innerContainer { flex: 0 1 auto; width: calc(100% - 48px); max-width: 1180px; min-width: 0; margin-inline: auto; padding: 0; } body.portmak-homepage .portmak-home-hero__content { max-width: 730px; min-width: 0; } body.portmak-homepage .portmak-home-hero h1 { max-width: 730px; font-size: clamp(32px,3.15vw,43px); } body.portmak-homepage .portmak-home-hero h1 > span { display: block; color: #69dbfc; } body.portmak-homepage .portmak-home-hero__description { max-width: 640px; } body.portmak-homepage .portmak-home-hero { min-height: 420px; padding: 30px 0; } body.portmak-homepage .portmak-home-hero__tech { opacity: .32; } body.portmak-homepage .portmak-home-stage::before { opacity: .45; } body.portmak-homepage .portmak-hero-stats { max-width: 710px; margin-top: 20px; } body.portmak-homepage .portmak-hero-stat { padding: 12px; } body.portmak-homepage .portmak-home-hero__proof { font-size: 11px; gap: 7px 14px; } body.portmak-homepage .portmak-home-hero__proof li { font-size: 11px; } .portmak-home-lab { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 340px; margin: 0; overflow: hidden; border: 1px solid rgba(117,214,245,.38); border-radius: 14px; background: #102d40; box-shadow: 0 18px 38px rgba(0,12,23,.22); } .portmak-home-lab img { display: block; width: 100%; height: 252px; object-fit: cover; object-position: 65% center; } .portmak-home-lab figcaption { position: relative; padding: 14px 16px; background: #0b293e; } .portmak-home-lab figcaption span { display: block; margin-bottom: 5px; font-size: 9px; font-weight: 750; letter-spacing: .13em; color: #74d7f5; } .portmak-home-lab figcaption strong { display: block; font-size: 15px; color: #fff; line-height: 1.4; } @media (min-width: 1101px) and (max-width: 1220px) { body.portmak-homepage .portmak-home-hero__content { max-width: calc(100% - 330px); } .portmak-home-lab { width: 300px; } .portmak-header__inner { gap: 14px; } .portmak-nav > ul > li > a { padding-inline: 6px; font-size: 12px; } } @media (max-width: 1100px) { .portmak-header__inner { min-height: 76px; gap: 12px; flex-wrap: wrap; padding: 12px 0; } .portmak-brand .safir-logo img { width: 160px; } .portmak-header__tools { margin-left: auto; } .portmak-header.is-enhanced .portmak-menu-toggle { display: flex; } .portmak-header__cta { display: none; } .portmak-nav { order: 3; width: 100%; flex: 1 0 100%; margin: 0; } .portmak-header.is-enhanced .portmak-nav { display: none; } .portmak-header.is-menu-open .portmak-nav { display: block; } .portmak-nav > ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0; } .portmak-nav > ul > li { display: block; border-top: 1px solid #244455; border-radius: 0; min-height: 0; } .portmak-nav > ul > li > a { padding: 14px 44px 14px 8px; font-size: 14px; } .portmak-nav .portmak-submenu-toggle { position: absolute; top: 5px; right: 0; width: 38px; height: 38px; } .portmak-nav .sub-menu, .portmak-nav > ul > li:nth-last-child(-n+2) > .sub-menu { position: static; width: 100%; max-width: none; max-height: none; margin: 0; box-shadow: none; border: 0; border-radius: 6px; background: #102e42; } .portmak-header.is-enhanced .portmak-nav li:not(.is-open) > .sub-menu { display: none; } .portmak-nav .sub-menu a { color: #cde1ec; min-height: 40px; } .portmak-nav .sub-menu a:hover { background: #1a3b50; color: #76dcff; } .portmak-nav .sub-menu .sub-menu { background: #0c2537; margin-left: 0; } .portmak-nav .sub-menu .portmak-submenu-toggle { color: #78bbd5; } .portmak-header.is-menu-open .portmak-nav { max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain; } .portmak-search form { right: 0; } .portmak-home-lab { display: none; } body.portmak-homepage .portmak-home-hero__content { max-width: 830px; } } @media (max-width: 780px) { body.portmak-homepage .portmak-home-hero { padding: 24px 0; } body.portmak-homepage .portmak-home-hero h1 { font-size: clamp(30px,7.5vw,38px); } .portmak-header__inner, body.portmak-homepage .portmak-home-hero > .innerContainer { width: calc(100% - 32px); } } @media (max-width: 520px) { .portmak-header__inner { min-height: 72px; gap: 8px; } .portmak-brand .safir-logo img { width: 140px; } .portmak-brand > span { font-size: 6px; } .portmak-header__tools { gap: 7px; } .portmak-menu-toggle span { display: none; } .portmak-search form { right: -47px; max-width: calc(100vw - 32px); } body.portmak-homepage .portmak-home-hero { padding: 22px 0; } body.portmak-homepage .portmak-home-hero h1 { font-size: clamp(28px,7.5vw,34px); } body.portmak-homepage .portmak-hero-stats { margin-top: 16px; } body.portmak-homepage .portmak-hero-stat { padding: 9px 12px; } body.portmak-homepage .portmak-home-hero__proof { gap: 4px 10px; } body.portmak-homepage .portmak-home-hero__proof li { font-size: 10px; } } @supports not (overflow: clip) { body.portmak-homepage { overflow-x: hidden; } } @media (prefers-reduced-motion: reduce) { .portmak-submenu-toggle svg { transition: none; } } /* Portmak 2.43: fixed-size, accessible service showcase. */ .portmak-showcase__slides { display: grid; height: 322px; } .portmak-showcase .portmak-showcase__slide { grid-area: 1 / 1; min-width: 0; width: 100%; margin: 0; opacity: 0; visibility: hidden; transition: opacity .65s ease, visibility .65s; pointer-events: none; } .portmak-showcase .portmak-showcase__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .portmak-showcase .portmak-showcase__slide img { height: 252px; object-position: center; background: #102d40; } .portmak-showcase .portmak-showcase__slide .portmak-showcase__board { object-fit: contain; } .portmak-showcase .portmak-showcase__slide figcaption { box-sizing: border-box; height: 70px; padding: 12px 16px; } .portmak-showcase .portmak-showcase__slide figcaption strong { font-size: 14px; } .portmak-showcase__controls { position: absolute; z-index: 3; top: 209px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; } .portmak-showcase__controls[hidden] { display: none; } .portmak-showcase__dots { display: flex; gap: 2px; padding: 0 5px; border-radius: 18px; background: rgba(3,23,36,.88); } .portmak-showcase button { appearance: none; box-shadow: none; margin: 0; cursor: pointer; border: 0; } .portmak-showcase__dots button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: transparent; } .portmak-showcase__dots button::before { content: ''; width: 6px; height: 6px; background: #a9bdc9; border-radius: 6px; transition: width .25s, background .25s; } .portmak-showcase__dots button[aria-current="true"]::before { width: 17px; background: #55d8fc; } .portmak-showcase .portmak-showcase__pause { min-width: 66px; height: 30px; padding: 0 10px; border-radius: 18px; background: rgba(3,23,36,.88); color: #fff; font-family: inherit; font-weight: 600; font-size: 11px; line-height: 30px; } .portmak-showcase button:focus-visible { outline: 2px solid #71e0ff; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .portmak-showcase .portmak-showcase__slide, .portmak-showcase__dots button::before { transition: none; } } /* Portmak 2.44: grouped desktop services and consistent dropdown rows. */ .portmak-header .portmak-nav .sub-menu a { display: flex; align-items: center; gap: 9px; min-height: 40px; white-space: normal; line-height: 1.4; } .portmak-header .portmak-nav .sub-menu a > .safiricon.icon { display: inline-flex; align-items: center; justify-content: center; position: static; float: none; flex: 0 0 18px; width: 18px; height: 18px; margin: 0; font-size: 16px; line-height: 1; color: #148cb2; } .portmak-header .portmak-nav a > .themeicon { display: none; } @media (min-width: 1101px) { .portmak-header .portmak-nav > ul > li > .sub-menu { max-height: min(560px, calc(100dvh - 160px)); overscroll-behavior: contain; } .portmak-header .portmak-nav > ul > li.portmak-mega { position: static; } .portmak-header .portmak-nav > ul > li.portmak-mega.is-open::after { content: ''; position: absolute; top: var(--portmak-trigger-bottom); left: var(--portmak-trigger-left); width: var(--portmak-trigger-width); height: calc(100% - var(--portmak-trigger-bottom)); } .portmak-header .portmak-nav > ul > li.portmak-mega > .sub-menu { left: 0; right: 0; top: 100%; width: 100%; max-width: none; padding: 20px; gap: 0 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; align-items: start; } .portmak-header .portmak-nav > ul > li.portmak-mega.is-open > .sub-menu, .portmak-header:not(.is-enhanced) .portmak-nav > ul > li.portmak-mega:hover > .sub-menu { display: grid; } .portmak-header .portmak-nav .portmak-mega > .sub-menu > li { grid-column: 4; } .portmak-header .portmak-nav .portmak-mega > .sub-menu > li.portmak-mega-primary { grid-column: 1 / span 2; grid-row: 1 / span 7; } .portmak-header .portmak-nav .portmak-mega > .sub-menu > li.portmak-mega-secondary { grid-column: 3; grid-row: 1 / span 7; } .portmak-header .portmak-nav .portmak-mega > .sub-menu > li > a { padding: 10px; font-size: 12px; } .portmak-header .portmak-nav .portmak-mega > .sub-menu > li:has(> .sub-menu) > a { color: #086e92; font-weight: 750; margin-bottom: 8px; border-bottom: 1px solid #d8e9f1; border-radius: 0; } .portmak-header.is-enhanced .portmak-nav .portmak-mega > .sub-menu > li > .sub-menu { display: block; position: static; width: 100%; margin: 0; padding: 0; border: 0; max-height: none; overflow: visible; background: transparent; box-shadow: none; } .portmak-header.is-enhanced .portmak-nav .portmak-mega > .sub-menu > .portmak-mega-primary > .sub-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; } .portmak-header .portmak-nav .portmak-mega > .sub-menu > li > .portmak-submenu-toggle { display: none; } .portmak-header .portmak-nav .portmak-mega .sub-menu .sub-menu a { padding: 10px; font-size: 12px; } } @media (max-width: 1100px) { .portmak-header .portmak-nav .sub-menu a { min-height: 44px; padding-right: 42px; } .portmak-header .portmak-nav .sub-menu a > .safiricon.icon { color: #71d5f6; } } /* Portmak 2.45 | Catalogue library. All selectors scoped to this page. */ #main.pmcat { width:100%; max-width:none; margin:0; padding:0; color:#133343; background:#f3f7f9; } .pmcat *, .pmcat *::before, .pmcat *::after { box-sizing:border-box; } .pmcat .pmcat-wrap { width:calc(100% - 48px); max-width:1180px; margin-inline:auto; } .pmcat a { text-decoration:none; } .pmcat .pmcat-hero { position:relative; overflow:hidden; color:#fff; background:radial-gradient(ellipse at 82% 45%,#164557 0,transparent 48%),#071e2c; } .pmcat .pmcat-hero::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.17; background-image:linear-gradient(#40879c 1px,transparent 1px),linear-gradient(90deg,#40879c 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(90deg,transparent,#000); } .pmcat .pmcat-hero .pmcat-wrap { position:relative; } .pmcat .pmcat-breadcrumb { display:flex; flex-wrap:wrap; gap:12px; padding:24px 0 0; font-size:12px; color:#8fb1c0; } .pmcat .pmcat-breadcrumb a { color:#d3e4eb; } .pmcat .pmcat-feature { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:70px; align-items:center; padding:38px 0 52px; } .pmcat .pmcat-eyebrow { margin:0 0 14px; font-size:10px; font-weight:750; line-height:1.5; letter-spacing:.14em; color:#0b7797; } .pmcat .pmcat-hero .pmcat-eyebrow { color:#64dce3; } .pmcat h1 { margin:0 0 20px; font-size:clamp(34px,4vw,50px); line-height:1.08; letter-spacing:-.035em; color:#fff; font-weight:750; } .pmcat h1 span { color:#54dcdf; } .pmcat .pmcat-lead { max-width:600px; margin:0; color:#bdd1dc; font-size:16px; line-height:1.75; } .pmcat .pmcat-feature-detail { margin-top:28px; padding-top:22px; border-top:1px solid #2a4b5b; } .pmcat .pmcat-badge { display:inline-block; padding:5px 8px; margin-bottom:12px; border:1px solid #386271; border-radius:3px; color:#80e0df; font-size:9px; font-weight:750; letter-spacing:.12em; } .pmcat .pmcat-feature-detail h2 { margin:0 0 8px; color:#fff; font-size:22px; line-height:1.3; } .pmcat .pmcat-feature-detail > p:not(.pmcat-meta) { max-width:580px; margin:0 0 14px; color:#bdd1dc; font-size:14px; line-height:1.7; } .pmcat .pmcat-meta { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin:0 0 18px; font-size:11px; color:#607987; } .pmcat .pmcat-hero .pmcat-meta { color:#92b4c4; } .pmcat .pmcat-feature-cover { justify-self:center; width:min(100%,280px); perspective:1000px; } .pmcat .pmcat-cover { display:block; min-width:0; border:1px solid #315466; background:#08212f; box-shadow:0 20px 35px #00111c24; transition:transform .3s,box-shadow .3s; } .pmcat .pmcat-feature-cover .pmcat-cover { transform:rotateY(-7deg) rotateZ(2deg); box-shadow:14px 24px 40px #0007; } .pmcat .pmcat-cover img { display:block; width:100%; height:auto; aspect-ratio:460 / 650; object-fit:contain; margin:0; } .pmcat .pmcat-cover:hover { transform:translateY(-4px); box-shadow:0 24px 36px #00111c38; } .pmcat .pmcat-feature-cover .pmcat-cover:hover { transform:rotateY(0) rotateZ(0) translateY(-3px); } .pmcat .pmcat-cover-caption { display:block; margin-top:24px; text-align:center; color:#85adbe; font-size:8px; letter-spacing:.16em; } .pmcat .pmcat-actions { display:flex; align-items:center; flex-wrap:wrap; gap:15px; } .pmcat .pmcat-button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:44px; padding:12px 17px; border-radius:5px; background:#087c9e; color:#fff; font-size:12px; font-weight:750; line-height:1.4; transition:background .2s,transform .2s; } .pmcat .pmcat-hero .pmcat-button { background:#47d7dc; color:#052532; } .pmcat .pmcat-button:hover { background:#056580; color:#fff; transform:translateY(-2px); } .pmcat .pmcat-download { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:7px 0; color:#17617b; font-size:12px; font-weight:700; } .pmcat .pmcat-hero .pmcat-download { color:#dcf0f7; } .pmcat .pmcat-download svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; } .pmcat .pmcat-download:hover { text-decoration:underline; text-underline-offset:4px; } .pmcat .pmcat-library { padding-top:48px; padding-bottom:56px; } .pmcat .pmcat-section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px; } .pmcat .pmcat-section-heading .pmcat-eyebrow { margin-bottom:8px; } .pmcat .pmcat-section-heading h2 { margin:0; font-size:clamp(23px,2.6vw,30px); line-height:1.25; color:#102f41; letter-spacing:-.025em; } .pmcat .pmcat-count { color:#6f8692; font-size:10px; white-space:nowrap; letter-spacing:.1em; } .pmcat .pmcat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .pmcat .pmcat-card { display:grid; grid-template-columns:140px minmax(0,1fr); align-items:start; gap:24px; padding:25px; border:1px solid #dce6ec; border-radius:9px; background:#fff; } .pmcat .pmcat-card .pmcat-eyebrow { margin-bottom:10px; font-size:9px; } .pmcat .pmcat-card h3 { margin:0 0 12px; color:#133343; font-size:21px; line-height:1.2; letter-spacing:-.02em; } .pmcat .pmcat-description { margin:0 0 16px; color:#59707e; font-size:13px; line-height:1.7; } .pmcat .pmcat-card .pmcat-actions { gap:3px 14px; } .pmcat .pmcat-card .pmcat-button { padding:10px 12px; font-size:11px; gap:10px; } .pmcat .pmcat-help { margin-top:32px; padding:30px; display:flex; align-items:center; justify-content:space-between; gap:30px; border-left:3px solid #0b93ab; background:#e6f0f4; border-radius:0 8px 8px 0; } .pmcat .pmcat-help .pmcat-eyebrow { margin-bottom:7px; } .pmcat .pmcat-help h2 { margin:0 0 9px; color:#153847; font-size:23px; line-height:1.3; } .pmcat .pmcat-help p:last-child { margin:0; max-width:670px; color:#526d7c; font-size:14px; line-height:1.65; } .pmcat .pmcat-help .pmcat-button { flex-shrink:0; } .pmcat a:focus-visible { outline:3px solid #15b5c7; outline-offset:5px; } @media (max-width:1000px) { .pmcat .pmcat-feature { gap:35px; } .pmcat .pmcat-card { grid-template-columns:110px minmax(0,1fr); padding:20px; gap:18px; } .pmcat .pmcat-card h3 { font-size:19px; } } @media (max-width:760px) { .pmcat .pmcat-feature { grid-template-columns:1fr; gap:35px; } .pmcat .pmcat-feature-cover { width:210px; } .pmcat .pmcat-grid { grid-template-columns:1fr; } .pmcat .pmcat-card { grid-template-columns:140px minmax(0,1fr); } .pmcat .pmcat-count { display:none; } .pmcat .pmcat-help { align-items:start; flex-direction:column; gap:20px; padding:23px; } } @media (max-width:440px) { .pmcat .pmcat-wrap { width:calc(100% - 32px); } .pmcat .pmcat-feature { padding-top:30px; padding-bottom:36px; } .pmcat .pmcat-lead { font-size:14px; } .pmcat .pmcat-card { grid-template-columns:90px minmax(0,1fr); padding:17px; gap:16px; } .pmcat .pmcat-card h3 { font-size:18px; } .pmcat .pmcat-description { font-size:12px; } .pmcat .pmcat-card .pmcat-eyebrow { font-size:8px; } .pmcat .pmcat-card .pmcat-button { font-size:10px; padding:10px; gap:5px; } .pmcat .pmcat-library { padding-top:32px; } } @media (prefers-reduced-motion:reduce) { .pmcat .pmcat-cover,.pmcat .pmcat-button { transition:none; transform:none !important; } } /* Portmak 2.46: compact contact shortcuts on every public page. */ .portmak-service-strip { background:#0b2b3e; border-top:1px solid #1d465b; border-bottom:1px solid #24495c; } .portmak-service-strip > .innerContainer { box-sizing:border-box; width:calc(100% - 48px); max-width:1180px; min-height:52px; margin-inline:auto; padding:7px 0; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:16px; } .portmak-service-strip .portmak-service-strip__points { display:block; min-width:0; } .portmak-service-strip .portmak-service-strip__points span { white-space:normal; font-size:11px; color:#bed4df; } .portmak-service-strip .portmak-service-strip__actions { display:flex; flex-wrap:nowrap; flex-shrink:0; gap:8px; } .portmak-service-strip .portmak-link-button { min-height:36px; padding:8px 15px; border-radius:5px; font-size:12px; line-height:1.2; text-align:center; } .portmak-service-strip .portmak-link-button.is-outline { background:transparent; border-color:#527082; } .portmak-service-strip .portmak-link-button.is-outline:hover { background:#17435a; border-color:#6bd7ee; } .portmak-service-strip .portmak-link-button:focus-visible { outline:2px solid #83e5f7; outline-offset:3px; } @media (max-width:780px) { .portmak-service-strip > .innerContainer { width:calc(100% - 32px); min-height:60px; padding:7px 0; } .portmak-service-strip .portmak-service-strip__points { display:none; } .portmak-service-strip .portmak-service-strip__actions { width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; } .portmak-service-strip .portmak-link-button { min-width:0; min-height:44px; padding:6px 4px; font-size:11px; } } /* Technical service and infrastructure corporate page. */ .portmak-infrastructure { max-width: 1180px; } .portmak-infrastructure__article { overflow: hidden; border: 1px solid var(--portmak-line); border-radius: 22px; background: #fff; box-shadow: var(--portmak-shadow); } .portmak-infrastructure__hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); gap: 34px; padding: 58px; color: #fff; background: radial-gradient(circle at 84% 18%, rgba(41,178,237,.36), transparent 26%), linear-gradient(125deg, #071a2c, #0d4160); } .portmak-infrastructure__hero p, .portmak-infrastructure section > header > p, .portmak-infrastructure__intro > div:first-child > p, .portmak-infrastructure__tests p:first-child, .portmak-infrastructure__cta p { margin: 0 0 10px; color: #20c6ff; font-size: 11px; font-weight: 800; letter-spacing: .12em; } .portmak-infrastructure h1, .portmak-infrastructure h2, .portmak-infrastructure h3 { margin-top: 0; color: var(--portmak-ink); } .portmak-infrastructure__hero h1 { max-width: 650px; margin-bottom: 15px; color: #fff; font-size: clamp(34px, 4.1vw, 57px); line-height: 1.04; } .portmak-infrastructure__lead { max-width: 650px; color: #d9eef7; font-size: 19px; line-height: 1.58; } .portmak-infrastructure__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .portmak-infrastructure__hero ul { display: grid; gap: 12px; align-content: center; margin: 0; padding: 0; list-style: none; } .portmak-infrastructure__hero li { padding: 16px; border: 1px solid rgba(132,224,255,.34); border-radius: 12px; background: rgba(255,255,255,.07); } .portmak-infrastructure__hero li b, .portmak-infrastructure__hero li span { display: block; }.portmak-infrastructure__hero li b { color: #7ee2ff; font-size: 24px; }.portmak-infrastructure__hero li span { margin-top: 3px; color: #d7eef7; font-size: 13px; } .portmak-infrastructure__intro, .portmak-infrastructure__equipment, .portmak-infrastructure__repair, .portmak-infrastructure__process { padding: 54px 58px; } .portmak-infrastructure__intro { display: grid; grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr); gap: 60px; background: #f4f9fc; }.portmak-infrastructure__intro h2, .portmak-infrastructure section h2 { font-size: clamp(26px, 3vw, 37px); line-height: 1.15; }.portmak-infrastructure__intro p { color: var(--portmak-text); font-size: 16px; line-height: 1.75; } .portmak-infrastructure__equipment { border-top: 1px solid var(--portmak-line); }.portmak-infrastructure__repair { background: #f8fbfd; border-top: 1px solid var(--portmak-line); }.portmak-infrastructure__card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }.portmak-infrastructure__card-grid article { min-height: 180px; padding: 23px; border: 1px solid #dce8ef; border-radius: 13px; background: #fff; }.portmak-infrastructure__card-grid b { color: #0ba7df; font-size: 12px; letter-spacing: .08em; }.portmak-infrastructure__card-grid h3 { margin: 24px 0 9px; font-size: 17px; }.portmak-infrastructure__card-grid p { margin: 0; color: var(--portmak-text); line-height: 1.6; } .portmak-infrastructure__tests { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; padding: 58px; color: #fff; background: #0a3049; }.portmak-infrastructure__tests h2 { color: #fff; }.portmak-infrastructure__tests div > p:last-child { color: #bfd6e4; font-size: 16px; line-height: 1.75; }.portmak-infrastructure__tests ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }.portmak-infrastructure__tests li { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid rgba(145,218,248,.25); border-radius: 10px; }.portmak-infrastructure__tests li b { color: #6edbff; font-size: 11px; }.portmak-infrastructure__tests li span { color: #eef9ff; font-size: 13px; font-weight: 700; } .portmak-infrastructure__process { border-top: 1px solid var(--portmak-line); }.portmak-infrastructure__process > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }.portmak-infrastructure__process article { padding: 20px; border-left: 3px solid #18b8ef; background: #f7fafc; }.portmak-infrastructure__process article b { color: #0b85b8; font-size: 12px; }.portmak-infrastructure__process h3 { margin: 20px 0 8px; font-size: 17px; }.portmak-infrastructure__process p { margin: 0; color: var(--portmak-text); line-height: 1.55; } .portmak-infrastructure__gallery { padding: 54px 58px; border-top: 1px solid var(--portmak-line); background: #f8fbfd; }.portmak-infrastructure__gallery > header { max-width: 760px; }.portmak-infrastructure__gallery > header > span { color: var(--portmak-text); line-height: 1.65; }.portmak-infrastructure__gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }.portmak-infrastructure__gallery-grid a { display: block; overflow: hidden; border: 1px solid #d9e5eb; border-radius: 12px; background: #fff; color: var(--portmak-ink); text-decoration: none; }.portmak-infrastructure__gallery-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .22s ease; }.portmak-infrastructure__gallery-grid a:hover img, .portmak-infrastructure__gallery-grid a:focus img { transform: scale(1.035); }.portmak-infrastructure__gallery-grid span { display: block; padding: 12px 14px; font-size: 13px; font-weight: 700; } .portmak-infrastructure__cta { display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 42px 58px; background: #eaf8fd; }.portmak-infrastructure__cta h2 { margin-bottom: 9px; font-size: 28px; }.portmak-infrastructure__cta span { color: var(--portmak-text); line-height: 1.6; } @media (max-width: 820px) { .portmak-infrastructure__hero, .portmak-infrastructure__intro, .portmak-infrastructure__tests { grid-template-columns: 1fr; }.portmak-infrastructure__hero, .portmak-infrastructure__intro, .portmak-infrastructure__equipment, .portmak-infrastructure__repair, .portmak-infrastructure__process, .portmak-infrastructure__gallery, .portmak-infrastructure__tests, .portmak-infrastructure__cta { padding: 34px 24px; }.portmak-infrastructure__card-grid, .portmak-infrastructure__process > div, .portmak-infrastructure__gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.portmak-infrastructure__cta { align-items: flex-start; flex-direction: column; } } @media (max-width: 520px) { .portmak-infrastructure__card-grid, .portmak-infrastructure__process > div, .portmak-infrastructure__gallery-grid, .portmak-infrastructure__tests ol { grid-template-columns: 1fr; }.portmak-infrastructure__hero h1 { font-size: 35px; } }