/* Theme Name: PROP& Theme URI: https://propand.sa Author: PROP& Description: Bilingual (English / Arabic) block theme for PROP& — where property meets technology. Every page, solution and section is editable in the WordPress dashboard; header, footer and contact details are managed under PROP& → Settings. Works with Polylang for multilingual sites, including right-to-left Arabic. Version: 1.0.0 Requires at least: 6.5 Tested up to: 6.9 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: propand Tags: block-theme, full-site-editing, rtl-language-support, translation-ready, business */ :root { --pa-navy: #011e3f; --pa-ink: #0a1630; --pa-blue: #146ef5; --pa-deep: #0b5bc4; --pa-cyan: #18c8d9; --pa-soft: #f5f7fb; --pa-line: #e3e9f2; --pa-muted: #4a5873; --pa-on-dark: #c3d0e3; --pa-grad: linear-gradient(120deg, #18c8d9 0%, #146ef5 100%); --pa-grad-text: linear-gradient(90deg, #146ef5 0%, #0fa8bf 100%); --pa-radius: 24px; --pa-shadow: 0 18px 48px rgba(10, 22, 48, 0.08); --pa-shadow-lg: 0 28px 70px rgba(10, 22, 48, 0.16); --pa-section-y: clamp(64px, 9vw, 120px); --pa-header-h: 76px; } /* ---------- base ---------- */ html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.pa-lang-ar, .pa-lang-ar h1, .pa-lang-ar h2, .pa-lang-ar h3, .pa-lang-ar h4, :lang(ar) body, :lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { font-family: var(--wp--preset--font-family--arabic); letter-spacing: 0; } .pa-lang-ar h1, .pa-lang-ar h2, .pa-lang-ar h3 { line-height: 1.3; } img { max-width: 100%; height: auto; } .pa-main { padding: 0; } .pa-main > .wp-block-post-content { margin-block-start: 0; } .pa-main .wp-block-post-content > *:first-child { margin-block-start: 0; } .wp-block-post-content > .alignfull, .wp-block-post-content > .alignfull + * { margin-block: 0 !important; } .pa-head > .pa-lead { margin-block-start: 1.1rem !important; } .wp-site-blocks > * + * { margin-block-start: 0; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } a { text-underline-offset: 3px; } :focus-visible { outline: 3px solid var(--pa-cyan); outline-offset: 3px; border-radius: 6px; } /* ---------- buttons ---------- */ .pa-btn, .wp-block-button__link { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.6rem; border-radius: 999px; font-weight: 700; font-size: 1rem; line-height: 1.2; background: var(--pa-blue); color: #fff; text-decoration: none; border: 2px solid transparent; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .pa-btn:hover, .wp-block-button__link:hover { background: var(--pa-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20, 110, 245, .28); } .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--pa-deep); border-color: currentColor; } .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--pa-deep); color: #fff; border-color: var(--pa-deep); } .wp-block-button.is-style-light .wp-block-button__link, .pa-btn-ghost { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .45); } .wp-block-button.is-style-light .wp-block-button__link:hover, .pa-btn-ghost:hover { background: #fff; color: var(--pa-navy); border-color: #fff; } .pa-soft .wp-block-button.is-style-light .wp-block-button__link, .pa-card .wp-block-button.is-style-light .wp-block-button__link { background: #fff; color: var(--pa-navy); border-color: #fff; } /* ---------- header ---------- */ .pa-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: box-shadow .2s, border-color .2s; } .admin-bar .pa-header { top: 32px; } .pa-header.is-scrolled { border-bottom-color: var(--pa-line); box-shadow: 0 8px 30px rgba(10, 22, 48, .06); } .pa-header-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); height: var(--pa-header-h); display: flex; align-items: center; gap: 24px; } .pa-logo { display: inline-flex; flex: none; } .pa-logo-img { height: 46px; width: auto; display: block; } .pa-nav { display: flex; align-items: center; gap: 28px; margin-inline-start: auto; } .pa-menu { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; } .pa-menu a { display: block; padding: .55rem .9rem; border-radius: 999px; color: var(--pa-ink); font-weight: 600; text-decoration: none; font-size: .98rem; } .pa-menu a:hover, .pa-menu .current-menu-item > a, .pa-menu .current_page_item > a { background: #e8f0fe; color: var(--pa-deep); } .pa-menu .sub-menu { display: none; } .pa-header-actions { display: flex; align-items: center; gap: 14px; } .pa-header-actions .pa-btn { padding: .65rem 1.25rem; } .pa-lang { display: inline-flex; background: var(--pa-soft); border: 1px solid var(--pa-line); border-radius: 999px; padding: 3px; } .pa-lang-link { padding: .35rem .8rem; border-radius: 999px; font-weight: 700; font-size: .88rem; color: var(--pa-muted); text-decoration: none; } .pa-lang-link[lang="ar"] { font-family: var(--wp--preset--font-family--arabic); } .pa-lang-link.is-current { background: #fff; color: var(--pa-ink); box-shadow: 0 2px 8px rgba(10, 22, 48, .08); } .pa-burger { display: none; margin-inline-start: auto; width: 44px; height: 44px; border: 1px solid var(--pa-line); border-radius: 12px; background: #fff; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .pa-burger span:not(.screen-reader-text) { display: block; width: 20px; height: 2px; background: var(--pa-ink); border-radius: 2px; transition: transform .2s, opacity .2s; } .is-open .pa-burger span:nth-child(2) { transform: translateY(7px) rotate(45deg); } .is-open .pa-burger span:nth-child(3) { opacity: 0; } .is-open .pa-burger span:nth-child(4) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1020px) { .pa-burger { display: inline-flex; } .pa-nav { display: none; position: absolute; inset-inline: 0; top: var(--pa-header-h); background: #fff; flex-direction: column; align-items: stretch; gap: 18px; padding: 18px clamp(16px, 4vw, 48px) 28px; border-bottom: 1px solid var(--pa-line); box-shadow: 0 24px 40px rgba(10, 22, 48, .12); } .is-open .pa-nav { display: flex; } .pa-menu { flex-direction: column; } .pa-menu a { padding: .8rem 1rem; font-size: 1.05rem; } .pa-header-actions { justify-content: space-between; } } @media (max-width: 782px) { .admin-bar .pa-header { top: 46px; } } /* ---------- sections ---------- */ .pa-section { padding-block: var(--pa-section-y); position: relative; } .pa-section-tight { padding-block: clamp(40px, 5vw, 64px); } .pa-soft { background: radial-gradient(ellipse at 100% 0%, #dcebff 0%, rgba(245, 247, 251, 0) 45%), radial-gradient(ellipse at 0% 100%, #d8f6f9 0%, rgba(245, 247, 251, 0) 45%), var(--pa-soft); } .pa-dark { background: radial-gradient(ellipse at 90% 0%, rgba(20, 110, 245, .35) 0%, rgba(1, 30, 63, 0) 50%), var(--pa-navy); color: #fff; } .pa-dark h1, .pa-dark h2, .pa-dark h3, .pa-dark .pa-card-title a { color: #fff; } .pa-dark .pa-lead, .pa-dark p { color: var(--pa-on-dark); } .pa-head { margin-block-end: clamp(32px, 4vw, 56px); } .pa-head > * { max-width: 780px; } .pa-head > * + * { margin-block-start: 1rem; } .pa-eyebrow { display: inline-block; margin: 0; padding: .4rem .95rem; border-radius: 999px; background: #e6effe; color: var(--pa-deep); font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; } .pa-lang-ar .pa-eyebrow { letter-spacing: 0; font-size: .92rem; } .pa-dark .pa-eyebrow, .pa-hero .pa-eyebrow, .pa-page-hero .pa-eyebrow { background: rgba(24, 200, 217, .14); color: var(--pa-cyan); } .pa-title { margin: 0; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.1rem); } .pa-title-sm { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-block-end: 1.25rem; } .pa-lead { font-size: clamp(1.06rem, 1rem + .3vw, 1.25rem); color: var(--pa-muted); line-height: 1.65; margin: 0; } .pa-accent { background: var(--pa-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .pa-note { font-size: .9rem; opacity: .8; font-style: italic; } /* ---------- hero ---------- */ .pa-hero { position: relative; overflow: hidden; color: #fff; padding-block: clamp(90px, 13vw, 170px) clamp(80px, 11vw, 140px); background: var(--pa-navy); isolation: isolate; } .pa-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url(assets/images/skyline.jpg) center 60% / cover no-repeat; } .pa-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(1, 30, 63, .97) 0%, rgba(1, 30, 63, .86) 42%, rgba(1, 30, 63, .35) 100%), radial-gradient(circle at 80% 10%, rgba(20, 110, 245, .45), transparent 50%); } [dir="rtl"] .pa-hero::after { background: linear-gradient(270deg, rgba(1, 30, 63, .97) 0%, rgba(1, 30, 63, .86) 42%, rgba(1, 30, 63, .35) 100%), radial-gradient(circle at 20% 10%, rgba(20, 110, 245, .45), transparent 50%); } .pa-hero-copy > * { max-width: 760px; } .pa-hero-copy > * + * { margin-block-start: 1.4rem; } .pa-hero-title { color: #fff; margin: 0; font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5rem); line-height: 1.02; letter-spacing: -0.035em; } .pa-lang-ar .pa-hero-title { line-height: 1.25; } .pa-hero .pa-lead { color: var(--pa-on-dark); max-width: 640px; } .pa-hero .wp-block-buttons { margin-block-start: 2rem; gap: 12px; } .pa-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 2.2rem !important; } .pa-chip { margin: 0; padding: .5rem 1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: #fff !important; font-weight: 600; font-size: .92rem; } .pa-chip:first-child { background: var(--pa-grad); border-color: transparent; color: var(--pa-navy) !important; } /* page hero (inner pages, solutions, blog) */ .pa-page-hero { background: radial-gradient(circle at 85% 0%, rgba(20, 110, 245, .5), transparent 45%), radial-gradient(circle at 0% 100%, rgba(24, 200, 217, .22), transparent 40%), var(--pa-navy); color: #fff; padding-block: clamp(70px, 9vw, 120px); } .pa-page-hero-inner { max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); } .pa-page-hero-inner > * + *, .pa-page-hero > * + * { margin-block-start: 1.1rem; } .pa-page-title, .pa-page-hero h1 { color: #fff; margin: 0; font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); } .pa-page-hero-inner > .pa-page-title { max-width: 900px; } .pa-page-hero .pa-lead { color: var(--pa-on-dark); max-width: 720px; } .pa-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 2rem !important; } /* ---------- grids & cards ---------- */ .pa-grid { display: grid; gap: clamp(16px, 2vw, 24px); } .pa-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pa-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pa-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pa-grid > * { margin: 0 !important; } @media (max-width: 1100px) { .pa-grid-4, .pa-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .pa-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .pa-grid-3, .pa-grid-4, .pa-grid-5 { grid-template-columns: 1fr; } } .pa-card { position: relative; background: #fff; border-radius: var(--pa-radius); box-shadow: var(--pa-shadow); padding: clamp(24px, 2.4vw, 34px); display: flex; flex-direction: column; gap: .7rem; transition: transform .25s ease, box-shadow .25s ease; border: 1px solid rgba(10, 22, 48, .04); } .pa-card > * { margin: 0 !important; } .pa-card:hover { transform: translateY(-4px); box-shadow: var(--pa-shadow-lg); } .pa-card-title { margin: 0; font-size: 1.25rem; line-height: 1.25; } .pa-card-title a { color: var(--pa-ink); text-decoration: none; } .pa-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .pa-card-text { color: var(--pa-muted); font-size: 1rem; line-height: 1.6; } .pa-more { margin-block-start: auto !important; padding-block-start: .4rem; font-weight: 700; } .pa-more a { color: var(--pa-deep); text-decoration: none; } [dir="rtl"] .pa-more a { display: inline-block; } .pa-num { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 2.2rem; line-height: 1; background: var(--pa-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .pa-card-accent { background: linear-gradient(150deg, #146ef5 0%, #0b4fb0 100%); box-shadow: 0 24px 60px rgba(20, 110, 245, .32); } .pa-card-accent .pa-card-title, .pa-card-accent .pa-card-title a { color: #fff; } .pa-card-accent .pa-card-text, .pa-card-accent p { color: #e3edff; } .pa-card-accent .wp-block-buttons { margin-block-start: auto !important; } .pa-dark .pa-card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); box-shadow: none; } .pa-dark .pa-card-text { color: var(--pa-on-dark); } /* icons */ .pa-has-icon::before { content: ""; width: 56px; height: 56px; border-radius: 16px; flex: none; background-color: transparent; background-image: var(--pa-ico), var(--pa-grad); background-repeat: no-repeat; background-position: center, center; background-size: 26px 26px, 100% 100%; box-shadow: 0 10px 24px rgba(20, 110, 245, .25); } .pa-card-accent.pa-has-icon::before { background-image: var(--pa-ico), linear-gradient(#ffffff2e, #ffffff2e); box-shadow: none; } /* split layouts */ .pa-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; } .pa-split > * { margin: 0 !important; } .pa-split-contact { align-items: start; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } @media (max-width: 900px) { .pa-split, .pa-split-contact { grid-template-columns: 1fr; } } .pa-who-copy > * + *, .pa-offplan-copy > * + *, .pa-data-copy > * + * { margin-block-start: 1.2rem; } .pa-offplan-copy .pa-head, .pa-data-copy .pa-head { margin-block-end: 0; } /* stats */ .pa-stats { display: grid; gap: 16px; } .pa-stat { background: #fff; border-radius: var(--pa-radius); box-shadow: var(--pa-shadow); padding: 26px 32px; display: flex; align-items: center; gap: 24px; } .pa-stat > * { margin: 0 !important; } .pa-stat:last-child { background: var(--pa-navy); } .pa-stat:last-child .pa-stat-label { color: #fff; } .pa-stat-num { font-family: var(--wp--preset--font-family--display); font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 700; line-height: 1; min-width: 3.2ch; background: var(--pa-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .pa-stat:last-child .pa-stat-num { background: var(--pa-grad); -webkit-background-clip: text; background-clip: text; } .pa-stat-label { font-weight: 700; font-size: 1.1rem; color: var(--pa-ink); } /* vision */ .pa-big-stat { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 32px; padding: clamp(28px, 4vw, 52px); } .pa-big-stat > * { margin: 0 !important; } .pa-big-num { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(5rem, 3rem + 8vw, 10rem); line-height: .95; letter-spacing: -0.05em; background: linear-gradient(90deg, #18c8d9, #4d93ff); -webkit-background-clip: text; background-clip: text; color: transparent !important; margin-block-end: 1rem !important; } .pa-rows { display: grid; gap: 14px; } .pa-row { display: grid !important; grid-template-columns: auto 1fr; column-gap: 22px; row-gap: 4px !important; align-items: center; } .pa-row .pa-num { grid-row: span 2; font-size: 2.2rem; min-width: 2.2ch; align-self: start; } /* banners */ .pa-banner { margin-block-start: clamp(28px, 3vw, 40px); padding: 22px 30px; border-radius: 20px; background: var(--pa-navy); color: #e3ebf6; font-size: 1.1rem; } .pa-banner strong { color: var(--pa-cyan); } .pa-banner-soft { background: #e8f0fe; color: var(--pa-ink); } .pa-banner-soft strong { color: var(--pa-deep); } /* journey (off-plan) */ .pa-journey { list-style: none; counter-reset: pa; margin: 0; padding: 0; display: grid; gap: 0; } .pa-journey li { counter-increment: pa; position: relative; display: flex; align-items: center; gap: 18px; padding: 14px 0; font-weight: 700; font-size: 1.12rem; color: var(--pa-ink); } .pa-journey li::before { content: counter(pa); flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--pa-grad); color: #fff; font-family: var(--wp--preset--font-family--display); font-size: 1.15rem; box-shadow: 0 10px 22px rgba(20, 110, 245, .28); position: relative; z-index: 1; } .pa-journey li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 25px; top: 50%; height: 100%; width: 2px; background: #c9dbf7; } .pa-journey li:last-child::before { background: var(--pa-navy); color: var(--pa-cyan); } .pa-journey li:last-child { color: var(--pa-deep); } .pa-journey-wide { grid-template-columns: repeat(6, minmax(0, 1fr)); background: #fff; border-radius: var(--pa-radius); box-shadow: var(--pa-shadow); padding: 30px 34px; } .pa-journey-wide li { flex-direction: column; align-items: flex-start; padding: 0; font-size: 1.02rem; } .pa-journey-wide li:not(:last-child)::after { top: 26px; inset-inline-start: 52px; width: calc(100% - 52px); height: 2px; } @media (max-width: 900px) { .pa-journey-wide { grid-template-columns: 1fr; gap: 6px; } .pa-journey-wide li { flex-direction: row; align-items: center; padding: 10px 0; } .pa-journey-wide li:not(:last-child)::after { inset-inline-start: 25px; top: 50%; width: 2px; height: 100%; } } /* process */ .pa-process { list-style: none; counter-reset: pa; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .pa-process li { counter-increment: pa; position: relative; padding-inline-end: 20px; color: var(--pa-muted); line-height: 1.55; } .pa-process li strong { display: block; margin-block: 18px 6px; font-family: var(--wp--preset--font-family--display); font-size: 1.35rem; color: var(--pa-ink); } .pa-process li::before { content: "0" counter(pa); display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #fff; border: 2px solid var(--pa-blue); font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.4rem; color: var(--pa-ink); position: relative; z-index: 1; } .pa-process li:last-child::before { background: var(--pa-grad); border-color: transparent; color: #fff; } .pa-process li:not(:last-child)::after { content: ""; position: absolute; top: 38px; inset-inline-start: 76px; inset-inline-end: 0; height: 2px; background: linear-gradient(90deg, #146ef5, #18c8d9); } [dir="rtl"] .pa-process li:not(:last-child)::after { background: linear-gradient(270deg, #146ef5, #18c8d9); } @media (max-width: 900px) { .pa-process { grid-template-columns: 1fr; gap: 26px; } .pa-process li { display: grid; grid-template-columns: 76px 1fr; column-gap: 20px; padding: 0; } .pa-process li::before { grid-row: span 2; } .pa-process li strong { margin-block: 8px 2px; } .pa-process li:not(:last-child)::after { top: 76px; bottom: -26px; inset-inline-start: 37px; inset-inline-end: auto; width: 2px; height: auto; } } /* steps (solution pages) */ .pa-steps { list-style: none; counter-reset: pa; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .pa-steps li { counter-increment: pa; background: #fff; border: 1px solid var(--pa-line); border-radius: 20px; padding: 20px 22px; display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 1.08rem; } .pa-steps li::before { content: counter(pa); width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--pa-grad); color: #fff; font-family: var(--wp--preset--font-family--display); } @media (max-width: 900px) { .pa-steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .pa-steps { grid-template-columns: 1fr; } } /* checks */ .pa-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .pa-checks li { display: flex; gap: 12px; align-items: center; font-weight: 600; font-size: 1.06rem; } .pa-checks li::before { content: ""; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--pa-ico-check-url) center / 15px no-repeat, var(--pa-grad); } .pa-dark .pa-checks li { color: #e3ebf6; } /* screenshots */ .pa-shots { position: relative; padding-block-end: 40px; } .pa-shot { margin: 0 !important; } .pa-shot img { border-radius: 18px; border: 6px solid #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); display: block; width: 100%; } .pa-dark .pa-shot img { border-color: rgba(255, 255, 255, .12); } .pa-shots > .pa-shot:first-child { position: relative; z-index: 1; } .pa-shot-float { position: relative; z-index: 3; width: 66%; margin-block-start: -22% !important; margin-inline-start: auto !important; margin-inline-end: -3% !important; } .pa-shot-float img, .pa-dark .pa-shot-float img { border-color: var(--pa-cyan); } .pa-shots .pa-note { margin: 14px 0 0 !important; } .pa-gallery { display: grid; } .pa-gallery > .wp-block-image { margin-block-end: 24px !important; } /* sectors */ .pa-sector { margin: 0; background: #fff; border-radius: 20px; box-shadow: var(--pa-shadow); padding: 22px 26px; font-weight: 700; font-family: var(--wp--preset--font-family--display); font-size: 1.1rem; display: flex; align-items: center; gap: 16px; } .pa-sector::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--pa-grad); flex: none; box-shadow: 0 0 0 6px #e6effe; } .pa-sector:first-child { background: var(--pa-navy); color: #fff; } .pa-sector:first-child::before { box-shadow: 0 0 0 6px rgba(24, 200, 217, .2); } /* letters (about) */ .pa-letter { font-family: var(--wp--preset--font-family--display) !important; font-weight: 700; font-size: 5.5rem; line-height: 1; background: var(--pa-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .pa-grid-5:not(.pa-solutions) .pa-card:last-child { background: linear-gradient(150deg, #146ef5 0%, #0b4fb0 100%); } .pa-grid-5:not(.pa-solutions) .pa-card:last-child .pa-letter { background: none; color: #fff; -webkit-text-fill-color: #fff; } .pa-grid-5:not(.pa-solutions) .pa-card:last-child .pa-card-title, .pa-grid-5:not(.pa-solutions) .pa-card:last-child .pa-card-text { color: #fff; } /* story */ .pa-story-text > * + * { margin-block-start: 1.2rem; } /* programs */ .pa-get { color: var(--pa-ink) !important; } .pa-get strong { color: var(--pa-deep); } /* CTA */ .pa-cta { padding-block: var(--pa-section-y); background: #fff; } .pa-cta-box { background: radial-gradient(circle at 90% 10%, rgba(24, 200, 217, .55), transparent 45%), linear-gradient(130deg, #0b4fb0 0%, #146ef5 60%, #18a9e0 100%); border-radius: 36px; padding: clamp(40px, 6vw, 80px); color: #fff; text-align: center; box-shadow: 0 30px 80px rgba(20, 110, 245, .3); } .pa-cta-box > * { margin-inline: auto; } .pa-cta-box .pa-title { color: #fff; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem); } .pa-cta-box .pa-lead { color: #e3edff; max-width: 680px; margin-block-start: 1rem; } .pa-cta-box .wp-block-buttons { justify-content: center; margin-block-start: 2rem; gap: 12px; } .pa-cta-box .wp-block-button:first-child .wp-block-button__link { background: #fff; color: var(--pa-navy); } .pa-cta-box .wp-block-button:first-child .wp-block-button__link:hover { background: var(--pa-navy); color: #fff; } /* solution pages */ .pa-intro { font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); color: var(--pa-ink); max-width: 980px; line-height: 1.55; font-family: var(--wp--preset--font-family--display); } .pa-solution-hero { padding-block: clamp(70px, 9vw, 120px); } .pa-solutions .pa-card-title a { color: var(--pa-ink); } /* contact */ .pa-contact-info .pa-title-sm, .pa-contact-form .pa-title-sm { margin-block-start: 0; } .pa-info { margin: 0; display: grid; gap: 14px; } .pa-info > div { background: #fff; border-radius: 18px; box-shadow: var(--pa-shadow); padding: 18px 22px; } .pa-info dt { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pa-deep); } .pa-lang-ar .pa-info dt { letter-spacing: 0; font-size: .9rem; } .pa-info dd { margin: 4px 0 0; font-weight: 600; font-size: 1.08rem; } .pa-info a { color: var(--pa-ink); text-decoration: none; } .pa-info.is-compact { gap: 10px; } .pa-info.is-compact > div { background: none; box-shadow: none; padding: 0; } .pa-admin-hint { font-size: .85rem; background: #fff7e0; color: #6b4b00; border-radius: 10px; padding: 10px 14px; } .pa-form { display: grid; gap: 16px; } .pa-form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; color: var(--pa-ink); } .pa-form input, .pa-form select, .pa-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-weight: 400; padding: .85rem 1rem; border: 1.5px solid var(--pa-line); border-radius: 14px; background: #fbfcfe; color: var(--pa-ink); transition: border-color .2s, box-shadow .2s; } .pa-form input:focus, .pa-form select:focus, .pa-form textarea:focus { outline: none; border-color: var(--pa-blue); box-shadow: 0 0 0 4px rgba(20, 110, 245, .14); background: #fff; } .pa-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 620px) { .pa-form-row { grid-template-columns: 1fr; } } .pa-form .pa-btn { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 700; } .pa-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .pa-alert { border-radius: 14px; padding: 14px 18px; font-weight: 600; margin-block-end: 16px; } .pa-alert-ok { background: #e3f8ee; color: #0d6b3f; } .pa-alert-err { background: #fde8ea; color: #9b1c2c; } /* blog */ .pa-posts .wp-block-post-template { list-style: none; padding: 0; margin: 0; } .pa-post-card .wp-block-post-featured-image { margin: -10px -10px 6px !important; border-radius: 16px; overflow: hidden; } .pa-post-card .wp-block-post-date { font-size: .78rem; } .pa-post-card .wp-block-post-excerpt__more-text { display: none; } .pa-pagination { margin-block-start: 40px; justify-content: center; gap: 10px; } .pa-empty { text-align: center; color: var(--pa-muted); font-size: 1.1rem; padding: 40px 0; } .pa-prose { padding-block: clamp(40px, 6vw, 80px); } .pa-prose .wp-block-post-featured-image { margin-block-end: 2rem; border-radius: 20px; overflow: hidden; } /* footer */ .pa-footer { background: var(--pa-navy); color: var(--pa-on-dark); padding: clamp(56px, 7vw, 90px) 0 0; } .pa-footer-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); display: grid; grid-template-columns: 1.4fr 1fr .8fr 1fr; gap: clamp(28px, 4vw, 56px); } .pa-footer .pa-logo-img { height: 56px; } .pa-footer-brand p { margin: 18px 0 0; max-width: 380px; line-height: 1.65; } .pa-footer h2 { font-family: var(--wp--preset--font-family--body); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pa-cyan); margin: 0 0 16px; } .pa-lang-ar .pa-footer h2 { letter-spacing: 0; font-size: 1rem; font-family: var(--wp--preset--font-family--arabic); } .pa-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .pa-footer a { color: #e3ebf6; text-decoration: none; } .pa-footer a:hover { color: var(--pa-cyan); } .pa-footer .pa-info dt { color: #8fa6c4; } .pa-footer .pa-info dd, .pa-footer .pa-info a { color: #e3ebf6; font-size: 1rem; } .pa-socials { display: flex; gap: 10px; margin-block-start: 20px; flex-wrap: wrap; } .pa-social { padding: .45rem .9rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; font-size: .9rem; font-weight: 600; } .pa-footer-bottom { max-width: 1320px; margin: clamp(40px, 5vw, 64px) auto 0; padding: 22px clamp(16px, 4vw, 48px); border-top: 1px solid rgba(255, 255, 255, .12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .9rem; color: #8fa6c4; } .pa-footer-bottom p { margin: 0; } @media (max-width: 1000px) { .pa-footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .pa-footer-inner { grid-template-columns: 1fr; } } /* reveal animation */ @media (prefers-reduced-motion: no-preference) { .pa-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; } .pa-reveal.is-in { opacity: 1; transform: none; } } /* editor: keep sections readable inside the block editor */ .editor-styles-wrapper .pa-reveal { opacity: 1; transform: none; } .editor-styles-wrapper .pa-has-icon::before { display: block; } /* RTL tweaks */ /* ---------- Yardi service catalog ---------- */ html { scroll-behavior: smooth; } .pa-catalog [id], .pa-stage { scroll-margin-top: calc(var(--pa-header-h) + 16px); } .pa-cat-stats > * { margin: 0 !important; } .pa-cat-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-block-start: 8px !important; } .pa-cat-stat { background: #fff; border: 1px solid var(--pa-line); border-radius: 20px; padding: 22px 26px; display: flex; align-items: center; gap: 18px; box-shadow: var(--pa-shadow); } .pa-cat-stat .pa-big-num { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); margin: 0 !important; } .pa-cat-stat .pa-stat-label { margin: 0 !important; font-weight: 700; color: var(--pa-ink); } .pa-stage-nav { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; } .pa-stage-nav a { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--pa-soft); border: 1px solid var(--pa-line); color: var(--pa-ink); font-weight: 700; text-decoration: none; font-size: .95rem; transition: all .2s; } .pa-stage-nav a:hover { background: var(--pa-grad); color: #fff; border-color: transparent; } .pa-stage-head { display: flex; align-items: center; gap: 20px; margin-block-end: 26px; } .pa-stage-num { margin: 0 !important; width: 64px; height: 64px; flex: none; border-radius: 18px; display: grid; place-items: center; background: var(--pa-grad); color: #fff; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.4rem; } .pa-stage-text > * { margin: 0 !important; } .pa-stage-title { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); } .pa-stage-desc { color: var(--pa-muted); margin-block-start: 4px !important; } .pa-svc.wp-block-details { background: #fff; border: 1px solid var(--pa-line); border-radius: 20px; box-shadow: var(--pa-shadow); padding: 0; margin-block-start: 14px !important; overflow: hidden; } .pa-svc > summary { list-style: none; cursor: pointer; padding: 22px 64px 22px 26px; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.15rem; color: var(--pa-ink); position: relative; } [dir="rtl"] .pa-svc > summary { padding: 22px 26px 22px 64px; font-family: inherit; } .pa-svc > summary::-webkit-details-marker { display: none; } .pa-svc > summary strong { display: inline-block; min-width: 2.6ch; margin-inline-end: 10px; background: var(--pa-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .pa-svc > summary::after { content: "+"; position: absolute; inset-inline-end: 22px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--pa-soft); color: var(--pa-blue); font-size: 1.3rem; font-weight: 600; transition: transform .2s; } .pa-svc[open] > summary::after { content: "−"; background: var(--pa-grad); color: #fff; } .pa-svc[open] > summary { border-block-end: 1px solid var(--pa-line); } .pa-svc > :not(summary) { margin-inline: 26px; } .pa-svc > :last-child { margin-block-end: 26px; } .pa-svc-tag { font-weight: 700; color: var(--pa-blue); font-size: 1.1rem; margin-block-start: 22px !important; } .pa-svc-desc { color: var(--pa-muted); } .pa-svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-block-start: 18px !important; } .pa-svc-h { font-size: .8rem !important; letter-spacing: .12em; text-transform: uppercase; color: var(--pa-deep); margin: 0 0 12px !important; } [dir="rtl"] .pa-svc-h { letter-spacing: 0; font-size: .95rem !important; } .pa-svc-list { margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; color: var(--pa-ink); } .pa-svc-list li::marker { color: var(--pa-cyan); } .pa-svc-deliv li { font-size: .98rem; font-weight: 600; } .pa-svc-deliv li::before { width: 22px; height: 22px; background-size: 13px, auto; } .pa-svc-box { background: var(--pa-soft); border-radius: 16px; padding: 18px 22px; margin-block-start: 20px !important; } .pa-svc-practice { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .pa-svc-practice li::before { content: "→ "; color: var(--pa-blue); font-weight: 700; } [dir="rtl"] .pa-svc-practice li::before { content: "← "; } .pa-svc-runs { margin-block-start: 20px !important; } .pa-svc-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .pa-svc-steps li { counter-increment: s; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--pa-line); border-radius: 14px; font-weight: 700; font-size: .95rem; } .pa-svc-steps li::before { content: counter(s); width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--pa-grad); color: #fff; font-size: .85rem; } .pa-prog .pa-prog-tag { margin: 0 0 6px !important; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pa-cyan); } .pa-prog .pa-prog-svcs { margin-block-start: auto !important; padding-block-start: 12px; font-size: .9rem; font-weight: 700; color: var(--pa-blue); } .pa-dark .pa-prog { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); } .pa-dark .pa-prog .pa-card-title { color: #fff; } .pa-dark .pa-prog .pa-prog-svcs { color: var(--pa-cyan); } @media (max-width: 760px) { .pa-cat-stats, .pa-svc-grid { grid-template-columns: 1fr; } .pa-svc-steps { grid-template-columns: 1fr 1fr; } .pa-svc > summary { font-size: 1.02rem; padding-block: 18px; } .pa-svc > :not(summary) { margin-inline: 18px; } } /* ---------- icons (white line icons on brand gradient) ---------- */ :root { --pa-ico-check-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .pa-ico-check { --pa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .pa-ico-lock { --pa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); } .pa-ico-cloud { --pa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z'/%3E%3C/svg%3E"); } .pa-ico-bolt { --pa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E"); } .pa-ico-users { --pa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); } .pa-ico-key { --pa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3Cpath d='m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3'/%3E%3C/svg%3E"); } .pa-ico-chart { --pa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20V10M12 20V4M6 20v-6'/%3E%3C/svg%3E"); } .pa-ico-settings { --pa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E"); } .pa-ico-clock { --pa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); } .pa-ico-bulb { --pa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E"); } .pa-ico-link { --pa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); } .pa-ico-shield { --pa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); } .pa-ico-star { --pa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); } /* ===================================================================== v2 — modern visual layer: aurora backgrounds, dashboard frames, hero collage, marquee, carousel and catalog visualisations ===================================================================== */ :root { --pa-night: #020f24; --pa-glass: rgba(255, 255, 255, .07); --pa-glass-line: rgba(255, 255, 255, .14); --pa-glow: 0 30px 90px rgba(24, 200, 217, .25); } ::selection { background: rgba(24, 200, 217, .3); } body { background: #fff; } /* animated aurora for dark areas */ @keyframes pa-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(4%, -6%, 0) scale(1.12); } 100% { transform: translate3d(0, 0, 0) scale(1); } } @keyframes pa-drift2 { 0% { transform: translate3d(0, 0, 0) scale(1.1); } 50% { transform: translate3d(-6%, 5%, 0) scale(.95); } 100% { transform: translate3d(0, 0, 0) scale(1.1); } } @keyframes pa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes pa-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes pa-marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } } @keyframes pa-shine { from { background-position: 0% 50%; } to { background-position: 200% 50%; } } .pa-dark, .pa-aurora { background: var(--pa-night); position: relative; overflow: hidden; isolation: isolate; } .pa-aurora::before, .pa-aurora::after, .pa-page-hero::before, .pa-page-hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); pointer-events: none; } .pa-aurora::before, .pa-page-hero::before { width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; top: -30%; inset-inline-end: -15%; background: radial-gradient(circle, rgba(20, 110, 245, .55), rgba(20, 110, 245, 0) 65%); animation: pa-drift 18s ease-in-out infinite; } .pa-aurora::after, .pa-page-hero::after { width: 50vw; height: 50vw; max-width: 760px; max-height: 760px; bottom: -35%; inset-inline-start: -15%; background: radial-gradient(circle, rgba(24, 200, 217, .38), rgba(24, 200, 217, 0) 65%); animation: pa-drift2 22s ease-in-out infinite; } .pa-dark > *, .pa-aurora > * { position: relative; z-index: 1; } .pa-skyline { background: linear-gradient(180deg, var(--pa-night) 0%, rgba(2, 15, 36, .92) 55%, rgba(2, 15, 36, .7) 100%), url(assets/images/skyline.jpg) center bottom / cover no-repeat; } /* subtle patterns for light areas */ .pa-soft { background: radial-gradient(rgba(20, 110, 245, .13) 1px, transparent 1.4px) 0 0 / 24px 24px, radial-gradient(ellipse at 100% 0%, #dcebff 0%, rgba(245, 247, 251, 0) 45%), radial-gradient(ellipse at 0% 100%, #d8f6f9 0%, rgba(245, 247, 251, 0) 45%), var(--pa-soft); } .pa-grid-bg { background: linear-gradient(rgba(20, 110, 245, .06) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(20, 110, 245, .06) 1px, transparent 1px) 0 0 / 56px 56px, #fff; } /* headings & eyebrows */ .pa-eyebrow { display: inline-flex; align-items: center; gap: .55rem; } .pa-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pa-grad); box-shadow: 0 0 0 4px rgba(24, 200, 217, .18); } .pa-dark .pa-eyebrow, .pa-aurora .pa-eyebrow { background: rgba(255, 255, 255, .07); border: 1px solid var(--pa-glass-line); color: #8be9f2; } .pa-title strong, .pa-hero-title strong { font-weight: inherit; background: var(--pa-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* buttons */ .wp-block-button:not(.is-style-outline):not(.is-style-light) .wp-block-button__link, .pa-btn:not(.pa-btn-ghost) { background: linear-gradient(120deg, #146ef5, #0b5bc4 50%, #18a9d9) 0 0 / 200% 100%; box-shadow: 0 10px 26px rgba(20, 110, 245, .3); } .wp-block-button:not(.is-style-outline):not(.is-style-light) .wp-block-button__link:hover, .pa-btn:not(.pa-btn-ghost):hover { background-position: 100% 0; box-shadow: 0 16px 36px rgba(24, 200, 217, .35); } /* header */ .pa-header { background: rgba(255, 255, 255, .78); } .pa-header.is-scrolled { box-shadow: 0 10px 40px rgba(2, 15, 36, .08); } /* ---------- home hero ---------- */ .pa-hero { background: var(--pa-night); padding-block: clamp(70px, 9vw, 120px) clamp(80px, 10vw, 130px); } .pa-hero::before { z-index: -3; opacity: .55; background: url(assets/images/skyline.jpg) center 70% / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%); mask-image: linear-gradient(180deg, transparent 0%, #000 55%); } .pa-hero::after, [dir="rtl"] .pa-hero::after { z-index: -2; background: radial-gradient(circle at 78% 18%, rgba(20, 110, 245, .55), transparent 42%), radial-gradient(circle at 12% 85%, rgba(24, 200, 217, .3), transparent 40%), linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(180deg, rgba(2, 15, 36, .55), rgba(2, 15, 36, .92)); } .pa-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 5vw, 72px); position: relative; } .pa-hero-grid::before { content: "&"; position: absolute; z-index: -1; inset-inline-end: -4%; top: 50%; transform: translateY(-55%); font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(20rem, 38vw, 44rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(24, 200, 217, .16); pointer-events: none; } .pa-hero-copy > * { max-width: 640px; } .pa-hero-title { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem); } .pa-hero-visual { position: relative; perspective: 1800px; padding-block: 40px 70px; } .pa-hero-visual > * { margin: 0 !important; } .pa-hv-main img { border-radius: 18px; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 50px 120px rgba(0, 0, 0, .55), var(--pa-glow); transform: rotateY(-16deg) rotateX(7deg) rotateZ(1deg); transform-origin: center; display: block; } [dir="rtl"] .pa-hv-main img { transform: rotateY(16deg) rotateX(7deg) rotateZ(-1deg); } .pa-hv-float { position: absolute !important; width: 62%; inset-inline-start: -8%; bottom: 0; animation: pa-float 7s ease-in-out infinite; } .pa-hv-float img { border-radius: 14px; border: 2px solid rgba(24, 200, 217, .7); box-shadow: 0 30px 70px rgba(0, 0, 0, .55); display: block; } .pa-hv-chip { position: absolute; display: inline-flex; align-items: center; gap: .55rem; padding: .65rem 1.05rem; border-radius: 14px; background: rgba(8, 26, 54, .72); border: 1px solid var(--pa-glass-line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff !important; font-weight: 700; font-size: .95rem; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); animation: pa-float 6s ease-in-out infinite; white-space: nowrap; } .pa-hv-chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pa-grad); box-shadow: 0 0 12px rgba(24, 200, 217, .9); } .pa-hv-chip-1 { top: 0; inset-inline-end: 4%; animation-delay: -2s; } .pa-hv-chip-2 { top: 42%; inset-inline-end: -3%; animation-delay: -4s; } .pa-hv-chip-3 { bottom: 8%; inset-inline-end: 10%; animation-delay: -1s; } @media (max-width: 1020px) { .pa-hero-grid { grid-template-columns: 1fr; } .pa-hero-grid::before { font-size: 70vw; top: 30%; } .pa-hv-main img, [dir="rtl"] .pa-hv-main img { transform: none; } .pa-hv-chip-2 { display: none; } } @media (max-width: 600px) { .pa-hv-chip { font-size: .8rem; padding: .5rem .8rem; } .pa-hv-float { width: 70%; inset-inline-start: -2%; } } /* ---------- marquee ---------- */ .pa-marquee-wrap { background: linear-gradient(90deg, #011e3f, #0b2f63 50%, #011e3f); padding-block: 22px; overflow: hidden; border-block: 1px solid rgba(255, 255, 255, .08); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .pa-marquee { list-style: none; margin: 0 !important; padding: 0; display: flex; width: max-content; animation: pa-marquee 40s linear infinite; } [dir="rtl"] .pa-marquee { animation-name: pa-marquee-rtl; } .pa-marquee-wrap:hover .pa-marquee { animation-play-state: paused; } .pa-marquee li { display: inline-flex; align-items: center; gap: 28px; padding-inline-end: 28px; color: #e3ecf8; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: clamp(1.05rem, .9rem + .6vw, 1.45rem); white-space: nowrap; } .pa-lang-ar .pa-marquee li { font-family: var(--wp--preset--font-family--arabic); } .pa-marquee li::after { content: "✦"; color: var(--pa-cyan); font-size: .8em; } /* ---------- cards ---------- */ .pa-card { overflow: hidden; } .pa-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--pa-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .25s; pointer-events: none; } .pa-card:hover::after { opacity: 1; } .pa-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(20, 110, 245, .14); } .pa-card-accent { background: linear-gradient(140deg, #146ef5, #0b5bc4 45%, #18c8d9) !important; } .pa-card-accent::before { content: "&"; position: absolute; inset-inline-end: -10px; bottom: -60px; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 12rem; color: rgba(255, 255, 255, .1); line-height: 1; pointer-events: none; } .pa-has-icon::before { box-shadow: 0 10px 24px rgba(20, 110, 245, .35); } .pa-dark .pa-card:not(.pa-card-accent), .pa-aurora .pa-card:not(.pa-card-accent) { background: var(--pa-glass); border: 1px solid var(--pa-glass-line); box-shadow: none; backdrop-filter: blur(6px); } .pa-dark .pa-card .pa-card-text, .pa-aurora .pa-card .pa-card-text { color: var(--pa-on-dark); } /* ---------- dashboard frames ---------- */ .pa-frame { position: relative; margin: 0 !important; padding: 30px 10px 10px; border-radius: 18px; background: linear-gradient(180deg, #0f2a52, #0a1f3f); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 70px rgba(2, 15, 36, .35); transition: transform .35s ease, box-shadow .35s ease; } .pa-frame::before { content: ""; position: absolute; top: 11px; inset-inline-start: 14px; width: 44px; height: 9px; background: radial-gradient(circle at 4.5px 4.5px, #ff6b81 4px, transparent 4.5px), radial-gradient(circle at 21.5px 4.5px, #ffb020 4px, transparent 4.5px), radial-gradient(circle at 38.5px 4.5px, #2fd38a 4px, transparent 4.5px); } .pa-frame:hover { transform: translateY(-8px); box-shadow: 0 40px 90px rgba(2, 15, 36, .45), var(--pa-glow); } .pa-frame .pa-frame-img { margin: 0 !important; } .pa-frame .pa-frame-img img { display: block; width: 100%; border-radius: 10px; } .pa-frame-cap { padding: 16px 8px 8px; } .pa-frame-cap > * { margin: 0 !important; } .pa-frame-title { color: #fff !important; font-size: 1.15rem !important; } .pa-frame-text { color: var(--pa-on-dark) !important; font-size: .95rem; margin-block-start: 6px !important; } .pa-frame-xl { max-width: 1180px; margin-inline: auto !important; } .pa-frame-wide { grid-column: 1 / -1; } .pa-frame-tilt { transform: perspective(1600px) rotateY(-10deg) rotateX(4deg); } [dir="rtl"] .pa-frame-tilt { transform: perspective(1600px) rotateY(10deg) rotateX(4deg); } .pa-frame-tilt:hover { transform: perspective(1600px) rotateY(0) rotateX(0) translateY(-6px); } .pa-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pa-frames { gap: clamp(18px, 2.4vw, 30px); } @media (max-width: 760px) { .pa-grid-2 { grid-template-columns: 1fr; } .pa-frame-tilt, [dir="rtl"] .pa-frame-tilt { transform: none; } } /* off-plan section with app visual */ .pa-journey-inline { margin-block: 1.5rem !important; } /* ---------- showcase carousel ---------- */ .pa-showcase .pa-head { display: block; } .pa-carousel { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 4px 34px; margin-inline: -4px; scrollbar-width: none; cursor: grab; } .pa-carousel::-webkit-scrollbar { display: none; } .pa-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; } .pa-carousel > .pa-slide { flex: 0 0 min(720px, 84vw); scroll-snap-align: start; } .pa-carousel img { pointer-events: none; user-select: none; } .pa-carousel-nav { display: flex; gap: 10px; justify-content: flex-end; margin-block-start: -6px; } .pa-carousel-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--pa-glass-line); background: var(--pa-glass); color: #fff; font-size: 1.3rem; cursor: pointer; transition: background .2s; } .pa-carousel-nav button:hover { background: var(--pa-grad); border-color: transparent; } .pa-carousel-progress { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); margin-block-start: 18px; overflow: hidden; } .pa-carousel-progress span { display: block; height: 100%; width: 20%; background: var(--pa-grad); border-radius: 3px; transition: width .2s, margin .2s; } /* ---------- page heroes ---------- */ .pa-page-hero { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 64px 64px, var(--pa-night); padding-block: clamp(80px, 10vw, 140px); } .pa-page-hero > *:not(.pa-solution-hero-visual) { position: relative; z-index: 1; } .pa-page-hero:not(.pa-solution-hero) > .pa-page-hero-inner::after, .wp-block-group.pa-page-hero::marker { content: none; } .pa-page-hero .pa-page-title { letter-spacing: -0.03em; } .pa-page-hero .pa-eyebrow { background: rgba(255, 255, 255, .07); border: 1px solid var(--pa-glass-line); color: #8be9f2; } .pa-solution-hero { min-height: clamp(420px, 44vw, 600px); display: flex; align-items: center; } .pa-solution-hero .pa-page-hero-inner { width: 100%; } .pa-solution-hero .pa-page-hero-inner > * { max-width: 560px; } .pa-solution-hero-visual { position: absolute; z-index: 0; top: 50%; inset-inline-end: -4%; width: 54%; transform: translateY(-50%) perspective(1800px) rotateY(-18deg) rotateX(6deg); } [dir="rtl"] .pa-solution-hero-visual { transform: translateY(-50%) perspective(1800px) rotateY(18deg) rotateX(6deg); } .pa-solution-hero-visual img { display: block; width: 100%; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 50px 120px rgba(0, 0, 0, .6), var(--pa-glow); -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25), #000 35%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25), #000 35%); } [dir="rtl"] .pa-solution-hero-visual img { -webkit-mask-image: linear-gradient(270deg, rgba(0, 0, 0, .25), #000 35%); mask-image: linear-gradient(270deg, rgba(0, 0, 0, .25), #000 35%); } @media (max-width: 900px) { .pa-solution-hero { display: block; padding-block-end: 0; } .pa-solution-hero-visual, [dir="rtl"] .pa-solution-hero-visual { position: relative; top: auto; inset-inline-end: auto; width: 92%; margin: 40px auto -30px; transform: none; } .pa-solution-hero-visual img, [dir="rtl"] .pa-solution-hero-visual img { -webkit-mask-image: none; mask-image: none; } } /* ---------- CTA ---------- */ .pa-cta-box { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(120deg, #0b5bc4, #146ef5 40%, #18c8d9 100%) 0 0 / 200% 100% !important; animation: pa-shine 12s linear infinite alternate; } .pa-cta-box::before { content: "&"; position: absolute; z-index: -1; inset-inline-end: -2%; top: 50%; transform: translateY(-50%); font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(14rem, 26vw, 24rem); line-height: 1; color: rgba(255, 255, 255, .1); } .pa-cta-box::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 40px 40px; -webkit-mask-image: radial-gradient(circle at 20% 50%, #000, transparent 70%); mask-image: radial-gradient(circle at 20% 50%, #000, transparent 70%); } /* ---------- footer ---------- */ .pa-footer { position: relative; background: var(--pa-night) !important; } .pa-footer::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; background: var(--pa-grad); } /* ---------- catalog visualisations ---------- */ .pa-viz { margin-block-start: clamp(36px, 4vw, 56px) !important; } .pa-viz-title { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem) !important; margin: 0 0 18px !important; } .pa-viz-lead { margin: -8px 0 22px !important; } .pa-viz-dark { position: relative; overflow: hidden; isolation: isolate; padding: clamp(24px, 3.4vw, 46px); border-radius: 28px; background: var(--pa-night); color: #fff; } .pa-viz-dark::before { content: ""; position: absolute; z-index: -1; width: 70%; height: 80%; top: -30%; inset-inline-end: -20%; border-radius: 50%; filter: blur(70px); background: radial-gradient(circle, rgba(20, 110, 245, .5), transparent 65%); } .pa-viz-dark .pa-viz-title { color: #fff; } .pa-viz-dark .pa-viz-lead { color: var(--pa-on-dark); } .pa-viz-dark .pa-viz-title:not(:first-child) { margin-block-start: clamp(30px, 3.4vw, 48px) !important; } /* data → decisions flow */ .pa-viz-flow { padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: #fff; border: 1px solid var(--pa-line); box-shadow: var(--pa-shadow); } .pa-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; position: relative; } .pa-flow::before { content: ""; position: absolute; top: 26px; inset-inline: 8%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #18c8d9, #146ef5, #18c8d9) 0 0 / 200% 100%; animation: pa-shine 4s linear infinite; } .pa-flow-step { position: relative; text-align: center; margin: 0 !important; } .pa-flow-step > * { margin: 0 !important; } .pa-flow-n { width: 54px; height: 54px; margin: 0 auto 12px !important; border-radius: 16px; display: grid; place-items: center; background: var(--pa-grad); color: #fff; font-weight: 800; font-family: var(--wp--preset--font-family--display); box-shadow: 0 10px 24px rgba(20, 110, 245, .35); position: relative; } .pa-flow-t { font-size: 1.02rem !important; } .pa-flow-d { font-size: .9rem; color: var(--pa-muted); margin-block-start: 4px !important; } @media (max-width: 860px) { .pa-flow { grid-template-columns: 1fr 1fr; } .pa-flow::before { display: none; } } /* KPI library */ .pa-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .pa-kpi-group { margin: 0 !important; padding: 20px; border-radius: 18px; background: var(--pa-glass); border: 1px solid var(--pa-glass-line); } .pa-kpi-h { color: #8be9f2 !important; font-size: .82rem !important; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px !important; } .pa-lang-ar .pa-kpi-h { letter-spacing: 0; font-size: 1rem !important; } .pa-kpi-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .pa-kpi-list li { padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: #fff; font-weight: 600; font-size: .95rem; } @media (max-width: 900px) { .pa-kpis { grid-template-columns: 1fr 1fr; } } /* maturity staircase */ .pa-maturity { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; } .pa-level { margin: 0 !important; padding: 22px 20px; border-radius: 20px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--pa-glass-line); } .pa-level > * { margin: 0 !important; } .pa-level-1 { min-height: 190px; background: linear-gradient(180deg, rgba(24, 200, 217, .08), rgba(24, 200, 217, .2)); } .pa-level-2 { min-height: 240px; background: linear-gradient(180deg, rgba(24, 200, 217, .14), rgba(24, 200, 217, .32)); } .pa-level-3 { min-height: 290px; background: linear-gradient(180deg, rgba(20, 110, 245, .25), rgba(20, 110, 245, .55)); } .pa-level-4 { min-height: 340px; background: linear-gradient(180deg, #146ef5, #18c8d9); box-shadow: var(--pa-glow); } .pa-level-n { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #8be9f2 !important; } .pa-level-4 .pa-level-n { color: #e8fbff !important; } .pa-level-t { color: #fff !important; font-size: 1.5rem !important; margin-block-start: 4px !important; } .pa-level-q { color: #fff !important; margin-block-start: 8px !important; } .pa-level-d { color: rgba(255, 255, 255, .78) !important; font-size: .92rem; margin-block-start: 4px !important; } @media (max-width: 860px) { .pa-maturity { grid-template-columns: 1fr 1fr; } .pa-level { min-height: 0 !important; } } /* catalog intro tweaks */ .pa-catalog .pa-viz-flow { margin-block-start: 34px !important; } .pa-stage .pa-viz-dark .pa-frame { background: linear-gradient(180deg, #13305c, #0c2346); } /* reveal: a touch more motion */ .pa-reveal { transition-duration: .8s !important; } @media (prefers-reduced-motion: reduce) { .pa-aurora::before, .pa-aurora::after, .pa-page-hero::before, .pa-page-hero::after, .pa-hv-float, .pa-hv-chip, .pa-marquee, .pa-cta-box, .pa-flow::before { animation: none !important; } } .pa-cta-box .wp-block-button:not(.is-style-outline):not(.is-style-light) .wp-block-button__link { background: #fff; color: var(--pa-navy); box-shadow: 0 14px 30px rgba(2, 15, 36, .25); } .pa-cta-box .wp-block-button:not(.is-style-outline):not(.is-style-light) .wp-block-button__link:hover { background: var(--pa-night); color: #fff; } @media (max-width: 600px) { .pa-stat-num { font-size: 2.6rem !important; min-width: 0 !important; } .pa-stat { gap: 14px !important; padding: 18px !important; } } .pa-grid-3 > .pa-prog:last-child:nth-child(3n + 1) { grid-column: 1 / -1; } /* ---------- marquee v2: two rows of glass chips ---------- */ .pa-marquee-wrap { position: relative; background: radial-gradient(ellipse at 50% 0%, rgba(20, 110, 245, .28), transparent 60%), linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 40px 40px, var(--pa-night); padding-block: 26px; display: grid; gap: 14px; -webkit-mask-image: none; mask-image: none; border-block: 1px solid rgba(24, 200, 217, .18); } .pa-marquee-wrap::before, .pa-marquee-wrap::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: clamp(60px, 12vw, 180px); pointer-events: none; } .pa-marquee-wrap::before { left: 0; background: linear-gradient(90deg, var(--pa-night) 15%, rgba(2, 15, 36, 0)); } .pa-marquee-wrap::after { right: 0; background: linear-gradient(270deg, var(--pa-night) 15%, rgba(2, 15, 36, 0)); } .pa-marquee { gap: 0; animation-duration: 55s; } .pa-marquee.pa-marquee-rev { animation-direction: reverse; animation-duration: 65s; } .pa-marquee li { gap: 10px; padding: .7rem 1.35rem; margin: 0 14px 0 0; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); color: #eaf2ff; font-size: clamp(.95rem, .85rem + .35vw, 1.15rem); font-weight: 600; letter-spacing: -.01em; transition: background .25s, border-color .25s, box-shadow .25s, color .25s; } .pa-marquee li::after { content: none; } .pa-marquee li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pa-grad); box-shadow: 0 0 10px rgba(24, 200, 217, .9); flex: none; } .pa-marquee li:hover { background: rgba(24, 200, 217, .12); border-color: rgba(24, 200, 217, .55); box-shadow: 0 0 24px rgba(24, 200, 217, .25); color: #fff; } .pa-marquee-rev li { background: transparent; border-style: dashed; border-color: rgba(255, 255, 255, .14); color: #b9c9e2; } @media (max-width: 600px) { .pa-marquee-wrap { padding-block: 18px; gap: 10px; } .pa-marquee li { padding: .55rem 1rem; } } [dir="rtl"] .pa-marquee li { margin: 0 0 0 14px; } /* ---------- marquee v3: transformation phrases ---------- */ .pa-marquee-wrap { padding-block: 30px; gap: 16px; } .pa-marquee li { padding: .8rem 1.5rem; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(1rem, .9rem + .45vw, 1.3rem); letter-spacing: -.015em; color: #fff; background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } .pa-lang-ar .pa-marquee li { font-family: var(--wp--preset--font-family--arabic); letter-spacing: 0; } .pa-marquee li::before { content: "✦"; width: auto; height: auto; border-radius: 0; background: var(--pa-grad); -webkit-background-clip: text; background-clip: text; color: transparent; box-shadow: none; font-size: .95em; filter: drop-shadow(0 0 6px rgba(24, 200, 217, .7)); } .pa-marquee li:nth-child(3n + 1) { background: linear-gradient(135deg, rgba(20, 110, 245, .55), rgba(24, 200, 217, .35)); border-color: rgba(24, 200, 217, .55); box-shadow: 0 8px 28px rgba(20, 110, 245, .3), inset 0 1px 0 rgba(255, 255, 255, .2); } .pa-marquee li:nth-child(3n + 1)::before { background: none; color: #fff; -webkit-background-clip: border-box; background-clip: border-box; } .pa-marquee-rev li { background: transparent; border: 1px dashed rgba(255, 255, 255, .18); box-shadow: none; } .pa-marquee-rev li:nth-child(3n + 1) { background: transparent; border: 1px solid rgba(24, 200, 217, .5); box-shadow: none; } .pa-marquee-rev li span, .pa-marquee-rev li { color: #d8e6fa; } .pa-marquee-rev li:nth-child(2n) { background: linear-gradient(90deg, #8be9f2, #6fa8ff) text; -webkit-background-clip: text; background-clip: text; color: transparent; } .pa-marquee-rev li:nth-child(2n)::before { -webkit-text-fill-color: initial; } /* ---------- PROP& app tiles ---------- */ .pa-app { --c1: #2f6bff; --c2: #3fc8e4; position: relative; display: inline-block; width: 64px; height: 64px; margin: 0 !important; border-radius: 18px; background: linear-gradient(145deg, var(--c1), var(--c2)); box-shadow: 0 12px 26px -8px var(--c1), inset 0 1px 0 rgba(255,255,255,.35); color: transparent !important; font-size: 0 !important; overflow: hidden; flex: none; } .pa-app::after { content: ''; position: absolute; inset: 22%; background: var(--pa-app-ico) center / contain no-repeat; } .pa-app.pa-app-xl { width: 168px; height: 168px; border-radius: 44px; box-shadow: 0 40px 80px -20px var(--c1), inset 0 2px 0 rgba(255,255,255,.35); } .pa-app-orbit { --c1: #0b2a5b; --c2: #1d6fe8; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.2' transform='rotate%28-30 12 12%29'/%3E%3C/svg%3E"); } .pa-app-intelligence { --c1: #2f6bff; --c2: #3fc8e4; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3Cpath d='M19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9z'/%3E%3C/svg%3E"); } .pa-app-hub { --c1: #4f7fe0; --c2: #8b7cf6; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M5.6 5.6l3.6 3.6M14.8 14.8l3.6 3.6M18.4 5.6l-3.6 3.6M9.2 14.8l-3.6 3.6'/%3E%3C/svg%3E"); } .pa-app-nexus { --c1: #7b6cf0; --c2: #5a7bf2; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2.5'/%3E%3Ccircle cx='5' cy='18' r='2.5'/%3E%3Ccircle cx='19' cy='18' r='2.5'/%3E%3Cpath d='M12 7.5v4M12 11.5l-5.2 4.6M12 11.5l5.2 4.6'/%3E%3C/svg%3E"); } .pa-app-lease { --c1: #2e9ff0; --c2: #4fc6ee; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V4h10v17M14 9h6v12M2 21h20M7 8h4M7 12h4M7 16h4M17 13h1M17 17h1'/%3E%3C/svg%3E"); } .pa-app-living { --c1: #3fbf7f; --c2: #5fd6a0; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v10H3z'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E"); } .pa-app-sell { --c1: #e3565c; --c2: #f08a7a; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12l-8 8-9-9V3h8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); } .pa-app-connect { --c1: #8a5cf0; --c2: #b07cf6; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3Cpath d='M10 6h4M10 10h4M10 14h4M11 18h2'/%3E%3C/svg%3E"); } .pa-app-partner { --c1: #2fb8a6; --c2: #5fd6c4; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11l4-4 4 2 4-2 4 2 4 4'/%3E%3Cpath d='M6 7l-4 4 6 6 2-2M18 7l4 4-6 6-2-2M10 15l2 2 2-2M9 13l2 2M15 13l-2 2'/%3E%3C/svg%3E"); } .pa-app-build { --c1: #f07a3a; --c2: #f5a35b; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V8l8-5M4 8h16v3M17 11v4M15 15h4v6h-4zM2 21h20'/%3E%3C/svg%3E"); } .pa-app-flow { --c1: #e9a817; --c2: #f5cf5b; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.4-.6-.6-2.4z'/%3E%3C/svg%3E"); } .pa-app-procurement { --c1: #e0508f; --c2: #f07ab0; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.7 12.4a1 1 0 0 0 1 .8h9.6a1 1 0 0 0 1-.8L21 7H6'/%3E%3C/svg%3E"); } .pa-app-assets { --c1: #5b6b80; --c2: #8d9bb0; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l9 5v10l-9 5-9-5V7z'/%3E%3Cpath d='M3 7l9 5 9-5M12 12v10'/%3E%3C/svg%3E"); } .pa-app-offplan { --c1: #0fa8bf; --c2: #2f6bff; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='M10.7 12.3L21 2M17 6l3 3M14 9l2 2'/%3E%3C/svg%3E"); } .pa-app-mall { --c1: #146ef5; --c2: #8b7cf6; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.5-5h15L21 9M3 9v11h18V9M3 9h18M9 20v-6h6v6'/%3E%3C/svg%3E"); } .pa-app-default { --c1: #2f6bff; --c2: #3fc8e4; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3Cpath d='M19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9z'/%3E%3C/svg%3E"); } /* ===================================================================== v4 — "One place" redesign: light, simple and product-led ===================================================================== */ :root { --pa-bg: #f6f8fc; --pa-violet: #8b7cf6; --pa-grad-brand: linear-gradient(100deg, #3fc8e4 0%, #4f8bff 55%, #8b7cf6 100%); --pa-card-line: #e6ecf5; --pa-shadow-soft: 0 1px 2px rgba(10, 22, 48, .04), 0 18px 40px -18px rgba(20, 60, 140, .18); --pa-radius: 22px; } body { background: var(--pa-bg); color: var(--pa-ink); } .pa-title strong, .pa-hero-title strong { background: var(--pa-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .pa-title { letter-spacing: -0.03em; } .pa-eyebrow { background: #eaf1ff; color: #2456c8; letter-spacing: .12em; font-size: .78rem; } .pa-center { justify-content: center; text-align: center; } .pa-section .wp-block-buttons.pa-center { margin-block-start: 34px !important; } /* buttons */ .wp-block-button:not(.is-style-outline):not(.is-style-light) .wp-block-button__link, .pa-btn:not(.pa-btn-ghost) { background: linear-gradient(135deg, #2f6bff, #1f8bf0); box-shadow: 0 12px 28px -10px rgba(47, 107, 255, .7); border: 0; } .wp-block-button:not(.is-style-outline):not(.is-style-light) .wp-block-button__link:hover, .pa-btn:not(.pa-btn-ghost):hover { background: linear-gradient(135deg, #2457e0, #1a7ad8); } .wp-block-button.is-style-outline .wp-block-button__link { color: #2456c8; border: 1.5px solid #c9d8f6; background: #fff; } .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #2f6bff; border-color: #2f6bff; color: #fff; } /* header */ .pa-header { background: rgba(255, 255, 255, .82); border-bottom: 1px solid rgba(230, 236, 245, .8); } .pa-menu a { color: #24324d; } .pa-menu a:hover, .pa-menu .current-menu-item > a, .pa-menu .current_page_item > a { background: #eef3ff; color: #2456c8; } /* soft backgrounds */ .pa-soft { background: radial-gradient(ellipse at 8% 0%, #e4edff 0%, rgba(246, 248, 252, 0) 45%), radial-gradient(ellipse at 95% 100%, #efe9ff 0%, rgba(246, 248, 252, 0) 45%), #f3f6fc; } .pa-section:not(.pa-soft):not(.pa-dark):not(.pa-aurora) { background-color: var(--pa-bg); } /* cards */ .pa-card { background: #fff; border: 1px solid var(--pa-card-line); box-shadow: var(--pa-shadow-soft); border-radius: var(--pa-radius); } .pa-card:hover { box-shadow: 0 26px 50px -22px rgba(47, 107, 255, .35); } /* ---------- hero v3 ---------- */ .pa-hero-v3 { background: radial-gradient(ellipse at 75% 30%, rgba(47, 107, 255, .35), transparent 55%), radial-gradient(ellipse at 10% 90%, rgba(63, 200, 228, .18), transparent 45%), linear-gradient(160deg, #071a33 0%, #0a2147 60%, #0b2550 100%); padding-block: clamp(64px, 8vw, 110px) clamp(70px, 9vw, 120px); } .pa-hero-v3::before { background: none; opacity: 1; -webkit-mask-image: none; mask-image: none; inset: auto; width: 1100px; height: 1100px; top: 50%; inset-inline-end: -380px; transform: translateY(-50%); border-radius: 50%; border: 1px solid rgba(120, 170, 255, .14); box-shadow: 0 0 0 140px rgba(255, 255, 255, 0), inset 0 0 0 140px rgba(255, 255, 255, 0); background: radial-gradient(circle, transparent 37%, rgba(120, 170, 255, .1) 37.1%, transparent 37.4%, transparent 55%, rgba(120, 170, 255, .1) 55.1%, transparent 55.4%); } .pa-hero-v3::after, [dir="rtl"] .pa-hero-v3::after { background: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%); } .pa-hero-v3 .pa-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); } .pa-hero-v3 .pa-hero-grid::before { content: none; } .pa-hero-v3 .pa-eyebrow { background: rgba(63, 200, 228, .12); border: 1px solid rgba(63, 200, 228, .3); color: #8be9f2; } .pa-hero-v3 .pa-hero-title { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem); line-height: 1.04; letter-spacing: -0.04em; } .pa-lang-ar .pa-hero-v3 .pa-hero-title { line-height: 1.3; letter-spacing: 0; } .pa-hero-v3 .pa-lead { color: #c7d4ea; font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem); max-width: 600px; } .pa-hero-stats { display: flex; gap: clamp(22px, 4vw, 48px); margin-block-start: 2.4rem !important; padding-block-start: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .12); max-width: 560px; } .pa-hs > * { margin: 0 !important; } .pa-hs-num { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); color: #fff !important; letter-spacing: -0.03em; } .pa-hs-label { color: #9fb2d1 !important; font-size: .95rem; } .pa-hero-visual-v3 { perspective: 2000px; padding-block: 30px 40px; } .pa-hero-visual-v3 > * { margin: 0 !important; } .pa-hv-device { transform: rotateY(-12deg) rotateX(5deg); transform-origin: left center; } [dir="rtl"] .pa-hv-device { transform: rotateY(12deg) rotateX(5deg); transform-origin: right center; } .pa-hv-device .pa-screen-img img { box-shadow: 0 50px 120px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 90px rgba(47, 107, 255, .25); } /* screens */ .pa-screen { margin: 0 !important; } .pa-screen .pa-screen-img { margin: 0 !important; } .pa-screen .pa-screen-img img { display: block; width: 100%; border-radius: 16px; box-shadow: 0 30px 70px -24px rgba(20, 50, 120, .35), 0 0 0 1px rgba(15, 40, 90, .08); } .pa-screens { position: relative; padding-block-end: 70px; } .pa-screens > * { margin: 0 !important; } .pa-screen-float { position: absolute !important; width: 46%; bottom: 0; inset-inline-start: -6%; z-index: 2; animation: pa-float 7s ease-in-out infinite; } .pa-screen-float-wide { width: 58%; } .pa-screen-float .pa-screen-img img { box-shadow: 0 30px 60px -18px rgba(20, 50, 120, .5), 0 0 0 1px rgba(15, 40, 90, .08); } .pa-screen-hero { max-width: 1120px; margin: clamp(30px, 4vw, 54px) auto 0 !important; } .pa-screen-hero .pa-screen-img img { box-shadow: 0 60px 140px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .1), 0 0 120px rgba(47, 107, 255, .25); } .pa-split-wide { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important; gap: clamp(32px, 5vw, 80px) !important; align-items: center; } .pa-split-copy > .pa-head { margin-block-end: 1.4rem; } .pa-split-copy .pa-checks { margin-block: 1.4rem 2rem !important; } @media (max-width: 900px) { .pa-split-wide { grid-template-columns: 1fr !important; } .pa-screen-float { inset-inline-start: auto; inset-inline-end: 0; width: 55%; } } /* why: from → to */ .pa-shift { gap: .5rem !important; padding-block-start: 30px; } .pa-shift > * { margin: 0 !important; } .pa-from { font-size: .92rem; color: #8a97ad; text-decoration: line-through; text-decoration-color: rgba(227, 86, 92, .6); } .pa-to { font-size: 1.28rem !important; position: relative; padding-inline-start: 0; } .pa-to::before { content: "→ "; color: #2f6bff; } [dir="rtl"] .pa-to::before { content: "← "; } .pa-shift::before { content: ""; position: absolute; top: 0; inset-inline: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--pa-grad-brand); } /* IQ spotlight */ .pa-iq { text-align: center; } .pa-iq-head { display: flex; flex-direction: column; align-items: center; } .pa-iq-head .pa-head { margin-inline: auto; text-align: center; margin-block-end: 0; } .pa-iq-head .pa-head > * { margin-inline: auto; } .pa-iq-head .pa-title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); } .pa-iq-points { margin-block-start: clamp(30px, 4vw, 50px) !important; text-align: start; } .pa-iq-point { margin: 0 !important; padding: 22px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); } .pa-iq-point > * { margin: 0 !important; } .pa-iq-point .pa-card-text { color: #b9c8e0 !important; margin-block-start: 6px !important; } .pa-iq .pa-note { margin-block-start: 14px !important; } /* status pills */ .pa-live, .pa-soon { display: inline-flex; align-items: center; gap: 6px; margin: 0 !important; padding: 4px 11px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .pa-lang-ar .pa-live, .pa-lang-ar .pa-soon { letter-spacing: 0; font-size: .82rem; } .pa-live { background: #e3f6ec; color: #17834f; } .pa-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22b46b; box-shadow: 0 0 0 3px rgba(34, 180, 107, .2); } .pa-soon { background: #eef1f6; color: #5b6b80; } .pa-dark .pa-live { background: rgba(34, 180, 107, .16); color: #6fe3a5; } .pa-iq-head > .pa-live { margin-block-end: 14px !important; } /* app suite grid */ .pa-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; } .pa-app-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 30px 16px 22px; border-radius: 22px; background: #fff; border: 1px solid var(--pa-card-line); box-shadow: var(--pa-shadow-soft); text-decoration: none; color: var(--pa-ink); transition: transform .25s, box-shadow .25s; } .pa-app-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -24px rgba(47, 107, 255, .4); } .pa-app-card .pa-app { margin-block-end: 8px !important; transition: transform .3s; } .pa-app-card:hover .pa-app { transform: scale(1.06) rotate(-3deg); } .pa-app-card .pa-live, .pa-app-card .pa-soon { position: absolute; top: 12px; inset-inline-end: 12px; font-size: .64rem; padding: 3px 8px; } .pa-app-card strong { font-family: var(--wp--preset--font-family--display); font-size: 1rem; letter-spacing: -.01em; } .pa-app-sub { font-size: .85rem; color: var(--pa-muted); line-height: 1.4; } .pa-apps-sub { margin-block: clamp(40px, 5vw, 64px) 6px !important; font-size: 1.5rem; } .pa-apps-lead { margin-block: 0 22px !important; font-size: 1rem !important; } .pa-apps-industry { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } /* proof */ .pa-proofs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-radius: 26px; background: #fff; border: 1px solid var(--pa-card-line); box-shadow: var(--pa-shadow-soft); overflow: hidden; } .pa-proof { margin: 0 !important; padding: 30px 26px; border-inline-end: 1px solid var(--pa-card-line); } .pa-proof:last-child { border-inline-end: 0; } .pa-proof > * { margin: 0 !important; } .pa-proof-num { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3.2rem); letter-spacing: -0.04em; background: var(--pa-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; } .pa-proof-label { color: var(--pa-muted); font-weight: 600; margin-block-start: 4px !important; } @media (max-width: 820px) { .pa-proofs { grid-template-columns: 1fr 1fr; } .pa-proof:nth-child(2) { border-inline-end: 0; } .pa-proof:nth-child(-n+2) { border-bottom: 1px solid var(--pa-card-line); } } /* product pages */ .pa-product-hero { min-height: clamp(440px, 46vw, 620px); display: flex; align-items: center; } .pa-product-hero .pa-page-hero-inner { width: 100%; } .pa-product-hero .pa-page-hero-inner > * { max-width: 560px; } .pa-product-id { display: flex; align-items: center; gap: 14px; margin-block-end: 22px !important; } .pa-product-id .pa-live { background: rgba(34, 180, 107, .16); color: #6fe3a5; } .pa-product-id .pa-soon { background: rgba(255, 255, 255, .1); color: #c7d4ea; } .pa-product-orbit { position: absolute; z-index: 0; top: 50%; inset-inline-end: 8%; width: 420px; height: 420px; transform: translateY(-50%); display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, transparent 46%, rgba(120, 170, 255, .14) 46.3%, transparent 46.8%), radial-gradient(circle, transparent 66%, rgba(120, 170, 255, .1) 66.3%, transparent 66.8%); } .pa-product-orbit .pa-app { animation: pa-float 7s ease-in-out infinite; } @media (max-width: 900px) { .pa-product-hero { display: block; } .pa-product-orbit { position: relative; top: auto; inset-inline-end: auto; transform: none; margin: 30px auto 0; width: 300px; height: 300px; } } .pa-app-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 380px; border-radius: 30px; background: radial-gradient(circle at 50% 45%, #e8efff, #f6f8fc 70%); border: 1px solid var(--pa-card-line); } .pa-app-stage > * { margin: 0 !important; } .pa-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-block-start: 30px !important; } .pa-feature { margin: 0 !important; padding: 20px 22px 20px 58px; border-radius: 18px; background: #fff; border: 1px solid var(--pa-card-line); box-shadow: var(--pa-shadow-soft); position: relative; } [dir="rtl"] .pa-feature { padding: 20px 58px 20px 22px; } .pa-feature::before { content: ""; position: absolute; top: 20px; inset-inline-start: 20px; width: 26px; height: 26px; border-radius: 50%; background: var(--pa-ico-check-url) center / 15px no-repeat, linear-gradient(135deg, #2f6bff, #3fc8e4); } .pa-feature-text { margin: 0 !important; font-weight: 500; line-height: 1.5; } @media (max-width: 1000px) { .pa-features { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .pa-features { grid-template-columns: 1fr; } } .pa-result-band { text-align: center; } .pa-result-band > * { margin-inline: auto !important; } .pa-result { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: #fff !important; max-width: 900px; margin-block: 18px 30px !important; } .pa-lang-ar .pa-result { font-family: var(--wp--preset--font-family--arabic); line-height: 1.5; } .pa-works-title { color: #9fb2d1 !important; font-size: .9rem !important; text-transform: uppercase; letter-spacing: .12em; } .pa-works { list-style: none; padding: 0; margin: 12px 0 0 !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .pa-works a { display: inline-block; padding: 9px 18px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); color: #fff; text-decoration: none; font-weight: 600; } .pa-works a:hover { background: #fff; color: var(--pa-navy); } .pa-footer-all { color: #8be9f2 !important; font-weight: 700; } .pa-footer-inner { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)) !important; } @media (max-width: 1000px) { .pa-footer-inner { grid-template-columns: 1fr 1fr !important; } } .pa-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1100px) { .pa-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 620px) { .pa-footer-inner { grid-template-columns: 1fr !important; } } .pa-page-hero > .pa-product-orbit { position: absolute; z-index: 0; } @media (max-width: 900px) { .pa-page-hero > .pa-product-orbit { position: relative; } } @media (max-width: 1020px) { .pa-hero-v3 .pa-hero-grid { grid-template-columns: 1fr; } .pa-hv-device, [dir="rtl"] .pa-hv-device { transform: none; } .pa-hero-visual-v3 { padding-block: 10px 30px; } } @media (max-width: 600px) { .pa-hero-stats { gap: 22px; } .pa-hs-label { font-size: .82rem; } .pa-hero-v3 .wp-block-buttons > * { width: 100%; } .pa-hero-v3 .wp-block-button__link { width: 100%; justify-content: center; } } /* marketing illustrations (transparent PNG/WebP, already styled) */ .pa-art .pa-screen-img img, .pa-screen-hero.pa-art .pa-screen-img img, .pa-hv-device.pa-art .pa-screen-img img { box-shadow: none !important; border-radius: 0 !important; } .pa-hv-device.pa-art, [dir="rtl"] .pa-hv-device.pa-art { transform: none; animation: pa-float 9s ease-in-out infinite; } .pa-screen-hero.pa-art { max-width: 1000px; filter: drop-shadow(0 40px 80px rgba(0, 0, 0, .35)); } .pa-art-visual, [dir="rtl"] .pa-art-visual { transform: translateY(-50%) !important; width: 52%; inset-inline-end: 0; } .pa-art-visual img, [dir="rtl"] .pa-art-visual img { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; -webkit-mask-image: none !important; mask-image: none !important; animation: pa-float 9s ease-in-out infinite; } @media (max-width: 900px) { .pa-art-visual, [dir="rtl"] .pa-art-visual { transform: none !important; width: 100%; } } .pa-app-card.is-static { cursor: default; padding-block: 30px 24px; } .pa-app-card.is-static:hover { transform: none; box-shadow: var(--pa-shadow-soft); } .pa-app-card.is-static:hover .pa-app { transform: none; } .pa-works span { display: inline-block; padding: 9px 18px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px dashed rgba(255, 255, 255, .2); color: #c7d4ea; font-weight: 600; } /* About page */ .pa-mvs { margin-block-start: clamp(36px, 5vw, 64px) !important; } .pa-mv { margin: 0 !important; padding: clamp(26px, 3vw, 40px); border-radius: 26px; color: #fff; position: relative; overflow: hidden; } .pa-mv > * { margin: 0 !important; position: relative; } .pa-mv-1 { background: linear-gradient(140deg, #0b2550, #071a33); } .pa-mv-2 { background: linear-gradient(140deg, #2f6bff, #1f8bf0 55%, #3fc8e4); } .pa-mv::after { content: "&"; position: absolute; inset-inline-end: 18px; bottom: -40px; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 11rem; line-height: 1; color: rgba(255, 255, 255, .08); } .pa-mv .pa-eyebrow { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .2); } .pa-mv .pa-eyebrow::before { background: #fff; box-shadow: none; } .pa-mv-text { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; margin-block-start: 16px !important; color: #fff !important; } .pa-lang-ar .pa-mv-text { font-family: var(--wp--preset--font-family--arabic); line-height: 1.7; } .pa-do { gap: 14px !important; padding: clamp(28px, 3vw, 40px) !important; } .pa-do .wp-block-buttons { margin-block-start: auto !important; padding-block-start: 10px; } .pa-story-text .pa-lead + .pa-lead { margin-block-start: 1.1rem !important; } .pa-page-hero-inner { box-sizing: border-box; } @media (max-width: 900px) { .pa-solution-hero, .pa-product-hero { display: flex !important; flex-direction: column; align-items: stretch; } .pa-solution-hero > .pa-page-hero-inner, .pa-product-hero > .pa-page-hero-inner { order: 1; } .pa-solution-hero > .pa-solution-hero-visual, .pa-product-hero > .pa-product-orbit { order: 2; } .pa-solution-hero .pa-page-hero-inner > *, .pa-product-hero .pa-page-hero-inner > * { max-width: 100%; } } @media (max-width: 900px) { .pa-product-hero > .pa-solution-hero-visual { order: 2; margin-block-start: 20px; } } /* Highlighted: Yardi reporting enhancement */ .pa-reporting { background: radial-gradient(ellipse at 85% 10%, rgba(63, 200, 228, .35), transparent 50%), radial-gradient(ellipse at 0% 100%, rgba(139, 124, 246, .35), transparent 50%), linear-gradient(150deg, #0b2550, #071a33 60%, #0b1f45); color: #fff; overflow: hidden; } .pa-reporting .pa-title, .pa-reporting .pa-card-title { color: #fff; } .pa-reporting .pa-lead, .pa-reporting .pa-card-text { color: #c7d4ea; } .pa-reporting .pa-eyebrow { background: rgba(63, 200, 228, .14); border: 1px solid rgba(63, 200, 228, .35); color: #8be9f2; } .pa-rep-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(30px, 4vw, 64px); align-items: center; } .pa-rep-grid > * { margin: 0 !important; } .pa-rep-points { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-block: 8px 28px !important; } .pa-rep-point { margin: 0 !important; padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); } .pa-rep-point > * { margin: 0 !important; } .pa-rep-point .pa-card-title { font-size: 1.05rem !important; margin-block: 4px !important; } .pa-rep-point .pa-card-text { font-size: .93rem; } .pa-rep-n { font-family: var(--wp--preset--font-family--display); font-weight: 800; background: var(--pa-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent !important; } .pa-rep-frame { transform: perspective(1600px) rotateY(-8deg) rotateX(3deg); box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .7), 0 0 90px rgba(63, 200, 228, .2) !important; } [dir="rtl"] .pa-rep-frame { transform: perspective(1600px) rotateY(8deg) rotateX(3deg); } .pa-rep-frame:hover { transform: none; } @media (max-width: 960px) { .pa-rep-grid { grid-template-columns: 1fr; } .pa-rep-frame, [dir="rtl"] .pa-rep-frame { transform: none; } } @media (max-width: 560px) { .pa-rep-points { grid-template-columns: 1fr; } } /* ===== v5: one look across the site (Yardi-style heroes, highlights) ===== */ .pa-page-title strong { font-weight: inherit; background: linear-gradient(100deg, #3fc8e4, #4f8bff 55%, #8b7cf6); -webkit-background-clip: text; background-clip: text; color: transparent; } .pa-page-hero { background: radial-gradient(ellipse at 85% 10%, rgba(63, 200, 228, .22), transparent 50%), radial-gradient(ellipse at 0% 100%, rgba(139, 124, 246, .22), transparent 50%), linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 64px 64px, var(--pa-night); } figure.pa-solution-hero-visual { margin: 0 !important; } .pa-hero-art .pa-page-hero-inner > * { max-width: 540px; } .pa-hero-art .pa-page-hero-inner > .pa-page-title { font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.04; } .pa-hero-art .pa-solution-hero-visual { filter: drop-shadow(0 40px 80px rgba(0, 0, 0, .35)); } .pa-hero-art .wp-block-buttons, .pa-page-hero .pa-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 28px !important; } .pa-page-hero .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); } .pa-page-hero .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--pa-navy); } @media (max-width: 900px) { .pa-hero-art .pa-page-hero-inner > * { max-width: 100%; } .pa-hero-art .pa-solution-hero-visual { margin-block: 30px -10px !important; } } /* Related solutions */ .pa-related-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-block-end: 28px; } .pa-related-head .pa-title { margin: 0; } .pa-link-arrow { font-weight: 700; color: var(--pa-blue, #2f6bff); text-decoration: none; } .pa-link-arrow:hover { text-decoration: underline; } .pa-related-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s; } .pa-related-card:hover { transform: translateY(-4px); } .pa-related-card .pa-app { width: 56px; height: 56px; border-radius: 16px; } .pa-related-card .pa-card-title { font-size: 1.15rem; margin-block-start: 6px; } .pa-related-card .pa-more { margin-block-start: auto; font-weight: 700; color: var(--pa-blue, #2f6bff); } /* Highlighted dark band (same as the Yardi reporting section) for key sections across pages */ .pa-highlight { background: radial-gradient(ellipse at 85% 10%, rgba(63, 200, 228, .3), transparent 50%), radial-gradient(ellipse at 0% 100%, rgba(139, 124, 246, .3), transparent 50%), linear-gradient(150deg, #0b2550, #071a33 60%, #0b1f45) !important; color: #fff; } .pa-highlight .pa-title, .pa-highlight h2, .pa-highlight h3, .pa-highlight .pa-card-title { color: #fff; } .pa-highlight .pa-lead, .pa-highlight .pa-card-text, .pa-highlight p { color: #c7d4ea; } .pa-highlight .pa-card { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); box-shadow: none; } /* Insight cards */ .pa-post-card { overflow: hidden; padding: 0 !important; display: flex; flex-direction: column; } .pa-post-card > *:not(.wp-block-post-featured-image) { padding-inline: 24px; } .pa-post-card > .wp-block-post-excerpt { padding-block-end: 24px; } .pa-post-card .wp-block-post-featured-image { margin: 0 0 6px; } .pa-post-card .wp-block-post-featured-image img { transition: transform .5s; } .pa-post-card:hover .wp-block-post-featured-image img { transform: scale(1.04); } .pa-hero-art { min-height: clamp(460px, 42vw, 620px); } .pa-hero-art .pa-page-hero-inner > * { max-width: 500px; } .pa-hero-art .pa-solution-hero-visual, [dir="rtl"] .pa-hero-art .pa-solution-hero-visual { width: 47%; inset-inline-end: 1.5%; } @media (max-width: 900px) { .pa-hero-art .pa-solution-hero-visual, [dir="rtl"] .pa-hero-art .pa-solution-hero-visual { width: 100%; inset-inline-end: auto; } } /* Insight article */ .single-post .pa-page-hero { padding-block-end: clamp(110px, 12vw, 170px); } .single-post .pa-page-hero .pa-page-title { max-width: 860px; font-size: clamp(2.2rem, 4.4vw, 3.6rem); } .single-post .pa-page-hero .wp-block-post-excerpt__more-text { display: none; } .pa-prose { position: relative; z-index: 2; padding-block-end: clamp(50px, 6vw, 90px); } .pa-prose > .wp-block-post-featured-image { margin-block-start: clamp(-130px, -9vw, -80px) !important; } .pa-prose > .wp-block-post-featured-image img { border-radius: 22px; box-shadow: 0 40px 90px -30px rgba(10, 30, 70, .45); } .pa-prose .wp-block-post-content { font-size: 1.1rem; line-height: 1.8; } .pa-prose .wp-block-post-content h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-block: 2.2rem .6rem; } .pa-prose .wp-block-post-content ul { padding-inline-start: 1.2rem; } .pa-prose .wp-block-post-content li { margin-block: .4rem; } /* ===== Home v4: icon tiles, two doors, outcomes, three steps ===== */ .pa-ic-wallet { --c1: #2f6bff; --c2: #3fc8e4; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M16 14.5h2'/%3E%3Cpath d='M6 6l9-3 2 3'/%3E%3C/svg%3E"); } .pa-ic-chart { --c1: #8b5cf6; --c2: #4f8bff; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V11'/%3E%3Cpath d='M10 20V5'/%3E%3Cpath d='M16 20v-7'/%3E%3Cpath d='M21 20H3'/%3E%3C/svg%3E"); } .pa-ic-data { --c1: #1fa5c4; --c2: #5fd6e8; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5.5' rx='7.5' ry='2.8'/%3E%3Cpath d='M4.5 5.5v13c0 1.6 3.4 2.8 7.5 2.8s7.5-1.2 7.5-2.8v-13'/%3E%3Cpath d='M4.5 12c0 1.6 3.4 2.8 7.5 2.8s7.5-1.2 7.5-2.8'/%3E%3C/svg%3E"); } .pa-ic-key { --c1: #0b2a5b; --c2: #1d6fe8; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4'/%3E%3Cpath d='M10.5 12.5L20 3'/%3E%3Cpath d='M16.5 6.5l3 3'/%3E%3Cpath d='M14 9l2 2'/%3E%3C/svg%3E"); } .pa-ic-layers { --c1: #2f6bff; --c2: #8b7cf6; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 4.5-9 4.5-9-4.5z'/%3E%3Cpath d='M3 12l9 4.5 9-4.5'/%3E%3Cpath d='M3 16.5l9 4.5 9-4.5'/%3E%3C/svg%3E"); } .pa-ic-building { --c1: #f07a3a; --c2: #f5a35b; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M10 21v-4h4v4'/%3E%3Cpath d='M9 7h.01M12 7h.01M15 7h.01M9 10.5h.01M12 10.5h.01M15 10.5h.01M9 14h.01M12 14h.01M15 14h.01'/%3E%3C/svg%3E"); } .pa-ic-shield { --c1: #e3565c; --c2: #f08a7a; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7.5-3.6 7.5-9.5V5.5L12 2.8 4.5 5.5V12c0 5.9 7.5 9.5 7.5 9.5z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); } .pa-ic-cloud { --c1: #22b46b; --c2: #5fd6a0; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H8a6 6 0 1 1 5.6-8.2h1.4a4.1 4.1 0 1 1 2.5 8.2z'/%3E%3C/svg%3E"); } .pa-ic-message { --c1: #2f6bff; --c2: #3fc8e4; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 15a2 2 0 0 1-2 2H8l-4 4V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 9h8M8 12.5h5'/%3E%3C/svg%3E"); } .pa-ic-clip { --c1: #8b5cf6; --c2: #b07cf6; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2.5' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4.5h2a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M9 14l2 2 4-4'/%3E%3C/svg%3E"); } .pa-ic-rocket { --c1: #22b46b; --c2: #3fc8e4; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 15c-1.5 1.2-2 5-2 5s3.8-.5 5-2c.7-.8.6-2-.2-2.8A2 2 0 0 0 5 15z'/%3E%3Cpath d='M12 15l-3-3c1.8-4.6 5.4-8.4 12-9-.6 6.6-4.4 10.2-9 12z'/%3E%3Cpath d='M9 12H5l2.5-3.5H11M12 15v4l3.5-2.5V13'/%3E%3C/svg%3E"); } .pa-ic-link { --c1: #2f6bff; --c2: #3fc8e4; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E"); } .pa-ic-zap { --c1: #f0b429; --c2: #f07a3a; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h8l-1 8 9-12h-8z'/%3E%3C/svg%3E"); } .pa-ic-bell { --c1: #e3565c; --c2: #f08a7a; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 6.5 2.5 8 2.5 8h-17S6 15.5 6 9'/%3E%3Cpath d='M10.2 20.5a2 2 0 0 0 3.6 0'/%3E%3C/svg%3E"); } .pa-ic-flow { --c1: #8b5cf6; --c2: #4f8bff; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='2'/%3E%3Cpath d='M6.5 10v4a2.5 2.5 0 0 0 2.5 2.5h5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='2'/%3E%3C/svg%3E"); } .pa-ic { width: 52px; height: 52px; border-radius: 15px; } .pa-head-center { text-align: center; margin-inline: auto; max-width: 760px; } .pa-head-center .pa-eyebrow { margin-inline: auto; } .pa-head-center .pa-lead { margin-inline: auto; } /* Why — from / to with icons */ .pa-why2 { display: flex; flex-direction: column; gap: 10px; transition: transform .25s, box-shadow .25s; } .pa-why2:hover { transform: translateY(-4px); } .pa-why2 > * { margin: 0 !important; } .pa-why2 .pa-from { font-size: .82rem; color: #8a97ad; text-decoration: line-through; text-decoration-color: rgba(227, 86, 92, .6); margin-block-start: 8px !important; } .pa-why2 .pa-to { font-size: 1.15rem; } /* Two doors */ .pa-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-block-start: 40px !important; } .pa-door { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(28px, 3.4vw, 44px); border-radius: 28px; overflow: hidden; margin: 0 !important; } .pa-door > * { margin: 0 !important; position: relative; z-index: 1; } .pa-door-sol { background: radial-gradient(ellipse at 90% 0%, rgba(63, 200, 228, .35), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(139, 124, 246, .35), transparent 55%), linear-gradient(150deg, #0b2550, #071a33 70%); color: #fff; box-shadow: 0 40px 90px -40px rgba(11, 37, 80, .8); } .pa-door-svc { background: #fff; border: 1px solid #e6ecf5; box-shadow: 0 30px 70px -40px rgba(20, 60, 140, .45); } .pa-door-svc::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, #3fc8e4, #4f8bff, #8b7cf6); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .pa-door-icons { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 12px !important; } .pa-door-icons .pa-app { width: 50px; height: 50px; border-radius: 14px; } .pa-door-icons .pa-app:nth-child(odd) { transform: translateY(-4px); } .pa-door-title { font-size: clamp(1.8rem, 3vw, 2.4rem) !important; letter-spacing: -.02em; } .pa-door-sol .pa-door-title, .pa-door-sol .pa-door-text { color: #fff; } .pa-door-sol .pa-door-text { color: #c7d4ea; } .pa-door-sol .pa-eyebrow { background: rgba(63, 200, 228, .14); border: 1px solid rgba(63, 200, 228, .35); color: #8be9f2; } .pa-door-text { font-size: 1.05rem; line-height: 1.6; max-width: 460px; } .pa-door-links { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; margin-block: 6px 14px !important; } .pa-door-links li { margin: 0; } .pa-door-links a { display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: .9rem; font-weight: 600; text-decoration: none; background: #f1f5fd; color: #0c1a2c; border: 1px solid #e3e9f4; transition: all .2s; } .pa-door-links a:hover { background: #2f6bff; color: #fff; border-color: #2f6bff; } .pa-door-sol .pa-door-links a { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .16); } .pa-door-sol .pa-door-links a:hover { background: #fff; color: #0b2550; } .pa-door .wp-block-buttons { margin-block-start: auto !important; } /* Outcomes: whole card is the link */ .pa-out { position: relative; display: flex; flex-direction: column; gap: 10px; transition: transform .25s, box-shadow .25s, border-color .25s; } .pa-out > * { margin: 0 !important; } .pa-out .pa-card-title { margin-block-start: 8px !important; font-size: 1.15rem; } .pa-out .pa-card-title a { color: inherit; text-decoration: none; } .pa-out .pa-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .pa-out:hover { transform: translateY(-5px); border-color: #b9cdf7; box-shadow: 0 30px 60px -30px rgba(47, 107, 255, .45); } .pa-out-tag { margin-block-start: auto !important; padding-block-start: 10px; font-size: .85rem; font-weight: 700; color: #2f6bff; } /* Three steps (dark highlight band) */ .pa-steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-block-start: 40px !important; counter-reset: s; position: relative; } .pa-step3 { position: relative; padding: 28px; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); margin: 0 !important; display: flex; flex-direction: column; gap: 8px; } .pa-step3 > * { margin: 0 !important; } .pa-step3 .pa-rep-n { position: absolute; top: 22px; inset-inline-end: 24px; font-size: 2.2rem; opacity: .9; } .pa-step3 .pa-card-title { margin-block-start: 10px !important; font-size: 1.2rem; } .pa-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-block-start: 32px !important; } .pa-badge { margin: 0 !important; padding: 8px 16px; border-radius: 999px; font-size: .9rem; font-weight: 600; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #dbe6f7 !important; } .pa-badge::before { content: "✓"; color: #5fd6a0; margin-inline-end: 8px; font-weight: 800; } .pa-center-btns { justify-content: center; margin-block-start: 28px !important; } .pa-highlight .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .06); } .pa-highlight .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #fff; color: #0b2550; } .pa-related-head .pa-head { margin: 0 !important; } .pa-related-head .pa-link-arrow a { color: inherit; text-decoration: none; } @media (max-width: 900px) { .pa-doors, .pa-steps3 { grid-template-columns: 1fr; } } .pa-door .pa-eyebrow, .pa-highlight .pa-eyebrow { width: fit-content; } .pa-highlight .pa-eyebrow { background: rgba(63, 200, 228, .14) !important; border: 1px solid rgba(63, 200, 228, .35); color: #8be9f2 !important; } .pa-post-card .pa-eyebrow { width: fit-content; margin-inline: 24px !important; padding-inline: 12px; } /* ===== Home v5: universe hero, trust strip, ERP row ===== */ .pa-ic-grid { --c1: #2f6bff; --c2: #3fc8e4; --pa-app-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.5'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.5'/%3E%3C/svg%3E"); } .pa-door-sub { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5b6b80; margin-block-start: 4px !important; } .pa-door-erp { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; margin-block: 0 14px !important; } .pa-door-erp li { margin: 0; padding: 6px 13px; border-radius: 10px; font-size: .88rem; font-weight: 700; color: #2456c8; background: linear-gradient(135deg, rgba(63, 200, 228, .12), rgba(139, 124, 246, .12)); border: 1px solid rgba(79, 139, 255, .25); } /* Universe (v2) */ .pa-hero-visual-v3:has(.pa-uni) { perspective: none; padding-block: 0; display: flex; justify-content: center; } .pa-uni { --S: 560px; --r1: 142px; --r2: 236px; --t1: 58px; --t2: 44px; --core: 120px; --d1: 40s; --d2: 70s; position: relative; width: var(--S); height: var(--S); max-width: 100%; margin-inline: auto; flex: none; } .pa-uni > * { position: absolute; } .pa-uni-plate { inset: 4%; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(47, 107, 255, .22), rgba(11, 37, 80, .35) 55%, rgba(7, 26, 51, 0) 72%); } .pa-uni-glow { inset: 26%; border-radius: 50%; background: radial-gradient(circle, rgba(63, 200, 228, .55), rgba(79, 139, 255, .2) 45%, transparent 70%); filter: blur(28px); animation: pa-uni-breathe 6s ease-in-out infinite; } .pa-uni-track { left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(127, 216, 232, .2); } .pa-uni-t1 { width: calc(var(--r1) * 2); height: calc(var(--r1) * 2); border-color: rgba(127, 216, 232, .32); background: radial-gradient(circle, rgba(63, 200, 228, .06), transparent 70%); } .pa-uni-t2 { width: calc(var(--r2) * 2); height: calc(var(--r2) * 2); border-style: dashed; border-color: rgba(127, 216, 232, .22); } .pa-uni-t3 { width: 96%; height: 96%; border-color: rgba(139, 124, 246, .14); } .pa-uni-comet { left: 50%; top: 50%; width: calc(var(--r1) * 2 + 2px); height: calc(var(--r1) * 2 + 2px); margin: calc(var(--r1) * -1 - 1px) 0 0 calc(var(--r1) * -1 - 1px); border-radius: 50%; border: 2px solid transparent; border-top-color: #7fd8e8; border-right-color: rgba(127, 216, 232, .35); filter: drop-shadow(0 0 6px rgba(63, 200, 228, .9)); animation: pa-uni-spin 6s linear infinite; } .pa-uni-spoke { left: 50%; top: 50%; width: calc(var(--r2) + 30px); height: 1px; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(127, 216, 232, .4), rgba(127, 216, 232, 0)); } .pa-uni-spoke i { position: absolute; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: #a8f0f7; box-shadow: 0 0 10px 3px rgba(63, 200, 228, .8); animation: pa-uni-pulse 3.6s linear infinite; } .pa-uni-s1 { transform: rotate(-60deg); } .pa-uni-s2 { transform: rotate(0deg); } .pa-uni-s3 { transform: rotate(60deg); } .pa-uni-s4 { transform: rotate(120deg); } .pa-uni-s5 { transform: rotate(180deg); } .pa-uni-s6 { transform: rotate(240deg); } .pa-uni-s2 i { animation-delay: -.6s; } .pa-uni-s3 i { animation-delay: -1.2s; } .pa-uni-s4 i { animation-delay: -1.8s; } .pa-uni-s5 i { animation-delay: -2.4s; } .pa-uni-s6 i { animation-delay: -3s; } .pa-uni-ring { inset: 0; } .pa-uni-r1 { --r: var(--r1); --d: var(--d1); animation: pa-uni-spin var(--d1) linear infinite; } .pa-uni-r2 { --r: var(--r2); --d: var(--d2); animation: pa-uni-spin var(--d2) linear infinite reverse; } .pa-uni-item { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); } .pa-uni-tile { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 6px; transform: translate(-50%, calc(var(--t1) / -2)); animation: pa-uni-spin var(--d) linear infinite reverse; transform-origin: 50% calc(var(--t1) / 2); } .pa-uni-r2 .pa-uni-tile { transform: translate(-50%, -50%); transform-origin: 50% 50%; animation-direction: normal; } .pa-uni .pa-app { width: var(--t1) !important; height: var(--t1) !important; border-radius: 30% !important; box-shadow: 0 14px 30px -10px var(--c1), 0 0 0 4px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .4); } .pa-uni-r2 .pa-app { width: var(--t2) !important; height: var(--t2) !important; opacity: .92; } .pa-uni-tile em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #dbe6f7; padding: 2px 9px; border-radius: 999px; background: rgba(7, 26, 51, .7); border: 1px solid rgba(127, 216, 232, .25); white-space: nowrap; } .pa-uni-i1 { --a: -90deg; } .pa-uni-i2 { --a: 30deg; } .pa-uni-i3 { --a: 150deg; } .pa-uni-o1 { --a: 0deg; } .pa-uni-o2 { --a: 45deg; } .pa-uni-o3 { --a: 90deg; } .pa-uni-o4 { --a: 135deg; } .pa-uni-o5 { --a: 180deg; } .pa-uni-o6 { --a: 225deg; } .pa-uni-o7 { --a: 270deg; } .pa-uni-o8 { --a: 315deg; } .pa-uni-core { left: 50%; top: 50%; width: var(--core); height: var(--core); margin: calc(var(--core) / -2) 0 0 calc(var(--core) / -2); border-radius: 30%; display: grid; place-items: center; background: linear-gradient(150deg, #0b2a5b, #1d6fe8); box-shadow: 0 30px 80px -10px rgba(29, 111, 232, .85), inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -10px 30px rgba(7, 26, 51, .35); z-index: 2; } .pa-uni-core::before, .pa-uni-core::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(127, 216, 232, .5); animation: pa-uni-ripple 3.2s ease-out infinite; } .pa-uni-core::after { animation-delay: -1.6s; } .pa-uni-core b { font-family: var(--wp--preset--font-family--display, Sora), sans-serif; font-size: calc(var(--core) * .62); font-weight: 800; line-height: 1; margin-top: -6%; background: linear-gradient(160deg, #c9f7fb, #3fc8e4 50%, #8b7cf6); -webkit-background-clip: text; background-clip: text; color: transparent; } .pa-uni-chip { z-index: 3; white-space: nowrap; padding: 8px 14px 8px 28px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #0c1a2c; background: rgba(255, 255, 255, .94); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .65); backdrop-filter: blur(6px); animation: pa-float 7s ease-in-out infinite; } .pa-uni-chip::before { content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #22b46b; box-shadow: 0 0 0 4px rgba(34, 180, 107, .18); } .pa-uni-c1 { left: 2%; top: 9%; } .pa-uni-c2 { right: 0; top: 20%; animation-delay: -2s; } .pa-uni-c3 { left: 0; bottom: 18%; animation-delay: -4s; } .pa-uni-c4 { right: 3%; bottom: 7%; animation-delay: -1s; } .pa-uni-c2::before { background: #2f6bff; box-shadow: 0 0 0 4px rgba(47, 107, 255, .18); } .pa-uni-c3::before { background: #8b7cf6; box-shadow: 0 0 0 4px rgba(139, 124, 246, .18); } .pa-uni-c4::before { background: #f0b429; box-shadow: 0 0 0 4px rgba(240, 180, 41, .2); } @keyframes pa-uni-spin { to { rotate: 360deg; } } @keyframes pa-uni-pulse { 0% { left: 100%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 0; opacity: 0; } } @keyframes pa-uni-breathe { 50% { transform: scale(1.12); opacity: .75; } } @keyframes pa-uni-ripple { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } } @media (max-width: 1200px) { .pa-uni { --S: 500px; --r1: 126px; --r2: 210px; --t1: 52px; --t2: 40px; --core: 108px; } } @media (max-width: 960px) { .pa-uni { --S: 460px; --r1: 116px; --r2: 194px; --t1: 48px; --t2: 36px; --core: 100px; } } @media (max-width: 600px) { .pa-uni { --S: 340px; --r1: 86px; --r2: 144px; --t1: 38px; --t2: 28px; --core: 72px; margin-block: 8px -10px; } .pa-uni-c2, .pa-uni-c3 { display: none; } .pa-uni-tile em { font-size: 10px; padding: 1px 7px; } .pa-uni-chip { font-size: 11px; padding: 6px 10px 6px 22px; } .pa-uni-chip::before { left: 9px; width: 7px; height: 7px; margin-top: -3.5px; } .pa-uni-c1 { left: 0; top: 2%; } .pa-uni-c2 { right: 0; top: 13%; } .pa-uni-c3 { left: 0; bottom: 12%; } .pa-uni-c4 { right: 0; bottom: 2%; } } @media (max-width: 370px) { .pa-uni { --S: 300px; --r1: 76px; --r2: 126px; --t1: 34px; --t2: 26px; --core: 64px; } } @media (prefers-reduced-motion: reduce) { .pa-uni *, .pa-uni *::before, .pa-uni *::after { animation: none !important; } } /* Trust strip (replaces the marquee) */ .pa-trust { background: linear-gradient(180deg, #071a33, #0b1f45); color: #fff; padding-block: 26px; border-top: 1px solid rgba(255, 255, 255, .06); } .pa-trust-inner { max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); display: flex; align-items: center; gap: 18px 36px; flex-wrap: wrap; justify-content: center; } .pa-trust-inner > * { margin: 0 !important; } .pa-trust-label { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7fd8e8; } .pa-trust-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; } .pa-trust-name { margin: 0 !important; font-family: var(--wp--preset--font-family--display, Sora), sans-serif; font-weight: 700; font-size: 1.05rem; color: rgba(255, 255, 255, .62); transition: color .2s; } .pa-trust-name:hover { color: #fff; } @media (max-width: 600px) { .pa-trust-names { gap: 8px 18px; } .pa-trust-name { font-size: .95rem; } } .pa-trust > .pa-trust-inner { max-width: 1200px !important; padding-inline: 0; } .pa-trust-label { flex-basis: auto; } @media (max-width: 600px) { .pa-trust-label { flex-basis: 100%; text-align: center; } } .pa-uni-r1 { z-index: 3; } .pa-uni-chip { z-index: 4; } /* ===== About v3: word hero, chapters, letters, family orbit ===== */ .pa-hero-html { display: flex; align-items: center; justify-content: center; } figure.pa-hero-html, div.pa-hero-html { margin: 0 !important; } /* PROPERTY → PROP& */ .pa-word { --W: 540px; position: relative; width: var(--W); height: var(--W); max-width: 100%; margin-inline: auto; display: grid; place-items: center; } .pa-word > * { position: absolute; } .pa-word .pa-uni-glow { inset: 22%; } .pa-word-ring { left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(127, 216, 232, .22); } .pa-word-ring1 { width: 66%; height: 66%; border-color: rgba(127, 216, 232, .32); } .pa-word-ring2 { width: 94%; height: 94%; border-style: dashed; } .pa-word-comet { --r1: calc(var(--W) * .33); } .pa-word-text { position: relative; display: flex; align-items: baseline; font-family: var(--wp--preset--font-family--display, Sora), sans-serif; font-weight: 800; font-size: calc(var(--W) * .13); letter-spacing: -.03em; line-height: 1; color: #fff; text-shadow: 0 10px 40px rgba(29, 111, 232, .6); } .pa-word-k { display: inline-block; } .pa-word-x, .pa-word-amp { display: inline-block; overflow: hidden; vertical-align: baseline; } .pa-word-x > span { display: inline-block; color: rgba(255, 255, 255, .55); } .pa-word-x { max-width: 1em; animation: pa-word-x 9s cubic-bezier(.7, 0, .3, 1) infinite; } .pa-word-x2 { animation-delay: .08s; } .pa-word-x3 { animation-delay: .16s; } .pa-word-x4 { animation-delay: .24s; } .pa-word-amp { max-width: 0; animation: pa-word-amp 9s cubic-bezier(.7, 0, .3, 1) infinite; } .pa-word-amp > span { display: inline-block; padding-inline: .04em; background: linear-gradient(160deg, #c9f7fb, #3fc8e4 50%, #8b7cf6); -webkit-background-clip: text; background-clip: text; color: transparent; } @keyframes pa-word-x { 0%, 28% { max-width: 1em; opacity: 1; transform: none; } 40%, 88% { max-width: 0; opacity: 0; transform: translateY(.3em); } 100% { max-width: 1em; opacity: 1; transform: none; } } @keyframes pa-word-amp { 0%, 38% { max-width: 0; opacity: 0; transform: scale(.4) rotate(-20deg); } 50%, 86% { max-width: 1.1em; opacity: 1; transform: none; } 96%, 100% { max-width: 0; opacity: 0; transform: scale(.4); } } .pa-word-chip { z-index: 3; white-space: nowrap; padding: 8px 15px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #0c1a2c; background: rgba(255, 255, 255, .95); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .65); animation: pa-float 7s ease-in-out infinite; } .pa-word-c1 { left: 6%; top: 14%; } .pa-word-c2 { right: 2%; top: 24%; animation-delay: -2s; } .pa-word-c3 { left: 2%; bottom: 22%; animation-delay: -4s; } .pa-word-c4 { right: 8%; bottom: 10%; animation-delay: -1s; } @media (max-width: 1200px) { .pa-word { --W: 470px; } } @media (max-width: 960px) { .pa-word { --W: 420px; } } @media (max-width: 600px) { .pa-word { --W: 330px; } .pa-word-chip { font-size: 11px; padding: 6px 11px; } } @media (prefers-reduced-motion: reduce) { .pa-word-x { max-width: 0; opacity: 0; } .pa-word-amp { max-width: 1.1em; opacity: 1; } .pa-word *, .pa-word *::before { animation: none !important; } } /* Story chapters: a connected line of four steps */ .pa-chaps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-block-start: 48px !important; } .pa-chaps::before { content: ""; position: absolute; top: 27px; inset-inline: 6%; height: 2px; background: linear-gradient(90deg, #3fc8e4, #4f8bff, #8b7cf6); opacity: .5; } .pa-chap { position: relative; margin: 0 !important; padding: 0 4px; } .pa-chap > * { margin: 0 !important; } .pa-chap-n { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-family: var(--wp--preset--font-family--display, Sora), sans-serif; font-weight: 800; font-size: 1.1rem; color: #fff; background: linear-gradient(145deg, #2f6bff, #3fc8e4); box-shadow: 0 16px 30px -12px rgba(47, 107, 255, .7); position: relative; z-index: 1; } .pa-chap-2 .pa-chap-n { background: linear-gradient(145deg, #4f8bff, #8b7cf6); } .pa-chap-3 .pa-chap-n { background: linear-gradient(150deg, #0b2a5b, #1d6fe8); color: #7fd8e8; font-size: 1.6rem; } .pa-chap-3 .pa-chap-n { font-size: 0; } .pa-chap-3 .pa-chap-n::after { content: "&"; font-size: 1.9rem; background: linear-gradient(160deg, #c9f7fb, #3fc8e4 50%, #8b7cf6); -webkit-background-clip: text; background-clip: text; color: transparent; } .pa-chap-4 .pa-chap-n { background: linear-gradient(145deg, #22b46b, #3fc8e4); } .pa-chap-t { margin-block: 22px 10px !important; font-size: 1.25rem; } .pa-chap-text { color: #4a5a70; line-height: 1.7; } @media (max-width: 960px) { .pa-chaps { grid-template-columns: 1fr; gap: 28px; } .pa-chaps::before { top: 0; bottom: 0; inset-inline: 27px auto; width: 2px; height: auto; background: linear-gradient(180deg, #3fc8e4, #4f8bff, #8b7cf6); } .pa-chap { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; } .pa-chap-n { grid-row: span 2; } .pa-chap-t { margin-block: 4px 6px !important; } } /* Letters */ .pa-letters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-block-start: 44px !important; } .pa-letter { position: relative; margin: 0 !important; padding: 26px 22px 24px; border-radius: 24px; background: #fff; border: 1px solid #e6ecf5; overflow: hidden; display: flex; flex-direction: column; gap: 8px; transition: transform .3s, box-shadow .3s; } .pa-letter > * { margin: 0 !important; position: relative; } .pa-letter:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(47, 107, 255, .5); } .pa-letter-big { font-family: var(--wp--preset--font-family--display, Sora), sans-serif; font-weight: 800; font-size: clamp(4rem, 7vw, 6rem); line-height: .9; letter-spacing: -.04em; background: linear-gradient(160deg, #0b2550 30%, #2f6bff); -webkit-background-clip: text; background-clip: text; color: transparent; } .pa-letter-word { font-size: 1.1rem !important; color: #2456c8; } .pa-letter .pa-card-text { font-size: .95rem; } .pa-letter-amp { background: radial-gradient(ellipse at 80% 0, rgba(63, 200, 228, .35), transparent 60%), linear-gradient(150deg, #0b2550, #071a33); border-color: transparent; box-shadow: 0 30px 70px -30px rgba(11, 37, 80, .8); } .pa-letter-amp .pa-letter-big { background: linear-gradient(160deg, #c9f7fb, #3fc8e4 50%, #8b7cf6); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 20px rgba(63, 200, 228, .5)); } .pa-letter-amp .pa-letter-word { color: #7fd8e8; } .pa-letter-amp .pa-card-text { color: #c7d4ea; } @media (max-width: 1100px) { .pa-letters { grid-template-columns: repeat(3, 1fr); } .pa-letter-amp { grid-column: span 2; } } @media (max-width: 640px) { .pa-letters { grid-template-columns: 1fr 1fr; } .pa-letter-amp { grid-column: 1 / -1; } .pa-letter { padding: 20px 18px; } } /* Family orbit */ .pa-eco { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 4vw, 60px); align-items: center; } .pa-eco > * { margin: 0 !important; } .pa-eco-legend { display: grid; gap: 12px; margin-block-start: 26px !important; } .pa-eco-item { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); margin: 0 !important; } .pa-eco-item > * { margin: 0 !important; } .pa-eco-item .pa-ic { flex: none; width: 46px; height: 46px; border-radius: 13px; } .pa-eco-txt > * { margin: 0 !important; } .pa-eco-txt .pa-card-title { font-size: 1.05rem; margin-block-end: 4px !important; } .pa-eco-visual { display: flex; justify-content: center; } .pa-uni-eco { --S: 600px; --r1: 112px; --r2: 188px; --r3: 268px; --t1: 54px; --t2: 40px; --core: 104px; --d3: 90s; } .pa-uni-t4 { width: calc(var(--r3) * 2); height: calc(var(--r3) * 2); border-color: rgba(139, 124, 246, .22); } .pa-uni-r3 { --r: var(--r3); --d: var(--d3); animation: pa-uni-spin var(--d3) linear infinite; } .pa-uni-r3 .pa-uni-tile { transform: translate(-50%, -50%); transform-origin: 50% 50%; } .pa-uni-pill { white-space: nowrap; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #dbe6f7; background: rgba(11, 37, 80, .85); border: 1px solid rgba(127, 216, 232, .35); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7); } .pa-uni-q1 { --a: -90deg; } .pa-uni-q2 { --a: -30deg; } .pa-uni-q3 { --a: 30deg; } .pa-uni-q4 { --a: 90deg; } .pa-uni-q5 { --a: 150deg; } .pa-uni-q6 { --a: 210deg; } @media (max-width: 1200px) { .pa-uni-eco { --S: 520px; --r1: 98px; --r2: 164px; --r3: 230px; --t1: 48px; --t2: 36px; --core: 92px; } } @media (max-width: 960px) { .pa-eco { grid-template-columns: 1fr; } .pa-eco-visual { order: -1; } } @media (max-width: 600px) { .pa-uni-eco { --S: 340px; --r1: 66px; --r2: 108px; --r3: 146px; --t1: 34px; --t2: 26px; --core: 62px; } .pa-uni-pill { font-size: 9.5px; padding: 4px 8px; } .pa-eco-sec { overflow: hidden; } } [dir="rtl"] .pa-letters { direction: ltr; } [dir="rtl"] .pa-letter > *:not(.pa-letter-big) { direction: rtl; text-align: right; } [dir="rtl"] .pa-letter-big { text-align: left; } .pa-word-chip { unicode-bidi: plaintext; } /* About story v2: a vertical journey with key lines, lists and chips */ .pa-chaps { grid-template-columns: 1fr !important; max-width: 880px; margin-inline: auto !important; gap: 22px !important; } .pa-chaps::before { top: 10px !important; bottom: 10px !important; inset-inline: 27px auto !important; width: 2px !important; height: auto !important; background: linear-gradient(180deg, #3fc8e4, #4f8bff, #8b7cf6, #22b46b) !important; } .pa-chap { display: grid !important; grid-template-columns: 56px 1fr; column-gap: clamp(18px, 3vw, 32px); padding: 0 !important; } .pa-chap-n { grid-row: auto !important; position: sticky; top: 100px; } .pa-chap-body { margin: 0 !important; padding: clamp(22px, 3vw, 34px); border-radius: 24px; background: #fff; border: 1px solid #e6ecf5; box-shadow: 0 24px 50px -36px rgba(20, 60, 140, .45); display: flex; flex-direction: column; gap: 12px; } .pa-chap-body > * { margin: 0 !important; } .pa-chap-t { margin: 0 0 4px !important; font-size: clamp(1.4rem, 2.4vw, 1.8rem) !important; letter-spacing: -.02em; } .pa-chap-text { color: #4a5a70; line-height: 1.75; font-size: 1.02rem; } .pa-chap-key { font-family: var(--wp--preset--font-family--display, Sora), sans-serif; font-weight: 800; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.3; background: linear-gradient(100deg, #1d6fe8, #3fc8e4 50%, #8b7cf6); -webkit-background-clip: text; background-clip: text; color: transparent; padding-block: 4px; } .pa-chap-list { list-style: none; padding: 0 !important; display: grid; gap: 8px; } .pa-chap-list li { position: relative; padding: 10px 14px 10px 40px; border-radius: 12px; background: #f5f8fd; color: #1d2b44; font-weight: 500; line-height: 1.5; margin: 0; } .pa-chap-list li::before { content: ""; position: absolute; left: 14px; top: 16px; width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(145deg, #2f6bff, #3fc8e4); } [dir="rtl"] .pa-chap-list li { padding: 10px 40px 10px 14px; } [dir="rtl"] .pa-chap-list li::before { left: auto; right: 14px; } .pa-chap-2 .pa-chap-list li { background: #fff4f4; } .pa-chap-2 .pa-chap-list li::before { background: linear-gradient(145deg, #e3565c, #f08a7a); } .pa-chap-4 .pa-chap-list li::before { background: linear-gradient(145deg, #22b46b, #3fc8e4); } .pa-chap-chips { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; } .pa-chap-chips li { margin: 0; padding: 10px 18px; border-radius: 999px; font-weight: 700; color: #fff; background: linear-gradient(150deg, #0b2550, #1d4fa8); box-shadow: 0 12px 24px -14px rgba(11, 37, 80, .8); } .pa-chap-3 .pa-chap-body { background: radial-gradient(ellipse at 90% 0, rgba(63, 200, 228, .3), transparent 55%), linear-gradient(150deg, #0b2550, #071a33); border-color: transparent; } .pa-chap-3 .pa-chap-t, .pa-chap-3 .pa-chap-text { color: #fff; } .pa-chap-3 .pa-chap-text { color: #c7d4ea; } .pa-chap-3 .pa-chap-key { background: linear-gradient(100deg, #a8f0f7, #3fc8e4 50%, #b3a6ff); -webkit-background-clip: text; background-clip: text; } .pa-chap-3 .pa-chap-chips li { background: rgba(255, 255, 255, .1); border: 1px solid rgba(127, 216, 232, .35); } @media (max-width: 640px) { .pa-chap { grid-template-columns: 44px 1fr; column-gap: 12px; } .pa-chap-n { width: 44px !important; height: 44px !important; border-radius: 14px !important; font-size: .95rem !important; } .pa-chaps::before { inset-inline: 21px auto !important; } .pa-chap-body { padding: 18px; } } .pa-chap-n { align-self: start; margin-top: 22px !important; } /* Trust strip v2: glass panel with system tiles */ .pa-trust { position: relative; padding-block: clamp(26px, 3.4vw, 44px) !important; background: radial-gradient(ellipse at 50% 0, rgba(63, 200, 228, .16), transparent 60%), linear-gradient(180deg, #071a33, #0b1f45) !important; overflow: hidden; } .pa-trust > .pa-trust-inner { position: relative; max-width: 1180px !important; flex-direction: column; gap: 22px !important; padding: clamp(20px, 2.6vw, 30px) clamp(16px, 3vw, 36px) !important; border-radius: 26px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(127, 216, 232, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); } .pa-trust > .pa-trust-inner::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(90deg, transparent, rgba(63, 200, 228, .8), rgba(139, 124, 246, .8), transparent) 0 0 / 200% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: pa-trust-sweep 6s linear infinite; pointer-events: none; } @keyframes pa-trust-sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } } .pa-trust-label { display: flex; align-items: center; gap: 14px; width: 100%; justify-content: center; text-align: center; color: #8be9f2 !important; } .pa-trust-label::before, .pa-trust-label::after { content: ""; flex: 1; max-width: 160px; height: 1px; background: linear-gradient(90deg, transparent, rgba(127, 216, 232, .5)); } .pa-trust-label::after { transform: scaleX(-1); } .pa-trust-names { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px !important; width: 100%; } .pa-trust-name { display: flex; align-items: center; gap: 12px; margin: 0 !important; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); color: #fff !important; transition: transform .25s, background .25s, border-color .25s, box-shadow .25s; } .pa-trust-name:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .09); border-color: rgba(127, 216, 232, .4); box-shadow: 0 18px 34px -20px rgba(63, 200, 228, .7); } .pa-trust-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-family: var(--wp--preset--font-family--display, Sora), sans-serif; font-weight: 800; font-size: 15px; color: #fff; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .35); } .pa-trust-yardi { background: linear-gradient(145deg, #2f6bff, #3fc8e4); } .pa-trust-dyn { background: linear-gradient(145deg, #6a4cf0, #b07cf6); } .pa-trust-ora { background: linear-gradient(145deg, #e3565c, #f08a7a); } .pa-trust-sap { background: linear-gradient(145deg, #1a8fd8, #5fd6e8); } .pa-trust-fab { background: linear-gradient(145deg, #13a37f, #5fd6a0); } .pa-trust-pbi { background: linear-gradient(145deg, #f0a429, #f5c95b); color: #3a2600; font-size: 13px; } .pa-trust-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .pa-trust-n { font-family: var(--wp--preset--font-family--display, Sora), sans-serif; font-size: .95rem; font-weight: 700; color: #fff; line-height: 1.25; } .pa-trust-r { font-size: .75rem; color: #9fb1cc; margin-top: 2px; } @media (max-width: 1100px) { .pa-trust-names { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .pa-trust-names { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; } .pa-trust-name { padding: 10px; gap: 10px; } .pa-trust-ico { width: 32px; height: 32px; font-size: 13px; } .pa-trust-n { font-size: .85rem; } } @media (prefers-reduced-motion: reduce) { .pa-trust > .pa-trust-inner::before { animation: none; } } /* Two doors: lift + zoom on hover, marked when clicked */ .pa-door { cursor: pointer; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, outline-color .35s; outline: 3px solid transparent; outline-offset: 4px; will-change: transform; } .pa-door:hover { transform: translateY(-8px) scale(1.015); } .pa-door-sol:hover { box-shadow: 0 50px 100px -40px rgba(11, 37, 80, .95), 0 0 0 1px rgba(127, 216, 232, .25); } .pa-door-svc:hover { box-shadow: 0 50px 100px -45px rgba(47, 107, 255, .55); } .pa-door .pa-door-icons .pa-app { transition: transform .4s cubic-bezier(.2, .8, .2, 1); } .pa-door:hover .pa-door-icons .pa-app { transform: translateY(-8px) rotate(-4deg); } .pa-door:hover .pa-door-icons .pa-app:nth-child(2n) { transform: translateY(-3px) rotate(4deg); } .pa-door .pa-door-icons .pa-app:nth-child(2) { transition-delay: .03s; } .pa-door .pa-door-icons .pa-app:nth-child(3) { transition-delay: .06s; } .pa-door .pa-door-icons .pa-app:nth-child(4) { transition-delay: .09s; } .pa-door .pa-door-icons .pa-app:nth-child(5) { transition-delay: .12s; } .pa-door .pa-door-icons .pa-app:nth-child(6) { transition-delay: .15s; } .pa-door .pa-door-icons .pa-app:nth-child(7) { transition-delay: .18s; } .pa-door .pa-door-icons .pa-app:nth-child(8) { transition-delay: .21s; } .pa-door.is-picked { transform: translateY(-8px) scale(1.025); outline-color: #3fc8e4; } .pa-door.is-picked::after { content: "✓"; position: absolute; top: 22px; inset-inline-end: 22px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(145deg, #22b46b, #3fc8e4); box-shadow: 0 10px 24px -8px rgba(34, 180, 107, .8); animation: pa-pick .4s cubic-bezier(.2, 1.6, .4, 1); } .pa-doors.has-pick .pa-door:not(.is-picked) { opacity: .72; transform: scale(.98); } @keyframes pa-pick { from { transform: scale(0); } to { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .pa-door, .pa-door .pa-app { transition: none; } .pa-door:hover, .pa-door.is-picked { transform: none; } } /* ===== About: interactive journey (step cards + chapter panel) ===== */ .pa-storyjr { position: relative; color: #fff; background: radial-gradient(ellipse at 15% 0, rgba(63, 200, 228, .18), transparent 50%), radial-gradient(ellipse at 90% 100%, rgba(139, 124, 246, .22), transparent 55%), linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(160deg, #0b2550, #071a33 60%, #0b1f45) !important; overflow: hidden; } .pa-storyjr .pa-title, .pa-storyjr h2 { color: #fff; } .pa-storyjr .pa-eyebrow { background: rgba(63, 200, 228, .14) !important; border: 1px solid rgba(63, 200, 228, .35); color: #8be9f2 !important; width: fit-content; } .pa-jr-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-block-start: 48px !important; max-width: 1180px; margin-inline: auto !important; } .pa-jr-steps::before, .pa-jr-steps::after { content: ""; position: absolute; top: 74px; inset-inline-start: 12%; height: 2px; border-radius: 2px; pointer-events: none; } .pa-jr-steps::before { inset-inline-end: 12%; background: rgba(127, 216, 232, .16); } .pa-jr-steps::after { width: calc(76% * var(--jr, 0)); background: linear-gradient(90deg, #3fc8e4, #4f8bff, #8b7cf6); box-shadow: 0 0 14px rgba(63, 200, 228, .7); transition: width .6s cubic-bezier(.2, .8, .2, 1); } [dir="rtl"] .pa-jr-steps::after { background: linear-gradient(270deg, #3fc8e4, #4f8bff, #8b7cf6); } .pa-jr-step { position: relative; z-index: 1; margin: 0 !important; padding: 22px 18px 24px; border-radius: 22px; text-align: center; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .4s cubic-bezier(.2, .8, .2, 1), background .3s, border-color .3s, box-shadow .3s, opacity .3s; outline: none; } .pa-jr-step > * { margin: 0 !important; } .pa-jr-step:hover { background: rgba(255, 255, 255, .07); border-color: rgba(127, 216, 232, .3); } .pa-jr-step:focus-visible { box-shadow: 0 0 0 3px rgba(63, 200, 228, .6); } .pa-jr-tag { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8be9f2; } .pa-jr-dot { position: relative; width: 22px; height: 22px; border-radius: 50%; margin-block: 10px 6px !important; background: #0b2550; border: 2px solid rgba(127, 216, 232, .45); transition: all .35s; } .pa-jr-dot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: rgba(127, 216, 232, .5); transition: all .35s; } .pa-jr-title { font-size: 1.12rem !important; color: #fff; line-height: 1.25; } .pa-jr-sum { font-size: .9rem; color: #9fb1cc; line-height: 1.5; } .pa-storyjr.pa-jr-on .pa-jr-step:not(.is-active) { opacity: .62; } .pa-jr-step.is-done .pa-jr-dot { border-color: #3fc8e4; } .pa-jr-step.is-done .pa-jr-dot::after { background: #3fc8e4; } .pa-jr-step.is-active { opacity: 1; transform: translateY(-10px) scale(1.04); background: linear-gradient(160deg, rgba(47, 107, 255, .28), rgba(139, 124, 246, .2)); border-color: rgba(127, 216, 232, .6); box-shadow: 0 30px 60px -28px rgba(63, 200, 228, .55), inset 0 1px 0 rgba(255, 255, 255, .15); } .pa-jr-step.is-active .pa-jr-dot { width: 30px; height: 30px; margin-block: 6px 2px !important; border-color: #fff; background: radial-gradient(circle, #fff 30%, #3fc8e4 31%, #1d6fe8); box-shadow: 0 0 0 8px rgba(63, 200, 228, .18), 0 0 24px rgba(63, 200, 228, .8); } .pa-jr-step.is-active .pa-jr-dot::after { display: none; } .pa-jr-step.is-active .pa-jr-sum { color: #dbe6f7; } /* Chapter panel */ .pa-jr-panels { position: relative; max-width: 1180px; margin: 34px auto 0 !important; } .pa-jr-panel { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); margin: 0 0 18px !important; padding: clamp(24px, 3.4vw, 44px); border-radius: 28px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); } .pa-storyjr.pa-jr-on .pa-jr-panel { display: none; margin: 0 !important; } .pa-storyjr.pa-jr-on .pa-jr-panel.is-active { display: grid; animation: pa-jr-in .55s cubic-bezier(.2, .8, .2, 1); } @keyframes pa-jr-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .pa-jr-side { margin: 0 !important; display: flex; flex-direction: column; gap: 8px; } .pa-jr-side > * { margin: 0 !important; } .pa-jr-num { font-family: var(--wp--preset--font-family--display, Sora), sans-serif; font-weight: 800; font-size: clamp(4rem, 8vw, 6.5rem); line-height: .9; letter-spacing: -.04em; background: linear-gradient(160deg, #c9f7fb, #3fc8e4 45%, #8b7cf6); -webkit-background-clip: text; background-clip: text; color: transparent; } .pa-jr-ptag { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8be9f2; } .pa-jr-main { margin: 0 !important; display: flex; flex-direction: column; gap: 12px; } .pa-jr-main > * { margin: 0 !important; } .pa-jr-ptitle { font-size: clamp(1.6rem, 3vw, 2.2rem) !important; color: #fff; letter-spacing: -.02em; } .pa-storyjr .pa-chap-text { color: #c7d4ea; font-size: 1.04rem; line-height: 1.75; } .pa-storyjr .pa-chap-key { background: linear-gradient(100deg, #a8f0f7, #3fc8e4 50%, #b3a6ff); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(1.2rem, 2.2vw, 1.55rem); } .pa-storyjr .pa-chap-list li { background: rgba(255, 255, 255, .06); color: #e6eefb; border: 1px solid rgba(255, 255, 255, .08); } .pa-storyjr .pa-jr-p2 .pa-chap-list li { background: rgba(227, 86, 92, .1); border-color: rgba(240, 138, 122, .25); } .pa-storyjr .pa-chap-chips li { background: rgba(255, 255, 255, .08); border: 1px solid rgba(127, 216, 232, .35); } .pa-jr-hint { text-align: center; color: #7f93b3; font-size: .85rem; margin-top: 14px !important; } @media (max-width: 900px) { .pa-jr-steps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 14px 4px 10px; margin-inline: -4px !important; scrollbar-width: none; } .pa-jr-steps::-webkit-scrollbar { display: none; } .pa-jr-steps::before, .pa-jr-steps::after { display: none; } .pa-jr-step { flex: 0 0 62%; scroll-snap-align: center; } .pa-jr-step.is-active { transform: translateY(-4px) scale(1.02); } .pa-jr-panel { grid-template-columns: 1fr; gap: 8px; } .pa-jr-side { flex-direction: row; align-items: baseline; gap: 14px; } .pa-jr-num { font-size: 3rem; } } @media (prefers-reduced-motion: reduce) { .pa-jr-step, .pa-jr-steps::after { transition: none; } .pa-storyjr.pa-jr-on .pa-jr-panel.is-active { animation: none; } } .pa-jr-p2 .pa-chap-list li::before { background: linear-gradient(145deg, #e3565c, #f08a7a); } .pa-jr-p4 .pa-chap-list li::before { background: linear-gradient(145deg, #22b46b, #3fc8e4); } /* Journey: light theme, so it stands apart from the dark hero above */ .pa-storyjr { color: #0c1a2c; background: radial-gradient(ellipse at 10% 0, rgba(63, 200, 228, .16), transparent 45%), radial-gradient(ellipse at 95% 100%, rgba(139, 124, 246, .16), transparent 50%), linear-gradient(rgba(29, 79, 168, .045) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(29, 79, 168, .045) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(180deg, #f7f9ff, #eef3fc) !important; padding-block: clamp(56px, 6vw, 88px) !important; } .pa-storyjr .pa-title, .pa-storyjr h2 { color: #0c1a2c; } .pa-storyjr .pa-eyebrow { background: #e8f0ff !important; border-color: #cfe0ff; color: #2456c8 !important; } .pa-storyjr .pa-jr-steps { margin-block-start: 40px !important; } .pa-storyjr .pa-jr-steps::before { background: #d6e2f5; } .pa-storyjr .pa-jr-step { background: #fff; border-color: #e3e9f3; box-shadow: 0 14px 30px -24px rgba(20, 60, 140, .4); } .pa-storyjr .pa-jr-step:hover { background: #fff; border-color: #b9cdf7; } .pa-storyjr.pa-jr-on .pa-jr-step:not(.is-active) { opacity: 1; } .pa-storyjr .pa-jr-tag { color: #2f6bff; } .pa-storyjr .pa-jr-title { color: #0c1a2c; } .pa-storyjr .pa-jr-sum { color: #5b6b80; } .pa-storyjr .pa-jr-dot { background: #fff; border-color: #c7d6ef; } .pa-storyjr .pa-jr-dot::after { background: #c7d6ef; } .pa-storyjr .pa-jr-step.is-done .pa-jr-dot { border-color: #2f6bff; } .pa-storyjr .pa-jr-step.is-done .pa-jr-dot::after { background: #2f6bff; } .pa-storyjr .pa-jr-step.is-active { background: radial-gradient(ellipse at 80% 0, rgba(63, 200, 228, .35), transparent 60%), linear-gradient(155deg, #0b2550, #12306b); border-color: transparent; box-shadow: 0 30px 60px -26px rgba(11, 37, 80, .75); } .pa-storyjr .pa-jr-step.is-active .pa-jr-tag { color: #8be9f2; } .pa-storyjr .pa-jr-step.is-active .pa-jr-title { color: #fff; } .pa-storyjr .pa-jr-step.is-active .pa-jr-sum { color: #c7d4ea; } .pa-storyjr .pa-jr-panel { background: #fff; border-color: #e3e9f3; box-shadow: 0 40px 80px -50px rgba(20, 60, 140, .5); } .pa-storyjr .pa-jr-num { background: linear-gradient(160deg, #0b2550 10%, #2f6bff 55%, #8b7cf6); -webkit-background-clip: text; background-clip: text; } .pa-storyjr .pa-jr-ptag { color: #2f6bff; } .pa-storyjr .pa-jr-ptitle { color: #0c1a2c; } .pa-storyjr .pa-chap-text { color: #4a5a70; } .pa-storyjr .pa-chap-key { background: linear-gradient(100deg, #1d6fe8, #3fc8e4 50%, #8b7cf6); -webkit-background-clip: text; background-clip: text; } .pa-storyjr .pa-chap-list li { background: #f5f8fd; color: #1d2b44; border-color: #e6ecf5; } .pa-storyjr .pa-jr-p2 .pa-chap-list li { background: #fff4f4; border-color: #fadcdc; } .pa-storyjr .pa-chap-chips li { background: linear-gradient(150deg, #0b2550, #1d4fa8); border: 0; color: #fff; }