/* Stay Unseen — product site. Built on the mheadowshtml.html personal-space template: the same single-hue colour system, 3D canvas/grid/orb background layers, tilting card stage, HUD and scan-line treatment, and reveal choreography. Extended with the sections a product page needs (screenshot gallery, feature matrix, privacy table). Everything shares the ps- prefix, as in the template. */ /* --- page shell ----------------------------------------------------------- */ /* The background is painted on too so the overscroll area and the mobile browser chrome match instead of flashing white. */ html { --ps-h: 226; background-color: hsl(calc(var(--ps-h) + 11), 50%, 1.6%); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } /* Mirrors of the accent switch, so the overscroll colour follows the theme. */ html[data-ps-theme="periwinkle"] { --ps-h: 226; } html[data-ps-theme="steel"] { --ps-h: 209; } html[data-ps-theme="violet"] { --ps-h: 253; } body { margin: 0; padding: 0; background-color: transparent; } .ps-app, .ps-app * { box-sizing: border-box; margin: 0; padding: 0; } /* Every colour is derived from this one hue, so the theme buttons only have to change a single number. All three are read off the extension icon: 226 is the periwinkle of its frame and ghost, 209 the steel of the badge circle, 253 the purple half of the shield. */ .ps-app { --ps-h: 226; } .ps-app[data-ps-theme="periwinkle"] { --ps-h: 226; } .ps-app[data-ps-theme="steel"] { --ps-h: 209; } .ps-app[data-ps-theme="violet"] { --ps-h: 253; } .ps-app { --bg: hsl(calc(var(--ps-h) + 11), 50%, 1.6%); --accent: hsl(calc(var(--ps-h) + 0.1), 100%, 66.7%); --accent-glow: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.45); --accent-soft: hsla(calc(var(--ps-h) + 0.3), 100%, 82.4%, 0.85); --accent-dark: hsl(calc(var(--ps-h) + 4.3), 82.7%, 15.9%); --text: hsl(calc(var(--ps-h) - 5.2), 100%, 97.5%); --muted: hsl(calc(var(--ps-h) - 10), 12.7%, 69%); --line: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.22); --panel-bg: hsla(calc(var(--ps-h) + 1), 55.6%, 5.3%, 0.75); position: relative; width: 100%; min-height: 100vh; overflow-x: hidden; color: var(--text); background-color: var(--bg); font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; isolation: isolate; perspective: 1200px; -webkit-font-smoothing: antialiased; } .ps-app a { color: inherit; text-decoration: none; } .ps-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- background layers ---------------------------------------------------- */ #ps3dCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -6; pointer-events: none; display: block; } .ps-grid-3d { position: absolute; z-index: -5; top: -30%; left: -40%; width: 180%; height: 150%; opacity: 0.32; pointer-events: none; background-image: linear-gradient(var(--line) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--line) 1.5px, transparent 1.5px); background-size: 60px 60px; transform: perspective(600px) rotateX(68deg) translateY(-12%) translateZ(-50px); transform-origin: center top; animation: ps-grid-scroll 14s linear infinite; } @keyframes ps-grid-scroll { from { background-position: 0 0; } to { background-position: 0 60px; } } .ps-orb-3d { position: fixed; z-index: -4; border-radius: 50%; pointer-events: none; transform-style: preserve-3d; filter: drop-shadow(0 0 45px var(--accent-glow)); isolation: isolate; } /* A moving surface under fixed lighting reads as a rotating sphere. */ .ps-orb-3d::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background-image: radial-gradient(ellipse 22% 14% at 14% 32%, hsla(calc(var(--ps-h) - 1.4), 100%, 86.7%, 0.34) 0 46%, transparent 52%), radial-gradient(ellipse 30% 18% at 42% 62%, hsla(calc(var(--ps-h) - 1.2), 65.3%, 51.4%, 0.28) 0 48%, transparent 55%), radial-gradient(ellipse 18% 28% at 67% 30%, hsla(var(--ps-h), 100%, 79.6%, 0.25) 0 45%, transparent 53%), radial-gradient(ellipse 28% 12% at 88% 72%, hsla(calc(var(--ps-h) - 0.6), 62%, 43.3%, 0.3) 0 48%, transparent 56%), radial-gradient(circle at 28% 24%, hsla(calc(var(--ps-h) - 1), 100%, 94.1%, 0.34), hsla(calc(var(--ps-h) - 1.8), 100%, 59.6%, 0.09) 38%, transparent 70%); background-size: 200% 100%, 200% 100%, 200% 100%, 200% 100%, 100% 100%; background-position: 0 0, 35% 0, 70% 0, 105% 0, 0 0; background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; mix-blend-mode: screen; opacity: 0.64; animation: ps-planet-rotate 20s linear infinite; will-change: background-position; } .ps-orb-3d::after { content: ""; position: absolute; inset: -2%; z-index: 1; border-radius: 50%; border: 1px solid hsla(calc(var(--ps-h) + 0.3), 100%, 82.4%, 0.48); box-shadow: 0 0 24px 5px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.28), inset 12px 8px 22px hsla(calc(var(--ps-h) - 3.6), 100%, 93.1%, 0.2), inset -26px -20px 38px rgba(0, 0, 0, 0.58); opacity: 0.7; animation: ps-planet-glow 4.5s ease-in-out infinite; pointer-events: none; } @keyframes ps-planet-rotate { from { background-position: 0 0, 35% 0, 70% 0, 105% 0, 0 0; } to { background-position: 200% 0, 235% 0, 270% 0, 305% 0, 0 0; } } @keyframes ps-planet-glow { 0%, 100% { opacity: 0.48; transform: scale(0.98); } 50% { opacity: 0.95; transform: scale(1.04); } } .ps-orb-3d.one { top: 6%; left: -100px; width: 320px; height: 320px; border: 1px solid hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.35); background: radial-gradient(circle at 30% 28%, hsla(calc(var(--ps-h) + 0.1), 100%, 87.1%, 0.45), hsla(calc(var(--ps-h) - 1.5), 100%, 59%, 0.12) 30%, hsla(calc(var(--ps-h) + 3.5), 66.7%, 2.4%, 0.05) 70%); box-shadow: inset -28px -30px 80px rgba(0, 0, 0, 0.75), 0 0 80px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.2); animation: ps-float-orb1 11s ease-in-out infinite alternate; } .ps-orb-3d.two { top: 52%; right: -120px; width: 380px; height: 380px; border: 1px solid hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.22); background: radial-gradient(circle at 35% 25%, hsla(calc(var(--ps-h) - 1.1), 100%, 68.4%, 0.3), hsla(calc(var(--ps-h) - 1.3), 86.7%, 17.6%, 0.18) 35%, hsla(calc(var(--ps-h) - 1.9), 63.6%, 2.2%, 0.05) 75%); box-shadow: inset -40px -38px 100px rgba(0, 0, 0, 0.8), 0 0 100px hsla(calc(var(--ps-h) - 1.7), 100%, 57.1%, 0.18); animation: ps-float-orb2 14s ease-in-out infinite alternate; } .ps-orb-3d.three { bottom: 8%; left: 18%; width: 140px; height: 140px; border: 1px solid hsla(calc(var(--ps-h) + 0.3), 100%, 82.4%, 0.4); background: radial-gradient(circle at 35% 25%, hsla(calc(var(--ps-h) - 1.2), 100%, 92.7%, 0.6), hsla(calc(var(--ps-h) - 1.5), 98.1%, 57.6%, 0.18) 35%, transparent 70%); box-shadow: inset -18px -20px 40px rgba(0, 0, 0, 0.7), 0 0 50px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.25); animation: ps-float-orb3 9s ease-in-out infinite alternate; } @keyframes ps-float-orb1 { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(55px, 45px, 60px); } } @keyframes ps-float-orb2 { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50px, -40px, -80px); } } @keyframes ps-float-orb3 { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(38px, -32px, 40px) scale(1.18); } } .ps-noise-overlay { position: fixed; z-index: -2; inset: 0; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); } /* --- layout --------------------------------------------------------------- */ .ps-container { width: min(1140px, calc(100% - 36px)); margin: 0 auto; padding: 0 4px; } /* --- header --------------------------------------------------------------- */ .ps-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px 0; border-bottom: 1px solid hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.12); } .ps-header::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: scaleX(0); transform-origin: center; } .ps-app.is-ready .ps-header::after { animation: ps-line-draw 1.1s .55s cubic-bezier(.16, 1, .3, 1) forwards; } .ps-brand-mark, .ps-status-pill, .ps-theme-switch, .ps-nav { opacity: 0; filter: blur(8px); } .ps-brand-mark { transform: translate3d(-28px, -10px, 0); } .ps-nav, .ps-status-pill, .ps-theme-switch { transform: translate3d(28px, -10px, 0); } .ps-app.is-ready .ps-brand-mark, .ps-app.is-ready .ps-status-pill, .ps-app.is-ready .ps-theme-switch, .ps-app.is-ready .ps-nav { animation: ps-header-arrive .8s cubic-bezier(.16, 1, .3, 1) forwards; } .ps-app.is-ready .ps-nav { animation-delay: .12s; } .ps-app.is-ready .ps-status-pill { animation-delay: .18s; } .ps-app.is-ready .ps-theme-switch { animation-delay: .26s; } @keyframes ps-header-arrive { to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); } } @keyframes ps-line-draw { 50% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: .22; } } .ps-brand-mark { display: inline-flex; align-items: center; gap: 12px; } /* The real extension icon rather than a redrawn letter mark. Its art carries its own rounded square, so the badge only supplies the glow. */ .ps-brand-badge { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.4); background: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.1); box-shadow: 0 0 18px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.25), inset 0 0 10px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.15); transform-style: preserve-3d; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .ps-brand-badge img { display: block; width: 26px; height: 26px; } .ps-brand-mark:hover .ps-brand-badge { transform: rotateY(180deg) scale(1.08); } .ps-brand-text { color: var(--text); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } .ps-header-tools { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .ps-nav { display: inline-flex; align-items: center; gap: 4px; } .ps-nav a { padding: 6px 10px; border-radius: 14px; border: 1px solid transparent; color: var(--muted); font: 0.62rem/1 "DM Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; transition: color .25s ease, border-color .25s ease, background .25s ease; } .ps-nav a:hover { color: var(--text); border-color: var(--line); background: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.08); } .ps-status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 20px; border: 1px solid hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.25); background: hsla(calc(var(--ps-h) + 3.1), 61.3%, 6.1%, 0.65); color: var(--accent-soft); font: 0.65rem/1 "DM Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ps-status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px 3px var(--accent); animation: ps-pulse-dot 1.8s infinite ease-in-out; } @keyframes ps-pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.65); } } /* --- accent switch -------------------------------------------------------- */ .ps-theme-switch { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel-bg); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ps-theme-btn { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 8px; border: 1px solid transparent; border-radius: 16px; background: transparent; color: var(--muted); font: 0.6rem/1 "DM Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; -webkit-appearance: none; appearance: none; } .ps-theme-btn:hover { color: var(--text); transform: translateY(-1px); } .ps-theme-btn:focus-visible { outline: 2px solid hsl(var(--ps-swatch-h), 100%, 66.7%); outline-offset: 2px; } .ps-theme-btn[aria-pressed="true"] { border-color: hsla(var(--ps-swatch-h), 100%, 66.7%, 0.55); background: hsla(var(--ps-swatch-h), 100%, 66.7%, 0.12); color: hsl(var(--ps-swatch-h), 100%, 88%); } /* Each swatch shows the colour it applies, whatever the active theme is. */ .ps-theme-dot { width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--ps-swatch-h), 100%, 66.7%); box-shadow: 0 0 10px 2px hsla(var(--ps-swatch-h), 100%, 66.7%, 0.55); transition: transform 0.25s ease; } .ps-theme-btn[aria-pressed="true"] .ps-theme-dot { transform: scale(1.25); } /* --- hero ----------------------------------------------------------------- */ .ps-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(32px, 6vw, 80px); min-height: calc(100vh - 90px); padding: 40px 0 70px; } .ps-intro-content { position: relative; transform-style: preserve-3d; } .ps-eyebrow-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font: 0.72rem/1 "DM Mono", monospace; letter-spacing: 0.15em; text-transform: uppercase; } .ps-eyebrow-tag::before { content: "//"; font-weight: 700; } .ps-main-title { max-width: 680px; margin: 18px 0 0; font-size: clamp(3rem, 6vw, 5.6rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.05em; padding-bottom: 0.12em; } .ps-title-line { display: block; opacity: 0; transform: translate3d(0, 58px, -70px) rotateX(14deg); transform-origin: left bottom; filter: blur(10px); color: transparent; background: linear-gradient(115deg, #ffffff 8%, hsl(calc(var(--ps-h) + 0.3), 100%, 82.4%) 38%, var(--accent) 68%, hsl(calc(var(--ps-h) + 3.1), 70.6%, 45.3%) 92%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; } .ps-intro-content.is-visible .ps-title-line { animation: ps-title-rise 1s cubic-bezier(.16, 1, .3, 1) forwards, ps-title-glow 3s 1.1s ease-in-out infinite alternate; } .ps-intro-content.is-visible .ps-title-line:first-child { animation-delay: .24s, 1.1s; } .ps-intro-content.is-visible .ps-title-line:last-child { animation-delay: .42s, 1.3s; } @keyframes ps-title-rise { to { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0); filter: blur(0); } } @keyframes ps-title-glow { from { background-position: 100% 50%; filter: drop-shadow(0 0 8px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, .28)); } to { background-position: 0 50%; filter: drop-shadow(0 0 22px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, .7)); } } .ps-bio-text { max-width: 620px; margin: 26px 0 0; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.75; } .ps-eyebrow-tag, .ps-bio-text, .ps-section-label { opacity: 0; transform: translateY(20px); filter: blur(6px); } .ps-intro-content.is-visible .ps-eyebrow-tag, .ps-intro-content.is-visible .ps-bio-text, .ps-intro-content.is-visible .ps-section-label { animation: ps-copy-resolve .8s cubic-bezier(.16, 1, .3, 1) forwards; } .ps-intro-content.is-visible .ps-eyebrow-tag { animation-delay: .08s; } .ps-intro-content.is-visible .ps-bio-text { animation-delay: .85s; } .ps-intro-content.is-visible .ps-section-label { animation-delay: 1.08s; } @keyframes ps-copy-resolve { to { opacity: 1; transform: translateY(0); filter: blur(0); } } .ps-bio-text strong { color: var(--accent-soft); font-weight: 600; } .ps-intro-content.is-visible .ps-bio-text strong { animation: ps-copy-highlight 1.1s 1.28s ease both; } @keyframes ps-copy-highlight { 0% { color: inherit; text-shadow: 0 0 0 transparent; } 45% { color: #fff; text-shadow: 0 0 18px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, .72); } 100% { color: var(--accent-soft); text-shadow: 0 0 10px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, .18); } } .ps-section-label { margin: 40px 0 16px; color: hsla(calc(var(--ps-h) - 5.3), 100%, 93.1%, 0.6); font: 0.68rem/1 "DM Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; } /* --- action buttons (the template's social rows, retargeted) -------------- */ .ps-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 580px; perspective: 1000px; } .ps-action-card { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: 14px 18px; overflow: hidden; border-radius: 14px; border: 1px solid hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.22); background: linear-gradient(135deg, hsla(calc(var(--ps-h) - 4), 44.4%, 14.1%, 0.65), hsla(calc(var(--ps-h) + 5), 55.6%, 3.5%, 0.85)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); transform-style: preserve-3d; transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; opacity: 0; transform: translate3d(0, 24px, -30px) rotateX(8deg); } .ps-intro-content.is-visible .ps-action-card, .ps-reveal-item.is-visible .ps-action-card { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0deg); filter: none; } .ps-action-card::before { content: ""; position: absolute; top: 0; left: -120%; width: 80%; height: 100%; background: linear-gradient(90deg, transparent, hsla(calc(var(--ps-h) - 0.4), 100%, 77.3%, 0.22), transparent); transform: skewX(-25deg); transition: left 0.6s ease; } .ps-action-card:hover { border-color: var(--accent); background: linear-gradient(135deg, hsla(calc(var(--ps-h) - 3.8), 49.6%, 24.9%, 0.75), hsla(calc(var(--ps-h) + 3.1), 57.6%, 6.5%, 0.9)); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 25px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.25); transform: translateY(-5px) translateZ(15px) rotateX(4deg); opacity: 1; filter: none; } .ps-action-card:nth-child(even):hover { transform: translateY(-5px) translateZ(15px) rotateX(4deg) rotateY(-2deg); } .ps-action-card:nth-child(odd):hover { transform: translateY(-5px) translateZ(15px) rotateX(4deg) rotateY(2deg); } .ps-action-card:hover::before { left: 150%; } .ps-action-card.is-primary { border-color: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.55); background: linear-gradient(135deg, hsla(calc(var(--ps-h) - 2), 62%, 26%, 0.8), hsla(calc(var(--ps-h) + 4), 60%, 7%, 0.92)); } .ps-action-info { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; font-size: 0.88rem; font-weight: 700; } .ps-action-info, .ps-action-arrow { opacity: 0; } .ps-intro-content.is-visible .ps-action-info, .ps-intro-content.is-visible .ps-action-arrow, .ps-reveal-item.is-visible .ps-action-info, .ps-reveal-item.is-visible .ps-action-arrow { animation: ps-row-detail .5s cubic-bezier(.16, 1, .3, 1) forwards; } .ps-intro-content.is-visible .ps-action-card:nth-child(1) :is(.ps-action-info, .ps-action-arrow) { animation-delay: 1.58s; } .ps-intro-content.is-visible .ps-action-card:nth-child(2) :is(.ps-action-info, .ps-action-arrow) { animation-delay: 1.7s; } .ps-intro-content.is-visible .ps-action-card:nth-child(3) :is(.ps-action-info, .ps-action-arrow) { animation-delay: 1.82s; } .ps-intro-content.is-visible .ps-action-card:nth-child(4) :is(.ps-action-info, .ps-action-arrow) { animation-delay: 1.94s; } @keyframes ps-row-detail { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } .ps-intro-content.is-visible .ps-action-arrow, .ps-reveal-item.is-visible .ps-action-arrow { animation-name: ps-arrow-detail; } @keyframes ps-arrow-detail { from { opacity: 0; transform: translate(-8px, 8px); } to { opacity: 1; transform: translate(0, 0); } } .ps-action-tag { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; border: 1px solid hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.38); background: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.1); color: var(--accent); font: 700 0.78rem/1 "DM Mono", monospace; box-shadow: inset 0 0 8px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.2); } .ps-action-sub { display: block; margin-top: 3px; color: var(--muted); font: 0.58rem/1.3 "DM Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; } .ps-action-arrow { position: relative; z-index: 1; color: var(--accent); font-size: 1.1rem; transition: transform 0.25s ease; } .ps-action-card:hover .ps-action-arrow { transform: translate(5px, -5px); } /* --- the popup stage ------------------------------------------------------ */ .ps-popup-stage { position: relative; min-height: 700px; display: flex; align-items: center; justify-content: center; perspective: 1200px; transform-style: preserve-3d; } .ps-popup-stage .ps-ring-3d, .ps-popup-stage .ps-badge-3d, .ps-popup-stage .ps-card-3d, .ps-popup-stage::before { opacity: 0; } .ps-popup-stage.is-visible .ps-card-3d { animation: ps-card-materialize 1.05s .18s cubic-bezier(.16, 1, .3, 1) forwards; } .ps-popup-stage.is-visible .ps-ring-3d { opacity: 1; } .ps-popup-stage.is-visible .ps-badge-3d { opacity: 1; } .ps-popup-stage.is-visible::before { opacity: 1; animation: ps-projector-pulse 3.8s .55s ease-in-out infinite; } .ps-popup-stage.is-visible .ps-card-inner { animation: ps-image-resolve 1.2s .2s cubic-bezier(.16, 1, .3, 1) both; } .ps-popup-stage.is-visible .ps-hud-corners { animation: ps-hud-lock .75s 1.05s cubic-bezier(.16, 1, .3, 1) both; } @keyframes ps-card-materialize { 0% { opacity: 0; filter: blur(15px) brightness(1.7); } 55% { opacity: 1; filter: blur(2px) brightness(1.28); } 100% { opacity: 1; filter: blur(0) brightness(1); } } @keyframes ps-image-resolve { 0% { opacity: 0; clip-path: inset(48% 0 48% 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } } @keyframes ps-hud-lock { 0% { opacity: 0; filter: blur(7px); } 55% { opacity: 1; filter: blur(0); } 100% { opacity: .7; filter: blur(0); } } /* Projector pool under the card. */ .ps-popup-stage::before { content: ""; position: absolute; left: 50%; bottom: 2%; width: min(390px, 88%); height: 92px; border: 1px solid hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.28); border-radius: 50%; background: radial-gradient(ellipse, hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.22), hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.04) 48%, transparent 72%); box-shadow: 0 0 44px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.2), inset 0 0 26px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.12); transform: translateX(-50%) rotateX(72deg); pointer-events: none; z-index: 1; } @keyframes ps-projector-pulse { 0%, 100% { opacity: 0.45; transform: translateX(-50%) rotateX(72deg) scale(.94); } 50% { opacity: 0.9; transform: translateX(-50%) rotateX(72deg) scale(1.04); } } .ps-ring-3d { position: absolute; top: 50%; left: 50%; width: clamp(380px, 118%, 520px); height: clamp(380px, 118%, 520px); border: 1.5px solid hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.35); border-radius: 50%; transform: translate(-50%, -50%) rotateX(65deg) rotateY(15deg); animation: ps-spin-ring 14s linear infinite; transform-style: preserve-3d; transform-origin: center center; backface-visibility: visible; will-change: transform; pointer-events: none; z-index: 8; } .ps-ring-3d::before { content: ""; position: absolute; top: -7px; left: 20%; width: 14px; height: 14px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 25px 8px var(--accent), 0 0 10px #ffffff; } .ps-ring-3d::after { content: ""; position: absolute; bottom: -6px; right: 18%; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-soft); box-shadow: 0 0 20px 6px var(--accent-soft), 0 0 8px #ffffff; } .ps-ring-3d.ring-2 { width: clamp(340px, 104%, 460px); height: clamp(340px, 104%, 460px); border: 1px dashed hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.25); transform: translate(-50%, -50%) rotateX(75deg) rotateY(-20deg); animation: ps-spin-ring-rev 18s linear infinite; z-index: 7; } .ps-ring-3d.ring-2::before { content: ""; position: absolute; top: 25%; right: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px 5px var(--accent); } @keyframes ps-spin-ring { 0% { transform: translate(-50%, -50%) rotateX(65deg) rotateY(15deg) rotateZ(0deg); } 100% { transform: translate(-50%, -50%) rotateX(65deg) rotateY(15deg) rotateZ(360deg); } } @keyframes ps-spin-ring-rev { 0% { transform: translate(-50%, -50%) rotateX(75deg) rotateY(-20deg) rotateZ(360deg); } 100% { transform: translate(-50%, -50%) rotateX(75deg) rotateY(-20deg) rotateZ(0deg); } } /* The card holds the popup screenshot at its real 372:795 aspect, so the whole popup is on screen rather than a crop of it. */ .ps-card-3d { position: relative; z-index: 9; width: min(318px, 84%); aspect-ratio: 372 / 795; border-radius: 20px; border: 1px solid hsla(calc(var(--ps-h) + 0.6), 100%, 78.4%, 0.4); background: hsl(calc(var(--ps-h) - 5.2), 52%, 4.9%); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75), 18px 22px 0 hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.12), 0 0 40px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.15); transform-style: preserve-3d; transform: rotateY(12deg) rotateX(6deg) translateZ(20px); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease; overflow: hidden; will-change: transform; } .ps-card-3d::before { content: ""; position: absolute; inset: -1px; z-index: 8; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--ps-edge-angle, 0deg), transparent 0 24%, hsla(calc(var(--ps-h) - 0.1), 100%, 86.3%, .9) 30%, transparent 38% 74%, hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, .6) 82%, transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .72; } @supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { .ps-card-3d::before { inset: 0; padding: 0; background: transparent; border: 1px solid hsla(calc(var(--ps-h) - 0.1), 100%, 86.3%, .72); box-shadow: inset 0 0 18px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, .16); } } .ps-card-3d:hover { box-shadow: 0 35px 90px rgba(0, 0, 0, 0.85), 24px 28px 0 hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.18), 0 0 60px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.3); } .ps-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; } /* No grayscale filter here, unlike the template's portrait: the popup's own accent periwinkle is the point of the shot. */ .ps-popup-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: translateZ(0); } .ps-glare { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.22), transparent 70%); opacity: 0.35; mix-blend-mode: overlay; transform: translateZ(30px); transition: opacity 0.2s ease; } .ps-holo-grid { position: absolute; z-index: 3; inset: 0; pointer-events: none; opacity: .14; background-image: linear-gradient(hsla(calc(var(--ps-h) + 0.1), 100%, 77.8%, .26) 1px, transparent 1px), linear-gradient(90deg, hsla(calc(var(--ps-h) + 0.1), 100%, 77.8%, .2) 1px, transparent 1px); background-size: 38px 38px; -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 32%, #000 68%, transparent 96%); mask-image: linear-gradient(to bottom, transparent 4%, #000 32%, #000 68%, transparent 96%); mix-blend-mode: screen; transform: translateZ(22px); } .ps-hud-corners { position: absolute; z-index: 7; inset: 12px; pointer-events: none; transform: translateZ(48px); background: linear-gradient(var(--accent), var(--accent)) left top / 24px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) left top / 1px 24px no-repeat, linear-gradient(var(--accent), var(--accent)) right top / 24px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) right top / 1px 24px no-repeat, linear-gradient(var(--accent), var(--accent)) left bottom / 24px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) left bottom / 1px 24px no-repeat, linear-gradient(var(--accent), var(--accent)) right bottom / 24px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) right bottom / 1px 24px no-repeat; opacity: .5; } .ps-scan-line { position: absolute; z-index: 5; left: -10%; width: 120%; height: 3px; top: 5%; background: hsl(calc(var(--ps-h) + 0.1), 100%, 66.7%); box-shadow: 0 0 18px 4px hsl(calc(var(--ps-h) + 0.1), 100%, 66.7%), 0 0 35px 8px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.6); animation: ps-scan-anim 4s ease-in-out infinite !important; pointer-events: none; transform: translateZ(12px); will-change: top, opacity; } .ps-scan-beam { position: absolute; z-index: 4; left: 0; width: 100%; height: 70px; top: 5%; background: linear-gradient(180deg, hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.28) 0%, transparent 100%); animation: ps-beam-anim 4s ease-in-out infinite !important; pointer-events: none; transform: translateZ(10px); will-change: top, opacity; } @keyframes ps-scan-anim { 0%, 100% { top: 5%; opacity: 0; } 15%, 85% { opacity: 0.95; } 50% { top: 92%; opacity: 1; } } @keyframes ps-beam-anim { 0%, 100% { top: 5%; opacity: 0; } 15%, 85% { opacity: 0.7; } 50% { top: calc(92% - 70px); opacity: 0.85; } } .ps-badge-3d { position: absolute; z-index: 10; padding: 12px 16px; border-radius: 14px; border: 1px solid hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.35); background: hsla(calc(var(--ps-h) + 1), 71.4%, 4.1%, 0.86); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.15); color: var(--accent-soft); font: 0.62rem/1.45 "DM Mono", monospace; letter-spacing: 0.08em; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform-style: preserve-3d; animation: ps-float-badge 5s ease-in-out infinite alternate; } .ps-badge-3d b { color: #fff; font-size: 0.95rem; font-weight: 800; } .ps-badge-3d.badge-1 { top: 3%; right: -13%; transform: translateZ(60px); } .ps-badge-3d.badge-2 { bottom: 12%; left: -8%; color: hsl(calc(var(--ps-h) - 7), 100%, 97.1%); animation-delay: -2.5s; transform: translateZ(55px); } @keyframes ps-float-badge { 0% { transform: translateY(0) translateZ(50px) rotateX(0deg); } 100% { transform: translateY(-14px) translateZ(70px) rotateX(6deg); } } /* --- generic section chrome ----------------------------------------------- */ .ps-section { padding: 74px 0 8px; } .ps-section-head { max-width: 720px; } .ps-section-title { margin: 14px 0 0; font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; } .ps-section-title em { font-style: normal; color: transparent; /* Starts at accent-soft, not white: the gradient is clipped to the box, so a white stop makes short emphasised phrases read as half-uncoloured. */ background: linear-gradient(115deg, var(--accent-soft) 0%, var(--accent) 90%); -webkit-background-clip: text; background-clip: text; } .ps-section-copy { margin: 16px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.72; } .ps-rule { height: 1px; margin: 64px 0 0; background: linear-gradient(90deg, transparent, var(--line), transparent); border: 0; } /* --- panels --------------------------------------------------------------- */ .ps-panel { position: relative; border-radius: 16px; border: 1px solid var(--line); background: var(--panel-bg); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .ps-panel-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font: 0.6rem/1 "DM Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; } /* --- what it stops -------------------------------------------------------- */ .ps-signal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; } .ps-signal { display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(160deg, hsla(calc(var(--ps-h) - 4), 44.4%, 12%, 0.5), hsla(calc(var(--ps-h) + 5), 55.6%, 3.5%, 0.85)); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); transition: transform .3s cubic-bezier(.165, .84, .44, 1), border-color .3s ease, box-shadow .3s ease; } .ps-signal:hover { border-color: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.5); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55), 0 0 24px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.18); transform: translateY(-4px); } .ps-signal-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; border: 1px solid hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.38); background: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.1); box-shadow: inset 0 0 10px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.18); } .ps-signal-icon svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.6; } .ps-signal h3 { margin: 16px 0 0; font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; } .ps-signal p { margin: 9px 0 16px; color: var(--muted); font-size: 0.9rem; line-height: 1.6; } .ps-chip-row { display: flex; flex-wrap: wrap; gap: 6px; /* auto pushes the row to the card floor so the dashed rules line up across cards whose copy runs to different lengths. */ margin-top: auto; padding-top: 15px; border-top: 1px dashed var(--line); } .ps-chip { padding: 4px 9px; border-radius: 7px; border: 1px solid hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.28); background: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.07); color: var(--accent-soft); font: 0.56rem/1 "DM Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; } /* --- screenshot gallery --------------------------------------------------- */ .ps-shots { margin-top: 34px; } .ps-tablist { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ps-tab { flex: 1 1 auto; padding: 10px 14px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--muted); font: 0.62rem/1 "DM Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease; -webkit-appearance: none; appearance: none; } .ps-tab:hover { color: var(--text); transform: translateY(-1px); } .ps-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ps-tab[aria-selected="true"] { border-color: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.5); background: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.12); color: hsl(calc(var(--ps-h) + 0.1), 100%, 88%); } .ps-shot-panel { display: none; } .ps-shot-panel.is-active { display: block; } .ps-shot-layout { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: clamp(26px, 4vw, 54px); margin-top: 28px; } /* A frame the width of the real popup. The screenshots are the full popup, so the taller states scroll inside the frame exactly as they do in the browser. */ .ps-shot-frame { width: 372px; max-width: 100%; border-radius: 14px; border: 1px solid hsla(calc(var(--ps-h) + 0.6), 100%, 78.4%, 0.34); background: hsl(calc(var(--ps-h) - 5.2), 52%, 4.9%); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.7), 0 0 34px hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.12); overflow: hidden; } .ps-shot-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.16); background: hsla(calc(var(--ps-h) + 1), 40%, 8%, 0.9); } .ps-shot-dots { display: inline-flex; gap: 5px; } .ps-shot-dots i { width: 8px; height: 8px; border-radius: 50%; background: hsla(calc(var(--ps-h) - 5), 20%, 55%, 0.5); } .ps-shot-dots i:first-child { background: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.75); } .ps-shot-bar span { color: var(--muted); font: 0.56rem/1 "DM Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ps-shot-view { max-height: min(640px, 72vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.4) transparent; } .ps-shot-view img { display: block; width: 372px; max-width: 100%; height: auto; } .ps-shot-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.16); background: hsla(calc(var(--ps-h) + 1), 40%, 8%, 0.9); color: var(--muted); font: 0.54rem/1 "DM Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; } .ps-shot-note { padding-top: 4px; } .ps-shot-note h3 { margin: 12px 0 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.025em; } .ps-shot-note p { margin: 14px 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.72; } .ps-shot-note code { padding: 1px 5px; border-radius: 5px; background: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.12); color: var(--accent-soft); font-family: "DM Mono", monospace; font-size: 0.85em; } .ps-readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 1px; margin-top: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--line); overflow: hidden; } .ps-readout div { padding: 13px 14px; background: hsla(calc(var(--ps-h) + 1), 45%, 5.5%, 0.92); } .ps-readout b { display: block; font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } .ps-readout span { display: block; margin-top: 3px; color: var(--muted); font: 0.54rem/1.3 "DM Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; } /* --- how it works --------------------------------------------------------- */ .ps-layer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; } .ps-layer { position: relative; padding: 24px 22px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(160deg, hsla(calc(var(--ps-h) - 4), 44.4%, 12%, 0.45), hsla(calc(var(--ps-h) + 5), 55.6%, 3.5%, 0.85)); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); } .ps-layer-num { font: 700 0.68rem/1 "DM Mono", monospace; letter-spacing: 0.16em; color: var(--accent); } .ps-layer h3 { margin: 14px 0 0; font-size: 1.08rem; font-weight: 700; letter-spacing: -0.02em; } .ps-layer p { margin: 10px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.65; } .ps-layer code { padding: 1px 5px; border-radius: 5px; background: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.12); color: var(--accent-soft); font-family: "DM Mono", monospace; font-size: 0.84em; } /* --- comparison figure ---------------------------------------------------- */ /* The illustration is square and dense; full container width would make it tower over the layer cards above it, so it is capped and centred. */ .ps-figure { margin: 34px auto 0; max-width: 620px; text-align: center; } /* The store captures are 16:10, so they read fine at the container's full width. */ .ps-figure.is-wide { max-width: none; } /* Two 16:10 shots side by side; each still gets ~540 px, enough for the popup panel inside them to stay legible. Stacks under 940px with the other grids. */ .ps-figure-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 30px); align-items: start; } .ps-figure-strip .ps-figure { margin-top: clamp(18px, 3vw, 30px); } .ps-figure-frame { padding: 10px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel-bg); box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55); } .ps-figure-frame img { display: block; width: 100%; height: auto; border-radius: 12px; } .ps-figure figcaption { margin-top: 14px; color: var(--muted); font: 0.62rem/1.6 "DM Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; } /* --- privacy -------------------------------------------------------------- */ .ps-privacy-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 48px); align-items: start; margin-top: 34px; } .ps-tick-list { list-style: none; } .ps-tick-list li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px dashed var(--line); color: var(--muted); font-size: 0.94rem; line-height: 1.6; } .ps-tick-list li:last-child { border-bottom: 0; } .ps-tick-list li::before { content: "✓"; position: absolute; left: 0; top: 12px; color: var(--accent); font-weight: 700; } .ps-tick-list b { color: var(--text); font-weight: 650; } .ps-tick-list.is-negative li::before { content: "✕"; color: hsl(calc(var(--ps-h) - 12), 30%, 62%); } .ps-table-wrap { overflow-x: auto; } .ps-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .ps-table caption { padding-bottom: 12px; color: var(--accent); font: 0.6rem/1 "DM Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; text-align: left; } .ps-table th, .ps-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.55; } .ps-table thead th { color: var(--accent-soft); font: 0.58rem/1 "DM Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; border-bottom-color: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.4); } .ps-table td:first-child { color: var(--text); font-weight: 560; } .ps-table td:last-child { color: var(--muted); } .ps-table tbody tr:last-child td { border-bottom: 0; } .ps-callout { display: flex; gap: 14px; margin-top: 26px; padding: 18px 20px; border-radius: 14px; border: 1px solid hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.4); background: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.07); } .ps-callout strong { display: block; font-size: 0.98rem; letter-spacing: -0.01em; } .ps-callout p { margin: 6px 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.62; } .ps-callout code { padding: 1px 5px; border-radius: 5px; background: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.14); color: var(--accent-soft); font-family: "DM Mono", monospace; font-size: 0.85em; } /* --- install -------------------------------------------------------------- */ .ps-install-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; } .ps-steps { margin-top: 34px; counter-reset: step; list-style: none; } .ps-steps li { position: relative; padding: 14px 0 14px 46px; border-bottom: 1px dashed var(--line); color: var(--muted); font-size: 0.94rem; line-height: 1.65; counter-increment: step; } .ps-steps li:last-child { border-bottom: 0; } .ps-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 13px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.34); background: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.09); color: var(--accent); font: 700 0.66rem/1 "DM Mono", monospace; } .ps-steps b { color: var(--text); font-weight: 650; } .ps-steps code, .ps-install-note code { padding: 1px 6px; border-radius: 5px; background: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.12); color: var(--accent-soft); font-family: "DM Mono", monospace; font-size: 0.86em; } /* Unpacked-install fallback under the store steps: same measure as the steps, set back so it reads as a footnote to them rather than a seventh step. */ .ps-install-note { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); max-width: 760px; color: var(--muted); font-size: 0.88rem; line-height: 1.7; } .ps-install-note b { color: var(--text); font-weight: 650; } .ps-install-note a { color: var(--accent-soft); text-decoration-color: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.4); text-underline-offset: 3px; } .ps-install-note a:hover { color: var(--accent); } /* --- prose (privacy page) ------------------------------------------------- */ .ps-prose { max-width: 760px; padding: 44px 0 20px; } .ps-prose h2 { margin: 44px 0 0; font-size: 1.45rem; font-weight: 750; letter-spacing: -0.025em; } .ps-prose h3 { margin: 30px 0 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; } .ps-prose p, .ps-prose li { margin: 14px 0 0; color: var(--muted); font-size: 0.98rem; line-height: 1.78; } .ps-prose ul { margin: 8px 0 0; padding-left: 22px; } .ps-prose li { margin-top: 8px; } .ps-prose strong { color: var(--text); font-weight: 650; } .ps-prose code { padding: 1px 6px; border-radius: 5px; background: hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.12); color: var(--accent-soft); font-family: "DM Mono", monospace; font-size: 0.86em; } .ps-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .ps-prose .ps-table { margin-top: 20px; } .ps-updated { margin-top: 12px; color: var(--muted); font: 0.62rem/1 "DM Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; } /* --- footer --------------------------------------------------------------- */ .ps-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 70px; padding: 28px 0 40px; border-top: 1px solid hsla(calc(var(--ps-h) + 0.1), 100%, 66.7%, 0.14); color: hsla(calc(var(--ps-h) - 5), 75%, 92.2%, 0.5); font: 0.64rem/1.5 "DM Mono", monospace; letter-spacing: 0.08em; } .ps-footer a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; } .ps-footer.ps-reveal-item { transform: translateY(18px); } .ps-footer.ps-reveal-item.is-visible { transform: translateY(0); } .ps-footer > span { opacity: 0; } .ps-footer.is-visible > span { animation: ps-footer-in .7s ease forwards; } .ps-footer.is-visible > span:last-child { animation-delay: .16s; } @keyframes ps-footer-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* --- reveal --------------------------------------------------------------- */ .ps-reveal-item { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.16, 1, .3, 1); } .ps-reveal-item.is-visible { opacity: 1; transform: translateY(0); } /* --- responsive ----------------------------------------------------------- */ @media (max-width: 1020px) { .ps-nav { display: none; } } @media (max-width: 940px) { .ps-signal-grid, .ps-layer-grid, .ps-figure-strip, .ps-install-grid { grid-template-columns: minmax(0, 1fr); } .ps-privacy-grid { grid-template-columns: minmax(0, 1fr); } .ps-shot-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; } .ps-shot-note { max-width: 560px; } } @media (max-width: 880px) { .ps-hero-grid { grid-template-columns: 1fr; gap: 30px; min-height: auto; padding: 30px 0 60px; } .ps-popup-stage { order: -1; min-height: 620px; /* The card now fills the stage, so the badges cannot orbit it without covering the screenshot. Stack them underneath instead — a row would leave the card sitting off-centre inside the rings. */ flex-direction: column; gap: 14px; } .ps-card-3d { width: min(300px, 78vw); transform: rotateY(0deg) rotateX(0deg) translateZ(0); } /* Mobile browsers flatten these 3D layers; keep the motion readable in 2D. */ .ps-ring-3d, .ps-ring-3d.ring-2 { transform: translate(-50%, -50%); transform-style: flat; } .ps-ring-3d { animation: ps-spin-ring-mobile 14s linear infinite !important; } .ps-ring-3d.ring-2 { animation: ps-spin-ring-mobile-rev 18s linear infinite !important; } .ps-scan-line, .ps-scan-beam { transform: none; } .ps-badge-3d { position: static; transform: none; animation: none; text-align: center; } .ps-intro-content { text-align: center; } .ps-eyebrow-tag { justify-content: center; } .ps-main-title, .ps-bio-text { margin-left: auto; margin-right: auto; } .ps-action-grid { margin-left: auto; margin-right: auto; text-align: left; } .ps-section { padding-top: 58px; } } @keyframes ps-spin-ring-mobile { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes ps-spin-ring-mobile-rev { from { transform: translate(-50%, -50%) rotate(360deg); } to { transform: translate(-50%, -50%) rotate(0deg); } } @media (max-width: 540px) { .ps-container { width: min(100% - 24px, 1140px); } .ps-header { padding: 18px 0; flex-wrap: nowrap; gap: 10px; } .ps-header-tools { flex-wrap: nowrap; flex: 0 0 auto; gap: 8px; } .ps-brand-mark { min-width: 0; gap: 10px; } .ps-brand-badge { width: 34px; height: 34px; flex: 0 0 auto; } .ps-brand-badge img { width: 23px; height: 23px; } .ps-brand-text { font-size: 0.8rem; letter-spacing: 0.12em; white-space: nowrap; } .ps-status-pill { font-size: 0.56rem; padding: 5px 10px; flex: 0 0 auto; } /* Swatch dots only — the labels are what made the switch too wide. */ .ps-theme-switch { gap: 4px; padding: 4px 5px; } .ps-theme-label { display: none; } .ps-theme-btn { gap: 0; padding: 7px; border-radius: 50%; } .ps-popup-stage { min-height: 560px; } .ps-card-3d { width: min(272px, 82vw); border-radius: 16px; } .ps-badge-3d { padding: 8px 12px; font-size: 0.54rem; border-radius: 10px; } .ps-badge-3d b { font-size: 0.82rem; } .ps-main-title { font-size: clamp(2.4rem, 11vw, 3.4rem); } .ps-bio-text { font-size: 0.95rem; line-height: 1.7; } .ps-action-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .ps-action-card { min-height: 54px; padding: 11px 14px; border-radius: 12px; } .ps-action-info { gap: 10px; font-size: 0.84rem; } .ps-tab { flex: 1 1 100%; } .ps-shot-frame { width: 100%; } .ps-shot-view img { width: 100%; } .ps-footer { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 22px; } .ps-orb-3d.one { left: -140px; width: 250px; height: 250px; } } @media (max-width: 480px) { /* Below this the brand, the version pill and the swatches stop fitting on one line, and the pill starts sitting on top of the wordmark. Give the tools their own row rather than dropping any of them. */ .ps-header { flex-wrap: wrap; } .ps-header-tools { width: 100%; justify-content: space-between; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ps-app *, .ps-app *::before, .ps-app *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* The ambient layers are the page's character, not decoration on top of content, so they keep running at a slower, non-parallax pace. */ .ps-app .ps-ring-3d { animation: ps-spin-ring-mobile 24s linear infinite !important; } .ps-app .ps-ring-3d.ring-2 { animation: ps-spin-ring-mobile-rev 30s linear infinite !important; } .ps-app .ps-orb-3d::before { animation: ps-planet-rotate 30s linear infinite !important; } .ps-app .ps-orb-3d::after { animation: ps-planet-glow 6s ease-in-out infinite !important; } .ps-app .ps-scan-line, .ps-app .ps-scan-beam, .ps-app .ps-popup-stage::before { animation: none !important; opacity: 0 !important; } .ps-app .ps-brand-mark, .ps-app .ps-nav, .ps-app .ps-status-pill, .ps-app .ps-theme-switch, .ps-app .ps-title-line, .ps-app .ps-eyebrow-tag, .ps-app .ps-bio-text, .ps-app .ps-section-label, .ps-app .ps-action-card, .ps-app .ps-action-info, .ps-app .ps-action-arrow, .ps-app .ps-reveal-item, .ps-app .ps-card-3d, .ps-app .ps-card-inner, .ps-app .ps-ring-3d, .ps-app .ps-badge-3d, .ps-app .ps-hud-corners, .ps-app .ps-footer > span { opacity: 1; transform: none; filter: none; animation: none !important; } /* Overridden after the reset above, which would otherwise flatten the rings out of their orbit and stop them turning. */ .ps-app .ps-ring-3d { transform: translate(-50%, -50%); animation: ps-spin-ring-mobile 24s linear infinite !important; } .ps-app .ps-ring-3d.ring-2 { animation: ps-spin-ring-mobile-rev 30s linear infinite !important; } } /* Without JS nothing ever gets .is-visible, so every reveal would stay at opacity 0 and the page would look empty. Show it all instead. */ html.no-js .ps-app .ps-brand-mark, html.no-js .ps-app .ps-nav, html.no-js .ps-app .ps-status-pill, html.no-js .ps-app .ps-theme-switch, html.no-js .ps-app .ps-title-line, html.no-js .ps-app .ps-eyebrow-tag, html.no-js .ps-app .ps-bio-text, html.no-js .ps-app .ps-section-label, html.no-js .ps-app .ps-action-card, html.no-js .ps-app .ps-action-info, html.no-js .ps-app .ps-action-arrow, html.no-js .ps-app .ps-reveal-item, html.no-js .ps-app .ps-card-3d, html.no-js .ps-app .ps-card-inner, html.no-js .ps-app .ps-ring-3d, html.no-js .ps-app .ps-badge-3d, html.no-js .ps-app .ps-hud-corners, html.no-js .ps-app .ps-popup-stage::before, html.no-js .ps-app .ps-footer > span { opacity: 1; transform: none; filter: none; animation: none !important; } html.no-js .ps-app .ps-ring-3d { transform: translate(-50%, -50%); } html.no-js .ps-app .ps-header::after { transform: scaleX(1); opacity: .22; } /* All six panels stack, so every screenshot is still reachable. */ html.no-js .ps-app .ps-tablist { display: none; } html.no-js .ps-app .ps-shot-panel { display: block; } html.no-js .ps-app .ps-shot-panel + .ps-shot-panel { margin-top: 40px; } html.no-js .ps-app .ps-shot-view { max-height: none; }