/* ============================================================ mg-ui.css — Javed IT Solution shared UI add-ons Loaded AFTER mg-components.css. Neo-brutalist sticker system. Provides: fully-scrollable modal · pricing package cards · blog/guide reading furniture (TOC · progress · callouts · quick-answer). Tokens: ink #090a0a · mint #befabe · blue #c8e1fa · yellow #fff1b8 orange #ffd6c2 · purple #f0d1ff · green2 #d7f5df ============================================================ */ /* =========================================================== 1) MODAL — robust, always-scrollable (mouse wheel · touchpad · touch), Lenis-aware, overscroll-contained. The BODY is the scroll container (data-lenis-prevent set by mg-ui.js). =========================================================== */ .jit-modal { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: clamp(.75rem, 3vw, 2rem); background: rgba(9, 10, 10, .55); opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s linear .28s; overscroll-behavior: contain; -webkit-tap-highlight-color: transparent; } .jit-modal.is-open { opacity: 1; visibility: visible; transition: opacity .28s ease; } @supports (backdrop-filter: blur(2px)) { .jit-modal { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } } .jit-modal__panel { position: relative; width: min(680px, 100%); max-height: min(88vh, 900px); max-height: min(88dvh, 900px); display: flex; flex-direction: column; background: #fff; border: 2px solid #090a0a; border-radius: 1.25rem; box-shadow: 6px 6px 0 0 #090a0a; overflow: hidden; /* corners clip; the body scrolls */ transform: translateY(18px) scale(.985); opacity: 0; transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .3s ease; } .jit-modal.is-open .jit-modal__panel { transform: none; opacity: 1; } /* sticky header (never scrolls away) */ .jit-modal__head { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 1rem; padding: 1.15rem 1.35rem 1rem; border-bottom: 2px solid #090a0a; background: #fff; } .jit-modal__eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-accent, #297acc); margin: 0 0 .2rem; } .jit-modal__title { font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 800; line-height: 1.25; color: #090a0a; margin: 0; } .jit-modal__close { flex: 0 0 auto; margin-left: auto; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border: 1.5px solid #090a0a; border-radius: 50%; background: #fff1b8; box-shadow: 2px 2px 0 0 #090a0a; cursor: pointer; color: #090a0a; transition: transform .15s ease, box-shadow .15s ease; } .jit-modal__close:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 0 #090a0a; } .jit-modal__close:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 0 #090a0a; } .jit-modal__close svg { width: 1.15rem; height: 1.15rem; } /* THE scroll container */ .jit-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 1.35rem; scrollbar-width: thin; } .jit-modal__body::-webkit-scrollbar { width: 10px; } .jit-modal__body::-webkit-scrollbar-thumb { background: #cfd4da; border-radius: 99px; border: 3px solid #fff; } .jit-modal__body::-webkit-scrollbar-thumb:hover { background: #b4bbc3; } /* optional sticky footer CTA row */ .jit-modal__foot { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; padding: 1rem 1.35rem; border-top: 2px solid #090a0a; background: #f7f8fa; } /* body lock while a modal is open (mg-ui.js toggles this on ) */ html.jit-modal-lock, html.jit-modal-lock body { overflow: hidden !important; touch-action: none; } /* the modal itself must still receive touch scrolling */ .jit-modal, .jit-modal * { touch-action: auto; } /* ---- modal content furniture (used inside .jit-modal__body) ---- */ .pkg-detail__tagline { font-size: 1rem; line-height: 1.6; color: #3e4042; margin: 0 0 1.25rem; font-weight: 600; } .pkg-tier { border: 1.5px solid #090a0a; border-radius: 1rem; box-shadow: 3px 3px 0 0 #090a0a; padding: 1.1rem 1.15rem; margin-bottom: 1rem; background: #fff; position: relative; } .pkg-tier--popular { background: #f4fbef; box-shadow: 4px 4px 0 0 #4b8a2e; border-color: #2f6d18; } .pkg-tier__top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .2rem; } .pkg-tier__name { font-size: 1.08rem; font-weight: 800; color: #090a0a; margin: 0; } .pkg-tier__tag { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #2f6d18; margin-left: .55rem; vertical-align: .05em; } .pkg-tier__price { font-family: 'Sabbir Sorolota','Hind Siliguri',sans-serif; font-weight: 800; font-size: 1.5rem; color: #090a0a; white-space: nowrap; } .pkg-tier__price small { font-size: .8rem; font-weight: 600; color: #6b7280; margin-left: .15rem; } .pkg-tier__for { font-size: .88rem; color: #6b7280; margin: 0 0 .7rem; font-weight: 600; } .pkg-tier__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .48rem; } .pkg-tier__list li { display: flex; align-items: flex-start; gap: .55rem; font-size: .93rem; line-height: 1.5; color: #1f2421; } .pkg-tier__list li svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; margin-top: .2em; color: #2f6d18; } .pkg-addons { margin: .3rem 0 1rem; padding: .95rem 1.1rem; border: 1.5px dashed #090a0a; border-radius: .9rem; background: #fff9e8; } .pkg-addons__h { font-weight: 800; font-size: .95rem; margin: 0 0 .6rem; color: #090a0a; } .pkg-addons__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .45rem .9rem; } .pkg-addon { display: flex; justify-content: space-between; gap: .6rem; font-size: .88rem; color: #1f2421; } .pkg-addon b { font-family: 'Sabbir Sorolota','Hind Siliguri',sans-serif; color: #090a0a; white-space: nowrap; } .pkg-detail__note { font-size: .88rem; line-height: 1.65; color: #6b7280; margin: .2rem 0 0; padding-top: .9rem; border-top: 1px solid #eceef1; } @media (max-width: 520px) { .pkg-addons__grid { grid-template-columns: 1fr; } .jit-modal__panel { max-height: 92dvh; width: 100%; } } /* =========================================================== 2) PRICING PACKAGE CARDS (the /pricing grid) =========================================================== */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; max-width: 1180px; margin: 0 auto; } /* phones: 2-up compact cards (never a single serial column) — wins over style.css :640 1fr because mg-ui.css loads last */ @media (max-width: 560px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; } .pcard { padding: 1rem .8rem 1rem; } .pcard__icon { width: 2.5rem; height: 2.5rem; margin-bottom: .7rem; } .pcard__icon svg { width: 1.3rem; height: 1.3rem; } .pcard__name { font-size: 1rem; } .pcard__actions { grid-template-columns: 1fr; gap: .5rem; } .pcard__more { text-align: center; } } .pcard { display: flex; flex-direction: column; text-align: left; background: #fff; border: 1.5px solid #090a0a; border-radius: 1.25rem; box-shadow: 4px 4px 0 0 #090a0a; padding: 1.35rem 1.3rem 1.25rem; transition: transform .18s cubic-bezier(.25,.46,.45,.94), box-shadow .18s cubic-bezier(.25,.46,.45,.94); } .pcard:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 0 #090a0a; } .pcard__icon { width: 3rem; height: 3rem; border-radius: .85rem; display: grid; place-items: center; background: #c8e1fa; border: 1.5px solid #090a0a; box-shadow: 2px 2px 0 0 #090a0a; margin-bottom: .9rem; } .pcard:nth-child(6n+1) .pcard__icon { background: #befabe; } .pcard:nth-child(6n+2) .pcard__icon { background: #c8e1fa; } .pcard:nth-child(6n+3) .pcard__icon { background: #fff1b8; } .pcard:nth-child(6n+4) .pcard__icon { background: #ffd6c2; } .pcard:nth-child(6n+5) .pcard__icon { background: #f0d1ff; } .pcard:nth-child(6n+6) .pcard__icon { background: #d7f5df; } .pcard__icon svg { width: 1.55rem; height: 1.55rem; color: #090a0a; } .pcard__name { font-size: 1.12rem; font-weight: 800; line-height: 1.3; color: #090a0a; margin: 0 0 .3rem; } .pcard__name a { color: inherit; text-decoration: none; } .pcard__name a:hover { color: var(--color-accent, #297acc); } .pcard__tag { font-size: .9rem; line-height: 1.55; color: #6b7280; margin: 0 0 .9rem; font-weight: 600; flex: 0 0 auto; } .pcard__price { display: flex; align-items: baseline; gap: .35rem; margin: 0 0 .2rem; } .pcard__price-from { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9aa2ad; } .pcard__price-num { font-family: 'Sabbir Sorolota','Hind Siliguri',sans-serif; font-weight: 800; font-size: 1.65rem; color: #090a0a; line-height: 1; } .pcard__price-to { font-size: .85rem; font-weight: 600; color: #6b7280; } .pcard__pkgcount { font-size: .82rem; color: var(--color-accent, #297acc); font-weight: 700; margin: .45rem 0 1rem; } .pcard__actions { margin-top: auto; display: grid; grid-template-columns: 1fr auto; gap: .55rem; align-items: center; } .pcard__detailbtn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-weight: 800; font-size: .92rem; cursor: pointer; background: #090a0a; color: #fff; border: 1.5px solid #090a0a; border-radius: 99px; padding: .6rem 1rem; box-shadow: 2px 2px 0 0 var(--color-accent, #297acc); transition: transform .15s ease, box-shadow .15s ease; } .pcard__detailbtn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 0 var(--color-accent, #297acc); } .pcard__detailbtn svg { width: 1.05em; height: 1.05em; } .pcard__more { font-size: .86rem; font-weight: 700; color: var(--color-accent, #297acc); text-decoration: none; white-space: nowrap; } .pcard__more:hover { text-decoration: underline; } /* category heading rows */ .pricing-cat { max-width: 1180px; margin: clamp(2rem,4vw,3rem) auto .3rem; padding: 0 .1rem; display: flex; align-items: center; gap: .8rem; } .pricing-cat__line { flex: 1 1 auto; height: 2px; background: #090a0a; opacity: .12; border-radius: 2px; } .pricing-cat__title { font-size: 1.15rem; font-weight: 800; color: #090a0a; margin: 0; white-space: nowrap; } .pricing-cat__count { font-family: 'Sabbir Sorolota','Hind Siliguri',sans-serif; font-weight: 700; font-size: .9rem; color: #fff; background: #090a0a; border-radius: 99px; padding: .1rem .6rem; } /* =========================================================== 3) BLOG / GUIDE motion furniture =========================================================== */ /* reading-progress bar (top of viewport) */ .jit-readbar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--color-accent, #297acc), #befabe); z-index: 4000; pointer-events: none; transition: width .08s linear; } /* sticky in-article table of contents */ .guide-toc { border: 1.5px solid #090a0a; border-radius: 1rem; box-shadow: 3px 3px 0 0 #090a0a; background: #fff; padding: 1.1rem 1.2rem; margin: 0 0 1.75rem; } .guide-toc__h { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin: 0 0 .7rem; } .guide-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: .1rem; } .guide-toc__list a { display: flex; gap: .6rem; align-items: baseline; counter-increment: toc; padding: .4rem .5rem; border-radius: .55rem; text-decoration: none; color: #1f2421; font-weight: 600; font-size: .95rem; line-height: 1.4; transition: background .15s ease, color .15s ease; } .guide-toc__list a::before { content: counter(toc, decimal-leading-zero); font-family: 'Sabbir Sorolota','Hind Siliguri',sans-serif; font-weight: 800; color: var(--color-accent, #297acc); font-size: .85rem; flex: 0 0 auto; } .guide-toc__list a:hover { background: #f2f5f8; } .guide-toc__list a.is-active { background: #eaf3fc; color: #090a0a; } /* quick-answer / TL;DR card */ .guide-tldr { border: 2px solid #090a0a; border-radius: 1.1rem; box-shadow: 4px 4px 0 0 #befabe; background: #f4fbef; padding: 1.25rem 1.35rem; margin: 0 0 1.75rem; } .guide-tldr__h { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #1f5e0c; margin: 0 0 .5rem; } .guide-tldr__h svg { width: 1.1rem; height: 1.1rem; } .guide-tldr p { margin: 0; font-size: 1.02rem; line-height: 1.7; color: #1f2421; font-weight: 600; } /* pull-callout inside article */ .guide-callout { border-left: 4px solid var(--color-accent, #297acc); background: #f7f9fb; border-radius: .3rem .9rem .9rem .3rem; padding: 1rem 1.2rem; margin: 1.5rem 0; } .guide-callout p { margin: 0; font-size: 1rem; line-height: 1.7; color: #1f2421; } /* mid-article CTA band */ .guide-midcta { border: 2px solid #090a0a; border-radius: 1.1rem; box-shadow: 4px 4px 0 0 #090a0a; background: #fff1b8; padding: clamp(1.2rem,3vw,1.8rem); margin: 2rem 0; text-align: center; } .guide-midcta p { font-size: 1.12rem; font-weight: 800; color: #090a0a; margin: 0 0 1rem; line-height: 1.4; } .guide-midcta__btns { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; } /* =========================================================== 4) DARK / HACKER theme re-skin (mirror mg-components approach) =========================================================== */ [data-theme="dark"] .jit-modal__panel, [data-theme="hacker"] .jit-modal__panel { background: #14161c; border-color: #4A5060; box-shadow: 6px 6px 0 0 #363B46; } [data-theme="dark"] .jit-modal__head, [data-theme="hacker"] .jit-modal__head { background: #14161c; border-color: #4A5060; } [data-theme="dark"] .jit-modal__title { color: var(--color-text-primary); } [data-theme="dark"] .jit-modal__foot { background: #0f1116; border-color: #4A5060; } [data-theme="dark"] .pkg-tier { background: #1B1D26; border-color: #4A5060; box-shadow: 3px 3px 0 0 #363B46; color: var(--color-text-primary); } [data-theme="dark"] .pkg-tier__name, [data-theme="dark"] .pkg-tier__price, [data-theme="dark"] .pkg-tier__list li { color: var(--color-text-primary); } [data-theme="dark"] .pkg-tier__for, [data-theme="dark"] .pkg-detail__note, [data-theme="dark"] .pkg-detail__tagline { color: var(--color-text-secondary); } [data-theme="dark"] .pkg-addons { background: rgba(255,241,184,.06); border-color: #4A5060; } [data-theme="dark"] .pkg-tier--popular { background: rgba(10,132,255,.10); border-color: var(--color-accent); box-shadow: 4px 4px 0 0 #363B46; } [data-theme="dark"] .pcard { background: #1B1D26; border-color: #4A5060; box-shadow: 4px 4px 0 0 #363B46; } [data-theme="dark"] .pcard:hover { box-shadow: 7px 7px 0 0 #363B46; } [data-theme="dark"] .pcard__name, [data-theme="dark"] .pcard__price-num { color: var(--color-text-primary); } [data-theme="dark"] .pcard__tag, [data-theme="dark"] .pcard__price-to { color: var(--color-text-secondary); } [data-theme="dark"] .pcard__icon { border-color: #4A5060; box-shadow: 2px 2px 0 0 #363B46; } [data-theme="dark"] .pcard__detailbtn { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 2px 2px 0 0 #363B46; } [data-theme="dark"] .pricing-cat__title { color: var(--color-text-primary); } [data-theme="dark"] .pricing-cat__line { background: var(--color-text-primary); } [data-theme="dark"] .pricing-cat__count { background: var(--color-accent); } [data-theme="dark"] .guide-toc, [data-theme="dark"] .guide-tldr, [data-theme="dark"] .guide-midcta { background: #1B1D26; border-color: #4A5060; box-shadow: 3px 3px 0 0 #363B46; } [data-theme="dark"] .guide-toc__list a { color: var(--color-text-secondary); } [data-theme="dark"] .guide-toc__list a:hover, [data-theme="dark"] .guide-toc__list a.is-active { background: rgba(10,132,255,.12); color: var(--color-text-primary); } [data-theme="dark"] .guide-tldr p, [data-theme="dark"] .guide-midcta p, [data-theme="dark"] .guide-callout p { color: var(--color-text-primary); } [data-theme="dark"] .guide-callout { background: rgba(255,255,255,.03); } [data-theme="hacker"] .pcard, [data-theme="hacker"] .pkg-tier, [data-theme="hacker"] .guide-toc, [data-theme="hacker"] .guide-tldr { background: #0C140C; border-color: rgba(0,255,65,.30); box-shadow: 4px 4px 0 0 rgba(0,255,65,.18); color: #C6FFD4; } [data-theme="hacker"] .pcard__name, [data-theme="hacker"] .pcard__price-num, [data-theme="hacker"] .pkg-tier__name, [data-theme="hacker"] .pkg-tier__price { color: #C6FFD4; } [data-theme="hacker"] .pcard__detailbtn { background: #00FF41; color: #04120A; border-color: #00FF41; box-shadow: 2px 2px 0 0 rgba(0,255,65,.25); } [data-theme="hacker"] .guide-midcta { background: #0C140C; border-color: rgba(0,255,65,.30); box-shadow: 4px 4px 0 0 rgba(0,255,65,.18); } [data-theme="hacker"] .guide-midcta p { color: #C6FFD4; } /* hacker: full text + panel parity with the dark block (was leaving near-black text + light panels on the phosphor-dark UI → invisible/bright islands) */ [data-theme="hacker"] .jit-modal__title { color: #C6FFD4; } [data-theme="hacker"] .jit-modal__foot { background: #0A120A; border-color: rgba(0,255,65,.30); } [data-theme="hacker"] .pkg-tier__name, [data-theme="hacker"] .pkg-tier__price, [data-theme="hacker"] .pkg-tier__list li { color: #C6FFD4; } [data-theme="hacker"] .pkg-tier__for, [data-theme="hacker"] .pkg-detail__note, [data-theme="hacker"] .pkg-detail__tagline { color: #6FCF88; } [data-theme="hacker"] .pkg-tier__list li svg, [data-theme="hacker"] .pkg-tier__tag { color: #00FF41; } [data-theme="hacker"] .pkg-addons { background: rgba(0,255,65,.05); border-color: rgba(0,255,65,.30); } [data-theme="hacker"] .pkg-addon, [data-theme="hacker"] .pkg-addon b { color: #C6FFD4; } [data-theme="hacker"] .pkg-tier--popular { background: rgba(0,255,65,.08); border-color: #00FF41; box-shadow: 4px 4px 0 0 rgba(0,255,65,.20); } [data-theme="hacker"] .pcard__name, [data-theme="hacker"] .pcard__price-num { color: #C6FFD4; } [data-theme="hacker"] .pcard__tag, [data-theme="hacker"] .pcard__price-to, [data-theme="hacker"] .pcard__price-from { color: #6FCF88; } [data-theme="hacker"] .pcard__icon { border-color: rgba(0,255,65,.30); box-shadow: 2px 2px 0 0 rgba(0,255,65,.18); } [data-theme="hacker"] .pricing-cat__title { color: #C6FFD4; } [data-theme="hacker"] .pricing-cat__line { background: rgba(0,255,65,.30); } [data-theme="hacker"] .pricing-cat__count { background: #00FF41; color: #04120A; } [data-theme="hacker"] .guide-toc__h, [data-theme="hacker"] .guide-toc__list a { color: #6FCF88; } [data-theme="hacker"] .guide-toc__list a:hover, [data-theme="hacker"] .guide-toc__list a.is-active { background: rgba(0,255,65,.12); color: #C6FFD4; } [data-theme="hacker"] .guide-tldr p { color: #C6FFD4; } [data-theme="hacker"] .guide-tldr__h { color: #00FF41; } [data-theme="hacker"] .guide-callout { background: rgba(0,255,65,.04); border-color: #00FF41; } [data-theme="hacker"] .guide-callout p { color: #C6FFD4; } /* =========================================================== 4b) STANDALONE HERO NAVBAR-CLEARANCE Pages WITHOUT the service-page .sp-herowrap + breadcrumb (pricing, tools, guides indexes, hack-check) have no top clearance, so the fixed floating navbar (position:fixed; top:1.25rem) covered the hero content. This gives the same proven clearance the breadcrumb provides + a soft depth glow. =========================================================== */ .sp-hero--solo { position: relative; isolation: isolate; overflow: clip; } /* Beat the ls-system skin rule `:root:not([_x1]):not([_x2]) .sp-hero{ padding … !important }` (specificity 0,4,0). We match its prefix + add a second class → 0,5,0, so the navbar clearance always wins regardless of source order or theme. */ :root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-hero.sp-hero--solo { padding-top: clamp(104px, 13vh, 132px) !important; padding-bottom: clamp(1.75rem, 4.5vh, 3rem) !important; text-align: center !important; } .sp-hero--solo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 420px at 50% 8%, rgba(41,122,204,.10), transparent 68%); } [data-theme="dark"] .sp-hero--solo::before, [data-theme="hacker"] .sp-hero--solo::before { background: radial-gradient(900px 420px at 50% 8%, rgba(10,132,255,.14), transparent 68%); } @media (max-width: 600px) { :root:not([data-theme="_x1"]):not([data-theme="_x2"]) .sp-hero.sp-hero--solo { padding-top: clamp(92px, 22vw, 112px) !important; } } /* =========================================================== 5) HERO SCENE motion vocabulary (pure-CSS continuous loops — GPU-safe, run without GSAP so the hero is ALWAYS alive). Extends the pgs-* set already in service-page.css. =========================================================== */ .pg-scene { width: min(460px, 92%); margin-inline: auto; } .pg-scene svg { width: 100%; height: auto; display: block; overflow: visible; } .pg-scene [class^="pgs-"], .pg-scene [class*=" pgs-"] { transform-box: fill-box; transform-origin: center; } /* growth bars must scale UP from their baseline, not the centre (restore the center-bottom anchor the line above would otherwise override) */ .pg-scene .pgs-grow, .pg-scene .pgs-grow2, .pg-scene .pgs-grow3 { transform-origin: center bottom; } @keyframes pgs-ping { 0% { transform: scale(.5); opacity: .7; } 70%,100% { transform: scale(1.9); opacity: 0; } } @keyframes pgs-flip { 0%,100% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } } @keyframes pgs-drift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } } @keyframes pgs-swing { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } } @keyframes pgs-rise { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes pgs-sweep { 0% { transform: translateY(-2px); } 100% { transform: translateY(112px); } } @keyframes pgs-dashmove { to { stroke-dashoffset: -60; } } @keyframes pgs-fadepop { 0%,100% { opacity: .25; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } } .pg-scene .pgs-ping { transform-origin: center; animation: pgs-ping 2.4s ease-out infinite; } .pg-scene .pgs-flip { animation: pgs-flip 3.6s ease-in-out infinite; } .pg-scene .pgs-drift { animation: pgs-drift 3s ease-in-out infinite; } .pg-scene .pgs-swing { animation: pgs-swing 2.8s ease-in-out infinite; } .pg-scene .pgs-rise { animation: pgs-rise 2.6s ease-in-out infinite; } .pg-scene .pgs-sweep { animation: pgs-sweep 2.6s cubic-bezier(.55,0,.45,1) infinite alternate; } .pg-scene .pgs-dash { stroke-dasharray: 5 7; animation: pgs-dashmove 1.3s linear infinite; } .pg-scene .pgs-fadepop { animation: pgs-fadepop 2.2s ease-in-out infinite; } .pg-scene .pgs-d1 { animation-delay: .25s; } .pg-scene .pgs-d2 { animation-delay: .5s; } .pg-scene .pgs-d3 { animation-delay: .75s; } .pg-scene .pgs-d4 { animation-delay: 1s; } .pg-scene .pgs-d5 { animation-delay: 1.25s; } .pg-scene .pgs-d6 { animation-delay: 1.5s; } @media (prefers-reduced-motion: reduce) { .pg-scene [class^="pgs-"], .pg-scene [class*=" pgs-"] { animation: none !important; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .jit-modal, .jit-modal__panel { transition: none; } .jit-readbar { transition: none; } }