/* ========================================================================== Panoton — product pages: Backoffice, PanoTeams™, Financials, Connections, Pano Score™. Rebuilt to match the PUBLISHED panoton.com pages. Load AFTER site.css, plus Font Awesome 4 for the caret/feature icons: Everything is scoped to .pp / .pp-* so the other 49 pages are untouched. Colours are lifted verbatim from the live page source. ========================================================================== */ .pp { --pp-hero: #260043; /* hero band */ --pp-sub: #120021; /* sticky ⬥ sub-nav */ --pp-accent: #260043; /* scribble + carets */ --pp-cyan: #32dbf2; --pp-orange: #fe4c10; } /* Seeded on :root, NOT on .pp — .pp is the , and a custom property declared on an element beats the same property inherited from its parent, which would shadow the runtime value product.js writes onto . */ :root { --pp-header-h: 134px; } .pp-backoffice { --pp-hero: #260043; --pp-sub: #120021; --pp-accent: #260043; } .pp-financials { --pp-hero: #260043; --pp-sub: #120021; --pp-accent: #6300af; } /* chrome darkened to the near-black family per 2026-08 decision; accent keeps the page's own purple */ .pp-connections { --pp-hero: #6e00ed; --pp-sub: #470099; --pp-accent: #6e00ed; } .pp-panoteams, .pp-panoscore { --pp-hero: #000000; --pp-sub: #05010f; --pp-accent: #ffffff; } .pp-academy { --pp-hero: #00054c; --pp-sub: #00042e; --pp-accent: #32dbf2; } /* no product hero on this page — keeps the sitewide navy chrome */ /* 2026-08-09: the unified split header takes on each page's main colour. On product-family pages (body.pp) the sticky bar inherits the page's hero colour instead of the sitewide navy, so header and hero read as one block — same effect the old transparent pp-header achieved. */ .pp .site-header.split { background: var(--pp-hero); } /* `clip` contains the 165% hero bleed WITHOUT creating a scroll container — `hidden` would force overflow-y:auto and break every sticky descendant. */ .pp { overflow-x: clip; } /* ------------------------------------------------------------------ header */ .pp-header { position: fixed; top: 0; left: 0; right: 0; z-index: 90; background: transparent; padding: 0 0 20px; transition: background .4s cubic-bezier(.25, 1, .5, 1), padding .4s cubic-bezier(.25, 1, .5, 1), box-shadow .4s ease; } .pp-header.is-solid { background: rgba(0, 0, 0, .88); padding: 0 0 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); } .pp-util { background: rgba(0, 0, 0, .35); border-bottom: 1px solid rgba(255, 255, 255, .1); margin-bottom: 18px; } .pp-header.is-solid .pp-util { margin-bottom: 10px; } .pp-util div { max-width: 1425px; margin-inline: auto; padding: 8px 45px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 28px; } .pp-util a { font-size: .82rem; color: rgba(255, 255, 255, .8); text-decoration: none; } .pp-util a:hover { color: var(--pp-cyan); text-decoration: none; } .pp-bar { max-width: 1425px; margin-inline: auto; padding-inline: 45px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; } .pp-bar nav { display: flex; align-items: center; gap: 28px; } .pp-bar .pp-nav-l { justify-content: flex-end; } .pp-bar .pp-nav-r { justify-content: flex-start; } .pp-bar nav a { font-family: var(--font-head, Cabin, sans-serif); font-size: .88rem; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .85); white-space: nowrap; padding-bottom: 4px; text-decoration: none; } .pp-bar nav a:hover { color: #fff; text-decoration: none; } .pp-bar nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--pp-cyan); } .pp-brand img { height: 62px; width: auto; display: block; object-fit: contain; } .pp-navtoggle { display: none; } .pp-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; cursor: pointer; margin-left: auto; } .pp-burger span { display: block; height: 2px; background: #fff; border-radius: 2px; } .pp-bar .pp-mobile { display: none; grid-column: 1 / -1; background: rgba(0, 0, 0, .97); padding: 18px 45px 26px; margin-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); } .pp-mobile ul { list-style: none; margin: 0 auto; padding: 0; max-width: 1425px; display: grid; gap: 2px; } .pp-mobile a { display: block; padding: 12px 0; font-family: var(--font-head, Cabin, sans-serif); font-size: 1.06rem; font-weight: 600; color: rgba(255, 255, 255, .85); text-decoration: none; } .pp-mobile a:hover { color: #fff; text-decoration: none; } .pp-bar .pp-navtoggle:checked ~ .pp-mobile { display: block; } @media (max-width: 1199px) { .pp-bar { grid-template-columns: auto 1fr; } .pp-bar .pp-nav-l, .pp-bar .pp-nav-r { display: none; } .pp-brand { order: -1; justify-self: start; } .pp-burger { display: flex; } } /* -------------------------------------------------------------- containers */ .pp-wide { max-width: 1425px; margin-inline: auto; padding-inline: 45px; } .pp-mid { max-width: 1245px; margin-inline: auto; padding-inline: 45px; } .pp-narrow { max-width: 1425px; margin-inline: auto; padding-inline: 27vw; } @media (max-width: 999px) { .pp-wide, .pp-mid { padding-inline: 24px; } .pp-narrow { padding-inline: 20vw; } } @media (max-width: 690px) { .pp-narrow { padding-inline: 7vw; } } /* -------------------------------------------------------------------- hero */ .pp-hero { background: var(--pp-hero); padding: clamp(70px, calc(14vw - 80px), 170px) 0 calc(100vw * .07); overflow: hidden; } /* top padding reduced ~80px 2026-08-09: the split header is sticky (in flow), unlike the old fixed pp-header the clamp(150px…) was sized to clear */ .pp-hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 4vw; align-items: center; } .pp-kicker { font-family: var(--font-head, Cabin, sans-serif); font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--pp-cyan); margin: 0 0 2.4em; } .pp-hero .pp-h { font-size: clamp(40px, 4.3vw, 62px); line-height: 1.02; color: #fff; margin: 0 0 26px; } .pp-hero .pp-h-sm { font-size: clamp(34px, 3.6vw, 54px); line-height: 1.08; } .pp-lead { font-family: var(--font-head, Cabin, sans-serif); font-weight: 400; font-size: 1.13rem; line-height: 1.7; color: #fff; margin: 0 0 32px; } .pp-panoteams .pp-lead, .pp-panoscore .pp-lead { color: rgba(255, 255, 255, .82); } .pp-oversize { width: 165%; max-width: 165%; } .pp-oversize img { width: 100%; height: auto; display: block; } /* -------------------------------------------------------------- caret list */ .pp-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .pp-ul-rich { gap: 16px; } .pp-ul li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; font-size: 1.06rem; line-height: 1.6; margin: 0; } .pp-ul-rich li { font-size: 1rem; line-height: 1.7; } /* CSS triangle rather than a FontAwesome glyph — staging dropped the icon font. */ .pp-ul li::before { content: ""; width: 0; height: 0; margin-top: .5em; border-left: 7px solid var(--pp-cyan); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .pp-hero .pp-ul li { color: #fff; } .pp-panoteams .pp-hero .pp-ul li, .pp-panoscore .pp-hero .pp-ul li { color: rgba(255, 255, 255, .82); } .pp-ul li strong { color: #fff; font-weight: 700; } .pp-ul-ink li { color: var(--ink-mute, #666); } .pp-ul-ink li::before { color: var(--pp-accent); } .pp-ul-ink li strong { color: var(--ink, #10131a); } /* --------------------------------------------------------- sticky sub-nav */ .pp-submenu { position: sticky; top: var(--pp-header-h, 134px); z-index: 61; background: var(--pp-sub); } .pp-panoteams .pp-submenu, .pp-panoscore .pp-submenu { border-bottom: 1px solid rgba(255, 255, 255, .12); } .pp-submenu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; } .pp-submenu a { display: block; font-family: var(--font-head, Cabin, sans-serif); font-size: .88rem; font-weight: 600; color: rgba(255, 255, 255, .72); padding: 16px 20px; white-space: nowrap; text-decoration: none; transition: color .2s ease; } .pp-submenu a:hover { color: #fff; text-decoration: none; } .pp-submenu a.is-current { color: #fff; font-weight: 700; } @media (max-width: 999px) { .pp-submenu a { padding: 13px 13px; font-size: .82rem; } } /* ------------------------------------------------------ scribble headline */ .pp-scribble-row { background: #fff; padding: calc(100vw * .07) 0; } .pp-scribble-row h2 { font-size: clamp(30px, 3vw, 48px); line-height: 1.4; margin: 0; } /* isolation scopes the negative-z SVG inside the , so it paints above the white section background but still behind the headline text */ .pp-scribble-row h2 em { position: relative; display: inline-block; font-style: italic; z-index: 0; isolation: isolate; } .pp-scrib { position: absolute; left: 0; bottom: -30%; width: 100%; height: 50%; z-index: -1; overflow: visible; } .pp-scrib path { stroke: var(--pp-accent); stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 1; } [data-motion="on"] [data-reveal]:not([data-revealed]) .pp-scrib path { stroke-dashoffset: 1; opacity: 0; } [data-motion="on"] [data-reveal][data-revealed] .pp-scrib path { animation: pp-scribble 1.3s cubic-bezier(.65, 0, .35, 1) .35s backwards; } @keyframes pp-scribble { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } .pp-scribble-row .pp-sub-lede { margin: 40px 0 0; max-width: 90%; font-size: clamp(16px, 1.2vw, 21px); line-height: 1.8; } /* ----------------------------------------------------- photo feature band */ .pp-featureband { position: relative; padding: calc(100vw * .10) 0; background-size: cover; background-position: center; } .pp-featureband::before { content: ""; position: absolute; inset: 0; background: #000; opacity: .8; } .pp-featureband > * { position: relative; } .pp-eyebrow-c { text-align: center; font-family: var(--font-head, Cabin, sans-serif); font-size: .84rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pp-cyan); margin: 0 0 18px; } .pp-featureband h2 { text-align: center; font-size: clamp(30px, 3.3vw, 48px); line-height: 1.2; color: #fff; margin: 0 0 70px; } .pp-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 46px; } .pp-icons .pp-icon { width: 40px; height: 40px; color: var(--pp-orange); display: block; margin-bottom: 24px; } .pp-icons h4 { font-size: 1.35rem; color: #fff; margin: 0 0 14px; } .pp-icons p { font-size: 1rem; line-height: 1.75; color: rgba(255, 255, 255, .75); margin: 0; } /* ---------------------------------------------------------- blue band */ .pp-blueband { background: #1e43a6; padding: calc(100vw * .08) 0 0; overflow: hidden; } .pp-blueband .pp-wide { padding-inline: 4%; } .pp-blueband h2 { font-size: clamp(28px, 2.8vw, 42px); line-height: 1.18; color: #fff; margin: 0 0 20px; } .pp-blueband p { font-size: 1.06rem; line-height: 1.8; color: rgba(255, 255, 255, .85); margin: 0; } .pp-blueband strong { color: #fff; } .pp-blueband .pp-stack-p { display: grid; gap: 20px; } .pp-blueband img { width: 100%; height: auto; display: block; margin-top: calc(100vw * .05); } /* ----------------------------------------------------- half/half bands */ .pp-band { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: #fff; } .pp-panel { padding: calc(100vw * .06); } .pp-panel-grey { background: #f4f4f4; } .pp-panel-mist { background: #e3e9ed; } .pp-photo { min-height: 100%; background-size: cover; background-position: center; } .pp-over { color: #bfbfbf; font-size: 1.13rem; margin: 0 0 8px; } .pp-lg3 { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.25; margin: 0 0 28px; } .pp-lg2 { font-size: clamp(30px, 3vw, 46px); line-height: 1.15; margin: 0 0 14px; } .pp-tag { font-size: 1.18rem; line-height: 1.7; color: #4a5260; margin: 0 0 34px; } .pp-grp { display: grid; gap: 28px; } .pp-grp h4 { font-size: 1.25rem; margin: 0 0 14px; } .pp-stack-b { display: grid; gap: 16px; } .pp-stack-b p { margin: 0; } .pp-badge { display: inline-block; background: var(--pp-orange); color: #fff; font-family: var(--font-head, Cabin, sans-serif); font-size: .81rem; font-weight: 700; line-height: 1; padding: .5em 1em; margin-bottom: 18px; } /* ------------------------------------------------ dark (gradient) pages */ .pp-dark { position: relative; background: #000; } .pp-blobs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .pp-body { position: relative; z-index: 1; } .pp-blob { position: absolute; border-radius: 50%; } .pp-blob-a { top: -25%; left: -15%; width: 90vw; height: 90vw; filter: blur(40px); background: radial-gradient(closest-side, rgba(0, 7, 117, .95), rgba(0, 7, 117, 0) 70%); } .pp-blob-b { bottom: -30%; right: -20%; width: 80vw; height: 80vw; filter: blur(50px); background: radial-gradient(closest-side, rgba(30, 67, 166, .7), rgba(30, 67, 166, 0) 70%); } .pp-panoscore .pp-blob-a { left: auto; right: -15%; } .pp-panoscore .pp-blob-b { right: auto; left: -20%; background: radial-gradient(closest-side, rgba(0, 141, 229, .5), rgba(0, 141, 229, 0) 70%); } [data-motion="on"] .pp-blob { animation: pp-drift 26s ease-in-out infinite; } [data-motion="on"] .pp-blob-b { animation-duration: 34s; animation-direction: reverse; } @keyframes pp-drift { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(10vw, -8vh) scale(1.2); } 66% { transform: translate(-8vw, 7vh) scale(.9); } 100% { transform: translate(0, 0) scale(1); } } .pp-dark .pp-sect { padding: calc(100vw * .06) 0; } .pp-dark .pp-hero { padding: clamp(150px, 14vw, 250px) 0 0; background: transparent; } .pp-sec { font-size: clamp(28px, 2.8vw, 42px); line-height: 1.15; color: #fff; margin: 0 0 50px; } .pp-sec-c { text-align: center; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.15; color: #fff; margin: 0 0 70px; } .pp-statement { font-family: var(--font-head, Cabin, sans-serif); font-weight: 400; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.6; color: rgba(255, 255, 255, .9); margin: 0; } .pp-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .pp-3col h3 { font-size: 1.5rem; color: #fff; margin: 0 0 14px; } .pp-3col p, .pp-dark .pp-p { font-size: 1rem; line-height: 1.8; color: rgba(255, 255, 255, .75); margin: 0; } .pp-cyan-h { font-size: 1.19rem; color: var(--pp-cyan); margin: 0 0 8px; } .pp-cyan-h.sm { font-size: 1.13rem; } .pp-signup { margin: 44px 0 0; } .pp-signup a { font-family: var(--font-head, Cabin, sans-serif); font-weight: 700; font-size: 1rem; color: var(--pp-cyan); } /* photo + badge overlay */ .pp-stack { position: relative; min-height: 420px; } .pp-stack > img:first-child { width: 82%; height: auto; display: block; border-radius: 5px; } .pp-badge-img { position: absolute; right: -4%; bottom: -6%; width: 42%; height: auto; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .6)); } /* numbered lists */ .pp-num { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 46px 60px; } .pp-num > li { display: grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: start; } .pp-n { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; font-family: var(--font-head, Cabin, sans-serif); font-size: 1.25rem; font-weight: 700; color: #fff; } .pp-num h4 { font-size: 1.31rem; color: #fff; margin: 0 0 12px; } .pp-num p { font-size: 1rem; line-height: 1.8; color: rgba(255, 255, 255, .7); margin: 0 0 10px; } .pp-num p:last-child { margin-bottom: 0; } .pp-num p strong { color: #fff; } .pp-num p.pano strong { color: var(--pp-cyan); } .pp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; } .pp-cards .pp-n { width: 48px; height: 48px; font-size: 1.13rem; margin-bottom: 20px; } .pp-cards h4 { font-size: 1.31rem; color: #fff; margin: 0 0 12px; } .pp-cards p { font-size: 1rem; line-height: 1.8; color: rgba(255, 255, 255, .72); margin: 0; } /* ------------------------------------------------------------------ tabs */ .pp-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: -40px 0 56px; } .pp-tabs button { font-family: var(--font-head, Cabin, sans-serif); font-size: .94rem; font-weight: 600; color: rgba(255, 255, 255, .6); background: transparent; border: 0; border-bottom: 2px solid rgba(255, 255, 255, .18); padding: 12px 22px; cursor: pointer; white-space: nowrap; transition: color .2s ease, border-color .2s ease; } .pp-tabs button:hover { color: #fff; } .pp-tabs button.is-on { color: #fff; border-color: var(--pp-cyan); } /* panels default to visible, so the section still reads with JS off */ .pp-panel-tab.is-closed { display: none; } .pp-trust-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 5vw; align-items: start; } .pp-trust-row > h2 { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.3; color: #fff; margin: 0; } .pp-defs { display: grid; gap: 20px; } .pp-splitcols { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; } .pp-splitcols.pp-top { align-items: start; } /* ------------------------------------------------------------- waitlist */ .pp-cta { background: #000; padding: calc(100vw * .06) 0; text-align: center; } .pp-dark .pp-cta { background: transparent; } .pp-grad { font-size: 1.38rem; margin: 0 0 10px; display: inline-block; background: linear-gradient(to bottom right, #32dbf2, #1e43a6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #1e43a6; } .pp-cta h2 { font-size: clamp(32px, 3.4vw, 52px); line-height: 1.02; color: #fff; margin: 0 0 20px; } .pp-cta > .pp-mid > p { color: rgba(255, 255, 255, .7); font-size: 1.13rem; margin: 0 0 30px; } .pp-form { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: center; max-width: 640px; margin-inline: auto; } .pp-form input { flex: 1 1 280px; min-width: 220px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--r-pill, 100px); padding: 18px 26px; color: #fff; font-family: inherit; font-size: 1rem; outline: none; } .pp-form input::placeholder { color: rgba(255, 255, 255, .5); } .pp-form input:focus { border-color: var(--pp-cyan); } .pp-form button { border: 0; cursor: pointer; font-family: var(--font-head, Cabin, sans-serif); font-size: 1rem; font-weight: 700; color: #fff; background: linear-gradient(125deg, #32dbf2, #1e43a6); padding: 19px 38px; border-radius: var(--r-pill, 100px); box-shadow: 0 14px 34px rgba(30, 67, 166, .45); display: inline-flex; align-items: center; gap: 10px; } .pp-form button:hover { box-shadow: 0 18px 44px rgba(30, 67, 166, .6); } .pp-form .pp-msg { flex: 1 0 100%; margin: 4px 0 0; font-size: .88rem; color: var(--pp-cyan); min-height: 20px; } /* ---------------------------------------------------------------- footer */ .pp-footer { background: #000; padding: 34px 0; position: relative; z-index: 2; } .pp-footer p { font-size: .88rem; line-height: 1.7; color: rgba(255, 255, 255, .55); margin: 0; text-align: center; } .pp-footer a { color: rgba(255, 255, 255, .75); } /* ------------------------------------------------------------ reveals */ [data-motion="on"] [data-reveal] { transition: opacity 1s cubic-bezier(.25, 1, .5, 1), transform 1s cubic-bezier(.25, 1, .5, 1); } [data-motion="on"] [data-reveal]:not([data-revealed]) { opacity: 0; transform: translateY(40px); } [data-motion="on"] [data-reveal][data-delay="1"] { transition-delay: .08s; } [data-motion="on"] [data-reveal][data-delay="2"] { transition-delay: .16s; } [data-motion="on"] [data-reveal][data-delay="3"] { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .pp-scrib path { stroke-dashoffset: 0 !important; opacity: 1 !important; animation: none !important; } .pp-header, .pp-blob { transition: none !important; animation: none !important; } } /* ---------------------------------------------------------- responsive */ @media (max-width: 999px) { .pp-oversize { width: 100%; max-width: 100%; } .pp-hero-grid { grid-template-columns: 1fr; gap: 46px; } .pp-band { grid-template-columns: 1fr; } .pp-band .pp-photo { min-height: 320px; order: 0 !important; } .pp-band .pp-panel { order: 1; } .pp-icons, .pp-cards { grid-template-columns: 1fr 1fr; } .pp-3col, .pp-num, .pp-trust-row, .pp-splitcols { grid-template-columns: 1fr; } .pp-splitcols > [data-order] { order: 0 !important; } /* the badge must not hang off the photo once the columns stack */ .pp-stack { min-height: 0; display: grid; justify-items: center; gap: 26px; } .pp-stack > img:first-child { width: 100%; } .pp-badge-img { position: static; width: min(240px, 55%); } } @media (max-width: 690px) { .pp-icons, .pp-cards { grid-template-columns: 1fr; } .pp-panel { padding: 40px 24px; } }