/* ===================================================================== Roo.Center redesign layer — loads after zz-override.css. Repairs the badly-rendered sections and styles the two new ones (customer logos, packages) in the Roo.Center navy/blue identity while keeping the Loraic "Home 6" composition. ===================================================================== */ :root { --roo-navy: #0f1a30; --roo-navy-2: #14243f; --roo-ink: #17223c; --roo-ink-soft: #55627d; --roo-blue: #1c6fe8; --roo-blue-dark: #1559c0; --roo-blue-100: #e8f1fd; --roo-line: #e4eaf3; --roo-surface: #f4f7fc; --roo-radius: 18px; --roo-shadow: 0 24px 60px -28px rgba(17, 34, 60, 0.28); --roo-shadow-sm: 0 12px 30px -16px rgba(17, 34, 60, 0.22); } /* ---------- shared primitives ------------------------------------- */ .roo-kicker { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--roo-blue); background: var(--roo-blue-100); padding: 7px 16px; border-radius: 999px; margin-bottom: 20px; } .roo-kicker--onDark { color: #fff; background: rgba(255, 255, 255, 0.14); } .roo-h2 { margin: 0 0 18px; font-family: "DM Sans", "Inter", system-ui, sans-serif; font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.14; letter-spacing: -0.01em; color: var(--roo-ink); } .roo-h2--onDark { color: #fff; } .roo-lead { margin: 0; font-size: 17px; line-height: 1.7; color: var(--roo-ink-soft); max-width: 46ch; } .roo-lead--onDark { color: rgba(255, 255, 255, 0.78); } .roo-btn { display: inline-flex; align-items: center; gap: 10px; font-family: "Inter", system-ui, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; padding: 15px 24px; border-radius: 12px; text-decoration: none; border: 1.5px solid transparent; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .roo-btn svg { transition: transform 0.18s ease; } .roo-btn:hover svg { transform: translateX(3px); } .roo-btn--primary { background: var(--roo-blue); color: #fff; } .roo-btn--primary:hover { background: var(--roo-blue-dark); color: #fff; } .roo-btn--light { background: #fff; color: var(--roo-ink); } .roo-btn--light:hover { background: #eef3fb; color: var(--roo-ink); } .roo-btn--outline { background: transparent; color: var(--roo-blue); border-color: #cfe0f8; } .roo-btn--outline:hover { background: var(--roo-blue-100); color: var(--roo-blue-dark); } .roo-btn--dark { background: var(--roo-navy); color: #fff; border-color: var(--roo-navy); } .roo-btn--dark:hover { background: #1c2c48; color: #fff; border-color: #1c2c48; } .roo-section { padding: clamp(64px, 8vw, 108px) 0; background: #fff; } .roo-section .elementor-container { max-width: 1330px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* ===================================================================== B. "Operasyon Alanları" — atmospheric maritime band. Reference: a dark background photo under a heavy navy wash, content sitting integrated on the field (no card boxes), the four areas flowing in one row separated by hairline dividers. Cinematic, premium, marine-tech. ===================================================================== */ .elementor-element-52aedbe { position: relative; isolation: isolate; overflow: hidden; background: #0d2242 !important; /* deep marine blue, not black */ padding: clamp(78px, 9vw, 120px) 0 !important; } .elementor-element-52aedbe > .elementor-background-overlay { display: none !important; } /* the ocean/vessel photo, kept blue and readable under a marine-blue wash */ .elementor-element-52aedbe::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(118deg, rgba(11,29,56,0.93) 0%, rgba(13,41,78,0.84) 42%, rgba(16,52,94,0.8) 72%, rgba(11,31,60,0.92) 100%), url("../imgs/bg3-h6.webp") center 44% / cover no-repeat; background-blend-mode: multiply, normal; filter: saturate(0.92); } /* gentle blue depth top-to-bottom — no black vignette */ .elementor-element-52aedbe::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,34,66,0.35) 0%, transparent 22%, transparent 78%, rgba(11,26,52,0.45) 100%); } .elementor-element-52aedbe .elementor-container { max-width: 1300px; margin: 0 auto; padding: 0 24px; } .roo-ops__head { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: clamp(24px, 5vw, 76px); align-items: end; margin-bottom: clamp(50px, 6vw, 82px); } .roo-ops__head .roo-kicker { margin-bottom: 18px; } .roo-ops__head .roo-h2 { margin: 0; } .roo-ops__head .roo-lead { max-width: none; color: rgba(255, 255, 255, 0.7); padding-bottom: 4px; } .roo-ops__grid { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 -24px; } .roo-ops__card { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; padding: 32px 24px 28px; text-decoration: none; transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.24, 1); } /* an integrated surface, present even at rest — the ship photo still reads through it */ .roo-ops__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(19, 50, 95, 0.17) 0%, rgba(10, 29, 57, 0.09) 100%); transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* a short accent segment, top-left, that resolves in on activation */ .roo-ops__card::after { content: ""; position: absolute; top: 0; left: 24px; width: 36px; height: 2px; background: #2f7ff0; opacity: 0; transform: scaleX(0.35); transform-origin: left center; transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.24, 1); } .roo-ops__card + .roo-ops__card { border-left: 1px solid rgba(255, 255, 255, 0.1); } .roo-ops__icn { display: block; position: relative; margin-bottom: 3px; transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.24, 1); } .roo-ops__icn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; transform: translate(-50%, -50%) scale(0.6); border-radius: 50%; background: rgba(58, 132, 240, 0.13); opacity: 0; transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.24, 1); } .roo-ops__icn img { position: relative; width: 44px; height: 44px; display: block; filter: brightness(0) invert(1); opacity: 0.8; transition: opacity 0.4s ease; } .roo-ops__t { margin: 0; font-family: "DM Sans", "Inter", sans-serif; font-size: 19px; font-weight: 600; line-height: 1.25; color: #fff; text-shadow: 0 1px 6px rgba(6, 16, 32, 0.5); transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.24, 1); } .roo-ops__d { margin: 0; font-size: 14px; line-height: 1.62; color: rgba(226, 235, 249, 0.72); flex: 1; text-shadow: 0 1px 5px rgba(6, 16, 32, 0.5); transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.24, 1), color 0.4s ease; } .roo-ops__arrow { margin-top: 8px; color: #cfe0f7; opacity: 0.3; transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.24, 1), color 0.4s ease; } /* activation — hover and keyboard focus resolve to the same treatment */ .roo-ops__card:hover::before, .roo-ops__card:focus-visible::before { background: linear-gradient(180deg, rgba(21, 56, 106, 0.36) 0%, rgba(12, 35, 68, 0.27) 100%); } .roo-ops__card:hover::after, .roo-ops__card:focus-visible::after { opacity: 0.95; transform: scaleX(1); } .roo-ops__card:hover .roo-ops__icn, .roo-ops__card:focus-visible .roo-ops__icn, .roo-ops__card:hover .roo-ops__t, .roo-ops__card:focus-visible .roo-ops__t { transform: translateY(-3px); } .roo-ops__card:hover .roo-ops__d, .roo-ops__card:focus-visible .roo-ops__d { transform: translateY(-2px); color: rgba(233, 241, 251, 0.92); } .roo-ops__card:hover .roo-ops__icn::before, .roo-ops__card:focus-visible .roo-ops__icn::before { opacity: 1; transform: translate(-50%, -50%) scale(1); } .roo-ops__card:hover .roo-ops__icn img, .roo-ops__card:focus-visible .roo-ops__icn img { opacity: 1; } .roo-ops__card:hover .roo-ops__arrow, .roo-ops__card:focus-visible .roo-ops__arrow { opacity: 1; color: #4f95f0; transform: translate(5px, -3px); } .roo-ops__card:focus-visible { outline: 2px solid rgba(90, 160, 250, 0.75); outline-offset: -2px; } @media (hover: none) { .roo-ops__card::before { background: linear-gradient(180deg, rgba(20, 52, 100, 0.24) 0%, rgba(11, 32, 62, 0.16) 100%); } .roo-ops__arrow { opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { .roo-ops__card, .roo-ops__card *, .roo-ops__card::before, .roo-ops__card::after { transition-duration: 0.001s !important; } .roo-ops__card:hover .roo-ops__icn, .roo-ops__card:focus-visible .roo-ops__icn, .roo-ops__card:hover .roo-ops__t, .roo-ops__card:focus-visible .roo-ops__t, .roo-ops__card:hover .roo-ops__d, .roo-ops__card:focus-visible .roo-ops__d, .roo-ops__card:hover .roo-ops__arrow, .roo-ops__card:focus-visible .roo-ops__arrow { transform: none; } } @media (max-width: 1024px) { .roo-ops__head { grid-template-columns: 1fr; align-items: start; } .roo-ops__grid { grid-template-columns: repeat(2, 1fr); margin: 0; } .roo-ops__card { padding: 28px clamp(20px, 3vw, 30px); } .roo-ops__card::after { left: clamp(20px, 3vw, 30px); } .roo-ops__card + .roo-ops__card { border-left: 0; } .roo-ops__card:nth-child(2) { border-left: 1px solid rgba(255, 255, 255, 0.1); } .roo-ops__card:nth-child(3), .roo-ops__card:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, 0.1); } } @media (max-width: 560px) { .roo-ops__grid { grid-template-columns: 1fr; } .roo-ops__card { padding: 24px 0 !important; } .roo-ops__card::after { left: 0; } .roo-ops__card + .roo-ops__card { border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; } .roo-ops__card:nth-child(2) { border-left: 0 !important; } } /* ===================================================================== C. "Roo.Center Nedir?" — a single lifestyle cutout. The bottom edge fades to the section white so the crop reads soft; a low blue glow seats it and a slow float keeps it alive. No frame, no box. ===================================================================== */ .roo-figure { position: relative; margin: 0 -8% 0 auto; width: 116%; max-width: 900px; } /* wide desktop: a touch larger, pulled gently toward the right edge */ @media (min-width: 1441px) { .roo-figure { width: min(1080px, 46vw); max-width: none; margin-right: calc((1440px - 100vw) / 2 + 40px); } } @media (max-width: 1024px) { .roo-figure { width: 100%; max-width: 520px; margin: 0 auto; } } .roo-figure__person { position: relative; z-index: 1; display: block; width: 100%; height: auto; /* fade the bottom AND the left edge so the round table's rim never shows a hard line against the white section */ --m-bottom: linear-gradient(180deg, #000 54%, rgba(0, 0, 0, 0.3) 80%, transparent 100%); --m-left: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 7%, #000 18%); -webkit-mask-image: var(--m-bottom), var(--m-left); -webkit-mask-composite: source-in; mask-image: var(--m-bottom), var(--m-left); mask-composite: intersect; animation: roo-float 7s ease-in-out infinite; will-change: transform; } .roo-figure__glow { position: absolute; left: 50%; bottom: 6%; width: 84%; height: 46%; transform: translateX(-50%); z-index: 0; background: radial-gradient(60% 60% at 50% 60%, rgba(28, 111, 232, 0.14), transparent 72%); filter: blur(6px); } .roo-figure__dots { position: absolute; left: -20px; top: 2%; width: 116px; height: 116px; z-index: 0; background: url("../imgs/grid-dots.svg") repeat; opacity: 0.5; } @keyframes roo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @media (prefers-reduced-motion: reduce) { .roo-figure__person { animation: none; } } /* keep the section's two feature icons on-brand & sized */ .elementor-element-72498e1 .pxl-icon-box .pxl-item--icon img { width: 46px; height: 46px; } /* ===================================================================== D. Process — reference "work process": 3 staged steps (Talep -> Teklif -> Sipariş) rising left->right, curved blue flow line, giant ghost numbers, framed step visuals. Editorial light surface. No pills. ===================================================================== */ .elementor-element-bfdfeab { position: relative; overflow: hidden; background: linear-gradient(180deg, #eef4fc 0%, #f5f9fd 45%, #e9f1fb 100%) !important; padding: clamp(70px, 8vw, 120px) 0 clamp(90px, 11vw, 150px) !important; } .elementor-element-bfdfeab::before { content: ""; position: absolute; right: -6%; bottom: -8%; width: 62%; height: 78%; background: url("../imgs/bg2-h6.webp") right bottom / cover no-repeat; opacity: 0.5; pointer-events: none; } .elementor-element-bfdfeab .elementor-container { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 24px; } .roo-proc__head { max-width: 640px; margin-bottom: clamp(16px, 2vw, 30px); } .roo-proc__head .roo-h2 { margin-bottom: 16px; font-size: clamp(30px, 3.6vw, 46px); } .roo-proc__stage { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.4vw, 68px); padding-top: clamp(30px, 5vw, 70px); } .roo-proc__flow { position: absolute; left: 2%; right: 2%; top: 0; width: 96%; height: 100%; z-index: 0; pointer-events: none; } .roo-proc__flow path { opacity: 0.75; filter: drop-shadow(0 2px 6px rgba(28, 111, 232, 0.35)); animation: roo-proc-dash 26s linear infinite; } @keyframes roo-proc-dash { to { stroke-dashoffset: -300; } } @media (prefers-reduced-motion: reduce) { .roo-proc__flow path { animation: none; } } .roo-proc__step { position: relative; z-index: 1; } .roo-proc__step--01 { margin-top: clamp(96px, 12vw, 190px); } .roo-proc__step--02 { margin-top: clamp(48px, 6vw, 96px); } .roo-proc__step--03 { margin-top: 0; } .roo-proc__num { position: absolute; right: -8%; top: -0.58em; z-index: 0; font-family: "Outfit", "DM Sans", sans-serif; font-size: clamp(130px, 13.5vw, 220px); font-weight: 700; line-height: 1; color: #b3ccec; opacity: 0.75; letter-spacing: -0.04em; pointer-events: none; } .roo-proc__figure { z-index: 1; } .roo-proc__figure { position: relative; width: 100%; max-width: 320px; aspect-ratio: 5 / 4; border-radius: 24px; } .roo-proc__step--01 .roo-proc__figure { transform: rotate(-2.5deg); } .roo-proc__step--02 .roo-proc__figure { transform: rotate(1.6deg); } .roo-proc__step--03 .roo-proc__figure { transform: rotate(-1.6deg); } .roo-proc__dots { position: absolute; top: -22px; right: -20px; width: 92px; height: 74px; background-image: radial-gradient(rgba(28, 111, 232, 0.45) 1.6px, transparent 1.7px); background-size: 12px 12px; opacity: 0.6; } .roo-proc__media { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; background-size: cover; background-position: center; box-shadow: 0 40px 70px -34px rgba(16, 40, 84, 0.5); } .roo-proc__media--photo { filter: saturate(0.9) contrast(1.02); } .roo-proc__media--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(10, 26, 54, 0.06) 40%, rgba(12, 32, 66, 0.28)); } .roo-proc__badge { position: absolute; left: -14px; bottom: -14px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(150deg, #2f7ef0, #1559c0); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 14px 26px -8px rgba(28, 111, 232, 0.7); } .roo-proc__text { margin-top: clamp(22px, 2.4vw, 34px); max-width: 340px; } .roo-proc__t { margin: 0 0 10px; font-family: "Outfit", "DM Sans", "Inter", sans-serif; font-size: clamp(20px, 1.7vw, 25px); font-weight: 600; color: var(--roo-navy); } .roo-proc__d { margin: 0; font-size: 15px; line-height: 1.64; color: #4a586f; } .roo-proc__map { position: absolute; right: -1%; bottom: -14%; width: clamp(200px, 22vw, 320px); height: auto; z-index: 0; opacity: 0.7; } /* ===================================================================== E. Blue CTA banner ===================================================================== */ .elementor-element-0cb9653 { padding: clamp(58px, 8vw, 104px) 0 clamp(52px, 7vw, 92px) !important; overflow: visible !important; } .elementor-element-0cb9653 .elementor-container { max-width: 1340px; margin: 0 auto; padding: 0 24px; overflow: visible; } .roo-cta { position: relative; border-radius: 30px; background: linear-gradient(108deg, #0a1c3f 0%, #0f2c62 52%, #143a80 100%); min-height: clamp(320px, 30vw, 400px); display: flex; align-items: center; box-shadow: 0 54px 96px -42px rgba(9, 24, 55, 0.6); isolation: isolate; } .roo-cta__bg { position: absolute; inset: 0 0 0 auto; z-index: -1; width: 62%; border-radius: 0 30px 30px 0; overflow: hidden; background: url("../imgs/proc-talep.webp") 60% 16% / cover no-repeat; filter: saturate(0.3) brightness(0.4); /* wide, soft diagonal so it melts into the banner base — no hard seam */ -webkit-mask-image: linear-gradient(102deg, transparent 6%, rgba(0, 0, 0, 0.5) 34%, #000 66%); mask-image: linear-gradient(102deg, transparent 6%, rgba(0, 0, 0, 0.5) 34%, #000 66%); } .roo-cta__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(102deg, #0f2c62 0%, rgba(15, 44, 98, 0.78) 40%, rgba(18, 55, 122, 0.4) 100%); } .roo-cta__deco { position: absolute; top: 22px; right: clamp(30px, 5vw, 64px); width: clamp(150px, 18vw, 240px); height: auto; z-index: 1; pointer-events: none; } .roo-cta__body { position: relative; z-index: 2; padding: clamp(32px, 4vw, 58px) clamp(26px, 4vw, 60px); max-width: 620px; } .roo-cta__title { margin: 0 0 16px; font-family: "DM Sans", "Inter", sans-serif; font-size: clamp(24px, 2.5vw, 34px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: #fff; } .roo-cta__text { margin: 0 0 28px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.62; color: rgba(255, 255, 255, 0.88); max-width: 42ch; } .roo-cta__btn { align-self: flex-start; } .roo-cta__person { position: absolute; right: clamp(8px, 2vw, 40px); bottom: 0; height: clamp(320px, 27vw, 440px) !important; width: auto !important; max-width: none !important; z-index: 3; filter: drop-shadow(-18px 30px 44px rgba(6, 16, 38, 0.5)); pointer-events: none; } /* ===================================================================== E2. #iletisim — demo / quote request. One composition: a deep-navy info panel + a white form surface that overlaps it. Columns are locked to the same height (grid stretch + the panel distributes its content). ===================================================================== */ .elementor-element-e9e1be5 { background: linear-gradient(180deg, #eef3fb 0%, #f6f9fd 55%, #eaf1fb 100%) !important; padding: clamp(64px, 8vw, 112px) 0 clamp(66px, 8vw, 116px) !important; } .elementor-element-e9e1be5 > .elementor-background-overlay { display: none !important; } .elementor-element-e9e1be5 .elementor-container { max-width: 1200px !important; margin: 0 auto; padding: 0 24px !important; display: block !important; } .roo-form { display: grid; grid-template-columns: 41% 59%; align-items: stretch; box-shadow: 0 46px 96px -46px rgba(12, 32, 66, 0.34); border-radius: 22px; } /* --- info panel --- */ .roo-form__intro { position: relative; display: flex; flex-direction: column; justify-content: space-between; z-index: 1; padding: clamp(32px, 3vw, 46px) clamp(26px, 2.6vw, 40px); border-radius: 22px 0 0 22px; overflow: hidden; background: linear-gradient(158deg, #0a1c40 0%, #0f2a63 62%, #123c86 100%); } .roo-form__intro::before { content: ""; position: absolute; right: -30%; top: -20%; width: 90%; height: 70%; background: radial-gradient(circle, rgba(75, 140, 255, 0.22), transparent 70%); pointer-events: none; } .roo-form__intro-top { position: relative; } .roo-form__intro .roo-kicker { margin-bottom: 16px; } .roo-form__intro .roo-h2 { margin-bottom: 14px; font-size: clamp(26px, 2.6vw, 34px); } .roo-form__intro .roo-lead { font-size: 14.5px; line-height: 1.62; } .roo-form__list { position: relative; list-style: none; margin: clamp(20px, 2.4vw, 30px) 0; padding: 0; } .roo-form__list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.88); } .roo-form__list li:last-child { border-bottom: 0; } .roo-form__list svg { flex: 0 0 auto; width: 18px; height: 18px; padding: 3px; border-radius: 6px; color: #fff; background: rgba(95, 160, 255, 0.28); } .roo-form__steps { position: relative; padding-top: clamp(18px, 2vw, 26px); border-top: 1px solid rgba(255, 255, 255, 0.12); } .roo-form__steps-label { display: block; margin-bottom: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #7fb0ff; } .roo-form__steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .roo-form__steps li { display: flex; align-items: baseline; gap: 12px; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.88); } .roo-form__steps li em { flex: 0 0 auto; font-style: normal; font-family: "Outfit", "DM Sans", sans-serif; font-size: 13px; font-weight: 700; color: #5fa0ff; letter-spacing: 0.04em; } .roo-form__direct { margin-top: clamp(18px, 2vw, 24px); padding-top: clamp(16px, 2vw, 22px); border-top: 1px solid rgba(255, 255, 255, 0.12); } .roo-form__direct-label { display: block; margin-bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #7fb0ff; } .roo-form__direct-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14.5px; font-weight: 600; color: #fff; text-decoration: none; transition: color 0.15s ease; } .roo-form__direct-row svg { flex: 0 0 auto; color: #7fb0ff; } .roo-form__direct-row:hover { color: #a9c8ff; } .roo-form__wm { position: absolute; right: -30px; bottom: -30px; width: 148px; height: auto; opacity: 0.06; pointer-events: none; } /* --- form surface --- */ .roo-form__card { position: relative; z-index: 2; padding: clamp(28px, 2.8vw, 44px) clamp(24px, 2.8vw, 44px); border-radius: 22px; margin: -14px 0 -14px -14px; background: #fff; box-shadow: 0 30px 60px -34px rgba(18, 40, 82, 0.28); } .roo-form__card-head { margin-bottom: clamp(20px, 2.2vw, 28px); } .roo-form__title { margin: 0 0 6px; font-family: "Outfit", "DM Sans", "Inter", sans-serif; font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; line-height: 1.24; color: var(--roo-navy); } .roo-form__sub { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: var(--roo-ink-soft); } .roo-form__note { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: #8a97ab; } .roo-form__note em, .roo-field label em { color: var(--roo-blue); font-style: normal; } .roo-field { margin-bottom: 14px; } .roo-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .roo-field-row .roo-field { margin-bottom: 0; } .roo-field label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: #33435f; } .roo-field input, .roo-field select, .roo-field textarea { width: 100%; height: 48px; padding: 0 14px; font: inherit; font-size: 14px; color: var(--roo-ink); background: #fbfcfe; border: 1px solid #dde5f0; border-radius: 9px; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; -webkit-appearance: none; appearance: none; } .roo-field textarea { height: auto; min-height: 104px; padding: 11px 14px; resize: vertical; line-height: 1.55; } .roo-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2333435f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 40px; cursor: pointer; } .roo-field input::placeholder, .roo-field textarea::placeholder { color: #a6b1c4; } .roo-field input:focus, .roo-field select:focus, .roo-field textarea:focus { outline: none; background: #fff; border-color: var(--roo-blue); box-shadow: 0 0 0 3px rgba(28, 111, 232, 0.14); } .roo-field [aria-invalid="true"] { border-color: #d9534f; } /* custom checkbox */ .roo-check { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 20px; font-size: 12.5px; line-height: 1.5; color: var(--roo-ink-soft); cursor: pointer; } .roo-check input { position: absolute; opacity: 0; width: 1px; height: 1px; } .roo-check__box { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; border: 1.5px solid #c6d0e0; background: #fff; transition: border-color 0.15s ease, background 0.15s ease; } .roo-check input:checked + .roo-check__box { border-color: var(--roo-blue); background: var(--roo-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2l2.3 2.3L9.5 3.5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; } .roo-check input:focus-visible + .roo-check__box { box-shadow: 0 0 0 3px rgba(28, 111, 232, 0.2); } .roo-check__text a { color: var(--roo-blue); font-weight: 600; text-decoration: none; } .roo-form__submit { width: 100%; justify-content: center; padding: 15px 24px; font-size: 15px; } .roo-form__submit.is-loading { opacity: 0.72; pointer-events: none; } /* honeypot — off-screen, never focusable/announced beyond the wrapper */ .roo-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* Cloudflare Turnstile widget */ .roo-form__ts { margin: 4px 0 16px; min-height: 65px; /* reserve space → no layout shift when it renders */ max-width: 100%; overflow: hidden; } .roo-form__ts:empty { min-height: 0; margin: 0; } .roo-form__ts iframe { max-width: 100%; } /* inline submit error */ .roo-form__err { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: #fdeceb; border: 1px solid #f3c9c6; color: #b3322c; font-size: 13px; line-height: 1.5; } .roo-form__done { display: none; align-items: flex-start; gap: 12px; margin: 4px 0; padding: 20px; border-radius: 12px; background: #eef7f1; border: 1px solid #c6e6d1; color: #1f7a45; font-size: 13.5px; font-weight: 600; line-height: 1.55; } .roo-form__done::before { content: "✓"; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #2fa060; color: #fff; font-size: 13px; } .roo-form.is-sent .roo-form__card { display: flex; flex-direction: column; justify-content: center; } .roo-form.is-sent .roo-form__card > *:not(.roo-form__card-head):not(.roo-form__done) { display: none; } .roo-form.is-sent .roo-form__done { display: flex; } /* ===================================================================== F. Customer / reference logo wall ===================================================================== */ .roo-logos { position: relative; background: #fff; padding-top: clamp(48px, 6vw, 78px); padding-bottom: clamp(70px, 9vw, 128px); /* room for the wave divider */ } /* the head sits in an Elementor .elementor-container (display:flex) — without this the single narrow child shrink-wraps and hugs the left edge */ .roo-logos__inner { flex: 1 1 100%; width: 100%; } .roo-logos__head { text-align: center; margin: 0 auto clamp(30px, 3.4vw, 46px); } .roo-logos__title { text-align: center; margin: 0 0 12px; } .roo-logos__sub { margin: 0; text-align: center; color: var(--roo-ink-soft); font-size: clamp(14px, 1.1vw, 16px); } /* Reference logos as a continuous ticker strip. Two identical groups inside the track; the animation shifts the track by exactly one group width (-50%) so the loop is seamless. Edge mask fades the strip into the page; hover pauses it. */ .roo-marquee { position: relative; overflow: hidden; padding: clamp(14px, 2vw, 22px) 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); } .roo-marquee__track { display: flex; width: max-content; animation: roo-marquee-scroll 55s linear infinite; } .roo-marquee:hover .roo-marquee__track { animation-play-state: paused; } .roo-marquee__group { display: flex; align-items: center; flex: 0 0 auto; } .roo-marquee__item { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 86px; /* fixed band — every cell the same height */ padding: 0 clamp(28px, 3.6vw, 54px); } /* thin divider between logos */ .roo-marquee__item::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 54px; background: var(--roo-line); } .roo-marquee__item img { width: auto; object-fit: contain; /* brightness(0) flattens every logo to one dark silhouette regardless of its own colours — so white/pale SVGs stay visible; hover reveals true colour */ filter: grayscale(1) brightness(0) opacity(0.6); transition: filter 0.22s ease; } .roo-marquee__item img:hover { filter: none; } /* Optical-size buckets — different source aspect ratios need different display heights to read at the same visual weight. */ .roo-marquee__item--w img { height: 34px; max-width: 200px; } /* wordmarks */ .roo-marquee__item--wb img { height: 48px; max-width: 250px; } /* wordmarks, larger */ .roo-marquee__item--m img { height: 56px; max-width: 112px; } /* square emblems */ .roo-marquee__item--mb img { height: 72px; max-width: 138px; } /* square emblems, larger */ /* light raster emblem (gyro): brightness(0) turns its pale fill into a black disc — use plain grayscale + multiply so the white ground drops out */ .roo-marquee__item--e img { height: 66px; max-width: 116px; filter: grayscale(1) contrast(1.15) opacity(0.62); mix-blend-mode: multiply; } .roo-marquee__item--e img:hover { filter: none; mix-blend-mode: normal; } @keyframes roo-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Wave divider bleeding into the navy platform section below */ .roo-logos__wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(46px, 6vw, 88px); display: block; fill: #eaf0f9; /* = top of the Platform section gradient below */ } @media (prefers-reduced-motion: reduce) { .roo-marquee { -webkit-mask-image: none; mask-image: none; } .roo-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 22px; } .roo-marquee__group:last-child { display: none; } .roo-marquee__group { flex-wrap: wrap; justify-content: center; } } /* ===================================================================== G. Packages / Pricing — SaaS pricing section, monthly / yearly toggle. Rebuilt 2026-09-02. Copy + numbers live in redesign.js `pricing`. ===================================================================== */ .roo-pricing { background: var(--roo-surface); } .roo-pricing__head { text-align: center; max-width: 640px; margin: 0 auto clamp(34px, 4vw, 48px); } .roo-pricing__head .roo-lead { margin: 14px auto 0; font-size: 16px; } .roo-pricing__badge { display: inline-block; padding: 6px 15px; border-radius: 999px; background: var(--roo-blue-100); color: var(--roo-blue); font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 16px; } .roo-pricing__head .roo-h2 { margin: 0; } /* ---- monthly / yearly toggle ---- */ .roo-toggle { display: inline-flex; gap: 4px; margin-top: clamp(22px, 3vw, 30px); padding: 4px; border-radius: 999px; background: #e5ecf6; border: 1px solid var(--roo-line); } .roo-toggle__btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border: 0; border-radius: 999px; background: transparent; font: 600 13.5px/1 "Inter", sans-serif; color: var(--roo-ink-soft); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .roo-toggle__btn:hover { color: var(--roo-ink); } .roo-toggle__btn.is-active { background: #fff; color: var(--roo-ink); box-shadow: 0 4px 12px -4px rgba(17, 34, 60, 0.18); } .roo-toggle__save { flex: none; padding: 3px 8px; border-radius: 999px; background: rgba(31, 157, 87, 0.14); color: #1f7a46; font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; } /* ---- grid + cards ---- */ .roo-pricing__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; max-width: 1120px; margin: 0 auto; } .roo-plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--roo-line); border-radius: 20px; padding: 26px 26px 28px; box-shadow: var(--roo-shadow-sm); } .roo-plan--featured { border-color: #bcd7fa; box-shadow: 0 0 0 1px var(--roo-blue) inset, 0 34px 74px -32px rgba(28, 111, 232, 0.42); transform: translateY(-8px); padding-bottom: 32px; } .roo-plan__badge-tag { position: absolute; top: -13px; left: 28px; display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--roo-blue); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; box-shadow: 0 8px 18px -8px rgba(28, 111, 232, 0.6); white-space: nowrap; } .roo-plan__top { min-height: 84px; } .roo-plan__name { margin: 0 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--roo-ink); } .roo-plan__desc { margin: 0; font-size: 13px; line-height: 1.55; color: var(--roo-ink-soft); } /* ---- price ---- */ .roo-plan__price { margin: 15px 0 0; padding: 15px 0; border-top: 1px solid var(--roo-line); border-bottom: 1px solid var(--roo-line); min-height: 128px; /* >= tallest natural price block, so CTAs line up */ display: flex; flex-direction: column; justify-content: center; } .roo-plan__amt-row { display: flex; align-items: baseline; gap: 4px; color: var(--roo-ink); } .roo-plan__cur { font-size: 22px; font-weight: 600; } .roo-plan__amt { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; } .roo-plan__price--text .roo-plan__amt { font-size: 26px; } .roo-plan__per { font-size: 14px; font-weight: 500; color: var(--roo-ink-soft); } .roo-plan__billing { margin: 8px 0 0; font-size: 12.5px; font-weight: 500; color: var(--roo-ink-soft); } .roo-plan__subline { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--roo-ink); } /* ---- CTA ---- */ .roo-plan__cta { justify-content: center; width: 100%; margin: 16px 0 0; padding: 13px 20px; } /* ---- features: a value-per-row comparison list (label left, value right) --- */ .roo-plan__feats { margin-top: 16px; flex: 1; } .roo-plan__feats-title { margin: 0 0 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--roo-ink-soft); } .roo-plan__feats ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .roo-plan__feats li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--roo-line); font-size: 13px; line-height: 1.4; color: var(--roo-ink); } .roo-plan__feats li:last-child { border-bottom: 0; } .roo-plan__feat-label { flex: 1; min-width: 0; } .roo-plan__feat-val { flex: 0 0 auto; font-weight: 600; font-size: 12.5px; color: var(--roo-ink); text-align: right; } .roo-plan__feats li.is-off { color: var(--roo-ink-soft); } .roo-plan__ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--roo-blue-100); color: var(--roo-blue); } .roo-plan--featured .roo-plan__ic { background: var(--roo-blue); color: #fff; } .roo-plan__feats li.is-off .roo-plan__ic { background: #eef1f6; color: #aab2c2; } .roo-plan--featured .roo-plan__feats li.is-off .roo-plan__ic { background: #eef1f6; color: #aab2c2; } /* Roo Track is billed separately — hide its row while "Yıllık" is selected. (initPricing flips [data-period] on .roo-pricing.) */ .roo-pricing[data-period="yearly"] .roo-plan__feat--rt { display: none; } /* the row above the hidden one shouldn't keep a divider dangling */ .roo-pricing[data-period="yearly"] .roo-plan__feats li:nth-last-child(2) { border-bottom: 0; } .roo-pricing__note { margin: clamp(30px, 4vw, 44px) auto 0; max-width: 640px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--roo-ink-soft); } /* ---- responsive: below the 3-up layout the cards stack full-width; robust, no alignment edge cases. Stack a touch early (1100) so the 3-up cards never get squeezed below a comfortable width. ---- */ @media (max-width: 1100px) { .roo-pricing__grid { grid-template-columns: 1fr; max-width: 460px; gap: 18px; } .roo-plan, .roo-plan--featured { transform: none; max-width: none; padding: 26px 26px 28px; } .roo-plan--featured { padding-bottom: 30px; } .roo-plan__top { min-height: 0; } .roo-plan__price { min-height: 0; padding: 18px 0; } } @media (max-width: 620px) { .roo-pricing__grid { max-width: 400px; } .roo-plan, .roo-plan--featured { padding: 24px 20px 26px; } .roo-plan__amt { font-size: 34px; } .roo-plan__badge-tag { left: 20px; } .roo-toggle { width: 100%; max-width: 360px; padding: 3px; } .roo-toggle__btn { flex: 1; justify-content: center; padding: 11px 8px; font-size: 13px; gap: 6px; } .roo-toggle__save { font-size: 9.5px; padding: 3px 7px; } } /* ===================================================================== H. FAQ accordion ===================================================================== */ .elementor-element-774e775 { background-color: #f3f7fc !important; } .roo-faq__list { display: flex; flex-direction: column; gap: 14px; } .roo-faq__item { background: #fff; border: 1px solid var(--roo-line); border-radius: 14px; overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .roo-faq__item.is-open { border-color: #cfe0f8; box-shadow: var(--roo-shadow-sm); } .roo-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; background: transparent; border: 0; cursor: pointer; text-align: left; font-family: "DM Sans", "Inter", sans-serif; font-size: 16px; font-weight: 600; color: var(--roo-ink); } .roo-faq__item.is-open .roo-faq__q { color: var(--roo-blue); } .roo-faq__icn { position: relative; flex: 0 0 22px; width: 22px; height: 22px; } .roo-faq__icn i { position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background: var(--roo-blue); transform: translate(-50%, -50%); transition: transform 0.2s ease, opacity 0.2s ease; } .roo-faq__icn i:last-child { transform: translate(-50%, -50%) rotate(90deg); } .roo-faq__item.is-open .roo-faq__icn i:last-child { opacity: 0; } .roo-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease; } .roo-faq__item.is-open .roo-faq__a { grid-template-rows: 1fr; } .roo-faq__a-inner { overflow: hidden; padding: 0 22px; font-size: 15px; line-height: 1.7; color: var(--roo-ink-soft); } .roo-faq__item.is-open .roo-faq__a-inner { padding-bottom: 22px; } /* ===================================================================== Platform — reference-style 2 + 1 + 2 feature composition on a light ice-blue surface. Small cards are horizontal splits (text | visual) that alternate direction; the centre card is a taller full-width marine-blue hero. Screenshots only ever appear as small cooled/framed proof panels. ===================================================================== */ .elementor-element-e765514 { background: linear-gradient(180deg, #eaf0f9 0%, #f5f8fd 50%, #eef3fb 100%) !important; padding: clamp(66px, 8vw, 116px) 0 !important; } .elementor-element-e765514 > .elementor-container { display: block !important; max-width: 1360px; margin: 0 auto; padding: 0 24px !important; } .roo-plat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 1.8vw, 26px); } .roo-plat__head { grid-column: 1 / -1; max-width: 760px; margin-bottom: clamp(8px, 1.4vw, 20px); } .roo-plat__head .roo-h2 { margin-bottom: 16px; } .roo-plat__head .roo-lead { max-width: 640px; } /* --- split module cards --- */ .roo-plat__card { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); min-height: clamp(264px, 24vw, 322px); border-radius: 28px; overflow: hidden; background: #fff; border: 1px solid #e4ebf5; box-shadow: 0 34px 70px -44px rgba(18, 40, 82, 0.4); transition: transform 0.25s ease, box-shadow 0.25s ease; } .roo-plat__card:hover { transform: translateY(-4px); box-shadow: 0 46px 84px -40px rgba(18, 40, 82, 0.48); } .roo-plat__card--flip { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); } .roo-plat__card--flip > .roo-plat__body { order: 2; } .roo-plat__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3vw, 46px); } .roo-plat__eyebrow { display: block; margin-bottom: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--roo-blue); } .roo-plat__title { margin: 0 0 12px; font-family: "Outfit", "DM Sans", "Inter", sans-serif; font-size: clamp(21px, 1.7vw, 27px); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--roo-navy); } .roo-plat__text { margin: 0; font-size: clamp(14.5px, 1.05vw, 15.5px); line-height: 1.66; color: #4a586f; } /* visual half */ .roo-plat__visual { position: relative; overflow: hidden; } .roo-plat__visual--photo .roo-plat__media { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(0.6) contrast(1.03); } .roo-plat__visual--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(12, 28, 58, 0.34) 0%, rgba(28, 111, 232, 0.14) 100%); } .roo-plat__visual--ui { background: #dfe9f6; } .roo-plat__panel { position: absolute; inset: 0; margin: 0; overflow: hidden; } .roo-plat__panel img { display: block; width: 100%; height: 100%; object-fit: cover; /* left-aligned so the roo.center logo + left menu stay visible */ object-position: left top; /* zoom from the top-left so the baked-in orange loader glyph (bottom-left of these captures) is cropped out and the logo/menu read larger */ transform: scale(1.16); transform-origin: top left; /* light, cheap treatment: greyscale kills the orange/green admin buttons; the flat blue overlay below tints the white UI toward Roo.Center blue */ filter: grayscale(1) contrast(1.12); } .roo-plat__panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(31, 111, 232, 0.26) 0%, rgba(16, 46, 104, 0.34) 100%); } /* --- dominant hero card --- */ .roo-plat__big { position: relative; grid-column: 1 / -1; display: flex; align-items: center; min-height: clamp(452px, 44vw, 564px); border-radius: 34px; overflow: hidden; background: #0b1f42; isolation: isolate; } .roo-plat__big-media { position: absolute; inset: 0; z-index: -2; background: url("../imgs/port-team.webp") 62% 42% / cover no-repeat; filter: saturate(0.5) brightness(0.8); } .roo-plat__big::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(104deg, rgba(6, 16, 33, 0.97) 0%, rgba(10, 30, 64, 0.9) 42%, rgba(19, 74, 168, 0.55) 100%); } .roo-plat__big-inner { padding: clamp(34px, 4.5vw, 70px); max-width: 640px; } .roo-plat__eyebrow--light { color: #8fb8ff; } .roo-plat__big-title { margin: 0 0 18px; font-family: "Outfit", "DM Sans", "Inter", sans-serif; font-weight: 600; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -0.015em; color: #fff; } .roo-plat__big-text { margin: 0 0 28px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.62; color: rgba(255, 255, 255, 0.85); max-width: 50ch; } .roo-plat__flow { margin: 0; display: flex; flex-wrap: wrap; align-items: center; font-family: "Outfit", "DM Sans", "Inter", sans-serif; font-size: clamp(13px, 1vw, 15px); font-weight: 600; letter-spacing: 0.02em; color: #fff; } .roo-plat__flow span { display: inline-flex; align-items: center; } .roo-plat__flow span:not(:last-child)::after { content: "→"; margin: 0 clamp(10px, 1.4vw, 18px); color: #6ea8ff; font-weight: 400; } /* ===================================================================== Header — search / cart / hidden-panel icons removed in redesign.js; re-balance so it reads logo-left / nav-right (not nav floating mid-right) ===================================================================== */ .roo-redesigned .pxl-header-elementor .elementor-element-ed5b95c, .roo-redesigned .pxl-header-elementor .pxl-nav-menu1 { margin-left: auto !important; } .roo-redesigned .pxl-header-elementor .elementor-widget-wrap { justify-content: flex-end !important; } /* "İletişim" header button — navy = the "center" half of the roo.center mark */ .pxl-menu-primary .roo-nav-cta-li { margin-left: 16px !important; display: inline-flex !important; align-items: center; } .pxl-menu-primary .roo-nav-cta, .pxl-menu-primary .roo-nav-cta:hover { display: inline-flex !important; align-items: center; height: 40px !important; padding: 0 20px !important; border-radius: 10px !important; background: #17223c !important; color: #fff !important; font-weight: 600; line-height: 40px !important; transition: background 0.18s ease, transform 0.18s ease; } .pxl-menu-primary .roo-nav-cta span, .pxl-menu-primary .roo-nav-cta span:hover { color: #fff !important; padding: 0 !important; line-height: 40px !important; } .pxl-menu-primary .roo-nav-cta::before, .pxl-menu-primary .roo-nav-cta::after { display: none !important; } .pxl-menu-primary .roo-nav-cta:hover { background: #0f1a30 !important; transform: translateY(-1px); } /* ===================================================================== Roo Track — deep-navy live-tracking showcase. Left = the real roo.supply/map product framed in a dark app window (2026: lead with actual product UI) + a live status bar + two floating vessel cards. ===================================================================== */ .elementor-element-be2a5e6 { background: linear-gradient(172deg, #081428 0%, #0d2148 55%, #102a52 100%) !important; padding: clamp(64px, 8vw, 110px) 0 !important; } .elementor-element-be2a5e6 > .elementor-container { display: block !important; max-width: 1360px; margin: 0 auto; padding: 0 24px !important; } .roo-track { display: grid; grid-template-columns: 1.16fr 1fr; gap: clamp(30px, 4.5vw, 72px); align-items: center; } /* --- product window --- */ .roo-track__visual { position: relative; } .roo-track__window { border-radius: 18px; overflow: hidden; background: #0b1830; border: 1px solid rgba(120, 165, 255, 0.18); box-shadow: 0 60px 110px -50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.02); } .roo-track__bar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: linear-gradient(180deg, #12213f, #0e1c37); border-bottom: 1px solid rgba(120, 165, 255, 0.12); } .roo-track__bar-logo { height: 16px !important; width: auto !important; max-width: none !important; opacity: 0.95; } .roo-track__bar-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5fe0a0; } .roo-track__bar-live i { width: 7px; height: 7px; border-radius: 50%; background: #34d17a; box-shadow: 0 0 0 0 rgba(52, 209, 122, 0.5); animation: roo-track-live 2s ease-out infinite; } @keyframes roo-track-live { 0% { box-shadow: 0 0 0 0 rgba(52, 209, 122, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(52, 209, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 209, 122, 0); } } .roo-track__bar-count { margin-left: auto; font-size: 12px; font-weight: 600; color: rgba(190, 210, 245, 0.7); } .roo-track__screen { position: relative; height: clamp(340px, 38vw, 470px); overflow: hidden; } .roo-track__mapimg { position: absolute; inset: 0; background-size: cover; background-position: center; } .roo-track__screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 18, 38, 0) 60%, rgba(8, 18, 38, 0.35)); pointer-events: none; } /* --- floating vessel cards (Roo blue accent) --- */ .roo-track__chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; margin: 0; padding: 11px 16px 11px 11px; border-radius: 14px; background: rgba(10, 22, 46, 0.9); border: 1px solid rgba(28, 111, 232, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 24px 46px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03); } .roo-track__chip--a { top: clamp(16px, 2.6vw, 28px); left: clamp(16px, 2.6vw, 28px); } .roo-track__chip--b { bottom: clamp(16px, 2.6vw, 28px); right: clamp(16px, 2.6vw, 28px); } .roo-track__chip-mark { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(150deg, #2f7ef0, #1559c0); box-shadow: 0 8px 18px -6px rgba(28, 111, 232, 0.7); } .roo-track__chip-body strong { display: block; font-size: 12.5px; font-weight: 700; color: #fff; letter-spacing: 0.02em; } .roo-track__chip-body span { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11px; color: rgba(184, 206, 245, 0.72); } .roo-track__chip-arrow { flex: none; opacity: 0.7; margin: 0 -1px; } .roo-track__chip-status { width: 6px; height: 6px; border-radius: 50%; background: #4fb0ff; box-shadow: 0 0 0 3px rgba(79, 176, 255, 0.22); } .roo-track__chip-status--idle { background: #7c93b8; box-shadow: 0 0 0 3px rgba(124, 147, 184, 0.18); } /* --- content side --- */ .roo-track__content { display: flex; flex-direction: column; align-items: flex-start; } .roo-track__badge { display: inline-flex; align-items: center; margin-bottom: 22px; padding: 8px 16px; border-radius: 999px; background: #fff; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.55); } .roo-track__badge img { height: 20px; width: auto; display: block; } .roo-track__content .roo-h2 { margin-bottom: 16px; } .roo-track__list { list-style: none; margin: clamp(24px, 3vw, 34px) 0 clamp(26px, 3vw, 34px); padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 3vw, 44px); } .roo-track__list li { display: flex; align-items: center; gap: 11px; padding: 13px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.13); color: rgba(255, 255, 255, 0.9); font-size: 14.5px; font-weight: 500; } .roo-track__list svg { flex: 0 0 auto; color: #5fa0ff; } .roo-track__cta { align-self: start; } @media (max-width: 980px) { .roo-plat { grid-template-columns: 1fr; } .roo-plat__card, .roo-plat__card--flip { grid-template-columns: 1fr; min-height: 0; } .roo-plat__card--flip > .roo-plat__body { order: 0; } .roo-plat__visual { order: -1; min-height: 220px; } .roo-plat__visual--ui { min-height: 240px; } .roo-plat__big { min-height: 0; } .roo-track { grid-template-columns: 1fr; } .roo-track__visual { order: -1; } .roo-track__screen { height: clamp(260px, 56vw, 380px); } } @media (max-width: 620px) { .roo-plat__card { border-radius: 22px; } .roo-track__list { grid-template-columns: 1fr; } .roo-track__chip { padding: 9px 13px 9px 9px; gap: 10px; } .roo-track__chip-mark { width: 28px; height: 28px; } .roo-track__chip-body strong { font-size: 11.5px; } .roo-track__chip-body span { font-size: 10.5px; } .roo-plat__flow { font-size: 12.5px; } .roo-plat__flow span:not(:last-child)::after { margin: 0 8px; } } /* ===================================================================== Responsive ===================================================================== */ @media (max-width: 1100px) { .roo-proc__stage { grid-template-columns: 1fr; gap: clamp(46px, 9vw, 72px); max-width: 420px; margin: 0 auto; } .roo-proc__step--01, .roo-proc__step--02, .roo-proc__step--03 { margin-top: 0; } .roo-proc__step { display: grid; grid-template-columns: minmax(0, 200px) 1fr; gap: 20px; align-items: center; } .roo-proc__figure { transform: none !important; max-width: 200px; } .roo-proc__step--03 .roo-proc__badge { left: -14px; right: auto; top: auto; bottom: -14px; } .roo-proc__text { margin-top: 0; } .roo-proc__num { right: auto; left: 2%; top: -0.5em; font-size: clamp(90px, 20vw, 130px); } .roo-proc__flow, .roo-proc__map { display: none; } .elementor-element-bfdfeab::before { width: 100%; opacity: 0.3; } .roo-figure { margin: 0 auto; } } @media (max-width: 520px) { .roo-proc__step { grid-template-columns: 1fr; } .roo-proc__figure { max-width: 260px; } .roo-proc__text { max-width: none; } } @media (max-width: 960px) { .roo-cta__bg { width: 58%; } .roo-cta__person { height: clamp(280px, 40vw, 380px) !important; right: -3%; } .roo-cta__body { max-width: 58%; } .roo-cta__deco { display: none; } } @media (max-width: 720px) { .roo-cta { border-radius: 22px; } .roo-cta__bg { width: 100%; -webkit-mask-image: linear-gradient(190deg, transparent 0, #000 42%); mask-image: linear-gradient(190deg, transparent 0, #000 42%); border-radius: 22px; } .roo-cta__person { display: none; } .roo-cta__body { max-width: none; } } @media (max-width: 940px) { .elementor-element-e9e1be5 .elementor-container { max-width: 620px !important; } .roo-form { grid-template-columns: 1fr; } .roo-form__intro { border-radius: 22px 22px 0 0; } .roo-form__intro-top { max-width: 42ch; } .roo-form__steps ol { grid-template-columns: 1fr 1fr; gap: 12px 20px; } .roo-form__card { margin: 0; border-radius: 0 0 22px 22px; } } @media (max-width: 560px) { .roo-field-row { grid-template-columns: 1fr; gap: 14px; } .roo-form__steps ol { grid-template-columns: 1fr; } } @media (max-width: 560px) { .roo-marquee__item img { height: 30px; } } /* ===================================================================== ROUND 2 — overrides on top of everything above ===================================================================== */ /* ===================================================================== HERO — see the "split composition" block just below. ===================================================================== */ body.roo-redesigned::before, body.roo-redesigned::after { display: none !important; } /* the RevSlider host section + column must run edge to edge */ .elementor-element-200348e, .elementor-element-200348e > .elementor-container, .elementor-element-200348e .elementor-widget-wrap, .elementor-element-200348e .elementor-column { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } .roo-hero-widget .elementor-widget-container { padding: 0 !important; } .wp-block-themepunch-revslider, rs-fullwidth-wrap { height: auto !important; } /* ===================================================================== HERO — one Roo.Center "operations console" that tells ONE connected workflow for ONE vessel (#TLP-1027 / MV Nordic Star), on load: S1 Roo Track izliyor (map fills the console) S2 varış bildirimi (ETA) (map + notification) S3 talep açılıyor (map → live strip, panel + step rail) S4 teklifler toplanıyor (same panel, content morphs) S5 operasyon yürütülüyor (final, strongest state) The step rail (Talep→Teklif→Sipariş→Tedarik→Teslimat) is persistent from S3. Roo Track shrinks to a live strip that keeps the vessel context through every later stage. Rebuilt 2026-09-02 (v4). Background = a very subtle vessel photo under an ice-blue wash + grid. Driven by js/roo-redesign.js initHeroStory() toggling [data-scene] on .roo-hero__stage. aria-hidden — the

/

carry the meaning. ===================================================================== */ .roo-hero { position: relative; display: flex; align-items: center; min-height: min(624px, calc(100vh - 16px)); padding: clamp(92px, 9.5vh, 114px) 0 clamp(44px, 5.5vh, 58px); background: #edf2f9; overflow: hidden; isolation: isolate; } /* ---- background: a full-bleed ship-supply photo across the WHOLE hero, low opacity, under an ice-blue wash + a faint chart grid. Calm and premium — the wash keeps every text/CTA fully readable. --- */ .roo-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: #e9eef6; } .roo-hero__bg::before { content: ""; position: absolute; inset: 0; background: url("../imgs/bg4-h6.webp") center 34% / cover no-repeat; opacity: 0.13; } .roo-hero__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(42% 48% at 28% 44%, rgba(28, 111, 232, 0.12), transparent 72%), linear-gradient(158deg, rgba(238, 242, 250, 0.62) 0%, rgba(228, 235, 246, 0.68) 52%, rgba(237, 241, 249, 0.66) 100%), linear-gradient(96deg, rgba(233, 239, 248, 0.1) 20%, rgba(235, 240, 249, 0.66) 78%), linear-gradient(rgba(15, 44, 98, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 44, 98, 0.03) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 100% 100%, 54px 54px, 54px 54px; } /* ---- centred content grid — one balanced composition ----------------- */ .roo-hero__grid { position: relative; z-index: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(38px, 4.2vw, 76px); } .roo-hero__stage { order: 1; position: relative; min-width: 0; animation: rooHeroRise 740ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } /* a soft blue glow behind the console — anchors the stage over the photo */ .roo-hero__stage::after { content: ""; position: absolute; inset: -22% -26% -24% -24%; z-index: 0; background: radial-gradient(48% 46% at 48% 48%, rgba(28, 111, 232, 0.16), transparent 68%); } .roo-hero__inner { order: 2; position: relative; z-index: 2; min-width: 0; } /* ===================================================================== THE CONSOLE ===================================================================== */ .roo-hero__console { position: relative; z-index: 1; border-radius: 16px; background: #fff; border: 1px solid rgba(15, 44, 98, 0.10); box-shadow: 0 1px 2px rgba(15, 26, 48, 0.05), 0 8px 20px -10px rgba(13, 30, 66, 0.18), 0 48px 90px -36px rgba(13, 30, 66, 0.42); overflow: hidden; } .roo-hero__c-bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: #0e2148; } .roo-hero__c-brand { font: 600 12.5px/1 "Inter", sans-serif; letter-spacing: -0.01em; color: #aac6ee; } .roo-hero__c-brand b { color: #fff; } .roo-hero__c-vessel { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); font: 500 10.5px/1 "Inter", sans-serif; color: #dbe7fb; white-space: nowrap; } .roo-hero__c-vessel svg { color: #86b4f6; } .roo-hero__c-live { display: inline-flex; align-items: center; gap: 6px; font: 600 9.5px/1 "Inter", sans-serif; letter-spacing: 0.05em; color: #7fe3a8; } .roo-hero__c-live i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: rooHeroBlip 2.6s ease-out infinite; } .roo-hero__c-body { position: relative; height: clamp(324px, 24vw, 356px); background: #fff; } /* ---- Roo Track layer: fills the body (S1/S2), then a live strip (S3+) - */ .roo-hero__track { position: absolute; left: 0; right: 0; top: 0; height: 76px; /* default = strip */ overflow: hidden; background: #0b1c38 url("../imgs/roo-track-map.webp") 54% 46% / 152% auto no-repeat; transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.45s ease; } .roo-hero__track-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 20, 44, 0.78) 0%, rgba(9, 20, 44, 0.16) 30%, rgba(9, 20, 44, 0.18) 66%, rgba(9, 20, 44, 0.78) 100%), linear-gradient(155deg, rgba(8, 18, 40, 0.18) 0%, rgba(8, 18, 40, 0.5) 100%); } .roo-hero__track-route { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.32; transition: opacity 0.4s ease; } .roo-hero__track-line { fill: none; stroke: #4f97f7; stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 82; /* ~= track-line path length (draw-in reveal) */ stroke-dashoffset: 82; } .roo-hero__track-v { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #a2bfec; opacity: 0; transition: opacity 0.4s ease; } /* other vessels scattered on the map — kept clear of land at every size */ .roo-hero__track-v--1 { left: 10%; top: 52%; } .roo-hero__track-v--2 { left: 42%; top: 24%; } .roo-hero__track-v--3 { left: 45%; top: 68%; background: #7392cb; } /* the live vessel sits on the leading tip of the route line (svg path end 176,48 in the 340x150 viewBox -> 51.8% / 32%); track-port anchors the other end. translate keeps the 9px dot centred on that point at any size. */ .roo-hero__track-v--live { left: 51.8%; top: 32%; transform: translate(-50%, -50%); width: 9px; height: 9px; background: #4f97f7; box-shadow: 0 0 0 3px rgba(79, 151, 247, 0.26); } .roo-hero__track-v--live::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid rgba(79, 151, 247, 0.55); animation: rooHeroPing 2.8s ease-out infinite; } .roo-hero__track-port { position: absolute; left: 55.3%; /* start of the route line (svg 188,122) */ top: 81.3%; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid #4f97f7; opacity: 0; transition: opacity 0.4s ease; } .roo-hero__track-badge { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 9px; transition: top 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } .roo-hero__track-mark { width: 26px; height: 26px; flex: none; background: url("../imgs/roo-track-mark-white.webp") center / contain no-repeat; } .roo-hero__track-label { display: flex; flex-direction: column; gap: 2px; font: 600 11.5px/1 "Inter", sans-serif; color: #fff; letter-spacing: 0.01em; } .roo-hero__track-label em { font: 400 9.5px/1 "Inter", sans-serif; font-style: normal; color: rgba(212, 227, 250, 0.72); display: none; } .roo-hero__track-eta { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font: 500 10px/1 "Inter", sans-serif; color: rgba(220, 232, 250, 0.82); white-space: nowrap; } .roo-hero__track-eta b { color: #fff; font-weight: 600; } /* ---- ETA notification (S2) ---- */ .roo-hero__note { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 4; padding: 14px 16px 15px; border-radius: 12px; background: #fff; border: 1px solid rgba(15, 44, 98, 0.10); box-shadow: 0 22px 44px -18px rgba(12, 28, 64, 0.34); opacity: 0; /* hidden = instant (no transition) so it never ghosts over the panel when the loop restarts */ transform: translateY(16px); } .roo-hero__note-k { display: block; font: 700 9px/1 "Inter", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #2f7ff0; margin-bottom: 8px; } .roo-hero__note-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .roo-hero__note-row strong { font: 600 15px/1.1 "Inter", sans-serif; color: #16233c; letter-spacing: -0.01em; } .roo-hero__note-eta { font: 500 12px/1 "Inter", sans-serif; color: #64708c; white-space: nowrap; } .roo-hero__note-eta b { font: 700 18px/1 "Inter", sans-serif; color: #0f2c62; } .roo-hero__note-sub { display: block; margin-top: 5px; font: 400 11.5px/1.3 "Inter", sans-serif; color: #64708c; } /* ---- workflow panel (S3–S5, content morphs) ---- */ .roo-hero__panel { position: absolute; left: 0; right: 0; top: 72px; bottom: 48px; opacity: 0; transform: translateY(12px); /* hide = quick (so it clears fast when the map expands back on loop) */ transition: opacity 0.26s ease, transform 0.26s ease; } /* Only ONE workflow view is rendered at a time — a hard display swap, never two stacked / faded (that caused blank frames + double content). A short opacity keyframe on the shown view gives the "morph" feel. */ .roo-hero__pv { position: absolute; inset: 13px 16px 7px; flex-direction: column; gap: 9px; background: #fff; display: none; } .roo-hero__pv--ops, .roo-hero__stage[data-scene="3"] .roo-hero__pv--talep, .roo-hero__stage[data-scene="4"] .roo-hero__pv--teklif, .roo-hero__stage[data-scene="5"] .roo-hero__pv--ops { display: flex; animation: rooHeroPvIn 0.34s ease both; } .roo-hero__stage[data-scene="3"] .roo-hero__pv--ops, .roo-hero__stage[data-scene="4"] .roo-hero__pv--ops { display: none; } @keyframes rooHeroPvIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .roo-hero__pv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .roo-hero__pv-head strong { font: 600 13.5px/1 "Inter", sans-serif; color: #17233c; letter-spacing: -0.01em; } .roo-hero__pv-meta { font: 500 11px/1 "Inter", sans-serif; color: #7a86a0; white-space: nowrap; } .roo-hero__pill { padding: 3px 9px; border-radius: 999px; font: 600 9.5px/1.4 "Inter", sans-serif; color: #1f7a46; background: rgba(31, 157, 87, 0.12); border: 1px solid rgba(31, 157, 87, 0.26); white-space: nowrap; } .roo-hero__pv-note { font: 400 10.5px/1.3 "Inter", sans-serif; color: #8a94ac; margin-top: -4px; } .roo-hero__pv-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 9px; border-top: 1px solid rgba(15, 44, 98, 0.07); font: 500 10.5px/1.3 "Inter", sans-serif; color: #64708c; } .roo-hero__pv-sum { display: flex; gap: 8px; } .roo-hero__pv-sum span { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: #f4f7fc; border: 1px solid rgba(15, 44, 98, 0.06); font: 400 9px/1 "Inter", sans-serif; color: #8a94ac; letter-spacing: 0.02em; text-transform: uppercase; } .roo-hero__pv-sum b { font: 600 12px/1.1 "Inter", sans-serif; color: #17233c; letter-spacing: 0; text-transform: none; } .roo-hero__ok { display: inline-flex; align-items: center; gap: 6px; color: #1f9d57; } .roo-hero__ok::before { content: ""; width: 13px; height: 13px; border-radius: 50%; background: #1f9d57; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M6.5 10.6 3.9 8l-1 1 3.6 3.6 7-7-1-1z'/%3E%3C/svg%3E") center / 11px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M6.5 10.6 3.9 8l-1 1 3.6 3.6 7-7-1-1z'/%3E%3C/svg%3E") center / 11px no-repeat; flex: none; } .roo-hero__pv-list, .roo-hero__pv-quotes, .roo-hero__pv-log { list-style: none; margin: 0; padding: 0; } .roo-hero__pv-list { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; } .roo-hero__pv-list li { display: flex; align-items: center; justify-content: space-between; padding: 7px 2px; border-bottom: 1px solid rgba(15, 44, 98, 0.07); font: 400 12px/1.2 "Inter", sans-serif; color: #3f4c68; } .roo-hero__pv-list li:last-child { border-bottom: 0; } .roo-hero__pv-list li b { font-weight: 600; color: #17233c; } .roo-hero__pv-quotes { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; } .roo-hero__pv-quotes li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 9px; border: 1px solid rgba(15, 44, 98, 0.10); font: 400 12px/1.2 "Inter", sans-serif; color: #3f4c68; } .roo-hero__pv-quotes li span { font-weight: 500; color: #17233c; } .roo-hero__pv-quotes li b { font-weight: 600; color: #0f2c62; } .roo-hero__pv-quotes li i { grid-column: 1 / -1; display: none; font-style: normal; font: 600 9.5px/1 "Inter", sans-serif; color: #1f9d57; } .roo-hero__stage.is-picked .roo-hero__pv-quotes li.is-best { border-color: rgba(31, 157, 87, 0.5); background: rgba(31, 157, 87, 0.07); } .roo-hero__stage.is-picked .roo-hero__pv-quotes li.is-best i { display: block; } .roo-hero__pv-prog { height: 7px; border-radius: 999px; background: #e6ecf6; overflow: hidden; margin-top: 2px; } .roo-hero__pv-prog i { display: block; height: 100%; border-radius: inherit; width: 52%; background: linear-gradient(90deg, #1c6fe8, #4f97f7); transition: width 1.13s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s; } /* live step label — only used on mobile (desktop shows the summary + log) */ .roo-hero__pv-step { display: none; margin: 6px 0 0; font: 600 12px/1.3 "Inter", sans-serif; color: #1c6fe8; } .roo-hero__pv-step::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #1c6fe8; margin-right: 7px; vertical-align: middle; } .roo-hero__pv-log li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(15, 44, 98, 0.06); font: 400 11px/1.2 "Inter", sans-serif; color: #64708c; } .roo-hero__pv-log li:last-child { border-bottom: 0; } .roo-hero__pv-log li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: #1f9d57; } .roo-hero__pv-log li span { color: #2a3960; font-weight: 500; } .roo-hero__pv-log li em { margin-left: auto; font-style: normal; color: #8a94ac; } /* ---- persistent step rail (S3+) ---- */ .roo-hero__rail { position: absolute; left: 0; right: 0; bottom: 0; height: 50px; display: flex; align-items: center; padding: 0 18px 3px; list-style: none; margin: 0; border-top: 1px solid rgba(15, 44, 98, 0.08); background: #fbfcfe; opacity: 0; transform: translateY(10px); transition: opacity 0.26s ease, transform 0.26s ease; } .roo-hero__rail li { position: relative; flex: 1; text-align: center; padding-top: 15px; font: 500 9px/1 "Inter", sans-serif; color: #9aa3b8; letter-spacing: 0.01em; } .roo-hero__rail li::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #cdd7e8; z-index: 1; } .roo-hero__rail li::after { content: ""; position: absolute; top: 4px; left: -50%; width: 100%; height: 2px; background: #dbe3f0; } .roo-hero__rail li:first-child::after { display: none; } .roo-hero__rail li.is-done { color: #2a3960; } .roo-hero__rail li.is-done::before { background: #1f9d57; border-color: #1f9d57; } .roo-hero__rail li.is-done::after { background: #1f9d57; } .roo-hero__rail li.is-active { color: #0f2c62; font-weight: 600; } .roo-hero__rail li.is-active::before { border-color: #2f7ff0; box-shadow: 0 0 0 4px rgba(47, 127, 240, 0.16); } /* ===================================================================== SCENE STATES — [data-scene] on .roo-hero__stage. Default (no attr, or scene 5) = the final S5 console. ===================================================================== */ /* S1 — Roo Track fills the console again (loop restart). Slow, eased expansion so it feels like a pull-back to the map, not a hard cut. */ .roo-hero__stage[data-scene="1"] .roo-hero__track, .roo-hero__stage[data-scene="2"] .roo-hero__track { height: 100%; } .roo-hero__stage[data-scene="1"] .roo-hero__track { z-index: 8; /* rise ABOVE the panel + rail so the map "wipes" down over them as it grows — no ghost white rectangle on loop */ transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s ease; } .roo-hero__stage[data-scene="1"] .roo-hero__track-badge, .roo-hero__stage[data-scene="2"] .roo-hero__track-badge { top: 15px; transform: none; } .roo-hero__stage[data-scene="1"] .roo-hero__track-label em, .roo-hero__stage[data-scene="2"] .roo-hero__track-label em { display: block; } .roo-hero__stage[data-scene="1"] .roo-hero__track-eta, .roo-hero__stage[data-scene="2"] .roo-hero__track-eta { opacity: 0; } .roo-hero__stage[data-scene="1"] .roo-hero__track-route, .roo-hero__stage[data-scene="2"] .roo-hero__track-route { opacity: 1; } .roo-hero__stage[data-scene="1"] .roo-hero__track-v, .roo-hero__stage[data-scene="2"] .roo-hero__track-v, .roo-hero__stage[data-scene="1"] .roo-hero__track-port, .roo-hero__stage[data-scene="2"] .roo-hero__track-port { opacity: 1; } .roo-hero__stage[data-scene="1"] .roo-hero__track-line, .roo-hero__stage[data-scene="2"] .roo-hero__track-line, .roo-hero__stage:not([data-scene]) .roo-hero__track-line { stroke-dashoffset: 0; } .roo-hero__stage[data-scene="1"] .roo-hero__track-line { transition: stroke-dashoffset 1.63s ease 0.375s; } /* loop restart (S5 -> S1): the map wipes down over the panel + rail (see the z-index bump above); they just fade gently underneath — no hard cut */ .roo-hero__stage[data-scene="1"] .roo-hero__note { opacity: 0; } .roo-hero__stage[data-scene="1"] .roo-hero__panel, .roo-hero__stage[data-scene="1"] .roo-hero__rail { opacity: 0; transition: opacity 0.4s ease 0.12s; } .roo-hero__stage[data-scene="2"] .roo-hero__panel, .roo-hero__stage[data-scene="2"] .roo-hero__rail { opacity: 0; } /* S2 — map dims a touch as the ETA card slides up */ .roo-hero__stage[data-scene="2"] .roo-hero__track { filter: brightness(0.8); } .roo-hero__stage[data-scene="2"] .roo-hero__note { opacity: 1; transform: none; transition: opacity 0.46s ease, transform 0.46s cubic-bezier(0.22, 0.61, 0.36, 1); } /* S3–S5 — strip + panel + rail visible. The show transition is delayed so it waits for the Roo Track map to finish shrinking to its strip; nothing overlaps mid-transition. (Default / no-JS also gets the resting state.) */ .roo-hero__stage[data-scene="3"] .roo-hero__panel, .roo-hero__stage[data-scene="4"] .roo-hero__panel, .roo-hero__stage[data-scene="5"] .roo-hero__panel, .roo-hero__stage[data-scene="3"] .roo-hero__rail, .roo-hero__stage[data-scene="4"] .roo-hero__rail, .roo-hero__stage[data-scene="5"] .roo-hero__rail { opacity: 1; transform: none; /* wait for the Roo Track map to finish collapsing to the strip (0.4s) before the panel + rail fade in — no overlap on the tall map */ transition: opacity 0.36s ease 0.44s, transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1) 0.44s; } /* while S3/S4 hold, keep ops hidden so a swap never shows two views */ .roo-hero__stage[data-scene="3"] .roo-hero__pv--ops, .roo-hero__stage[data-scene="4"] .roo-hero__pv--ops { display: none !important; } /* no-JS / reduced motion — rest on the finished S5 console (map = strip) */ .roo-hero__stage:not([data-scene]) .roo-hero__panel, .roo-hero__stage:not([data-scene]) .roo-hero__rail { opacity: 1; transform: none; transition: none; } /* ===================================================================== RIGHT COLUMN — value proposition + CTAs ===================================================================== */ .roo-hero__badge { display: inline-block; background: var(--roo-blue); color: #fff; font-family: "Outfit", "DM Sans", "Inter", sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0.005em; padding: 9px 24px; border-radius: 999px; margin-bottom: 20px; white-space: nowrap; } .roo-hero__title { margin: 0 0 20px; font-family: "Outfit", "DM Sans", "Inter", sans-serif; font-size: clamp(40px, 4.8vw, 72px); line-height: 1.06; font-weight: 600; letter-spacing: -0.006em; color: #16233c; } .roo-hero__text { margin: 0 0 26px; max-width: 34em; font-family: "Inter", sans-serif; font-size: 17px; line-height: 1.6; color: #505d7b; } .roo-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; } .roo-hero__actions .roo-btn { padding: 16px 28px; border-radius: 10px; font-size: 15px; } .roo-btn--ghost { background: transparent; color: #16233c; border-color: #b9c8de; } .roo-btn--ghost:hover { background: rgba(255, 255, 255, 0.72); border-color: #9db8dd; color: #16233c; } .roo-hero__stats { list-style: none; margin: clamp(20px, 2.4vw, 28px) 0 0; padding: clamp(16px, 1.8vw, 22px) 0 0; border-top: 1px solid rgba(15, 44, 98, 0.09); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px clamp(14px, 1.6vw, 22px); } .roo-hero__stats li { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .roo-hero__stats strong { font: 600 13.5px/1.2 "Inter", sans-serif; color: #17233c; letter-spacing: -0.01em; } .roo-hero__stats span { font: 400 11.5px/1.35 "Inter", sans-serif; color: #6b7690; } /* ===================================================================== ENTRANCE + KEYFRAMES ===================================================================== */ @keyframes rooHeroRise { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } } @keyframes rooHeroBlip { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.42); } 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } @keyframes rooHeroPing { 0% { transform: scale(0.5); opacity: 0.9; } 80%, 100% { transform: scale(1.7); opacity: 0; } } @keyframes rooHeroUp { from { opacity: 0; transform: translate3d(0, 30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @media (prefers-reduced-motion: no-preference) { .roo-hero__badge, .roo-hero__title, .roo-hero__text, .roo-hero__actions .roo-btn, .roo-hero__stats { animation: rooHeroUp 780ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } .roo-hero__badge { animation-delay: 120ms; } .roo-hero__title { animation-delay: 260ms; } .roo-hero__text { animation-delay: 440ms; } .roo-hero__actions .roo-btn:nth-child(1) { animation-delay: 620ms; } .roo-hero__actions .roo-btn:nth-child(2) { animation-delay: 700ms; } .roo-hero__stats { animation-delay: 820ms; } } /* while the hero is scrolled out of view its loop is paused (JS) — freeze the small infinite pulses too so nothing repaints off-screen */ .roo-hero--rest .roo-hero__c-live i, .roo-hero--rest .roo-hero__app-live i, .roo-hero--rest .roo-hero__track-v--live::after, .roo-hero--rest .roo-hero__track-mark i, .roo-hero--rest .roo-hero__map-tag i { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .roo-hero__stage, .roo-hero__pv { animation: none; } .roo-hero__c-live i, .roo-hero__track-v--live::after { animation: none; } .roo-hero__track, .roo-hero__track-badge, .roo-hero__track-route, .roo-hero__note, .roo-hero__panel, .roo-hero__rail, .roo-hero__pv-prog i { transition: none; } .roo-hero__track-line { transition: none; stroke-dashoffset: 0; } } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width: 1440px) { .roo-hero { min-height: min(568px, calc(100vh - 16px)); } .roo-hero__title { font-size: clamp(38px, 4.2vw, 56px); } } @media (max-width: 1300px) { .roo-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(28px, 3vw, 46px); } .roo-hero__title { font-size: clamp(34px, 3.8vw, 48px); } .roo-hero__stage::before { inset: -12% -12% -15% -12%; } } /* ---- TABLET / MOBILE (≤1180) — single column. The console (animation card) leads: header → CARD → badge → H1 → description → CTA. DOM order is text-then-stage (correct for screen readers — the stage is aria-hidden); the flex column + order:1/2 flips only the *visual* order on small screens. ---- */ @media (max-width: 1180px) { .roo-hero { display: block; min-height: 0; padding: 0 0 clamp(48px, 11vw, 66px); background: linear-gradient(180deg, #eff4fb 0%, #e6edf7 100%); } .roo-hero__bg { display: none; } .roo-hero__stage::before, .roo-hero__stage::after { display: none; } .roo-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(58% 40% at 100% 0%, rgba(28, 111, 232, 0.07), transparent 72%), radial-gradient(rgba(28, 111, 232, 0.05) 1px, transparent 1.7px); background-size: 100% 100%, 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.3) 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.3) 58%, transparent 100%); } .roo-hero__grid { display: flex; flex-direction: column; max-width: none; padding: 0; } .roo-hero__inner { order: 2; /* below the console (which is order 1) */ position: relative; z-index: 1; width: 100%; max-width: 480px; margin: 0 auto; padding: clamp(26px, 7vw, 34px) 22px 0; /* gap: console → badge */ display: flex; flex-direction: column; align-items: center; text-align: center; } .roo-hero__badge { align-self: center; width: -moz-fit-content; width: fit-content; max-width: 100%; margin-bottom: clamp(16px, 5vw, 22px); padding: 8px 18px; font-size: 13px; } .roo-hero__title { margin: 0 0 clamp(14px, 4vw, 18px); font-size: clamp(27px, 7.2vw, 40px); line-height: 1.14; letter-spacing: -0.018em; } .roo-hero__text { margin: 0 0 clamp(22px, 6vw, 30px); max-width: 38ch; font-size: 15.5px; line-height: 1.6; } .roo-hero__actions { width: 100%; max-width: 340px; flex-direction: column; align-items: stretch; gap: 12px; } .roo-hero__actions .roo-btn { width: 100%; justify-content: center; padding: 15px 24px; } .roo-hero__stats { display: none; } .roo-hero__stage { order: 1; /* leads the mobile hero */ width: min(420px, calc(100% - 40px)); margin: clamp(20px, 6vw, 30px) auto 0; /* gap: header → console */ animation: none; } .roo-hero__c-vessel { display: none; } .roo-hero__c-body { height: clamp(210px, 58vw, 236px); } /* mobile only ever runs scenes 1 / 2 / 5 — the Talep & Teklif detail views are never shown. The `[data-scene]` prefix + being later in the file beats the `[data-scene="3/4"]` show rules on specificity/order, so a stray resize into desktop-JS can't render them into the tiny mobile console. */ .roo-hero__stage[data-scene] .roo-hero__pv--talep, .roo-hero__stage[data-scene] .roo-hero__pv--teklif, .roo-hero__pv--talep, .roo-hero__pv--teklif { display: none; } /* mobile ops view = head + progress + a live step label + the rail. The summary chips and the (step-specific) activity log are desktop-only. */ .roo-hero__pv-sum, .roo-hero__pv-log, .roo-hero__pv-foot { display: none; } .roo-hero__pv-step { display: block; margin-top: 12px; } .roo-hero__panel { top: 70px; bottom: 44px; } .roo-hero__pv { inset: 14px 15px 8px; gap: 11px; justify-content: center; } .roo-hero__pv-prog { height: 8px; } .roo-hero__rail { height: 44px; padding: 0 14px 3px; } .roo-hero__rail li { font-size: 8px; padding-top: 13px; } .roo-hero__track { height: 70px; } /* the panel / rail wait for the map to finish shrinking before they fade in, so nothing overlaps the strip mid-transition */ .roo-hero__panel, .roo-hero__rail { transition: opacity 0.4s ease 0.36s, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.36s; } .roo-hero__stage[data-scene="1"] .roo-hero__track, .roo-hero__stage[data-scene="2"] .roo-hero__track { height: 100%; } .roo-hero__note { left: 12px; right: 12px; bottom: 12px; padding: 12px 14px 13px; } .roo-hero__note-row strong { font-size: 14px; } .roo-hero__note-eta b { font-size: 16px; } } @media (max-width: 480px) { .roo-hero__c-body { height: clamp(218px, 66vw, 244px); } } @media (max-width: 380px) { .roo-hero__badge { font-size: 12px; padding: 7px 15px; } .roo-hero__title { font-size: 26px; } } /* ---- CTA banner: force full width inside Elementor's flex container ---- */ .elementor-element-0cb9653 > .elementor-container { display: block !important; } .roo-cta { width: 100%; } /* ---- Ops / Flow sections: keep block layout inside Elementor's flex ---- */ .elementor-element-52aedbe > .elementor-container, .elementor-element-bfdfeab > .elementor-container { display: block !important; } /* ---- "Roo.Center Nedir?" — vertical rhythm; give the image column more room so the cutout can be large. ---- */ .elementor-element-72498e1 { padding-top: clamp(64px, 8vw, 104px) !important; padding-bottom: clamp(48px, 6vw, 80px) !important; } .elementor-element-72498e1 > .elementor-container { max-width: 1440px !important; } .elementor-element-72498e1 > .elementor-container > .elementor-column { align-self: center; } .elementor-element-7f10dd4 { width: 46% !important; } .elementor-element-19d6a66 { width: 54% !important; } .elementor-element-19d6a66 > .elementor-widget-wrap { padding: 0 !important; } .elementor-element-72498e1 .pxl-item--title { font-size: clamp(28px, 3vw, 42px) !important; line-height: 1.14 !important; } @media (max-width: 1024px) { .elementor-element-7f10dd4, .elementor-element-19d6a66 { width: 100% !important; } .elementor-element-72498e1 .pxl-item--title { font-size: clamp(28px, 6vw, 40px) !important; } } /* ---- "Neden Roo.Center?" — trim the tall empty tail ---- */ .elementor-element-ba91b91 { padding-bottom: clamp(56px, 7vw, 92px) !important; } /* ---- Packages: stretch cards so the CTA row bottom-aligns ---- */ .roo-pricing__grid { align-items: stretch; } .roo-plan { height: 100%; } /* ---- section rhythm: trim the gap the new sections introduced ---- */ .roo-pricing { padding-bottom: clamp(56px, 7vw, 92px); } .elementor-element-774e775 { padding-top: clamp(56px, 7vw, 92px) !important; } /* ---- KILL horizontal overflow: WooCommerce compare/wishlist panels ship a ~2500px fixed-width hidden table that stretches the whole document. This is a static marketing site with no shop — drop the widgets. ---- */ .woosc-bar, .woosc-popup, .woosc-area, .woosw-popup, .woosw-area, .woosw-popup-inner, [class^="woosc-"], [class*=" woosc-"], [class^="woosw-"], [class*=" woosw-"] { display: none !important; } html, body { overflow-x: hidden; max-width: 100vw; } /* ---- Normalise the rebuilt sections: the theme ships negative margins, ~2545px inline widths and offset paddings (designed for section-overlap effects that no longer apply now that these are self-contained). ---- */ .elementor-element-52aedbe, .elementor-element-72498e1, .elementor-element-ba91b91, .elementor-element-e765514, .elementor-element-be2a5e6, .elementor-element-bfdfeab, .elementor-element-0cb9653, #referanslar, #paketler { width: 100% !important; max-width: 100% !important; left: 0 !important; right: 0 !important; margin: 0 !important; transform: none !important; } .elementor-element-52aedbe > .elementor-container, .elementor-element-72498e1 > .elementor-container, .elementor-element-ba91b91 > .elementor-container, .elementor-element-e765514 > .elementor-container, .elementor-element-be2a5e6 > .elementor-container, .elementor-element-bfdfeab > .elementor-container, .elementor-element-0cb9653 > .elementor-container { width: 100% !important; max-width: 1330px !important; margin: 0 auto !important; padding-left: 24px !important; padding-right: 24px !important; } .elementor-element-0cb9653 > .elementor-container { overflow: visible !important; } /* ===================================================================== "Neden Roo.Center?" 3 features — the theme's style-1 icon-box left-anchors the icon while the title/text are centred. Centre the whole item. ===================================================================== */ .roo-neden .pxl-item--inner, .roo-neden .content-right { text-align: center !important; } .roo-neden .wrap-icon { display: block !important; text-align: center !important; margin: 0 auto 20px !important; } .roo-neden .pxl-item--icon { display: inline-flex !important; justify-content: center !important; margin: 0 auto !important; padding: 0 !important; } .roo-neden .pxl-item--icon img { width: 52px !important; height: 52px !important; margin: 0 auto !important; display: block; transition: filter 0.25s cubic-bezier(.645,.045,.355,1) !important; } /* on hover the card turns solid blue — the icon is an , so `fill` can't recolour it; force it white instead of letting it vanish into the blue. */ .roo-neden .pxl-icon-box10 .pxl-item--inner:hover .pxl-item--icon img { filter: brightness(0) invert(1) !important; } .roo-neden .pxl-item--description { max-width: 30ch; margin-left: auto; margin-right: auto; } .roo-neden .more { display: none !important; } /* Trim the section down: the theme stacks 140px section padding + a 40px inner row offset + 60/78px card padding + an empty decorative inner row, leaving it oversized with dead space at the bottom. Compact it and re-centre the block. */ .roo-neden { padding-top: 84px !important; padding-bottom: 84px !important; } .roo-neden > .elementor-container { min-height: 0 !important; } .roo-neden .pxl-heading--inner { max-width: 620px !important; } .roo-neden .pxl-item--title, .roo-neden .pxl-heading .pxl-item--title { font-size: 34px !important; line-height: 42px !important; } .roo-neden .pxl-item--subtitle { margin-bottom: 14px !important; } .roo-neden .elementor-element-bd0bf9d > .elementor-widget-container { margin-bottom: 0 !important; } /* the 3-up row: kill the extra top offset and shrink card padding */ .roo-neden .elementor-element-5c5ed16 { margin-top: 22px !important; } .roo-neden .pxl-icon-box10 .pxl-item--inner { padding: 22px 22px 22px !important; } .roo-neden .wrap-icon { margin: 0 auto 16px !important; } .roo-neden .pxl-icon-box10 .pxl-item-title { margin: 0 0 8px !important; } .roo-neden .pxl-icon-box10 .pxl-item-title a { font-size: 19px !important; line-height: 26px !important; } .roo-neden .pxl-icon-box10 .pxl-item--description { font-size: 15px !important; line-height: 24px !important; } /* empty decorative inner row the theme leaves visible on wide desktop */ .roo-neden .elementor-element-6075b6c { display: none !important; } /* QA fix (2026-09-03): the theme's .pxl-item--description carries text-transform: capitalize. In "roo.center Nedir?" (#about) that class holds full sentences, so it rendered "... Ve Raporlamayı Tek Sistemde Birleştirir." — mid-sentence capitals, wrong Turkish casing. Reset to none there. */ #about .pxl-item--description { text-transform: none !important; } /* ===================================================================== Modern back-to-top button (theme's icon glyph was missing) ===================================================================== */ .pxl-scroll-top { width: 50px !important; height: 50px !important; right: 32px !important; bottom: 40px !important; border-radius: 50% !important; background: var(--roo-blue) !important; color: #fff !important; border: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 16px 34px -10px rgba(28, 111, 232, 0.55) !important; transition: background 0.2s ease, transform 0.2s ease !important; transform: none !important; opacity: 1 !important; } .pxl-scroll-top.pxl-on { visibility: visible !important; opacity: 1 !important; } .pxl-scroll-top:hover { background: var(--roo-blue-dark) !important; transform: translateY(-3px) !important; } .pxl-scroll-top::before, .pxl-scroll-top::after { display: none !important; } .pxl-scroll-top i { display: none !important; } .pxl-scroll-top svg { display: block; transform: none !important; } /* QA fix (2026-09-03): on narrow viewports the page content runs near full-width, so the 50px FAB at right:32px sat on top of the right-edge affordances of interactive controls —