/** Shopify CDN: Minification failed Line 4119:0 Unexpected "}" **/ /* ======================================================================== PRINTAVERSE CUSTOM THEME CSS — FIXED VERSION - Removed @import (Shopify Custom CSS doesn't allow it) - Removed overly broad selectors that could break Shopify UI - Google Fonts now loaded via theme.liquid instead ======================================================================== */ :root { --pv-navy: #07051a; --pv-deep: #14082f; --pv-panel: #1c0b40; --pv-purple: #6b35d4; --pv-purple-light: #8b5cf6; --pv-pink: #e040fb; --pv-pink-soft: #c850c0; --pv-cyan: #00d4ff; --pv-cyan-soft: #40e0d0; --pv-white: #ffffff; --pv-text: #e8e0ff; --pv-text-dim: rgba(232, 224, 255, 0.6); --pv-text-dimmer: rgba(232, 224, 255, 0.35); --pv-glow: 0 0 24px rgba(107, 53, 212, 0.5); } /* ===== AGGRESSIVE GLOBAL OVERRIDES ===== Horizon uses color schemes that set bg colors on many elements. We force-override them all and reset their bg variables. */ html, html body { background: #050410 !important; background-color: #050410 !important; } body { color: var(--pv-text) !important; font-family: 'Space Grotesk', system-ui, sans-serif !important; } /* Force-transparent ALL Horizon section/layout wrappers */ body main, body .shopify-section, body .shopify-section-group-header-group, body .shopify-section-group-footer-group, body section, body .section, body .page-width, body [class*="color-scheme"], body [class*="color-background"], body [data-section-type] { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* Override Horizon CSS variables for color schemes that paint backgrounds */ html body, html [class*="color-scheme-"] { --color-background: transparent !important; --color-background-1: transparent !important; --color-background-2: transparent !important; --color-background-secondary: transparent !important; --color-foreground: #e8e0ff !important; } .quantity__input, .quantity input, input[type="number"] { color: #000000 !important; background-color: #ffffff !important; } .pv-display { font-family: 'Audiowide', cursive; letter-spacing: 0.04em; } /* ===== COSMIC BACKGROUND SYSTEM ===== */ .pv-cosmos { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; background: radial-gradient(ellipse at 25% 30%, rgba(40, 10, 70, 0.6) 0%, transparent 50%), radial-gradient(ellipse at 75% 70%, rgba(70, 10, 100, 0.5) 0%, transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(10, 30, 80, 0.4) 0%, transparent 60%), linear-gradient(180deg, #02010a 0%, #060318 50%, #04020e 100%); } .pv-milky-way { position: absolute; top: 20%; left: -20%; width: 140%; height: 60%; transform: rotate(-15deg); opacity: 0.7; } .pv-milky-way::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(180, 140, 220, 0.4), transparent 70%), radial-gradient(ellipse 80% 30% at 50% 50%, rgba(220, 180, 255, 0.25), transparent 70%), radial-gradient(ellipse 100% 20% at 50% 50%, rgba(255, 200, 230, 0.15), transparent 70%); filter: blur(40px); } .pv-black-hole { position: absolute; top: 65%; left: 8%; width: 120px; height: 120px; animation: pv-blackhole-spin 30s linear infinite; } .pv-event-horizon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; background: radial-gradient(circle, #000 30%, #1a0033 70%, transparent 100%); border-radius: 50%; box-shadow: 0 0 24px rgba(140, 80, 220, 0.6); z-index: 3; } .pv-accretion-disk { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0%, rgba(255,100,200,0.6) 10%, rgba(255,200,100,0.8) 25%, rgba(255,240,180,0.9) 35%, rgba(180,100,255,0.7) 50%, transparent 60%, rgba(100,180,255,0.5) 75%, rgba(255,100,200,0.6) 90%, transparent 100%); filter: blur(8px); transform: scaleY(0.3) rotate(15deg); animation: pv-disk-spin 8s linear infinite; } .pv-accretion-disk-2 { position: absolute; inset: 10px; border-radius: 50%; background: conic-gradient(from 90deg, transparent 0%, rgba(255,180,120,0.7) 20%, rgba(255,220,180,0.9) 40%, rgba(200,140,255,0.7) 60%, transparent 80%); filter: blur(6px); transform: scaleY(0.25) rotate(-10deg); animation: pv-disk-spin 5s linear infinite reverse; } .pv-bh-glow { position: absolute; inset: -40px; background: radial-gradient(circle, rgba(255, 180, 220, 0.2) 0%, transparent 60%); border-radius: 50%; animation: pv-pulse-glow 4s ease-in-out infinite; } .pv-starfield-svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: pv-starfield-twinkle 5s ease-in-out infinite; } /* .pv-starfield-svg-2 removed for performance */ .pv-sparkle { position: absolute; width: 16px; height: 16px; opacity: 0; animation: pv-sparkle-twinkle 4s ease-in-out infinite; } .pv-sparkle::before, .pv-sparkle::after { content: ''; position: absolute; background: linear-gradient(90deg, transparent, white, transparent); border-radius: 999px; } .pv-sparkle::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); box-shadow: 0 0 4px white; } .pv-sparkle::after { left: 50%; top: 0; bottom: 0; width: 1.5px; background: linear-gradient(180deg, transparent, white, transparent); transform: translateX(-50%); box-shadow: 0 0 4px white; } .pv-planet { position: absolute; border-radius: 50%; animation: pv-planet-drift 40s ease-in-out infinite; } .pv-planet-1 { width: 90px; height: 90px; top: 8%; right: 5%; background: radial-gradient(circle at 30% 30%, #ff8fce 0%, #c850c0 30%, #6b35d4 70%, #14082f 100%); box-shadow: 0 0 50px rgba(224,64,251,0.5), inset -10px -10px 30px rgba(0,0,0,0.5); } .pv-planet-1::after { content: ''; position: absolute; top: 45%; left: -30%; width: 160%; height: 14px; border: 2px solid rgba(224,64,251,0.6); border-radius: 50%; transform: rotate(-20deg); box-shadow: 0 0 12px rgba(224,64,251,0.4); } .pv-planet-2 { width: 50px; height: 50px; top: 52%; right: 3%; background: radial-gradient(circle at 30% 30%, #80f0ff 0%, #00d4ff 40%, #1a5688 80%, #07051a 100%); box-shadow: 0 0 30px rgba(0,212,255,0.6), inset -5px -5px 15px rgba(0,0,0,0.6); animation-duration: 60s; animation-delay: -10s; } .pv-planet-3 { width: 35px; height: 35px; top: 38%; right: 22%; background: radial-gradient(circle at 30% 30%, #c4a8ff 0%, #8b5cf6 40%, #4a2a8a 80%, #14082f 100%); box-shadow: 0 0 22px rgba(139,92,246,0.6), inset -4px -4px 10px rgba(0,0,0,0.5); animation-duration: 70s; animation-delay: -25s; } .pv-planet-4 { width: 28px; height: 28px; top: 22%; left: 4%; background: radial-gradient(circle at 30% 30%, #fff5b8 0%, #ffd470 40%, #c08020 80%, #4a2010 100%); box-shadow: 0 0 20px rgba(255,212,112,0.5), inset -3px -3px 8px rgba(0,0,0,0.5); animation-duration: 80s; animation-delay: -15s; } .pv-planet-5 { width: 18px; height: 18px; top: 4%; left: 55%; background: radial-gradient(circle at 30% 30%, #ffb0c8 0%, #e040fb 50%, #6b1f8a 90%); box-shadow: 0 0 14px rgba(224,64,251,0.6), inset -2px -2px 5px rgba(0,0,0,0.4); animation-duration: 90s; animation-delay: -40s; } .pv-planet-6 { width: 65px; height: 65px; top: 75%; right: 35%; background: radial-gradient(circle at 25% 25%, #d4ffec 0%, #50e3a4 35%, #1e7050 70%, #052520 100%); box-shadow: 0 0 35px rgba(80,227,164,0.4), inset -7px -7px 20px rgba(0,0,0,0.5); animation-duration: 55s; animation-delay: -20s; } .pv-planet-7 { width: 22px; height: 22px; top: 88%; left: 42%; background: radial-gradient(circle at 30% 30%, #ffaa70 0%, #ff6633 50%, #8a2010 90%); box-shadow: 0 0 16px rgba(255,102,51,0.5), inset -2px -2px 6px rgba(0,0,0,0.5); animation-duration: 65s; animation-delay: -30s; } .pv-planet-8 { width: 45px; height: 45px; top: 12%; left: 32%; background: radial-gradient(circle at 30% 30%, #c8e0ff 0%, #6090e0 40%, #20447a 80%, #051028 100%); box-shadow: 0 0 28px rgba(96,144,224,0.5), inset -5px -5px 14px rgba(0,0,0,0.5); animation-duration: 75s; animation-delay: -45s; } .pv-planet-8::after { content: ''; position: absolute; top: 48%; left: -20%; width: 140%; height: 8px; border: 1.5px solid rgba(96,144,224,0.5); border-radius: 50%; transform: rotate(15deg); } .pv-planet-9 { width: 12px; height: 12px; top: 45%; left: 78%; background: radial-gradient(circle at 30% 30%, #ffd8d8 0%, #ff8080 50%, #802020 90%); box-shadow: 0 0 10px rgba(255,128,128,0.5); animation-duration: 100s; animation-delay: -55s; } .pv-comet { position: absolute; width: 3px; height: 3px; background: white; border-radius: 50%; box-shadow: 0 0 6px white, 0 0 12px rgba(255,255,255,0.5); } .pv-comet::before { content: ''; position: absolute; top: 50%; right: 100%; width: 100px; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9)); transform: translateY(-50%); border-radius: 999px; box-shadow: 0 0 8px rgba(255,255,255,0.6); } .pv-comet-1 { top: 15%; left: -10%; animation: pv-comet-fly-1 8s linear infinite 2s; } .pv-comet-2 { top: 55%; left: -10%; animation: pv-comet-fly-2 12s linear infinite 6s; } .pv-comet-3 { top: 30%; left: -10%; animation: pv-comet-fly-3 10s linear infinite 9s; } .pv-nebula-blob { position: absolute; border-radius: 50%; filter: blur(40px); animation: pv-nebula-pulse 20s ease-in-out infinite; } .pv-nebula-1 { width: 600px; height: 600px; top: -15%; left: -10%; background: radial-gradient(circle, rgba(224,64,251,0.9), transparent 70%); opacity: 0.55; } .pv-nebula-2 { width: 700px; height: 700px; top: 35%; right: -15%; background: radial-gradient(circle, rgba(107,53,212,0.9), transparent 70%); opacity: 0.55; animation-delay: -7s; } .pv-nebula-3 { width: 500px; height: 500px; bottom: 0%; left: 25%; background: radial-gradient(circle, rgba(0,212,255,0.7), transparent 70%); opacity: 0.45; animation-delay: -13s; } .pv-nebula-4 { width: 450px; height: 450px; top: 60%; left: 60%; background: radial-gradient(circle, rgba(255,100,200,0.75), transparent 70%); opacity: 0.5; animation-delay: -3s; } .pv-nebula-5 { width: 350px; height: 350px; top: 80%; left: 5%; background: radial-gradient(circle, rgba(80,227,164,0.6), transparent 70%); opacity: 0.4; animation-delay: -17s; } .pv-ufo { position: absolute; top: 25%; left: -120px; width: 80px; height: 32px; animation: pv-ufo-fly 35s linear infinite 8s; z-index: 2; } .pv-ufo .pv-ufo-body { position: absolute; bottom: 0; left: 0; width: 80px; height: 18px; background: linear-gradient(180deg, #c0c0d0 0%, #6a6a85 50%, #2a2a3a 100%); border-radius: 50%; box-shadow: inset 0 -3px 8px rgba(0,0,0,0.6), inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 20px rgba(0,212,255,0.6); } .pv-ufo .pv-ufo-dome { position: absolute; top: 0; left: 22px; width: 36px; height: 24px; background: radial-gradient(ellipse at 30% 30%, rgba(180,240,255,0.95) 0%, rgba(80,180,230,0.7) 50%, rgba(30,80,130,0.5) 100%); border-radius: 50% 50% 30% 30% / 100% 100% 30% 30%; box-shadow: inset 2px 2px 6px rgba(255,255,255,0.6), 0 0 12px rgba(0,200,255,0.5); } .pv-ufo .pv-ufo-lights { position: absolute; bottom: 4px; left: 8px; width: 64px; height: 4px; background: repeating-linear-gradient(90deg, #ffeb3b 0, #ffeb3b 3px, transparent 3px, transparent 9px); border-radius: 2px; animation: pv-ufo-lights 0.4s linear infinite; filter: drop-shadow(0 0 4px #ffeb3b); } .pv-ufo .pv-ufo-beam { position: absolute; bottom: -50px; left: 26px; width: 28px; height: 60px; background: linear-gradient(180deg, rgba(180,240,255,0.5) 0%, rgba(180,240,255,0.15) 60%, transparent 100%); clip-path: polygon(35% 0%, 65% 0%, 100% 100%, 0% 100%); filter: blur(2px); opacity: 0.7; } .pv-ufo .pv-ufo-trail { position: absolute; top: 50%; right: 100%; width: 120px; height: 2px; background: linear-gradient(90deg, transparent, rgba(0,212,255,0.6), rgba(255,100,200,0.4)); transform: translateY(-50%); border-radius: 999px; filter: blur(1px); } @keyframes pv-starfield-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } } @keyframes pv-starfield-drift { 0% { transform: translate(0, 0); } 100% { transform: translate(-8%, -5%); } } @keyframes pv-blackhole-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pv-disk-spin { 0% { transform: scaleY(0.3) rotate(0deg); } 100% { transform: scaleY(0.3) rotate(360deg); } } @keyframes pv-pulse-glow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } @keyframes pv-sparkle-twinkle { 0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(180deg); } } @keyframes pv-planet-drift { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(20px, -15px) rotate(2deg); } 50% { transform: translate(-10px, 25px) rotate(-2deg); } 75% { transform: translate(15px, 10px) rotate(1deg); } } @keyframes pv-nebula-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } @keyframes pv-comet-fly-1 { 0% { transform: translate(0, 0); opacity: 0; } 5% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(120vw, 40vh); opacity: 0; } } @keyframes pv-comet-fly-2 { 0% { transform: translate(0, 0); opacity: 0; } 5% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(120vw, -30vh); opacity: 0; } } @keyframes pv-comet-fly-3 { 0% { transform: translate(0, 0); opacity: 0; } 5% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(120vw, 50vh); opacity: 0; } } @keyframes pv-ufo-fly { 0% { transform: translate(0, 0) rotate(-3deg); opacity: 0; } 3% { opacity: 1; } 50% { transform: translate(60vw, -8vh) rotate(2deg); } 97% { opacity: 1; } 100% { transform: translate(120vw, 5vh) rotate(-1deg); opacity: 0; } } @keyframes pv-ufo-lights { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } } @keyframes pv-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-15px) rotate(2deg); } } /* ===== HERO SECTION ===== */ .pv-hero { position: relative; z-index: 5; min-height: 520px; padding: 60px 32px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; overflow: hidden; max-width: 1400px; margin: 0 auto; } .pv-hero-content { position: relative; z-index: 2; } .pv-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(107, 53, 212, 0.25); border: 1px solid rgba(107, 53, 212, 0.5); padding: 6px 14px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--pv-purple-light); margin-bottom: 18px; } .pv-hero-badge .pv-dot { width: 6px; height: 6px; background: var(--pv-cyan); border-radius: 50%; box-shadow: 0 0 8px var(--pv-cyan); animation: pv-pulse 1.5s ease infinite; } @keyframes pv-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } } .pv-hero h1 { font-family: 'Audiowide', cursive !important; font-size: clamp(40px, 6vw, 72px) !important; line-height: 1 !important; letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: 20px !important; background: linear-gradient(180deg, #fff 0%, #d4c4ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 60px rgba(107, 53, 212, 0.5); } .pv-hero h1 em { font-style: normal; background: linear-gradient(180deg, #e040fb 0%, #c850c0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .pv-hero p { font-size: 16px; color: var(--pv-text-dim); margin-bottom: 28px; max-width: 440px; line-height: 1.6; } .pv-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; } .pv-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 10px; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border: none; transition: all 0.2s; text-decoration: none; } .pv-btn-primary { background: linear-gradient(135deg, var(--pv-purple), var(--pv-pink-soft)); color: white; box-shadow: 0 4px 20px rgba(107, 53, 212, 0.5); } .pv-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(224,64,251,0.6); } .pv-btn-ghost { background: rgba(107, 53, 212, 0.1); border: 1.5px solid rgba(107, 53, 212, 0.5); color: var(--pv-purple-light); backdrop-filter: blur(10px); } .pv-btn-ghost:hover { border-color: var(--pv-cyan); color: var(--pv-cyan); background: rgba(0, 212, 255, 0.1); } .pv-hero-stats { display: flex; gap: 32px; margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(107, 53, 212, 0.25); } .pv-stat-num { font-family: 'Audiowide', cursive; font-size: 28px; color: var(--pv-cyan); display: block; text-shadow: 0 0 12px rgba(0, 212, 255, 0.5); } .pv-stat-label { font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--pv-text-dimmer); margin-top: 4px; } .pv-hero-mascot { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; } .pv-hero-mascot img { max-width: 100%; max-height: 480px; filter: drop-shadow(0 0 22px rgba(224, 64, 251, 0.5)) drop-shadow(0 0 50px rgba(107, 53, 212, 0.4)) drop-shadow(0 24px 50px rgba(0, 0, 0, 0.55)); animation: pv-float 6s ease-in-out infinite; } .pv-orbit-ring { position: absolute; inset: 0; border: 1px solid rgba(107, 53, 212, 0.2); border-radius: 50%; animation: pv-spin 30s linear infinite; } .pv-orbit-ring::before { content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; background: var(--pv-pink); border-radius: 50%; box-shadow: 0 0 12px var(--pv-pink); } @keyframes pv-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (max-width: 900px) { .pv-hero { grid-template-columns: 1fr; text-align: center; } .pv-hero-mascot { order: -1; min-height: 300px; } .pv-hero-stats { justify-content: center; } } /* ======================================================================== PHASE 3A — Horizon section overrides + Product card styling ======================================================================== */ /* ===== ANNOUNCEMENT BAR ===== */ body .announcement-bar, body [class*="announcement-bar"] { background: linear-gradient(90deg, var(--pv-purple) 0%, var(--pv-pink-soft) 50%, var(--pv-purple) 100%) !important; background-size: 200% auto !important; animation: pv-shimmer 6s linear infinite; color: white !important; } body .announcement-bar__message, body [class*="announcement-bar"] p, body [class*="announcement-bar"] span { color: white !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-size: 11px !important; } @keyframes pv-shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } } /* ===== HEADER / NAV ===== */ body header, body .header, body header-component { background: rgba(7, 5, 26, 0.55) !important; backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border-bottom: 1px solid rgba(107, 53, 212, 0.3) !important; } body .header a, body header a, body .header__inline-menu a, body .header__menu-item { color: var(--pv-text) !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px !important; } body .header a:hover, body header a:hover { color: var(--pv-cyan) !important; } /* ===== SECTION HEADINGS (Audiowide cosmic font) ===== */ body h1, body h2, body h3, body .h0, body .h1, body .h2, body .h3, body .section__heading, body .collection__title, body .section-header__title, body [class*="heading"] { font-family: 'Audiowide', cursive !important; color: #fff !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } /* ===== PRODUCT CARDS — Only on collection / index pages, NOT on PDP ===== */ .template-index .card, .template-index .card-wrapper, .template-index [class*="product-card"], .template-collection .card, .template-collection .card-wrapper, .template-collection [class*="product-card"] { background: rgba(28, 11, 64, 0.6) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(107, 53, 212, 0.35) !important; border-radius: 14px !important; overflow: hidden !important; transition: all 0.25s !important; box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important; } .template-index .card:hover, .template-collection .card:hover { transform: translateY(-6px); border-color: var(--pv-pink) !important; box-shadow: 0 16px 40px rgba(107, 53, 212, 0.4) !important; } /* Product titles on index/collection */ .template-index .card__heading, .template-collection .card__heading, .template-index .full-unstyled-link, .template-collection .full-unstyled-link, .template-index [class*="product-card"] a, .template-collection [class*="product-card"] a { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: 'Audiowide', cursive !important; font-size: 14px !important; text-decoration: none !important; } /* Prices on index/collection */ .template-index .price, .template-collection .price, .template-index .price *, .template-collection .price *, .template-index .money, .template-collection .money { color: var(--pv-cyan) !important; -webkit-text-fill-color: var(--pv-cyan) !important; font-family: 'Audiowide', cursive !important; font-size: 18px !important; text-shadow: 0 0 8px rgba(0, 212, 255, 0.4); } /* ===== NEWSLETTER SIGNUP ===== */ body .newsletter, body .newsletter-form, body form[action*="contact"] { background: transparent !important; } body input[type="email"], body input[type="text"], body .newsletter-form input { background: rgba(28, 11, 64, 0.6) !important; border: 1px solid rgba(107, 53, 212, 0.4) !important; color: white !important; font-family: inherit; font-size: 14px !important; border-radius: 8px !important; padding: 12px 14px !important; } body input::placeholder { color: var(--pv-text-dimmer) !important; } body button[type="submit"], body .newsletter-form button, body .button--primary, body .button.button--primary { background: linear-gradient(135deg, var(--pv-purple), var(--pv-pink-soft)) !important; color: white !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-family: 'Space Grotesk', sans-serif !important; border: none !important; border-radius: 8px !important; padding: 12px 22px !important; box-shadow: 0 4px 20px rgba(107, 53, 212, 0.5) !important; } /* ===== FOOTER ===== */ body footer, body .footer { background: rgba(7, 5, 26, 0.6) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(107, 53, 212, 0.3) !important; } body footer a, body .footer a { color: var(--pv-text-dim) !important; } body footer a:hover, body .footer a:hover { color: var(--pv-cyan) !important; } /* ===== COOKIE CONSENT BANNER ===== */ body [class*="cookie"], body [class*="consent"], body .shopify-cookies { background: rgba(7, 5, 26, 0.9) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(107, 53, 212, 0.4) !important; color: var(--pv-text) !important; } /* ===== "View All" / collection links ===== */ body .button--secondary, body .link-with-icon { color: var(--pv-cyan) !important; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; font-size: 12px; } /* ======================================================================== PHASE 3A PATCH — Fix product card text rendering Horizon may have background-clip:text or gradient text effects on prices/titles. Force solid text rendering. ======================================================================== */ body .card *, body .card-wrapper *, body .product-card *, body product-card *, body [class*="product-card"] * { -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: initial !important; } /* Now re-assert our colors on titles and prices */ body .card__heading, body .card__heading a, body .card__information a, body .card-information a, body .full-unstyled-link, body .product-card__title, body .product-card__title a, body .card__information h3, body .card__information .h3 { color: #fff !important; -webkit-text-fill-color: #fff !important; background: transparent !important; background-image: none !important; font-family: 'Audiowide', cursive !important; font-size: 14px !important; letter-spacing: 0.02em !important; text-decoration: none !important; padding: 0 !important; } body .price, body .price *, body .price__regular, body .price__sale, body .price-item, body .price-item--regular, body .price-item--sale, body .product-card__price, body .card-information .price, body .card .money { color: var(--pv-cyan) !important; -webkit-text-fill-color: var(--pv-cyan) !important; background: transparent !important; background-image: none !important; font-family: 'Audiowide', cursive !important; font-size: 18px !important; text-shadow: 0 0 8px rgba(0, 212, 255, 0.4); padding: 0 !important; } /* Make sure any visually-hidden price labels stay hidden */ body .visually-hidden, body .sr-only, body .price__sale-label, body [class*="visually-hidden"] { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Add subtle space between image and info inside card */ body .card__inner + .card__information, body .card__media + .card__content, body .card__content { padding-top: 14px !important; } /* ======================================================================== PHASE 3D POLISH — Aggressive fixes for header, product cards, footer ======================================================================== */ /* ===== HEADER — reduce excess padding/space ===== */ body header, body .header, body header-component, body .header__inner, body .shopify-section-header, body .shopify-section-group-header-group .shopify-section:not([class*="announcement"]) { padding-top: 8px !important; padding-bottom: 8px !important; min-height: 0 !important; } body .header__logo, body header .logo, body header img { max-height: 70px !important; } /* ===== NAV LINKS — brighter, more visible ===== */ body header a:not(.button), body .header__inline-menu a, body .header__menu-item, body nav a, body .header__menu a { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-size: 13px !important; opacity: 1 !important; } body header a:hover, body .header__inline-menu a:hover, body nav a:hover { color: var(--pv-cyan) !important; -webkit-text-fill-color: var(--pv-cyan) !important; } /* ===== PRODUCT CARDS — Force the glass-morph background ===== */ body [class*="product-card"], body .card, body .card-wrapper, body .grid__item > .card, body .collection .card, body product-card { background: rgba(28, 11, 64, 0.6) !important; background-color: rgba(28, 11, 64, 0.6) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(107, 53, 212, 0.4) !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important; } /* The actual image area should stay clean (white from product photo) */ body [class*="product-card"] [class*="media"], body .card__media, body .card-wrapper .media, body .card__inner { background: transparent !important; background-color: transparent !important; } /* ===== PRODUCT TITLES — force white text everywhere ===== */ body [class*="product-card"] h1, body [class*="product-card"] h2, body [class*="product-card"] h3, body [class*="product-card"] h4, body [class*="product-card"] a, body [class*="card-wrapper"] h1, body [class*="card-wrapper"] h2, body [class*="card-wrapper"] h3, body [class*="card-wrapper"] h4, body [class*="card-wrapper"] a, body .card__heading, body .card__heading *, body .card-information *:not([class*="price"]):not([class*="money"]):not([class*="badge"]), body .card__information *:not([class*="price"]):not([class*="money"]):not([class*="badge"]), body .full-unstyled-link, body .full-unstyled-link * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-decoration: none !important; font-family: 'Audiowide', cursive !important; font-size: 15px !important; letter-spacing: 0.02em !important; } /* Re-assert cyan + glow on prices (more specific than the white rule above) */ body [class*="price"]:not([class*="badge"]), body [class*="price"] *, body .price, body .price *, body .price__regular, body .price-item, body .price-item *, body .money, body span.money { color: var(--pv-cyan) !important; -webkit-text-fill-color: var(--pv-cyan) !important; font-family: 'Audiowide', cursive !important; font-size: 20px !important; text-shadow: 0 0 8px rgba(0, 212, 255, 0.5) !important; font-weight: normal !important; } /* ===== EMAIL INPUT — proper dark glass styling ===== */ body input[type="email"], body input[type="text"], body input[type="search"], body .field__input, body .newsletter-form input, body .field input, body form input { background: rgba(20, 8, 47, 0.75) !important; background-color: rgba(20, 8, 47, 0.75) !important; border: 1.5px solid rgba(107, 53, 212, 0.6) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: 15px !important; padding: 16px 20px !important; border-radius: 10px !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: 'Space Grotesk', sans-serif !important; } body input::placeholder, body .field__input::placeholder { color: rgba(232, 224, 255, 0.55) !important; font-family: 'Space Grotesk', sans-serif !important; } body input:focus { border-color: var(--pv-cyan) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2) !important; } /* Hide field labels that overlap the input */ body .field__label { display: none !important; } /* ===== BUTTONS — Launch Transmission and all primary buttons ===== */ body button[type="submit"], body .newsletter-form__button, body .newsletter button, body .field__button, body button.button, body .button--primary, body button.button--primary, body [class*="newsletter"] button { background: linear-gradient(135deg, var(--pv-purple), var(--pv-pink-soft)) !important; background-color: var(--pv-purple) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: 'Audiowide', cursive !important; font-weight: normal !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; border: none !important; border-radius: 10px !important; padding: 16px 32px !important; font-size: 14px !important; box-shadow: 0 4px 20px rgba(107, 53, 212, 0.5) !important; cursor: pointer !important; transition: all 0.2s !important; } body button[type="submit"]:hover, body .button--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(224,64,251,0.6) !important; } /* ===== FOOTER — better spacing and color ===== */ body footer, body .footer, body .shopify-section-group-footer-group { padding: 50px 32px 30px !important; } body footer p, body footer span, body footer small, body footer .copyright, body footer [class*="copyright"] { color: rgba(232, 224, 255, 0.4) !important; font-size: 12px !important; } body footer h2, body footer h3, body footer h4 { color: var(--pv-pink) !important; font-size: 14px !important; letter-spacing: 0.15em !important; } /* ===== "Subscribe to receive transmission alerts" heading ===== */ body .newsletter h2, body .newsletter__title, body .newsletter-section h2, body [class*="newsletter"] h2, body [class*="newsletter"] h3 { font-family: 'Audiowide', cursive !important; color: #ffffff !important; font-size: 36px !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; margin-bottom: 12px !important; } body .newsletter p, body [class*="newsletter"] p { color: var(--pv-text-dim) !important; } /* ===== COOKIE BANNER — position at bottom ===== */ body [class*="cookie"], body [class*="consent"], body .shopify-cookies, body shopify-privacy-consent { position: fixed !important; bottom: 20px !important; left: 20px !important; right: 20px !important; max-width: 600px !important; margin: 0 auto !important; top: auto !important; z-index: 9999 !important; background: rgba(7, 5, 26, 0.95) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; border: 1px solid rgba(107, 53, 212, 0.5) !important; border-radius: 16px !important; padding: 24px !important; box-shadow: 0 16px 60px rgba(0,0,0,0.5) !important; } /* ===== HEADER NAV — direct color, no variable mutation ===== */ body header a, body header li, body header li a, body header li > a, body header ul a, body header nav a, body header [role="navigation"] a, body .header a, body .header li a, body .header__menu a, body .header__inline-menu a, body .header__inline-menu li, body .header__inline-menu li a, body .header__menu-item, body .list-menu a, body .list-menu__item, body header span, body header-component a, body header-component li, body header-component span { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; visibility: visible !important; } /* SVG icons stay white */ body header svg, body header svg *, body header [class*="icon"] svg path { color: #ffffff !important; fill: currentColor !important; stroke: currentColor; opacity: 1 !important; } /* Cyan hover */ body header a:hover, body header a:hover span, body header li:hover a, body header-component a:hover { color: var(--pv-cyan) !important; -webkit-text-fill-color: var(--pv-cyan) !important; } /* ===== FOOTER — direct color, no variable mutation ===== */ body footer p, body footer span, body footer li, body footer a, body footer small, body footer label, body .footer p, body .footer span, body .footer li, body .footer a, body .footer small, body .footer h1, body .footer h2, body .footer h3, body .footer h4 { color: #e8e0ff !important; -webkit-text-fill-color: #e8e0ff !important; opacity: 1 !important; visibility: visible !important; } body footer a:hover, body .footer a:hover { color: var(--pv-cyan) !important; -webkit-text-fill-color: var(--pv-cyan) !important; } /* Section headings inside footer should pop pink */ body footer h2, body footer h3, body footer h4, body footer .footer__heading, body footer .footer-block__heading { color: var(--pv-pink) !important; -webkit-text-fill-color: var(--pv-pink) !important; font-family: 'Audiowide', cursive !important; font-size: 16px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; margin-bottom: 14px !important; } /* Big newsletter heading "Subscribe to receive transmission alerts" */ body .shopify-section-group-footer-group h1, body .shopify-section-group-footer-group h2, body .shopify-section-group-footer-group h3, body [class*="newsletter"] h2, body [class*="newsletter"] h3, body [class*="newsletter"] .h0, body [class*="newsletter"] .h1, body [class*="newsletter"] .h2 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: 'Audiowide', cursive !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; } /* Copyright text — dim */ body footer small, body footer .copyright, body footer [class*="copyright"] { color: rgba(232, 224, 255, 0.5) !important; -webkit-text-fill-color: rgba(232, 224, 255, 0.5) !important; font-size: 12px !important; } /* ======================================================================== PHASE 3D-MINIMAL — Just override colors, don't touch layout Horizon's nav has complex hover behavior. We just make the colors right. ======================================================================== */ /* ===== FOOTER ===== */ body footer p, body footer span, body footer li, body footer a, body footer small, body .footer p, body .footer span, body .footer li, body .footer a, body .footer small { color: #e8e0ff !important; -webkit-text-fill-color: #e8e0ff !important; } body footer a:hover, body .footer a:hover { color: var(--pv-cyan) !important; -webkit-text-fill-color: var(--pv-cyan) !important; } body footer h2, body footer h3, body footer h4 { color: var(--pv-pink) !important; font-family: 'Audiowide', cursive !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; } body footer [class*="newsletter"] h2, body footer [class*="newsletter"] h3, body [class*="email-signup"] h2 { color: #ffffff !important; font-family: 'Audiowide', cursive !important; font-size: 32px !important; text-transform: uppercase !important; } /* ===== FIX PRODUCT IMAGE THUMBNAILS ON PDP ===== The thumbnail strip at the bottom of product pages was getting hit by our product-CARD glass styling. Product page thumbnails need clean transparent backgrounds so the actual product photos show. */ body .product-media-gallery, body .product__media-list, body .product-media__thumbnails, body [class*="thumbnail"], body .product__media-item, body .product-media-thumbnail, body media-gallery, body .product-gallery, body .product-gallery__thumbnail, body .product-media, body [class*="product-media"] { background: transparent !important; background-color: transparent !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* But add subtle styling to the thumbnail container itself */ body .product-media-thumbnail img, body .product-gallery__thumbnail img, body [class*="thumbnail"] img, body .product__media-item img { background: transparent !important; border-radius: 8px !important; display: block !important; width: 100% !important; height: auto !important; object-fit: cover !important; } /* Active/selected thumbnail gets a cyan border */ body [class*="thumbnail"][aria-current="true"] img, body .product-media-thumbnail.is-active img, body .product-gallery__thumbnail--active img { outline: 2px solid var(--pv-cyan) !important; outline-offset: 2px; } /* Make sure the main product image displays */ body .product__media img, body .product-media img, body .product-gallery__image img { background: transparent !important; display: block !important; } /* ======================================================================== PHASE 3D-PRECISE — Targeted fixes using exact class names from inspect ======================================================================== */ /* ===== QUANTITY SELECTOR — Real Horizon class names ===== wrapper .button.quantity-minus / .button.quantity-plus buttons input[name="quantity"] number field */ /* The wrapper: Audiowide font kills +/- glyphs — force a real font here */ quantity-selector-component, quantity-selector-component * { font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif !important; } /* The number input */ quantity-selector-component input[name="quantity"], input[name="quantity"] { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: transparent !important; text-align: center !important; } /* The +/- buttons */ quantity-selector-component .quantity-minus, quantity-selector-component .quantity-plus, .button.quantity-minus, .button.quantity-plus, button.quantity-minus, button.quantity-plus { background: transparent !important; background-color: transparent !important; background-image: none !important; color: var(--pv-cyan) !important; -webkit-text-fill-color: var(--pv-cyan) !important; box-shadow: none !important; border: none !important; font-size: 20px !important; font-weight: 700 !important; cursor: pointer !important; text-transform: none !important; letter-spacing: 0 !important; padding: 0 16px !important; } quantity-selector-component .quantity-minus:hover, quantity-selector-component .quantity-plus:hover, .button.quantity-minus:hover, .button.quantity-plus:hover { background: rgba(0, 212, 255, 0.15) !important; background-color: rgba(0, 212, 255, 0.15) !important; background-image: none !important; color: #80f0ff !important; -webkit-text-fill-color: #80f0ff !important; transform: none !important; } /* Make sure the input number is highly visible */ quantity-selector-component input[name="quantity"] { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; font-size: 16px !important; font-weight: 600 !important; text-align: center !important; width: auto !important; min-width: 40px !important; } /* SVGs inside buttons (some Horizon versions use SVG icons for +/-) */ quantity-selector-component button svg, quantity-selector-component button svg * { color: var(--pv-cyan) !important; fill: currentColor !important; stroke: currentColor !important; } /* ======================================================================== PERFORMANCE OPTIMIZATIONS - GPU compositing hints (translateZ + will-change) - Pause when tab is hidden - Respect prefers-reduced-motion - Mobile simplifications ======================================================================== */ /* GPU compositing — promote cosmos and its animated children to their own layer */ .pv-cosmos { will-change: transform; transform: translateZ(0); backface-visibility: hidden; } .pv-nebula-blob, .pv-planet, .pv-comet, .pv-sparkle, .pv-ufo, .pv-black-hole, .pv-starfield-svg, .pv-hero-mascot img { will-change: transform, opacity; transform: translateZ(0); backface-visibility: hidden; } /* Pause cosmos animations when tab is hidden (visibility script in cosmos snippet) */ body.pv-paused .pv-cosmos *, body.pv-paused .pv-hero-mascot img, body.pv-paused .pv-orbit-ring, body.pv-paused .pv-hero-badge .pv-dot { animation-play-state: paused !important; } /* Respect user's "Reduce motion" OS preference — kill all decorative animations */ @media (prefers-reduced-motion: reduce) { .pv-cosmos *, .pv-hero-mascot img, .pv-orbit-ring, .pv-hero-badge .pv-dot { animation: none !important; transition: none !important; } .pv-ufo, .pv-comet { display: none !important; } .pv-nebula-blob { filter: blur(30px); } } /* ===== MOBILE SIMPLIFICATIONS (< 750px) ===== Mobile GPUs really struggle with blur and many simultaneous animations. Hide expensive elements, reduce blur, slow down or stop remaining animations. */ @media (max-width: 750px) { /* Hide the most expensive decorative elements */ .pv-ufo, .pv-comet, .pv-sparkle, .pv-milky-way, .pv-planet-4, .pv-planet-5, .pv-planet-7, .pv-planet-8, .pv-planet-9, .pv-nebula-3, .pv-nebula-blob:nth-of-type(n+3) { display: none !important; } /* Slash blur radius — single biggest mobile GPU killer */ .pv-nebula-blob { filter: blur(20px) !important; } /* Stop the slow starfield twinkle on mobile (battery saver) */ .pv-starfield-svg { animation: none !important; } /* Slow remaining planet animations (less frequent redraws) */ .pv-planet { animation-duration: 90s !important; } /* Lower-quality but cheaper black hole rendering */ .pv-bh-glow { filter: none !important; } } /* ===== PATCH — Stop Horizon's hidden "price_hidden" state from being overridden by our earlier aggressive .price color rules ===== */ body .price_hidden, body .price__sale.price_hidden, body [class*="price"].price_hidden { display: none !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } /* ===== Quick-view modal: opaque background, stop card bleed-through ===== */ body dialog[open], body dialog[open] > div { background-color: #1b1136 !important; background: #1b1136 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body dialog::backdrop { background: rgba(5, 4, 16, 0.75) !important; } /* Strip any leaked card glass-morphism from inside the dialog */ body dialog [class*="card"], body dialog .group-block { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ===== PATCH — Fix quantity selector buttons (actual class names) ===== */ quantity-selector-component .quantity-minus-button-unstyled, quantity-selector-component .quantity-plus-button-unstyled, button.quantity-minus-button-unstyled, button.quantity-plus-button-unstyled { background: transparent !important; background-color: transparent !important; background-image: none !important; color: var(--pv-cyan) !important; -webkit-text-fill-color: var(--pv-cyan) !important; border: none !important; box-shadow: none !important; font-size: 20px !important; font-weight: 700 !important; } quantity-selector-component .quantity-minus-button-unstyled:hover, quantity-selector-component .quantity-plus-button-unstyled:hover { background: rgba(0, 212, 255, 0.15) !important; color: #80f0ff !important; -webkit-text-fill-color: #80f0ff !important; } quantity-selector-component input[name="quantity"] { background: transparent !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: none !important; text-align: center !important; } /* ======================================================================== PRINTAVERSE EXPERIENCE LAYER — OPTION C Premium first, personality in the details. ======================================================================== */ :root { --pv-pointer-x: 0; --pv-pointer-y: 0; --pv-radius-sm: 10px; --pv-radius-md: 16px; --pv-radius-lg: 24px; --pv-border: rgba(255, 255, 255, 0.12); --pv-surface: rgba(10, 7, 28, 0.55); --pv-surface-strong: rgba(10, 7, 28, 0.8); --pv-focus: 0 0 0 3px rgba(0, 212, 255, 0.32); } /* Keep real content consistently above the fixed cosmos. */ #header-group, #MainContent, footer, .search-modal, quick-add-dialog, cart-drawer { position: relative; z-index: 2; } /* Subtle pointer depth. Transforms only the decorative background layers. */ .pv-milky-way { translate: calc(var(--pv-pointer-x) * -5px) calc(var(--pv-pointer-y) * -4px); transition: translate 900ms cubic-bezier(.2,.8,.2,1); } .pv-nebula-blob { margin-left: calc(var(--pv-pointer-x) * 4px); margin-top: calc(var(--pv-pointer-y) * 3px); transition: margin 1200ms cubic-bezier(.2,.8,.2,1); } .pv-planet { translate: calc(var(--pv-pointer-x) * 7px) calc(var(--pv-pointer-y) * 5px); } /* Soft storefront entrance without hiding content from crawlers or no-JS users. */ body:not(.pv-ready) #MainContent { opacity: .985; } body.pv-ready #MainContent { opacity: 1; transition: opacity 360ms ease; } /* Premium interaction language for native theme buttons and custom buttons. */ button:not(.unstyled-button), .button, .shopify-payment-button__button, input[type='submit'] { border-radius: var(--pv-radius-sm) !important; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, filter 180ms ease !important; } @media (hover: hover) { button:not(.unstyled-button):not(:disabled):hover, .button:not([aria-disabled='true']):hover, .shopify-payment-button__button:hover, input[type='submit']:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 10px 30px rgba(107, 53, 212, .24), 0 0 20px rgba(0, 212, 255, .12); } } button:focus-visible, .button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none !important; box-shadow: var(--pv-focus) !important; } /* Product and collection cards: restrained glass surface and lift. */ .product-card, .collection-card, .card:not(.card--text), [class*='product-card'] { border-radius: var(--pv-radius-md); } @media (hover: hover) { .product-card, .collection-card, [class*='product-card'] { transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease; } .product-card:hover, .collection-card:hover, [class*='product-card']:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0, 0, 0, .26), 0 0 28px rgba(107, 53, 212, .14); } } /* Forms should feel deliberate and remain readable. */ input:not([type='checkbox']):not([type='radio']):not([type='range']), select, textarea { border-radius: var(--pv-radius-sm) !important; border-color: rgba(255, 255, 255, .18) !important; } /* Policy pages: transparent canvas over the stars, with readable spacing. */ body.template-policy-page .shopify-policy__container { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-wrap: pretty; } body.template-policy-page .shopify-policy__body p, body.template-policy-page .shopify-policy__body li { text-shadow: 0 1px 10px rgba(0, 0, 0, .82) !important; } body.template-policy-page .shopify-policy__title h1, body.template-policy-page .shopify-policy__body h2, body.template-policy-page .shopify-policy__body h3 { text-shadow: 0 2px 18px rgba(0, 0, 0, .9) !important; } /* Small personality touch without rewriting functional Shopify labels. */ .pv-empty-state::after { content: 'This spacecraft is currently transporting nothing. Let’s fix that.'; display: block; margin-top: .75rem; color: var(--pv-text-dim); font-size: .95rem; line-height: 1.5; } /* Respect user preferences and keep the site comfortable on lower-power devices. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } .pv-cosmos *, .pv-cosmos *::before, .pv-cosmos *::after { animation: none !important; transition: none !important; } .pv-ufo, .pv-comet { display: none !important; } button, .button, .product-card, .collection-card, [class*='product-card'] { transform: none !important; transition: none !important; } } @media (max-width: 749px) { /* Reduce visual density on mobile while preserving the brand. */ .pv-planet-3, .pv-planet-5, .pv-planet-7, .pv-planet-8, .pv-planet-9, .pv-comet-2, .pv-comet-3, .pv-black-hole, .pv-ufo { display: none !important; } .pv-nebula-blob { filter: blur(55px); opacity: .38; } } /* ========================================================= PRINTAVERSE — MISSION 2 Premium interaction layer built on Mission 1 ========================================================= */ /* --- Shared motion tokens --- */ :root { --pv-motion-fast: 180ms; --pv-motion-medium: 260ms; --pv-ease: cubic-bezier(.2,.7,.2,1); --pv-glow-cyan: rgba(98, 211, 255, 0.34); --pv-glow-purple: rgba(177, 107, 255, 0.26); } /* --- Premium buttons --- */ .button, .button-secondary, button:not(.unstyled-button), input[type="submit"], .shopify-payment-button__button, .product-form__submit { position: relative; transform: translateZ(0); transition: transform var(--pv-motion-fast) var(--pv-ease), box-shadow var(--pv-motion-medium) var(--pv-ease), filter var(--pv-motion-fast) ease, border-color var(--pv-motion-fast) ease; } .button:hover, .button-secondary:hover, button:not(.unstyled-button):hover, input[type="submit"]:hover, .shopify-payment-button__button:hover, .product-form__submit:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26), 0 0 18px var(--pv-glow-cyan), 0 0 34px var(--pv-glow-purple); } .button:active, .button-secondary:active, button:not(.unstyled-button):active, input[type="submit"]:active, .shopify-payment-button__button:active, .product-form__submit:active { transform: translateY(0) scale(.99); } /* --- Navigation polish --- */ .header__menu-item, .menu-drawer__menu-item, .header a, nav a { transition: color var(--pv-motion-fast) ease, text-shadow var(--pv-motion-fast) ease, opacity var(--pv-motion-fast) ease; } .header__menu-item:hover, .menu-drawer__menu-item:hover, .header a:hover, nav a:hover { text-shadow: 0 0 12px rgba(115, 210, 255, 0.42); } /* --- Product-card lift and image depth --- */ .card-wrapper, .product-card, .card, .collection-card { transition: transform var(--pv-motion-medium) var(--pv-ease), box-shadow var(--pv-motion-medium) var(--pv-ease), border-color var(--pv-motion-medium) var(--pv-ease); will-change: transform; } .card-wrapper:hover, .product-card:hover, .card:hover, .collection-card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.30), 0 0 20px rgba(98, 211, 255, 0.10); } .card-wrapper img, .product-card img, .card img, .collection-card img { transition: transform 420ms var(--pv-ease), filter 260ms ease; } .card-wrapper:hover img, .product-card:hover img, .card:hover img, .collection-card:hover img { transform: scale(1.025); filter: saturate(1.04) contrast(1.02); } /* --- Form fields feel intentional --- */ input:not([type="checkbox"]):not([type="radio"]), textarea, select { transition: border-color var(--pv-motion-fast) ease, box-shadow var(--pv-motion-fast) ease, background-color var(--pv-motion-fast) ease; } input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus { border-color: rgba(98, 211, 255, 0.68) !important; box-shadow: 0 0 0 2px rgba(98, 211, 255, 0.10), 0 0 18px rgba(98, 211, 255, 0.16) !important; outline: none; } /* --- Subtle section entrance without layout disruption --- */ @media (prefers-reduced-motion: no-preference) { .shopify-section { animation: pv-section-arrive 520ms var(--pv-ease) both; } @keyframes pv-section-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } } /* --- Accessibility and mobile restraint --- */ @media (max-width: 749px) { .card-wrapper:hover, .product-card:hover, .card:hover, .collection-card:hover, .button:hover, .button-secondary:hover, button:not(.unstyled-button):hover, input[type="submit"]:hover, .shopify-payment-button__button:hover, .product-form__submit:hover { transform: none; } .card-wrapper:hover img, .product-card:hover img, .card:hover img, .collection-card:hover img { transform: none; } } @media (prefers-reduced-motion: reduce) { .shopify-section, .button, .button-secondary, button, input, textarea, select, .card-wrapper, .product-card, .card, .collection-card, img { animation: none !important; transition: none !important; transform: none !important; } } /* ========================================================= PRINTAVERSE — MISSION 3: FIRST IMPRESSION ========================================================= */ .pv3-hero-section, .pv3-mission-section { position: relative; z-index: 2; } .pv3-hero { position: relative; min-height: clamp(650px, 80vh, 900px); display: grid; align-items: center; overflow: hidden; padding: clamp(72px, 9vw, 130px) max(24px, calc((100vw - 1320px) / 2)); isolation: isolate; } .pv3-hero::before { content: ""; position: absolute; inset: 5% 3%; z-index: -2; border: 1px solid rgba(255,255,255,.08); border-radius: 34px; background: linear-gradient(135deg, rgba(7,11,35,.72), rgba(15,4,35,.35)), radial-gradient(circle at 72% 36%, rgba(93,201,255,.14), transparent 34%); box-shadow: 0 30px 90px rgba(0,0,0,.28); backdrop-filter: blur(2px); } .pv3-hero__inner { width: 100%; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: clamp(40px, 7vw, 100px); align-items: center; } .pv3-hero__content { max-width: 760px; } .pv3-hero__eyebrow, .pv3-mission__label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font: 700 .78rem/1 var(--font-body--family); letter-spacing: .17em; text-transform: uppercase; color: #9fe9ff; } .pv3-status-dot { width: 9px; height: 9px; border-radius: 50%; background: #66f5b1; box-shadow: 0 0 0 5px rgba(102,245,177,.09), 0 0 18px rgba(102,245,177,.7); animation: pv3-pulse 2.4s ease-in-out infinite; } .pv3-hero__heading { max-width: 920px; margin: 0; color: #fff; font-family: "Audiowide", var(--font-heading--family); font-size: clamp(2.75rem, 6.4vw, 6.7rem); line-height: .98; letter-spacing: -.045em; text-wrap: balance; text-shadow: 0 12px 44px rgba(0,0,0,.38); } .pv3-hero__heading span { display: block; margin-top: .12em; color: transparent; background: linear-gradient(90deg, #ff56ba 8%, #b874ff 48%, #6cdcff 92%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 20px rgba(178,116,255,.22)); } .pv3-hero__text { max-width: 670px; margin-top: 26px; color: rgba(255,255,255,.79); font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.72; } .pv3-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .pv3-button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; padding: 13px 24px; border-radius: 999px; font-weight: 800; letter-spacing: .01em; text-decoration: none; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; } .pv3-button--primary { color: #08101f; background: linear-gradient(100deg, #74dcff, #ba79ff 56%, #ff61b9); box-shadow: 0 12px 36px rgba(140,112,255,.26); } .pv3-button--secondary { color: #fff; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.055); backdrop-filter: blur(8px); } .pv3-button:hover { transform: translateY(-3px); text-shadow: none; box-shadow: 0 18px 44px rgba(115,210,255,.26), 0 0 30px rgba(194,98,255,.18); } .pv3-hero__trust { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 30px; color: rgba(255,255,255,.63); font-size: .88rem; } .pv3-hero__trust span::before { content: "✓"; margin-right: 7px; color: #65eeb0; font-weight: 900; } .pv3-hero__visual { position: relative; min-height: 530px; display: grid; place-items: center; } .pv3-hero__image { position: relative; z-index: 3; width: min(100%, 620px); max-height: 620px; object-fit: contain; filter: drop-shadow(0 38px 48px rgba(0,0,0,.44)); animation: pv3-float 6s ease-in-out infinite; } .pv3-planet { position: relative; z-index: 2; width: clamp(260px, 34vw, 470px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 24%, #9cedff 0 3%, transparent 4%), radial-gradient(circle at 36% 30%, #477bd7, #412272 42%, #140f35 72%); box-shadow: inset -45px -50px 85px rgba(0,0,0,.55), inset 20px 12px 40px rgba(255,255,255,.10), 0 0 70px rgba(109,153,255,.23); animation: pv3-float 7s ease-in-out infinite; } .pv3-planet__ring { position: absolute; inset: 39% -20%; border: clamp(14px, 2.3vw, 30px) solid rgba(225,171,255,.46); border-left-color: rgba(87,210,255,.58); border-right-color: rgba(255,84,183,.42); border-radius: 50%; transform: rotate(-13deg); filter: drop-shadow(0 0 18px rgba(173,101,255,.27)); } .pv3-planet__shine { position: absolute; inset: 12% 18% auto auto; width: 26%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.13); filter: blur(18px); } .pv3-orbit { position: absolute; border: 1px solid rgba(126,221,255,.15); border-radius: 50%; transform: rotate(-18deg); } .pv3-orbit--outer { width: 104%; aspect-ratio: 1; } .pv3-orbit--inner { width: 75%; aspect-ratio: 1; transform: rotate(24deg); } .pv3-orbit::after { content: ""; position: absolute; width: 9px; height: 9px; top: 8%; left: 24%; border-radius: 50%; background: #f075ff; box-shadow: 0 0 18px #f075ff; } .pv3-float-card { position: absolute; z-index: 5; min-width: 168px; padding: 12px 15px; color: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.10); border-radius: 15px; background: rgba(6,9,30,.58); box-shadow: 0 14px 34px rgba(0,0,0,.22); backdrop-filter: blur(8px); font-size: .80rem; } .pv3-float-card strong, .pv3-float-card span { display: block; } .pv3-float-card strong { color: #8fe6ff; font-size: .68rem; letter-spacing: .13em; } .pv3-float-card span { margin-top: 5px; color: #fff; font-weight: 700; } .pv3-float-card--top { top: 16%; right: 0; animation: pv3-float 5.4s ease-in-out infinite reverse; } .pv3-float-card--bottom { left: 0; bottom: 16%; animation: pv3-float 6.4s ease-in-out infinite; } .pv3-hero__glow { position: absolute; z-index: -3; width: 38vw; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: .25; } .pv3-hero__glow--one { top: -10%; right: -4%; background: #6431ff; } .pv3-hero__glow--two { bottom: -24%; left: -15%; background: #008ccf; } /* Mission Control */ .pv3-mission { padding: 34px max(24px, calc((100vw - 1220px) / 2)) 100px; } .pv3-mission__panel { max-width: 1220px; margin: 0 auto; display: grid; grid-template-columns: 1fr .95fr; gap: clamp(34px, 6vw, 80px); align-items: center; padding: clamp(34px, 5vw, 70px); border: 1px solid rgba(255,255,255,.10); border-radius: 30px; background: linear-gradient(125deg, rgba(10,15,43,.87), rgba(24,8,45,.66)), radial-gradient(circle at 80% 10%, rgba(190,80,255,.13), transparent 40%); box-shadow: 0 30px 90px rgba(0,0,0,.26); } .pv3-mission__copy h2 { margin: 0; max-width: 690px; color: #fff; font-family: "Audiowide", var(--font-heading--family); font-size: clamp(2rem, 4.2vw, 4.25rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; } .pv3-mission__text { margin: 22px 0 30px; color: rgba(255,255,255,.73); font-size: 1.05rem; line-height: 1.7; } .pv3-mission__terminal { overflow: hidden; border: 1px solid rgba(117,220,255,.20); border-radius: 18px; background: rgba(2,6,20,.74); box-shadow: inset 0 0 40px rgba(54,153,255,.06), 0 20px 60px rgba(0,0,0,.28); transform: perspective(900px) rotateY(-3deg); } .pv3-terminal__bar { display: flex; align-items: center; gap: 7px; padding: 12px 15px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); } .pv3-terminal__bar span { width: 8px; height: 8px; border-radius: 50%; background: #ff5e9e; } .pv3-terminal__bar span:nth-child(2) { background: #ffd36b; } .pv3-terminal__bar span:nth-child(3) { background: #60efb0; } .pv3-terminal__bar b { margin-left: 8px; color: rgba(255,255,255,.44); font: 600 .62rem/1 monospace; letter-spacing: .09em; } .pv3-terminal__body { padding: clamp(24px, 4vw, 46px); color: rgba(206,236,255,.70); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } .pv3-terminal__body p { margin: 0 0 18px; font-size: clamp(.82rem, 1.3vw, 1rem); } .pv3-terminal__body p span { color: #bf6fff; margin-right: 12px; } .pv3-terminal__body strong { color: #fff; } .pv3-terminal__ready { margin-top: 34px !important; color: #65efad !important; text-shadow: 0 0 12px rgba(101,239,173,.36); animation: pv3-terminal-blink 1.2s steps(2) infinite; } @keyframes pv3-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes pv3-pulse { 0%,100% { opacity: .72; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } } @keyframes pv3-terminal-blink { 50% { opacity: .56; } } @media (max-width: 899px) { .pv3-hero { padding-top: 70px; } .pv3-hero::before { inset: 2% 12px; } .pv3-hero__inner, .pv3-mission__panel { grid-template-columns: 1fr; } .pv3-hero__content { text-align: center; margin: 0 auto; } .pv3-hero__eyebrow { justify-content: center; } .pv3-hero__actions, .pv3-hero__trust { justify-content: center; } .pv3-hero__visual { min-height: 430px; } .pv3-mission__terminal { transform: none; } } @media (max-width: 599px) { .pv3-hero { min-height: auto; padding: 64px 18px 80px; } .pv3-hero__heading { font-size: clamp(2.4rem, 12vw, 4rem); } .pv3-hero__actions { flex-direction: column; } .pv3-button { width: 100%; } .pv3-hero__visual { min-height: 350px; } .pv3-float-card { min-width: 150px; padding: 11px 13px; } .pv3-float-card--top { right: -4px; } .pv3-float-card--bottom { left: -4px; } .pv3-mission { padding: 10px 14px 70px; } .pv3-mission__panel { padding: 30px 20px; border-radius: 22px; } } @media (prefers-reduced-motion: reduce) { .pv3-status-dot, .pv3-hero__image, .pv3-planet, .pv3-float-card, .pv3-terminal__ready { animation: none !important; } } /* ========================================================= PRINTAVERSE — MISSION 3 COMPACT ASTRONAUT PATCH Keeps the complete hero visible in one desktop viewport. ========================================================= */ @media (min-width: 900px) { .pv3-hero { min-height: calc(100svh - var(--header-group-height, 104px)); max-height: 820px; padding-top: clamp(28px, 4vh, 48px); padding-bottom: clamp(28px, 4vh, 48px); } .pv3-hero::before { inset: 14px 3%; } .pv3-hero__inner { grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr); gap: clamp(32px, 5vw, 72px); } .pv3-hero__heading { font-size: clamp(3rem, 5.25vw, 5.75rem); line-height: .94; letter-spacing: -.04em; } .pv3-hero__text { margin-top: 18px; font-size: clamp(.98rem, 1.15vw, 1.12rem); line-height: 1.58; } .pv3-hero__actions { margin-top: 24px; } .pv3-hero__trust { margin-top: 20px; } .pv3-hero__visual { min-height: min(58vh, 560px); max-height: 590px; } .pv3-hero__image { width: min(100%, 560px); max-height: min(61vh, 590px); } .pv3-float-card--top { top: 12%; right: 1%; } .pv3-float-card--bottom { bottom: 11%; left: 1%; } } /* Transparent mascot files float without a visible image box. */ .pv3-hero__image, .pv3-hero__image--fallback { background: transparent !important; object-fit: contain; object-position: center; } .pv3-hero__image--fallback { filter: drop-shadow(0 34px 42px rgba(0, 0, 0, .45)) drop-shadow(0 0 24px rgba(113, 211, 255, .13)); } /* Hide the old CSS planet if cached markup briefly appears. */ .pv3-planet { display: none !important; } @media (max-width: 899px) { .pv3-hero { min-height: auto; } .pv3-hero__heading { font-size: clamp(2.35rem, 10.5vw, 4.25rem); line-height: .98; } .pv3-hero__visual { min-height: 390px; } .pv3-hero__image { max-height: 420px; } } /* ========================================================= PRINTAVERSE — SHORTER DESKTOP HERO PATCH Keeps the headline, description, and buttons visible without requiring a scroll on standard desktop screens. ========================================================= */ @media (min-width: 900px) { .pv3-hero { min-height: calc(100svh - var(--header-group-height, 96px)) !important; max-height: 720px !important; padding-top: 20px !important; padding-bottom: 20px !important; } .pv3-hero::before { inset: 10px 3% !important; } .pv3-hero__inner { gap: clamp(24px, 4vw, 56px) !important; } .pv3-hero__heading { font-size: clamp(2.65rem, 4.5vw, 4.85rem) !important; line-height: .93 !important; } .pv3-hero__text { margin-top: 14px !important; font-size: clamp(.92rem, 1vw, 1.02rem) !important; line-height: 1.48 !important; } .pv3-hero__actions { margin-top: 18px !important; } .pv3-button { min-height: 46px !important; padding: 11px 20px !important; } .pv3-hero__trust { margin-top: 14px !important; gap: 8px 18px !important; font-size: .8rem !important; } .pv3-hero__visual { min-height: min(50vh, 490px) !important; max-height: 510px !important; } .pv3-hero__image { width: min(100%, 500px) !important; max-height: min(53vh, 515px) !important; } .pv3-float-card { min-width: 160px !important; padding: 11px 14px !important; } .pv3-float-card--top { top: 10% !important; } .pv3-float-card--bottom { bottom: 9% !important; } } /* Extra tightening for shorter laptop screens */ @media (min-width: 900px) and (max-height: 760px) { .pv3-hero { max-height: 660px !important; padding-top: 12px !important; padding-bottom: 12px !important; } .pv3-hero__heading { font-size: clamp(2.35rem, 4.1vw, 4.35rem) !important; } .pv3-hero__text { margin-top: 10px !important; font-size: .9rem !important; line-height: 1.42 !important; } .pv3-hero__actions { margin-top: 14px !important; } .pv3-hero__trust { margin-top: 10px !important; } .pv3-hero__visual { min-height: 430px !important; max-height: 450px !important; } .pv3-hero__image { max-height: 450px !important; } } /* ========================================================= PRINTAVERSE — MISSION CONTROL TEXT OVERLAP FIX Prevents the large heading from crossing into the terminal. ========================================================= */ .pv3-mission__copy { position: relative; z-index: 2; min-width: 0; overflow: hidden; } .pv3-mission__copy h2 { width: 100% !important; max-width: 100% !important; font-size: clamp(1.9rem, 3.3vw, 3.55rem) !important; line-height: 1.08 !important; overflow-wrap: anywhere; word-break: normal; hyphens: none; } .pv3-mission__terminal { position: relative; z-index: 4; min-width: 0; isolation: isolate; } .pv3-mission__panel { overflow: hidden; } @media (min-width: 900px) { .pv3-mission__panel { grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr) !important; } .pv3-mission__copy h2 { max-width: 620px !important; } } @media (max-width: 899px) { .pv3-mission__copy { overflow: visible; } .pv3-mission__copy h2 { font-size: clamp(1.85rem, 7vw, 3rem) !important; } } /* ========================================================= PRINTAVERSE — HEADING WORD + ROUNDED BUTTON GLOW FIX ========================================================= */ /* Keep long Mission Control words intact. */ .pv3-mission__copy h2 { overflow-wrap: normal !important; word-wrap: normal !important; word-break: normal !important; hyphens: none !important; } @media (min-width: 900px) { .pv3-mission__panel { grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr) !important; } .pv3-mission__copy h2 { max-width: 680px !important; font-size: clamp(1.85rem, 3.05vw, 3.25rem) !important; letter-spacing: -.04em !important; } } /* Replace the rectangular hover shadow with a pill-shaped glow. */ .pv3-button { position: relative !important; z-index: 1; isolation: isolate; border-radius: 999px !important; box-shadow: none !important; } .pv3-button::before { content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: inherit; background: linear-gradient( 100deg, rgba(116, 220, 255, .55), rgba(186, 121, 255, .55) 56%, rgba(255, 97, 185, .55) ); opacity: 0; filter: blur(10px); transition: opacity .22s ease; pointer-events: none; } .pv3-button:hover { box-shadow: none !important; filter: none !important; } .pv3-button:hover::before { opacity: .8; } .pv3-button:focus-visible { outline: 2px solid #8fe6ff !important; outline-offset: 4px; box-shadow: none !important; } /* ===== Organized Merchant-friendly footer layout ===== */ @media screen and (min-width: 990px) { .footer-content { grid-template-columns: minmax(230px, 1fr) minmax(210px, .8fr) minmax(420px, 1.7fr) !important; column-gap: 48px !important; row-gap: 28px !important; } .footer-content > :nth-child(4) { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); } .footer-content > :nth-child(3) .email-signup-block, .footer-content > :nth-child(3) form { width: 100%; max-width: 620px; } } @media screen and (min-width: 750px) and (max-width: 989px) { .footer-content { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px !important; } .footer-content > :nth-child(3), .footer-content > :nth-child(4) { grid-column: 1 / -1; } } @media screen and (max-width: 749px) { .footer-content { gap: 26px !important; } .footer-content > :nth-child(4) { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); } } /* ======================================================================== MISSION 5 — PRINTAVERSE UNIVERSE v1.0 Lightweight achievement toasts and rare, non-blocking Easter eggs. ======================================================================== */ .pv-mission-layer { position: fixed; inset: 0; z-index: 2147482000; pointer-events: none; } .pv-toast-stack { position: absolute; right: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); display: grid; gap: 12px; width: min(390px, calc(100vw - 24px)); } .pv-achievement-toast { position: relative; overflow: hidden; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; color: #fff; background: linear-gradient(135deg, rgba(10, 6, 30, .97), rgba(32, 11, 66, .97)); border: 1px solid rgba(108, 220, 255, .55); border-radius: 16px; box-shadow: 0 16px 45px rgba(0, 0, 0, .45), 0 0 28px rgba(107, 53, 212, .28); backdrop-filter: blur(14px); transform: translateX(calc(100% + 40px)); opacity: 0; transition: transform .48s cubic-bezier(.2,.9,.2,1), opacity .35s ease; pointer-events: auto; } .pv-achievement-toast::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(90deg, #00d4ff, #8b5cf6, #e040fb); transform-origin: left; animation: pv-toast-timer var(--pv-toast-duration, 5s) linear forwards; } .pv-achievement-toast.is-visible { transform: translateX(0); opacity: 1; } .pv-achievement-toast.is-leaving { transform: translateX(calc(100% + 40px)); opacity: 0; } .pv-toast-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; font-size: 23px; background: linear-gradient(145deg, rgba(0,212,255,.16), rgba(224,64,251,.2)); border: 1px solid rgba(255,255,255,.14); } .pv-toast-eyebrow { margin: 0 0 2px; font-size: 10px; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: #7ee7ff; font-weight: 800; } .pv-toast-title { margin: 0; color: #fff; font-size: 16px; line-height: 1.2; font-weight: 800; } .pv-toast-copy { margin: 4px 0 0; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.35; } .pv-larry { position: absolute; top: var(--pv-larry-top, 38%); left: -100px; width: 70px; height: 88px; display: grid; place-items: center; border: 0; padding: 0; background: transparent; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 0 14px rgba(0, 212, 255, .7)); animation: pv-larry-cross 15s linear forwards; } .pv-larry__body { font-size: 58px; line-height: 1; transform: rotate(12deg); animation: pv-larry-bob 1.8s ease-in-out infinite; } .pv-larry__label { position: absolute; top: -3px; left: 50%; transform: translateX(-50%); opacity: 0; white-space: nowrap; padding: 4px 8px; border-radius: 999px; font: 700 10px/1 'Space Grotesk', sans-serif; color: white; background: rgba(7, 5, 26, .92); border: 1px solid rgba(0, 212, 255, .5); transition: opacity .2s ease; } .pv-larry:hover .pv-larry__label, .pv-larry:focus-visible .pv-larry__label { opacity: 1; } .pv-larry.is-found { animation-play-state: paused; } .pv-clickable-star { position: absolute; top: var(--pv-star-top, 22%); left: -80px; width: 34px; height: 34px; border: 0; background: transparent; pointer-events: auto; cursor: pointer; animation: pv-secret-star 7s linear forwards; } .pv-clickable-star::before { content: '✦'; display: block; color: #fff; font-size: 28px; text-shadow: 0 0 7px #fff, 0 0 16px #00d4ff, 0 0 28px #8b5cf6; animation: pv-secret-star-pulse .65s ease-in-out infinite alternate; } @keyframes pv-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } } @keyframes pv-larry-cross { from { transform: translateX(-120px); } to { transform: translateX(calc(100vw + 200px)); } } @keyframes pv-larry-bob { 0%,100% { transform: translateY(0) rotate(10deg); } 50% { transform: translateY(-12px) rotate(16deg); } } @keyframes pv-secret-star { from { transform: translate(-80px, 22vh) rotate(0deg); } to { transform: translate(calc(100vw + 160px), -18vh) rotate(240deg); } } @keyframes pv-secret-star-pulse { from { transform: scale(.8); opacity: .75; } to { transform: scale(1.18); opacity: 1; } } @media (max-width: 749px) { .pv-toast-stack { right: 12px; bottom: 12px; } .pv-achievement-toast { grid-template-columns: 38px minmax(0, 1fr); padding: 12px 13px; border-radius: 14px; } .pv-toast-icon { width: 38px; height: 38px; font-size: 20px; } .pv-larry { width: 58px; } .pv-larry__body { font-size: 48px; } } @media (prefers-reduced-motion: reduce) { .pv-achievement-toast { transition: opacity .2s ease; transform: none; } .pv-larry, .pv-clickable-star { display: none !important; } } /* ======================================================================== PRINTAVERSE UNIVERSE — MISSION CONTROL v1.1 ======================================================================== */ .pv-toast-content { min-width: 0; } .pv-toast-control { appearance: none; border: 0; padding: 0; margin-top: 8px; background: none; color: var(--pv-cyan); font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } .pv-toast-control:hover { text-decoration: underline; text-underline-offset: 3px; } .pv-reward { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; margin-top: 14px; padding: 12px; border: 1px solid rgba(0, 212, 255, .38); border-radius: 14px; background: rgba(0, 212, 255, .08); } .pv-reward__label { grid-column: 1 / -1; color: rgba(255,255,255,.72); font-size: 12px; } .pv-reward__code { overflow: hidden; text-overflow: ellipsis; color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; font-weight: 900; letter-spacing: .1em; } .pv-copy-code { appearance: none; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; padding: 7px 11px; font: inherit; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } .pv-copy-code:hover { border-color: var(--pv-cyan); box-shadow: 0 0 16px rgba(0,212,255,.2); } .pv-reward--compact { margin-top: 10px; padding: 9px 10px; } .pv-reward--compact .pv-reward__label { font-size: 10px; } .pv-reward--compact .pv-reward__code { font-size: 13px; } .pv-reward--compact .pv-copy-code { padding: 5px 8px; font-size: 9px; } html.pv-control-open, html.pv-control-open body { overflow: hidden !important; } .pv-control-modal { position: fixed; inset: 0; z-index: 2147483646; opacity: 0; transition: opacity .25s ease; } .pv-control-modal.is-open { opacity: 1; } .pv-control-backdrop { position: absolute; inset: 0; background: rgba(2,1,10,.82); backdrop-filter: blur(10px); } .pv-control-panel { position: absolute; inset: clamp(12px, 3vw, 34px); overflow: auto; max-width: 1180px; margin: auto; padding: clamp(24px, 4vw, 54px); border: 1px solid rgba(139,92,246,.48); border-radius: 28px; background: radial-gradient(circle at 90% 0%, rgba(224,64,251,.18), transparent 35%), radial-gradient(circle at 0% 100%, rgba(0,212,255,.14), transparent 38%), linear-gradient(145deg, rgba(14,7,40,.98), rgba(5,4,16,.98)); box-shadow: 0 35px 100px rgba(0,0,0,.65), inset 0 0 80px rgba(107,53,212,.08); transform: translateY(18px) scale(.985); transition: transform .3s ease; } .pv-control-modal.is-open .pv-control-panel { transform: translateY(0) scale(1); } .pv-control-close { position: sticky; top: 0; float: right; z-index: 2; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(7,5,26,.86); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; } .pv-control-close:hover { border-color: var(--pv-cyan); box-shadow: 0 0 20px rgba(0,212,255,.25); } .pv-control-header { max-width: 760px; padding-right: 52px; } .pv-control-kicker { color: var(--pv-cyan); font-size: 11px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; } .pv-control-header h2 { margin: 8px 0 12px; color: #fff; font-family: 'Audiowide', cursive; font-size: clamp(34px, 6vw, 68px); line-height: 1; } .pv-control-header p { margin: 0; color: rgba(232,224,255,.7); font-size: 15px; line-height: 1.65; } .pv-control-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 28px 0 24px; } .pv-control-stats > div { padding: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.035); } .pv-control-stats strong { display: block; color: #fff; font-size: clamp(24px, 4vw, 38px); line-height: 1; } .pv-control-stats span { display: block; margin-top: 8px; color: rgba(232,224,255,.55); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .pv-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .pv-control-card { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; align-items: start; padding: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(255,255,255,.035); } .pv-control-card.is-unlocked { border-color: rgba(107,53,212,.48); box-shadow: inset 0 0 28px rgba(107,53,212,.07); } .pv-control-card.is-locked { opacity: .58; filter: saturate(.55); } .pv-control-card__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(139,92,246,.15); font-size: 28px; } .pv-control-card__status { color: var(--pv-cyan); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; } .pv-control-card h3 { margin: 5px 0 7px; color: #fff; font-size: 20px; } .pv-control-card p { margin: 0; color: rgba(232,224,255,.64); font-size: 13px; line-height: 1.55; } @media (max-width: 760px) { .pv-control-panel { inset: 8px; padding: 22px 16px 28px; border-radius: 20px; } .pv-control-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-control-grid { grid-template-columns: 1fr; } .pv-control-card { grid-template-columns: 44px minmax(0, 1fr); padding: 16px; } .pv-control-card__icon { width: 44px; height: 44px; font-size: 23px; } } @media (prefers-reduced-motion: reduce) { .pv-control-modal, .pv-control-panel { transition: none !important; } } /* ======================================================================== PRINTAVERSE UNIVERSE — MISSION CONTROL v2.0 ======================================================================== */ .pv-access-sequence{position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at center,rgba(29,13,68,.96),rgba(2,1,10,.99));opacity:0;transition:opacity .35s ease}.pv-access-sequence.is-active{opacity:1}.pv-access-terminal{width:min(620px,100%);padding:clamp(26px,6vw,58px);border:1px solid rgba(0,212,255,.55);border-radius:24px;background:rgba(5,4,18,.92);box-shadow:0 0 80px rgba(107,53,212,.45);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center}.pv-access-terminal span{display:block;margin:8px;color:#7ee7ff;font-size:12px;letter-spacing:.14em}.pv-access-terminal strong{display:block;margin:28px 0 22px;color:#fff;font-family:'Audiowide',cursive;font-size:clamp(25px,6vw,48px);text-shadow:0 0 24px rgba(0,212,255,.7)}.pv-access-terminal button{border:1px solid #00d4ff;border-radius:999px;padding:13px 22px;background:rgba(0,212,255,.12);color:#fff;font-weight:900;letter-spacing:.12em;cursor:pointer} .pv-control-tabs{display:flex;gap:8px;overflow-x:auto;margin:0 0 22px;padding:4px 0 10px;scrollbar-width:thin}.pv-control-tabs button{flex:0 0 auto;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:10px 14px;background:rgba(255,255,255,.035);color:rgba(255,255,255,.68);font:inherit;font-size:11px;font-weight:800;letter-spacing:.05em;cursor:pointer}.pv-control-tabs button.is-active,.pv-control-tabs button:hover{border-color:rgba(0,212,255,.55);background:rgba(0,212,255,.11);color:#fff;box-shadow:0 0 18px rgba(0,212,255,.14)}.pv-control-view{display:none}.pv-control-view.is-active{display:block}.pv-rewards-grid,.pv-crew-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.pv-reward-card,.pv-crew-grid article,.pv-discovery-list article,.pv-captains-log,.pv-settings-panel,.pv-empty-state{border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(255,255,255,.035);padding:20px}.pv-reward-card{display:grid;grid-template-columns:50px 1fr;gap:15px}.pv-reward-card>span,.pv-crew-grid article>span,.pv-empty-state>span{font-size:36px}.pv-reward-card small,.pv-crew-grid small{color:#7ee7ff;text-transform:uppercase;letter-spacing:.1em;font-weight:800}.pv-reward-card h3,.pv-crew-grid h3,.pv-discovery-list h3,.pv-settings-panel h3,.pv-empty-state h3{color:#fff;margin:5px 0 8px}.pv-crew-grid article p,.pv-discovery-list p,.pv-settings-panel p,.pv-empty-state p{color:rgba(232,224,255,.64);margin:0;line-height:1.55}.pv-discovery-list{display:grid;gap:12px}.pv-discovery-list article{display:grid;grid-template-columns:46px 1fr;gap:14px}.pv-discovery-list article>span{font-size:30px}.pv-discovery-list .is-classified{opacity:.55;filter:saturate(.5)}.pv-captains-log{display:grid;gap:0}.pv-captains-log p{display:flex;justify-content:space-between;gap:20px;margin:0;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}.pv-captains-log p:last-child{border-bottom:0}.pv-captains-log span{color:rgba(232,224,255,.52);font-size:10px;letter-spacing:.12em;font-weight:900}.pv-captains-log strong{color:#fff;text-align:right}.pv-settings-panel label{display:flex;align-items:center;gap:10px;color:#fff;margin:18px 0}.pv-settings-panel button{border:1px solid rgba(255,100,130,.5);border-radius:999px;padding:10px 14px;background:rgba(255,80,110,.08);color:#fff;font-weight:800;cursor:pointer}.pv-empty-state{text-align:center;padding:50px 20px}.pv-footer-signal{display:block;margin:12px auto 4px;border:0;background:transparent;color:rgba(255,255,255,.28);font:700 9px/1.2 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}.pv-footer-signal:hover,.pv-footer-signal.is-online{color:#7ee7ff;text-shadow:0 0 10px rgba(0,212,255,.55)}.pv-konami-glow body{animation:pv-konami-pulse 2s ease-in-out 5}@keyframes pv-konami-pulse{0%,100%{filter:none}50%{filter:hue-rotate(35deg) saturate(1.35);}} @media(max-width:760px){.pv-rewards-grid,.pv-crew-grid{grid-template-columns:1fr}.pv-control-tabs{margin-right:-16px}.pv-captains-log p{display:grid;gap:5px}.pv-captains-log strong{text-align:left}.pv-footer-signal{margin-top:18px}} @media(prefers-reduced-motion:reduce){.pv-access-sequence{transition:none}.pv-konami-glow body{animation:none!important}} /* ======================================================================== PRINTAVERSE UNIVERSE — FLOATING CREW v3.0 ======================================================================== */ .pv-floating-crew { position: absolute; top: var(--pv-crew-top, 38%); left: -110px; width: 82px; height: 104px; display: grid; place-items: center; border: 0; padding: 0; background: transparent; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 0 15px rgba(0,212,255,.72)); animation: pv-crew-cross 17s linear forwards; z-index: 4; user-select: none; -webkit-tap-highlight-color: transparent; } .pv-floating-crew__body { font-size: 62px; line-height: 1; transform: rotate(10deg); animation: pv-crew-bob 1.8s ease-in-out infinite; transition: transform .15s ease, filter .15s ease; } .pv-floating-crew__label { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); opacity: 0; white-space: nowrap; max-width: min(250px, 72vw); overflow: hidden; text-overflow: ellipsis; padding: 6px 10px; border-radius: 999px; font: 800 10px/1.1 'Space Grotesk', sans-serif; color: #fff; background: rgba(7,5,26,.95); border: 1px solid rgba(0,212,255,.55); box-shadow: 0 0 18px rgba(0,212,255,.25); transition: opacity .18s ease; } .pv-floating-crew__label::after { content:''; position:absolute; left:50%; top:100%; width:8px; height:8px; background:rgba(7,5,26,.95); border-right:1px solid rgba(0,212,255,.55); border-bottom:1px solid rgba(0,212,255,.55); transform:translate(-50%,-4px) rotate(45deg); } .pv-floating-crew.has-label-below .pv-floating-crew__label { top: calc(100% + 12px); bottom: auto; } .pv-floating-crew.has-label-below .pv-floating-crew__label::after { top:auto; bottom:100%; border-right:0; border-bottom:0; border-left:1px solid rgba(0,212,255,.55); border-top:1px solid rgba(0,212,255,.55); transform:translate(-50%,4px) rotate(45deg); } .pv-floating-crew__count { position: absolute; right: -6px; bottom: 8px; min-width: 34px; padding: 4px 7px; border-radius: 999px; font: 900 10px/1 ui-monospace, monospace; color: #fff; background: rgba(7,5,26,.94); border: 1px solid rgba(224,64,251,.7); box-shadow: 0 0 16px rgba(224,64,251,.32); } .pv-floating-crew:hover .pv-floating-crew__label, .pv-floating-crew:focus-visible .pv-floating-crew__label, .pv-floating-crew.is-clicked .pv-floating-crew__label { opacity: 1; } .pv-floating-crew.is-clicked .pv-floating-crew__body { transform: scale(1.18) rotate(-8deg); filter: brightness(1.35); } .pv-floating-crew.is-found { animation-play-state: paused; } .pv-floating-crew.is-found .pv-floating-crew__body { animation: pv-crew-found .8s ease forwards; } .pv-floating-crew.is-steve { filter: drop-shadow(0 0 15px rgba(224,64,251,.8)); } .pv-floating-crew.is-steve .pv-floating-crew__body { animation-name: pv-crew-spin; } .pv-floating-crew.is-kevin::after { content:'🔧'; position:absolute; right:-24px; top:28px; font-size:22px; animation:pv-wrench-chase 1.3s ease-in-out infinite; } .pv-floating-crew.is-bob { filter: drop-shadow(0 0 15px rgba(255,212,112,.8)); } .pv-floating-crew.is-eva { filter: drop-shadow(0 0 15px rgba(80,227,164,.85)); } .pv-floating-crew.is-eva .pv-floating-crew__body { animation-name: pv-robot-hover; } .pv-floating-crew.is-gary { filter: drop-shadow(0 0 18px rgba(130,255,130,.82)); } .pv-floating-crew.is-gary::before { content:'🛸'; position:absolute; top:-28px; left:16px; font-size:28px; animation:pv-ufo-wobble 1.5s ease-in-out infinite; } .pv-crew-grid article.is-classified { opacity:.52; filter:saturate(.45); } .pv-crew-grid article.is-discovered { border-color:rgba(0,212,255,.28); box-shadow:0 0 24px rgba(0,212,255,.08); } @keyframes pv-crew-cross { from { transform:translateX(-130px); } to { transform:translateX(calc(100vw + 230px)); } } @keyframes pv-crew-bob { 0%,100% { transform:translateY(0) rotate(10deg); } 50% { transform:translateY(-13px) rotate(16deg); } } @keyframes pv-crew-spin { 0% { transform:rotate(0deg) translateY(0); } 50% { transform:rotate(180deg) translateY(-10px); } 100% { transform:rotate(360deg) translateY(0); } } @keyframes pv-robot-hover { 0%,100% { transform:translateY(0) scale(.98); } 50% { transform:translateY(-9px) scale(1.03); } } @keyframes pv-wrench-chase { 0%,100% { transform:translate(0,0) rotate(0deg); } 50% { transform:translate(9px,-12px) rotate(180deg); } } @keyframes pv-ufo-wobble { 0%,100% { transform:translateX(-5px) rotate(-8deg); } 50% { transform:translateX(8px) rotate(8deg); } } @keyframes pv-crew-found { 0% { transform:scale(1) rotate(10deg); opacity:1; } 55% { transform:scale(1.3) rotate(-12deg); opacity:1; } 100% { transform:scale(.25) rotate(380deg); opacity:0; } } @media (max-width:749px) { .pv-floating-crew { width:64px; height:88px; } .pv-floating-crew__body { font-size:50px; } .pv-floating-crew__label { max-width:min(220px,78vw); } } @media (prefers-reduced-motion:reduce) { .pv-floating-crew { display:none !important; } } /* ======================================================================== MISSION 6 — ORIGINAL PRINTAVERSE CREW ART ======================================================================== */ .pv-crew-art{display:block;width:100%;height:100%;overflow:visible}.pv-crew-art *{transform-box:fill-box;transform-origin:center}.pv-crew-art--badge{width:44px;height:55px}.pv-crew-art--portrait{width:112px;height:140px;margin:auto}.pv-crew-art--full{width:92px;height:116px}.pv-art-flame{animation:pv-art-flame .28s ease-in-out infinite alternate;transform-origin:top}.pv-art-head{animation:pv-art-head 3.2s ease-in-out infinite}.pv-art-arm--left{animation:pv-art-wave 2.6s ease-in-out infinite;transform-origin:85% 15%}.pv-crew-art--steve .pv-art-stickers{animation:pv-art-sparkle 1.7s ease-in-out infinite}.pv-crew-art--kevin .pv-art-wrench{animation:pv-art-wrench 1.8s ease-in-out infinite}.pv-crew-art--bob .pv-art-arm--right{animation:pv-art-salute 2.4s ease-in-out infinite}.pv-crew-art--eva .pv-eva-eye{animation:pv-eva-blink 3.8s steps(1) infinite}.pv-crew-art--gary .pv-art-chicken{animation:pv-art-chicken 1.2s ease-in-out infinite}.pv-floating-crew__body{width:92px;height:116px;font-size:0}.pv-floating-crew.is-clicked .pv-floating-crew__body{transform:scale(1.12) rotate(-5deg)}.pv-floating-crew.is-steve .pv-floating-crew__body{animation-name:pv-crew-spin-art}.pv-floating-crew.is-kevin::after,.pv-floating-crew.is-gary::before{content:none}.pv-floating-crew.is-bob .pv-floating-crew__body{animation-name:pv-crew-bob-art}.pv-floating-crew.is-eva .pv-floating-crew__body{animation-name:pv-robot-hover}.pv-floating-crew.is-gary .pv-floating-crew__body{animation-name:pv-gary-bounce}.pv-crew-grid article{display:grid;grid-template-columns:126px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:18px;align-items:center}.pv-crew-grid article>.pv-crew-portrait{grid-row:1/4;width:120px;min-height:145px;display:grid;place-items:center;border-radius:18px;background:radial-gradient(circle at 50% 35%,rgba(0,212,255,.13),rgba(107,53,212,.06) 60%,transparent);border:1px solid rgba(255,255,255,.07)}.pv-classified-portrait{display:grid;place-items:center;width:76px;height:96px;border:1px dashed rgba(255,255,255,.22);border-radius:36px;color:rgba(255,255,255,.4);font:900 38px/1 ui-monospace,monospace}.pv-crew-grid article>h3,.pv-crew-grid article>small,.pv-crew-grid article>p{grid-column:2;margin-left:0}.pv-discovery-portrait{width:46px;height:58px;display:grid;place-items:center;font-size:30px}.pv-discovery-portrait .pv-crew-art{width:42px;height:54px}.pv-toast-icon .pv-crew-art{width:46px;height:58px}.pv-control-card__icon .pv-crew-art{width:48px;height:60px}.pv-reward-card>span .pv-crew-art{width:48px;height:60px} @keyframes pv-art-flame{from{transform:scaleY(.72);opacity:.72}to{transform:scaleY(1.16);opacity:1}}@keyframes pv-art-head{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(2deg)}}@keyframes pv-art-wave{0%,55%,100%{transform:rotate(0)}65%{transform:rotate(-16deg)}76%{transform:rotate(10deg)}87%{transform:rotate(-10deg)}}@keyframes pv-art-sparkle{0%,100%{filter:none}50%{filter:drop-shadow(0 0 5px #ffcf55)}}@keyframes pv-art-wrench{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(7px,-9px) rotate(180deg)}}@keyframes pv-art-salute{0%,55%,100%{transform:rotate(0)}65%,85%{transform:rotate(-22deg) translate(-4px,-9px)}}@keyframes pv-eva-blink{0%,46%,50%,100%{opacity:1}47%,49%{opacity:.08}}@keyframes pv-art-chicken{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(6deg) translateY(-2px)}}@keyframes pv-crew-spin-art{0%{transform:rotate(0) translateY(0)}50%{transform:rotate(180deg) translateY(-8px)}100%{transform:rotate(360deg) translateY(0)}}@keyframes pv-crew-bob-art{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-8px) rotate(-2deg)}}@keyframes pv-gary-bounce{0%,100%{transform:translateY(0) rotate(-5deg)}35%{transform:translateY(-11px) rotate(6deg)}70%{transform:translateY(-3px) rotate(-2deg)}} @media(max-width:760px){.pv-crew-grid article{grid-template-columns:92px minmax(0,1fr);column-gap:12px}.pv-crew-grid article>.pv-crew-portrait{width:88px;min-height:116px}.pv-crew-art--portrait{width:84px;height:108px}.pv-floating-crew__body,.pv-crew-art--full{width:72px;height:94px}} /* ========================================================= PRINTAVERSE STATION FRAMEWORK 4.0 Station news, incident reports, clearance and cargo events ========================================================= */ .pv-station-news { position: fixed; z-index: 2147482500; left: 18px; right: 18px; bottom: 16px; min-height: 42px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; max-width: 980px; margin: 0 auto; padding: 8px 10px 8px 14px; border: 1px solid rgba(126,231,255,.28); border-radius: 12px; color: #fff; background: linear-gradient(90deg,rgba(14,11,42,.96),rgba(31,15,73,.96)); box-shadow: 0 14px 50px rgba(0,0,0,.35),0 0 24px rgba(107,53,212,.18); backdrop-filter: blur(16px); transition: opacity .25s ease,transform .25s ease; } .pv-station-news.is-hidden { opacity:0; transform:translateY(120%); pointer-events:none; } .pv-station-news__label { font:800 10px/1 'Space Grotesk',sans-serif; letter-spacing:.16em; color:#7ee7ff; white-space:nowrap; } .pv-station-news__copy { opacity:0; transform:translateY(4px); transition:.2s ease; font-size:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .pv-station-news__copy.is-live { opacity:1; transform:none; } .pv-station-news button { width:26px;height:26px;border:0;border-radius:8px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer; } .pv-incident-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; } .pv-incident-card { position:relative;padding:18px;border:1px solid rgba(126,231,255,.16);border-radius:16px;background:linear-gradient(145deg,rgba(25,19,66,.92),rgba(10,9,34,.96));cursor:pointer;transition:.2s ease; } .pv-incident-card:hover { transform:translateY(-2px);border-color:rgba(224,64,251,.5);box-shadow:0 12px 34px rgba(0,0,0,.2); } .pv-incident-card.is-read { border-color:rgba(80,227,164,.35); } .pv-incident-card__top { display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px; } .pv-incident-card__top span { font:800 10px/1 'Space Grotesk',sans-serif;letter-spacing:.14em;color:#7ee7ff; } .pv-incident-card__top small { padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.06);color:#c8c9e8; } .pv-incident-card h3 { margin:0 0 8px;font-size:17px;color:#fff; } .pv-incident-card p { margin:0;color:#c8c9e8;font-size:13px;line-height:1.55; } .pv-incident-card footer { margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:#9fa2c7; } .pv-incident-card.is-read:after { content:'FILE OPENED';position:absolute;right:14px;bottom:12px;font-size:8px;letter-spacing:.12em;color:#50e3a4; } .pv-reputation-panel { display:grid;grid-template-columns:minmax(220px,.8fr) 1.4fr;gap:22px;align-items:start; } .pv-rank-orbit { position:relative;min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid rgba(126,231,255,.22);border-radius:50%;background:radial-gradient(circle,rgba(107,53,212,.34),rgba(9,8,31,.9) 68%);box-shadow:inset 0 0 55px rgba(0,212,255,.07),0 0 32px rgba(107,53,212,.18); } .pv-rank-orbit:before { content:'';position:absolute;inset:-9px;border:1px dashed rgba(224,64,251,.3);border-radius:50%;animation:pv-rank-spin 18s linear infinite; } .pv-rank-orbit span { color:#7ee7ff;font-size:9px;letter-spacing:.18em;font-weight:800; } .pv-rank-orbit strong { margin:10px 20px;font-family:'Audiowide',sans-serif;font-size:24px;color:#fff; } .pv-rank-orbit small { color:#b9bad8; } .pv-rank-track { display:grid;gap:8px; } .pv-rank-track>div { display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025);opacity:.5; } .pv-rank-track>div.is-earned { opacity:1;border-color:rgba(80,227,164,.28);background:rgba(80,227,164,.05); } .pv-rank-track span { color:#50e3a4;font-weight:900; } .pv-rank-track strong { color:#fff;font-size:13px; } .pv-rank-track small { color:#9fa2c7;font-size:10px; } @keyframes pv-rank-spin { to { transform:rotate(360deg); } } .pv-cargo-drop { position:fixed;z-index:2147483000;right:7vw;top:20%;width:110px;height:170px;border:0;background:none;color:#fff;cursor:pointer;animation:pv-cargo-land 1.4s cubic-bezier(.2,.8,.2,1) both,pv-cargo-hover 2.8s ease-in-out 1.4s infinite; } .pv-cargo-drop__beam { position:absolute;left:35px;top:0;width:40px;height:100px;background:linear-gradient(to bottom,rgba(126,231,255,0),rgba(126,231,255,.28));clip-path:polygon(42% 0,58% 0,100% 100%,0 100%); } .pv-cargo-drop__crate { position:absolute;left:23px;bottom:27px;width:64px;height:58px;display:grid;place-items:center;border:3px solid #7ee7ff;border-radius:10px;background:linear-gradient(145deg,#6b35d4,#24134f);box-shadow:0 0 28px rgba(126,231,255,.45);font-family:'Audiowide',sans-serif; } .pv-cargo-drop__label { position:absolute;bottom:0;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:8px;letter-spacing:.13em;color:#7ee7ff; } .pv-cargo-drop.is-opened { animation:pv-cargo-open .65s ease forwards; } @keyframes pv-cargo-land { from { transform:translateY(-220px) rotate(12deg);opacity:0; } to { transform:translateY(0);opacity:1; } } @keyframes pv-cargo-hover { 50% { transform:translateY(-10px); } } @keyframes pv-cargo-open { to { transform:scale(1.35);opacity:0;filter:brightness(2); } } .pv-crew-interaction { position:fixed;z-index:2147482600;left:-280px;top:28%;width:250px;height:180px;pointer-events:none;animation:pv-crew-chase 12s linear forwards; } .pv-crew-interaction__bob,.pv-crew-interaction__larry { position:absolute;width:100px; } .pv-crew-interaction__bob { left:0;top:25px; } .pv-crew-interaction__larry { left:130px;top:0;transform:rotate(8deg); } .pv-crew-interaction span { position:absolute;top:-24px;left:0;padding:5px 8px;border-radius:8px;background:#fff;color:#15113f;font-size:9px;font-weight:800;white-space:nowrap;box-shadow:0 5px 18px rgba(0,0,0,.25); } @keyframes pv-crew-chase { from { transform:translateX(0); } to { transform:translateX(calc(100vw + 560px)); } } @media (max-width: 740px) { .pv-station-news { left:8px;right:8px;bottom:8px;grid-template-columns:auto 1fr auto;gap:8px; } .pv-station-news__label { font-size:8px; } .pv-station-news__copy { font-size:10px; } .pv-incident-grid { grid-template-columns:1fr; } .pv-reputation-panel { grid-template-columns:1fr; } .pv-rank-orbit { min-height:210px;max-width:210px;margin:0 auto; } .pv-cargo-drop { right:1vw;transform:scale(.82);transform-origin:top right; } } @media (prefers-reduced-motion: reduce) { .pv-rank-orbit:before,.pv-cargo-drop,.pv-crew-interaction { animation:none !important; } } /* Station Archives v1 */ .pv-archive-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.pv-archive-card{position:relative;min-height:170px;padding:20px;border:1px solid rgba(126,231,255,.16);border-radius:18px;background:linear-gradient(145deg,rgba(25,19,66,.92),rgba(10,9,34,.96));overflow:hidden}.pv-archive-card:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 18px,rgba(126,231,255,.025) 19px);pointer-events:none}.pv-archive-card__top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.pv-archive-card__top span{font:900 10px/1 ui-monospace,monospace;letter-spacing:.16em;color:#7ee7ff}.pv-archive-card__top small{padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.06);color:#c8c9e8;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.pv-archive-card h3,.pv-archive-card p{position:relative}.pv-archive-card h3{margin:0 0 9px;color:#fff}.pv-archive-card p{margin:0;color:#b9bad8;line-height:1.6;font-size:13px}.pv-archive-card.is-open{border-color:rgba(80,227,164,.26);box-shadow:0 0 24px rgba(80,227,164,.05)}.pv-archive-card.is-classified{filter:saturate(.45);opacity:.68}.pv-archive-card.is-classified h3{letter-spacing:.13em}.pv-archive-card.is-classified:after{content:'ACCESS DENIED';position:absolute;right:-33px;bottom:20px;transform:rotate(-18deg);padding:6px 38px;border:2px solid rgba(255,97,132,.38);color:rgba(255,97,132,.55);font:900 10px/1 ui-monospace,monospace;letter-spacing:.14em}@media(max-width:740px){.pv-archive-grid{grid-template-columns:1fr}.pv-floating-crew__label{font-size:9px;padding:7px 9px}} /* ======================================================================== MISSION 8 — CHARACTER INTERACTION OVERHAUL Keeps dialogue and transmission progress together, clear of crew artwork. ======================================================================== */ .pv-floating-crew__hud{ position:absolute; left:50%; bottom:calc(100% + 14px); width:max-content; max-width:min(270px,78vw); transform:translateX(-50%); display:grid; justify-items:center; gap:7px; pointer-events:none; z-index:8; opacity:0; transition:opacity .16s ease,transform .16s ease; } .pv-floating-crew.has-label-below .pv-floating-crew__hud{ top:calc(100% + 14px); bottom:auto; } .pv-floating-crew:hover .pv-floating-crew__hud, .pv-floating-crew:focus-visible .pv-floating-crew__hud, .pv-floating-crew.is-clicked .pv-floating-crew__hud{ opacity:1; } .pv-floating-crew.is-clicked .pv-floating-crew__hud{ transform:translateX(-50%) translateY(-3px); } .pv-floating-crew.has-label-below.is-clicked .pv-floating-crew__hud{ transform:translateX(-50%) translateY(3px); } .pv-floating-crew__label{ position:relative; inset:auto; left:auto; right:auto; top:auto; bottom:auto; transform:none; opacity:1; display:block; max-width:min(270px,78vw); white-space:normal; overflow:visible; text-overflow:clip; text-align:center; padding:8px 12px; border-radius:14px; font-size:11px; line-height:1.25; } .pv-floating-crew__label::after{display:none} .pv-floating-crew__signal{ display:flex; align-items:center; gap:7px; min-height:27px; padding:5px 9px; border-radius:999px; color:#fff; background:rgba(7,5,26,.96); border:1px solid rgba(224,64,251,.58); box-shadow:0 0 16px rgba(224,64,251,.24); font:900 9px/1 ui-monospace,monospace; letter-spacing:.04em; white-space:nowrap; } .pv-floating-crew__signal-title{ color:rgba(255,255,255,.72); text-transform:uppercase; letter-spacing:.1em; } .pv-floating-crew__bars{display:flex;align-items:flex-end;gap:2px;height:11px} .pv-floating-crew__bars i{ display:block; width:4px; height:5px; border-radius:2px; background:rgba(255,255,255,.2); transition:height .14s ease,background .14s ease,box-shadow .14s ease; } .pv-floating-crew__bars i:nth-child(2){height:6px}.pv-floating-crew__bars i:nth-child(3){height:7px}.pv-floating-crew__bars i:nth-child(4){height:9px}.pv-floating-crew__bars i:nth-child(5){height:11px} .pv-floating-crew__bars i.is-live{background:#7ee7ff;box-shadow:0 0 7px rgba(0,212,255,.8)} .pv-floating-crew__count{ position:static; right:auto; bottom:auto; min-width:28px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:#fff; font-size:10px; } /* Character-specific communication styling. */ .pv-floating-crew.is-bob .pv-floating-crew__label{border-color:rgba(255,207,85,.8);background:rgba(37,20,16,.96);box-shadow:0 0 20px rgba(255,207,85,.22)} .pv-floating-crew.is-bob .pv-floating-crew__signal{border-color:rgba(255,207,85,.72)} .pv-floating-crew.is-eva .pv-floating-crew__label{border-color:rgba(80,227,164,.78);background:rgba(5,28,31,.95);font-family:ui-monospace,monospace;box-shadow:0 0 20px rgba(80,227,164,.2)} .pv-floating-crew.is-eva .pv-floating-crew__signal{border-color:rgba(80,227,164,.7)} .pv-floating-crew.is-gary .pv-floating-crew__label{transform:rotate(-1.5deg);border-color:rgba(140,255,104,.75);background:rgba(21,31,15,.96);box-shadow:0 0 20px rgba(140,255,104,.2)} .pv-floating-crew.is-steve .pv-floating-crew__label{border-color:rgba(255,95,190,.78);box-shadow:0 0 20px rgba(255,95,190,.22)} .pv-floating-crew.is-kevin .pv-floating-crew__label{border-color:rgba(255,145,70,.75);box-shadow:0 0 20px rgba(255,145,70,.2)} @media(max-width:749px){ .pv-floating-crew__hud{max-width:min(235px,82vw);gap:5px} .pv-floating-crew__label{max-width:min(235px,82vw);font-size:10px;padding:7px 10px} .pv-floating-crew__signal-title{display:none} } /* ===== Mission 9: Living Station ===== */ .pv-living-layer{position:fixed;inset:0;pointer-events:none;z-index:2147481500;overflow:hidden} .pv-ambient-object{position:absolute;top:var(--pv-ambient-y);left:-90px;display:flex;align-items:center;gap:6px;opacity:0;filter:drop-shadow(0 0 9px rgba(68,208,255,.75));animation:pvAmbientTransit var(--pv-ambient-duration) linear forwards;color:#8eeeff} .pv-ambient-object span{font-size:18px}.pv-ambient-object i{display:block;width:32px;height:1px;background:linear-gradient(90deg,#8eeeff,transparent)} .pv-ambient-object.is-shuttle{color:#f07cff;transform:scale(1.25)}.pv-ambient-object.is-drone{color:#fff;animation-direction:normal} @keyframes pvAmbientTransit{0%{transform:translateX(0) translateY(4px) scale(.7);opacity:0}10%{opacity:.6}50%{transform:translateX(52vw) translateY(-12px) scale(1)}90%{opacity:.55}100%{transform:translateX(calc(100vw + 160px)) translateY(8px) scale(.78);opacity:0}} .pv-station-radio{position:fixed;left:18px;bottom:72px;width:min(330px,calc(100vw - 36px));z-index:2147482500;border:1px solid rgba(106,221,255,.42);background:linear-gradient(145deg,rgba(7,8,30,.94),rgba(26,10,55,.95));box-shadow:0 10px 35px rgba(0,0,0,.35),0 0 25px rgba(67,194,255,.12);border-radius:14px;overflow:hidden;color:#fff;opacity:.82;transition:opacity .25s,transform .25s} .pv-station-radio:hover{opacity:1}.pv-station-radio__head{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-bottom:1px solid rgba(106,221,255,.2);font-size:10px;letter-spacing:.14em;color:#75e8ff} .pv-station-radio__head button{border:0;background:transparent;color:#fff;cursor:pointer;font-size:16px}.pv-station-radio__body{padding:10px 12px;min-height:61px;opacity:.35;transform:translateY(4px);transition:.25s} .pv-station-radio.is-live .pv-station-radio__body{opacity:1;transform:none}.pv-station-radio__body b{display:block;color:#ee77ff;font-size:11px;text-transform:uppercase;letter-spacing:.12em}.pv-station-radio__body p{margin:3px 0 0;font-size:13px;line-height:1.35} .pv-living-scene{position:fixed;left:-360px;top:34vh;display:flex;align-items:flex-end;gap:24px;opacity:0;transition:opacity .5s;animation:pvSceneCross 11s linear forwards;z-index:2147482300} .pv-living-scene.is-active{opacity:1}.pv-living-scene__actor{position:relative;display:grid;place-items:center;width:105px;height:105px;border-radius:50%;background:radial-gradient(circle,#fff 0 8%,#7ce6ff 9% 13%,#6d3add 14% 48%,#151339 49% 100%);border:3px solid #fff;box-shadow:0 0 24px rgba(115,218,255,.65);font-size:42px} .pv-living-scene__actor b{position:absolute;bottom:-18px;font-size:9px;letter-spacing:.14em;color:#8eeeff}.pv-living-scene__actor span{position:absolute;left:50%;bottom:116px;transform:translateX(-50%);min-width:110px;max-width:170px;padding:7px 9px;border-radius:10px;background:#fff;color:#161333;text-align:center;font-weight:800;font-size:11px;box-shadow:0 8px 24px rgba(0,0,0,.25)} .pv-living-scene__actor.is-bob{border-color:#ff6b7e}.pv-living-scene__actor.is-gary{border-color:#8dff72;transform:rotate(-5deg)}.pv-living-scene__prop{font-size:34px;animation:pvWrenchTumble 1.4s linear infinite} @keyframes pvSceneCross{0%{transform:translateX(0);opacity:0}8%{opacity:1}88%{opacity:1}100%{transform:translateX(calc(100vw + 720px));opacity:0}} @keyframes pvWrenchTumble{to{transform:rotate(360deg)}} .pv-daily-event{position:fixed;top:110px;left:50%;transform:translate(-50%,-25px);z-index:2147483000;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;min-width:min(480px,calc(100vw - 30px));padding:13px 16px;border:1px solid rgba(121,229,255,.55);border-radius:14px;background:linear-gradient(135deg,rgba(9,10,36,.97),rgba(66,22,105,.97));color:#fff;box-shadow:0 12px 50px rgba(0,0,0,.48),0 0 28px rgba(120,67,255,.25);opacity:0;cursor:pointer;text-align:left;transition:.45s} .pv-daily-event.is-live{opacity:1;transform:translate(-50%,0)}.pv-daily-event>span{grid-row:1/3;padding:6px 8px;border-radius:7px;background:#ff526f;font-size:9px;font-weight:900;letter-spacing:.12em}.pv-daily-event strong{font-size:14px}.pv-daily-event small{color:#99eaff;font-size:11px} .pv-live-status{display:grid;gap:18px}.pv-live-status__hero{display:flex;justify-content:space-between;gap:20px;padding:20px;border:1px solid rgba(112,225,255,.3);border-radius:16px;background:linear-gradient(135deg,rgba(30,20,78,.85),rgba(8,12,35,.8))}.pv-live-status__hero small{color:#72e8ff;letter-spacing:.14em;font-weight:800}.pv-live-status__hero h3{margin:5px 0 4px;font-size:24px}.pv-live-status__hero p{margin:0;max-width:680px;color:rgba(255,255,255,.78)}.pv-live-status__pulse{width:17px;height:17px;border-radius:50%;background:#65f1c4;box-shadow:0 0 0 0 rgba(101,241,196,.65);animation:pvStatusPulse 1.8s infinite} @keyframes pvStatusPulse{70%{box-shadow:0 0 0 13px rgba(101,241,196,0)}100%{box-shadow:0 0 0 0 rgba(101,241,196,0)}} .pv-live-status__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px}.pv-live-status__grid article{padding:16px;border:1px solid rgba(133,212,255,.18);border-radius:14px;background:rgba(6,8,28,.56)}.pv-live-status__grid h4{margin:0 0 13px;color:#e074ff;font-size:11px;letter-spacing:.14em}.pv-live-status__grid article>p{display:flex;justify-content:space-between;gap:12px;margin:0;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:12px}.pv-live-status__grid article>p span{color:rgba(255,255,255,.65)}.pv-live-meter{margin:0 0 13px}.pv-live-meter>div{display:flex;justify-content:space-between;font-size:11px}.pv-live-meter i{display:block;height:7px;margin-top:5px;border-radius:20px;background:rgba(255,255,255,.1);overflow:hidden}.pv-live-meter em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8459ff,#47d9ff,#74ffc6);box-shadow:0 0 9px rgba(71,217,255,.55)} @media(max-width:760px){.pv-station-radio{left:10px;bottom:58px;width:calc(100vw - 20px)}.pv-living-scene{transform:scale(.78);transform-origin:left center}.pv-live-status__grid{grid-template-columns:1fr}.pv-daily-event{top:82px}.pv-live-status__hero h3{font-size:19px}} @media(prefers-reduced-motion:reduce){.pv-ambient-object,.pv-living-scene,.pv-live-status__pulse{display:none!important}} /* ======================================================================== MISSION 9.5 — LIVING STATION OVERHAUL ======================================================================== */ .pv95-station{position:relative;overflow:hidden;padding:clamp(54px,7vw,110px) 20px;background:radial-gradient(circle at 16% 10%,rgba(108,49,226,.27),transparent 34%),radial-gradient(circle at 85% 76%,rgba(0,212,255,.15),transparent 30%),linear-gradient(180deg,#09051b 0%,#050410 100%);border-block:1px solid rgba(139,92,246,.25);isolation:isolate} .pv95-station:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);z-index:-1} .pv95-starfield{position:absolute;inset:0;z-index:-1;opacity:.65;background-image:radial-gradient(circle,#fff 1px,transparent 1.4px),radial-gradient(circle,#8be9ff 1px,transparent 1.4px);background-size:79px 83px,137px 149px;background-position:5px 12px,33px 67px;animation:pv95Stars 28s linear infinite} @keyframes pv95Stars{to{background-position:84px 12px,170px 67px}} .pv95-shell{width:min(1320px,100%);margin:auto;position:relative;z-index:2} .pv95-heading-row{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:34px} .pv95-kicker{font-size:12px;font-weight:800;letter-spacing:.22em;color:#9f8cff;margin-bottom:14px}.pv95-kicker span{display:inline-block;width:8px;height:8px;border-radius:50%;background:#39ffa0;box-shadow:0 0 14px #39ffa0;margin-right:10px;animation:pv95Pulse 1.5s ease-in-out infinite} @keyframes pv95Pulse{50%{opacity:.35;transform:scale(.72)}} .pv95-heading-row h2{font-size:clamp(38px,5vw,72px);line-height:.98;margin:0;color:#fff;letter-spacing:-.045em}.pv95-heading-row h2 em{font-style:normal;background:linear-gradient(90deg,#e040fb,#00d4ff);-webkit-background-clip:text;background-clip:text;color:transparent}.pv95-heading-row p{max-width:720px;font-size:clamp(16px,1.4vw,20px);color:rgba(232,224,255,.72);margin:20px 0 0} .pv95-open-control{flex:0 0 auto;border:1px solid rgba(0,212,255,.55);background:rgba(8,8,31,.74);color:#fff;border-radius:14px;padding:16px 18px;display:flex;gap:22px;align-items:center;font-weight:800;letter-spacing:.08em;cursor:pointer;box-shadow:0 0 30px rgba(0,212,255,.12),inset 0 0 18px rgba(0,212,255,.06);transition:.25s}.pv95-open-control:hover{transform:translateY(-3px);border-color:#e040fb;box-shadow:0 0 30px rgba(224,64,251,.25)}.pv95-open-control b{font-size:22px;color:#00d4ff} .pv95-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:18px}.pv95-card{position:relative;background:linear-gradient(145deg,rgba(24,11,62,.92),rgba(7,5,26,.94));border:1px solid rgba(139,92,246,.35);border-radius:22px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.05)}.pv95-card:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.035) 50%,transparent 65%);transform:translateX(-100%);animation:pv95Scan 8s linear infinite}@keyframes pv95Scan{75%,100%{transform:translateX(100%)}} .pv95-card>header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(139,92,246,.23);background:rgba(5,4,16,.56);font-size:11px;letter-spacing:.18em;font-weight:900;color:#d8ccff}.pv95-card>header i{font-style:normal;color:#00d4ff;font-variant-numeric:tabular-nums}.pv95-status-card{padding-bottom:18px}.pv95-status-list{padding:18px;display:grid;gap:13px}.pv95-status-list>div{display:grid;grid-template-columns:100px 1fr 76px;gap:12px;align-items:center}.pv95-status-list label{font-size:10px;letter-spacing:.12em;color:rgba(232,224,255,.66)}.pv95-status-list b{text-align:right;font-size:10px;color:#b8f5ff}.pv95-meter{height:8px;border-radius:99px;background:#0b0920;overflow:hidden;border:1px solid rgba(255,255,255,.06)}.pv95-meter i{display:block;width:var(--level);height:100%;border-radius:inherit;background:linear-gradient(90deg,#6b35d4,#00d4ff);box-shadow:0 0 12px #00d4ff;transition:width .8s ease}.pv95-meter--danger i{background:linear-gradient(90deg,#ff6b6b,#ffb84d);box-shadow:0 0 12px #ff8d4d}.pv95-meter--warning i{background:linear-gradient(90deg,#e040fb,#ff557e);box-shadow:0 0 12px #e040fb} .pv95-daily-event{margin:0 18px;padding:16px;border-radius:14px;background:linear-gradient(120deg,rgba(107,53,212,.21),rgba(0,212,255,.08));border:1px solid rgba(0,212,255,.18)}.pv95-daily-event small{display:block;color:#00d4ff;letter-spacing:.15em;font-weight:900;font-size:9px}.pv95-daily-event strong{display:block;color:#fff;font-size:18px;margin:5px 0}.pv95-daily-event p{margin:0;color:rgba(232,224,255,.72);font-size:13px;line-height:1.45} .pv95-live-dot{color:#ff7392!important}.pv95-live-dot:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#ff426d;box-shadow:0 0 10px #ff426d;margin-right:7px;animation:pv95Pulse 1.1s infinite}.pv95-radio-screen{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;padding:20px}.pv95-radio-avatar{width:90px;height:90px;border-radius:18px;background:radial-gradient(circle,rgba(107,53,212,.38),rgba(0,212,255,.08));border:1px solid rgba(0,212,255,.23);display:grid;place-items:center;overflow:hidden}.pv95-radio-avatar img{width:94px;height:94px;object-fit:contain}.pv95-radio-screen small{color:#00d4ff;font-size:10px;letter-spacing:.11em;font-weight:900}.pv95-radio-screen p{margin:8px 0 0;color:#fff;font-size:clamp(18px,2vw,27px);line-height:1.15;font-weight:700}.pv95-radio-log{border-top:1px solid rgba(139,92,246,.2);padding:14px 18px;display:grid;gap:8px;background:rgba(3,3,15,.35)}.pv95-radio-log span{font-size:11px;color:rgba(232,224,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pv95-radio-log b{color:#a991ff} .pv95-crew-card{grid-column:1/-1}.pv95-crew-scene{min-height:390px;position:relative;background:radial-gradient(ellipse at 50% 100%,rgba(107,53,212,.32),transparent 58%),linear-gradient(180deg,rgba(0,212,255,.045),transparent);overflow:hidden}.pv95-crew-scene:before{content:"";position:absolute;left:8%;right:8%;bottom:25px;height:76px;border:1px solid rgba(0,212,255,.22);border-radius:50%;box-shadow:0 0 40px rgba(0,212,255,.14),inset 0 0 30px rgba(107,53,212,.15);transform:perspective(220px) rotateX(66deg)}.pv95-crew-member{position:absolute;border:0;background:none;color:#fff;cursor:pointer;padding:0;filter:drop-shadow(0 22px 24px rgba(0,0,0,.4));transition:filter .2s}.pv95-crew-member:hover{filter:drop-shadow(0 0 25px rgba(0,212,255,.55))}.pv95-crew-member img{display:block;object-fit:contain}.pv95-crew-member>span{position:absolute;left:50%;transform:translateX(-50%);bottom:-8px;padding:6px 10px;border-radius:8px;background:rgba(5,4,16,.88);border:1px solid rgba(0,212,255,.3);font-size:10px;letter-spacing:.12em;font-weight:900;white-space:nowrap}.pv95-crew-member small{display:block;color:#00d4ff;font-size:7px;margin-top:3px}.pv95-crew-member--larry{left:8%;top:30px;animation:pv95Larry 6s ease-in-out infinite}.pv95-crew-member--larry img{width:260px;height:260px}.pv95-crew-member--steve{right:7%;top:64px;animation:pv95Steve 5.2s ease-in-out infinite}.pv95-crew-member--steve img{width:240px;height:240px}@keyframes pv95Larry{50%{transform:translate(14px,-15px) rotate(2deg)}}@keyframes pv95Steve{50%{transform:translate(-10px,-8px) rotate(-1deg)}} .pv95-crew-dialogue{position:absolute;z-index:5;left:50%;top:30px;transform:translateX(-50%);max-width:340px;padding:14px 18px;border-radius:15px;background:#fff;color:#130929;font-weight:800;box-shadow:0 10px 40px rgba(0,0,0,.35)}.pv95-crew-dialogue:after{content:"";position:absolute;left:50%;bottom:-10px;border:10px solid transparent;border-top-color:#fff;border-bottom:0}.pv95-crew-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(139,92,246,.2)}.pv95-crew-strip span{padding:13px 16px;color:rgba(232,224,255,.58);font-size:10px;border-right:1px solid rgba(139,92,246,.16)}.pv95-crew-strip span:last-child{border-right:0}.pv95-crew-strip b{color:#fff;margin-right:6px} .pv95-transmission{margin-top:18px;min-height:48px;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:12px 16px;border:1px solid rgba(0,212,255,.25);border-radius:13px;background:rgba(7,5,26,.84);box-shadow:inset 0 0 20px rgba(0,212,255,.05)}.pv95-transmission strong{font-size:9px;letter-spacing:.16em;color:#00d4ff}.pv95-transmission span{font-size:12px;color:#dfd8f4}.pv95-transmission i{width:10px;height:10px;border-radius:50%;background:#e040fb;box-shadow:0 0 14px #e040fb;animation:pv95Pulse 1.3s infinite} .pv95-orbit-traffic span{position:absolute;z-index:1;color:#8ceaff;opacity:.5;text-shadow:0 0 15px #00d4ff}.pv95-satellite{top:19%;left:-6%;font-size:25px;animation:pv95Fly 24s linear infinite}.pv95-shuttle{top:52%;right:-8%;font-size:34px;animation:pv95FlyBack 31s linear 4s infinite}.pv95-drone{top:76%;left:-5%;font-size:17px;animation:pv95Fly 19s linear 8s infinite}@keyframes pv95Fly{to{transform:translateX(112vw) rotate(360deg)}}@keyframes pv95FlyBack{to{transform:translateX(-112vw)}} @media(max-width:900px){.pv95-heading-row{align-items:flex-start;flex-direction:column}.pv95-grid{grid-template-columns:1fr}.pv95-crew-card{grid-column:auto}.pv95-crew-scene{min-height:320px}.pv95-crew-member--larry{left:1%;top:30px}.pv95-crew-member--steve{right:0;top:55px}.pv95-crew-member--larry img,.pv95-crew-member--steve img{width:190px;height:220px}.pv95-crew-strip{grid-template-columns:1fr 1fr}.pv95-crew-strip span:nth-child(2){border-right:0}.pv95-transmission{grid-template-columns:1fr auto}.pv95-transmission strong{grid-column:1/-1}.pv95-heading-row h2 br{display:none}} @media(max-width:560px){.pv95-station{padding-inline:12px}.pv95-status-list>div{grid-template-columns:76px 1fr 54px;gap:8px}.pv95-radio-screen{grid-template-columns:70px 1fr;padding:15px}.pv95-radio-avatar{width:68px;height:68px}.pv95-radio-avatar img{width:73px;height:73px}.pv95-crew-scene{min-height:270px}.pv95-crew-member--larry img,.pv95-crew-member--steve img{width:145px;height:180px}.pv95-crew-member>span{font-size:8px}.pv95-crew-dialogue{top:12px;width:75%;font-size:12px}.pv95-crew-strip{grid-template-columns:1fr}.pv95-crew-strip span{border-right:0;border-bottom:1px solid rgba(139,92,246,.16)}} @media(prefers-reduced-motion:reduce){.pv95-starfield,.pv95-kicker span,.pv95-live-dot:before,.pv95-card:after,.pv95-crew-member,.pv95-orbit-traffic span,.pv95-transmission i{animation:none!important}} /* ======================================================================== MISSION 9.6 — REFINED LIVING STATION ======================================================================== */ .pv95-open-control,.pv95-crew-card{display:none!important} .pv95-grid--lean{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;align-items:stretch} .pv95-radio-card{min-height:430px} .pv95-radio-thread{height:350px;overflow-y:auto;padding:16px 16px 24px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:rgba(126,231,255,.35) transparent;background:linear-gradient(180deg,rgba(2,4,18,.55),rgba(9,4,31,.72)),repeating-linear-gradient(0deg,transparent 0 28px,rgba(126,231,255,.025) 29px)} .pv95-radio-thread::-webkit-scrollbar{width:5px}.pv95-radio-thread::-webkit-scrollbar-thumb{background:rgba(126,231,255,.35);border-radius:99px} .pv95-radio-entry{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 11px;border:1px solid rgba(126,231,255,.1);border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.018));opacity:0;transform:translateY(12px);transition:opacity .28s ease,transform .28s ease,border-color .28s ease} .pv95-radio-entry.is-visible{opacity:1;transform:none}.pv95-radio-entry:last-child{border-color:rgba(126,231,255,.35);box-shadow:0 0 22px rgba(0,212,255,.08)} .pv95-radio-avatar-mini{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#fff,#a874ff 24%,#342367 65%,#090a22);border:1px solid rgba(255,255,255,.26);box-shadow:0 0 13px rgba(139,92,246,.18)} .pv95-radio-avatar-mini span{font:900 11px/1 'Audiowide',sans-serif;color:#fff;text-shadow:0 0 8px #00d4ff}.pv95-radio-copy small{display:block;color:#8eeeff;font-size:9px;letter-spacing:.09em}.pv95-radio-copy small b{color:#fff}.pv95-radio-copy p{margin:4px 0 0;color:#f7f1ff;font-size:13px;line-height:1.45}.pv95-radio-entry time{color:rgba(232,224,255,.38);font:700 9px/1 ui-monospace,monospace;padding-top:3px}.pv95-radio-status{padding:10px 16px;border-top:1px solid rgba(126,231,255,.14);font:800 8px/1 ui-monospace,monospace;letter-spacing:.14em;color:rgba(126,231,255,.55)}.pv95-radio-status span{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#50e3a4;box-shadow:0 0 8px #50e3a4;animation:pv95Pulse 1.4s infinite} /* Keep transmission meter physically separated from dialogue. */ .pv-floating-crew__hud{gap:8px!important;z-index:30!important} .pv-floating-crew__signal{order:1;position:relative!important;z-index:32!important;flex:none!important;margin:0!important} .pv-floating-crew__label{order:2;position:relative!important;z-index:31!important;margin:0!important} .pv-floating-crew.has-label-below .pv-floating-crew__signal{order:2}.pv-floating-crew.has-label-below .pv-floating-crew__label{order:1} .pv-floating-crew__body{position:relative;z-index:2} /* Premium illustrated cosmos — cleaner, richer and more on-brand. */ .pv-cosmos{background:radial-gradient(ellipse at 18% 14%,rgba(111,42,176,.48),transparent 40%),radial-gradient(ellipse at 82% 72%,rgba(0,152,210,.25),transparent 46%),radial-gradient(ellipse at 55% 100%,rgba(196,43,180,.25),transparent 45%),linear-gradient(180deg,#02020b 0%,#08031b 48%,#03020d 100%)!important} .pv-cosmos>.pv-planet,.pv-cosmos>.pv-ufo{display:none!important}.pv-milky-way{opacity:.46!important;filter:saturate(1.25)}.pv-nebula-blob{opacity:.28!important;filter:blur(70px)!important} .pv-premium-space{position:absolute;inset:0;overflow:hidden;z-index:1}.pv-world,.pv-premium-ship,.pv-premium-ufo{position:absolute;overflow:visible;filter:drop-shadow(0 0 24px rgba(119,86,255,.24));will-change:transform} .pv-world--aurora{width:190px;right:4%;top:5%;animation:pvPremiumWorldA 38s ease-in-out infinite}.pv-world--ocean{width:105px;left:3%;top:57%;animation:pvPremiumWorldB 52s ease-in-out infinite}.pv-world--moon{width:68px;right:19%;top:68%;animation:pvPremiumWorldC 44s ease-in-out infinite} .pv-premium-ship{width:150px;left:-190px;top:22%;animation:pvPremiumShipFly 32s linear infinite 4s;filter:drop-shadow(0 0 16px rgba(0,212,255,.36))}.pv-premium-ufo{width:105px;right:-140px;top:44%;animation:pvPremiumUfoFly 39s linear infinite 13s;filter:drop-shadow(0 0 18px rgba(255,86,216,.32))} @keyframes pvPremiumWorldA{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(-22px,18px) rotate(4deg)}}@keyframes pvPremiumWorldB{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(24px,-18px) rotate(-5deg)}}@keyframes pvPremiumWorldC{0%,100%{transform:translate(0,0) rotate(2deg)}50%{transform:translate(-14px,-20px) rotate(-4deg)}} @keyframes pvPremiumShipFly{0%{transform:translateX(0) translateY(0) scale(.72);opacity:0}5%{opacity:.86}48%{transform:translateX(57vw) translateY(22px) scale(1)}94%{opacity:.78}100%{transform:translateX(calc(100vw + 380px)) translateY(-18px) scale(.8);opacity:0}} @keyframes pvPremiumUfoFly{0%{transform:translateX(0) translateY(0) rotate(2deg);opacity:0}7%{opacity:.72}52%{transform:translateX(-58vw) translateY(-28px) rotate(-4deg)}94%{opacity:.64}100%{transform:translateX(calc(-100vw - 330px)) translateY(15px) rotate(3deg);opacity:0}} @media(max-width:780px){.pv95-grid--lean{grid-template-columns:1fr!important}.pv95-radio-card{min-height:390px}.pv95-radio-thread{height:310px}.pv-world--aurora{width:125px;right:-18px;top:8%}.pv-world--ocean{width:78px;left:-12px;top:62%}.pv-world--moon{width:48px;right:8%;top:77%}.pv-premium-ship{width:105px}.pv-premium-ufo{width:78px}.pv95-radio-entry{grid-template-columns:32px minmax(0,1fr);}.pv95-radio-entry time{display:none}.pv95-radio-avatar-mini{width:31px;height:31px}} @media(prefers-reduced-motion:reduce){.pv-world,.pv-premium-ship,.pv-premium-ufo,.pv95-radio-status span{animation:none!important}.pv-premium-ship,.pv-premium-ufo{display:none}} /* ============================================================= MISSION 10 — OFFICIAL PRINTAVERSE CREW PACK High-resolution, transparent mascot artwork based on the established Printaverse white-suit / neon visor visual language. ============================================================= */ .pv10-crew-sprite{position:relative;display:inline-grid;place-items:center;width:100%;height:100%;isolation:isolate;pointer-events:none} .pv10-crew-sprite img{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(0,0,0,.42)) drop-shadow(0 0 10px rgba(130,70,255,.18));transform-origin:50% 65%;will-change:transform,filter} .pv10-crew-glow{position:absolute;z-index:1;inset:18% 12% 8%;border-radius:50%;background:radial-gradient(circle,rgba(225,64,251,.2),rgba(0,212,255,.1) 45%,transparent 72%);filter:blur(18px);opacity:.82} .pv10-crew-personality{display:none} .pv10-crew-sprite--badge{width:54px;height:54px}.pv10-crew-sprite--portrait{width:115px;height:115px}.pv10-crew-sprite--full{width:145px;height:175px} .pv-floating-crew__body{width:150px;height:185px;overflow:visible} .pv-floating-crew__body .pv10-crew-sprite{width:150px;height:185px} .pv-crew-portrait .pv10-crew-sprite{width:120px;height:120px;margin:auto}.pv-discovery-portrait .pv10-crew-sprite{width:46px;height:46px} .pv-reward-card>span .pv10-crew-sprite{width:54px;height:54px} /* Character-specific motion and recognizable silhouettes */ .pv10-crew-sprite--larry img{animation:pv10-larry-idle 3.8s ease-in-out infinite} .pv10-crew-sprite--steve img{animation:pv10-steve-idle 4.2s cubic-bezier(.45,0,.55,1) infinite} .pv10-crew-sprite--kevin img{animation:pv10-kevin-idle 4.8s ease-in-out infinite} .pv10-crew-sprite--bob img{animation:pv10-bob-idle 3.2s ease-in-out infinite} .pv10-crew-sprite--eva img{animation:pv10-eva-idle 2.7s ease-in-out infinite;filter:drop-shadow(0 18px 20px rgba(0,0,0,.42)) drop-shadow(0 0 15px rgba(80,227,164,.36))} .pv10-crew-sprite--gary img{animation:pv10-gary-idle 3.3s cubic-bezier(.36,.07,.19,.97) infinite} @keyframes pv10-larry-idle{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(2deg)}} @keyframes pv10-steve-idle{0%,100%{transform:translateX(0) rotate(0)}45%{transform:translateX(-3px) rotate(-1deg)}55%{transform:translateX(3px) rotate(1deg)}} @keyframes pv10-kevin-idle{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-11px) rotate(4deg)}} @keyframes pv10-bob-idle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.015)}} @keyframes pv10-eva-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes pv10-gary-idle{0%,100%{transform:translate(0,0) rotate(-2deg)}35%{transform:translate(4px,-6px) rotate(3deg)}70%{transform:translate(-3px,-2px) rotate(-4deg)}} /* Give each transmission a matching neon signature */ .pv-floating-crew.is-larry .pv10-crew-glow{background:radial-gradient(circle,rgba(126,231,255,.25),rgba(107,53,212,.13) 48%,transparent 72%)} .pv-floating-crew.is-steve .pv10-crew-glow{background:radial-gradient(circle,rgba(255,91,168,.25),rgba(224,64,251,.12) 48%,transparent 72%)} .pv-floating-crew.is-kevin .pv10-crew-glow{background:radial-gradient(circle,rgba(255,145,70,.28),rgba(255,207,85,.1) 48%,transparent 72%)} .pv-floating-crew.is-bob .pv10-crew-glow{background:radial-gradient(circle,rgba(255,207,85,.24),rgba(216,64,85,.12) 48%,transparent 72%)} .pv-floating-crew.is-eva .pv10-crew-glow{background:radial-gradient(circle,rgba(80,227,164,.26),rgba(0,212,255,.1) 48%,transparent 72%)} .pv-floating-crew.is-gary .pv10-crew-glow{background:radial-gradient(circle,rgba(140,255,104,.25),rgba(155,102,255,.13) 48%,transparent 72%)} /* Mission Control crew cards become art-forward dossiers */ .pv-crew-grid article{position:relative;overflow:hidden;min-height:250px;text-align:center;background:radial-gradient(circle at 50% 18%,rgba(125,80,230,.16),transparent 42%),linear-gradient(155deg,rgba(26,20,70,.96),rgba(8,7,30,.98))} .pv-crew-grid article:after{content:"";position:absolute;inset:auto -20% -48% -20%;height:58%;border-radius:50%;border:1px solid rgba(126,231,255,.13);box-shadow:0 0 35px rgba(107,53,212,.12)} .pv-crew-grid article>span{position:relative;z-index:2;display:block;height:126px}.pv-crew-grid article h3,.pv-crew-grid article small,.pv-crew-grid article p{position:relative;z-index:2} .pv-crew-grid article.is-classified>span{display:grid;place-items:center}.pv-classified-portrait{font:900 54px/1 ui-monospace,monospace;color:rgba(126,231,255,.35);text-shadow:0 0 25px rgba(0,212,255,.2)} /* Loading polish for image assets */ .pv10-crew-sprite img:not([src]),.pv10-crew-sprite img[src=""]{opacity:0} @media(max-width:760px){.pv10-crew-sprite--full,.pv-floating-crew__body,.pv-floating-crew__body .pv10-crew-sprite{width:125px;height:155px}.pv-crew-grid article{min-height:235px}} @media(prefers-reduced-motion:reduce){.pv10-crew-sprite img{animation:none!important}} /* Mission 10A radio refinement: coherent threaded conversations */ .pv95-radio-topic-break{ margin:5px 12px 2px; padding:8px 10px; border-top:1px solid rgba(126,231,255,.16); border-bottom:1px solid rgba(126,231,255,.08); color:rgba(126,231,255,.48); font:800 8px/1.25 ui-monospace,monospace; letter-spacing:.14em; text-align:center; } /* ======================================================================== PROJECT STATION — MILESTONE 1.7 Remove the local white-dot/grid treatment from "Live from Station PV-01". The section now reveals the continuous illustrated global cosmos behind it. ======================================================================== */ .pv95-station { background: radial-gradient(ellipse at 16% 10%, rgba(108,49,226,.16), transparent 38%), radial-gradient(ellipse at 85% 76%, rgba(0,212,255,.09), transparent 36%), linear-gradient(180deg, rgba(7,5,25,.34) 0%, rgba(4,3,16,.48) 100%) !important; backdrop-filter: blur(.6px); -webkit-backdrop-filter: blur(.6px); } /* Remove both legacy pattern generators: the 44px line grid and dot starfield. */ .pv95-station::before, .pv95-starfield { display: none !important; content: none !important; background: none !important; background-image: none !important; animation: none !important; } /* Keep the content panels readable without rebuilding a second local universe. */ .pv95-station::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 42%, rgba(9,7,35,.08), transparent 62%), linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.12)); } .pv95-shell { position: relative; z-index: 2; } /* Mission 10A rollback to floating Larry only */ .pv-floating-crew.is-larry{filter:drop-shadow(0 0 18px rgba(126,231,255,.78)) drop-shadow(0 0 30px rgba(194,80,255,.18));} .pv-floating-crew__body{width:162px;height:198px;overflow:visible} .pv-floating-crew__body .pv10-crew-sprite{width:162px;height:198px} .pv10-crew-sprite--larry img{animation:pv10-larry-idle 4.2s ease-in-out infinite;object-position:center center} .pv10-crew-sprite--larry.pv10-crew-sprite--badge{width:56px;height:56px} .pv10-crew-sprite--larry.pv10-crew-sprite--portrait{width:124px;height:124px} .pv10-crew-sprite--larry .pv10-crew-personality{display:none} @media(max-width:760px){.pv-floating-crew__body,.pv-floating-crew__body .pv10-crew-sprite{width:132px;height:164px}} /* ======================================================================== PRINTAVERSE — COMMERCE CONTROL POLISH (2026-07-16) Keeps global brand-button/form rules from distorting Shopify's compact product-card quick-add and quantity controls. ======================================================================== */ /* Product-card quick-add: compact dark-glass pill instead of a full CTA block. */ body .product-card .quick-add__button, body product-card .quick-add__button { width: auto !important; min-width: 46px !important; max-width: min(220px, calc(100% - 24px)) !important; height: 46px !important; min-height: 46px !important; padding: 0 !important; overflow: hidden !important; border: 1px solid rgba(126, 231, 255, 0.58) !important; border-radius: 999px !important; background: linear-gradient(135deg, rgba(16, 10, 45, 0.96), rgba(51, 19, 91, 0.96)) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(107, 53, 212, 0.18) inset, 0 0 18px rgba(0, 212, 255, 0.14) !important; font-family: 'Space Grotesk', system-ui, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0.055em !important; text-transform: uppercase !important; transform: none !important; filter: none !important; transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important; } body .product-card .quick-add__button .add-to-cart-text, body product-card .quick-add__button .add-to-cart-text { width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; border-radius: inherit !important; background: transparent !important; color: inherit !important; } body .product-card .quick-add__button .add-to-cart-icon, body product-card .quick-add__button .add-to-cart-icon { width: 44px !important; min-width: 44px !important; height: 44px !important; color: #7ee7ff !important; } body .product-card .quick-add__button .add-to-cart-icon svg, body .product-card .quick-add__button .add-to-cart-icon svg *, body product-card .quick-add__button .add-to-cart-icon svg, body product-card .quick-add__button .add-to-cart-icon svg * { color: currentColor !important; fill: none !important; stroke: currentColor !important; } body .product-card .quick-add__button .add-to-cart-text__content > span > span, body product-card .quick-add__button .add-to-cart-text__content > span > span { padding-inline-end: 15px !important; white-space: nowrap !important; } @media (hover: hover) { body .product-card .quick-add__button:not(:disabled):hover, body product-card .quick-add__button:not(:disabled):hover { border-color: rgba(126, 231, 255, 0.92) !important; background: linear-gradient(135deg, rgba(29, 14, 68, 0.98), rgba(88, 25, 121, 0.98)) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(126, 231, 255, 0.16) inset, 0 0 24px rgba(0, 212, 255, 0.28), 0 0 34px rgba(194, 80, 255, 0.18) !important; transform: translateY(-1px) scale(1.02) !important; filter: none !important; } } body .product-card .quick-add__button:active, body product-card .quick-add__button:active { transform: translateY(0) scale(0.985) !important; } body .product-card .quick-add__button:focus-visible, body product-card .quick-add__button:focus-visible { outline: 2px solid #7ee7ff !important; outline-offset: 3px !important; box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.18) !important; } body .product-card .quick-add__button:disabled, body product-card .quick-add__button:disabled { opacity: 0.5 !important; cursor: not-allowed !important; } /* Quantity control: one clean control with compact, balanced +/- targets. */ body quantity-selector-component.quantity-selector, body cart-quantity-selector-component.quantity-selector { --quantity-selector-width: 132px; width: 132px !important; min-width: 132px !important; height: 48px !important; min-height: 48px !important; display: grid !important; grid-template-columns: 44px 44px 44px !important; align-items: stretch !important; justify-content: center !important; overflow: hidden !important; border: 1px solid rgba(126, 231, 255, 0.34) !important; border-radius: 12px !important; background: linear-gradient(180deg, rgba(20, 12, 52, 0.9), rgba(9, 7, 28, 0.94)) !important; color: #ffffff !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(107, 53, 212, 0.15) inset !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } body quantity-selector-component.quantity-selector .quantity-minus, body quantity-selector-component.quantity-selector .quantity-plus, body cart-quantity-selector-component.quantity-selector .quantity-minus, body cart-quantity-selector-component.quantity-selector .quantity-plus { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 46px !important; min-height: 46px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; color: #7ee7ff !important; -webkit-text-fill-color: #7ee7ff !important; box-shadow: none !important; font-family: 'Space Grotesk', system-ui, sans-serif !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; transform: none !important; filter: none !important; transition: background-color 160ms ease, color 160ms ease !important; } body quantity-selector-component.quantity-selector .quantity-minus:hover, body quantity-selector-component.quantity-selector .quantity-plus:hover, body cart-quantity-selector-component.quantity-selector .quantity-minus:hover, body cart-quantity-selector-component.quantity-selector .quantity-plus:hover { background: rgba(0, 212, 255, 0.12) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: none !important; transform: none !important; filter: none !important; } body quantity-selector-component.quantity-selector .quantity-minus:active, body quantity-selector-component.quantity-selector .quantity-plus:active, body cart-quantity-selector-component.quantity-selector .quantity-minus:active, body cart-quantity-selector-component.quantity-selector .quantity-plus:active { background: rgba(194, 80, 255, 0.14) !important; transform: none !important; } body quantity-selector-component.quantity-selector .quantity-minus:disabled, body quantity-selector-component.quantity-selector .quantity-plus:disabled, body cart-quantity-selector-component.quantity-selector .quantity-minus:disabled, body cart-quantity-selector-component.quantity-selector .quantity-plus:disabled { opacity: 0.34 !important; cursor: not-allowed !important; } body quantity-selector-component.quantity-selector input[type='number'], body cart-quantity-selector-component.quantity-selector input[type='number'] { box-sizing: border-box !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 46px !important; min-height: 46px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-inline: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0 !important; background: rgba(255, 255, 255, 0.025) !important; background-image: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: none !important; font-family: 'Space Grotesk', system-ui, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 46px !important; text-align: center !important; appearance: textfield !important; -moz-appearance: textfield !important; } body quantity-selector-component.quantity-selector input[type='number']:focus, body cart-quantity-selector-component.quantity-selector input[type='number']:focus { outline: none !important; border-inline-color: rgba(126, 231, 255, 0.42) !important; background: rgba(0, 212, 255, 0.07) !important; box-shadow: inset 0 0 14px rgba(0, 212, 255, 0.08) !important; } body quantity-selector-component.quantity-selector input[type='number']::-webkit-inner-spin-button, body quantity-selector-component.quantity-selector input[type='number']::-webkit-outer-spin-button, body cart-quantity-selector-component.quantity-selector input[type='number']::-webkit-inner-spin-button, body cart-quantity-selector-component.quantity-selector input[type='number']::-webkit-outer-spin-button { margin: 0 !important; appearance: none !important; -webkit-appearance: none !important; } body quantity-selector-component.quantity-selector .svg-wrapper, body cart-quantity-selector-component.quantity-selector .svg-wrapper { width: 16px !important; height: 16px !important; } body quantity-selector-component.quantity-selector svg, body cart-quantity-selector-component.quantity-selector svg { width: 14px !important; height: 14px !important; } body quantity-selector-component.quantity-selector svg *, body cart-quantity-selector-component.quantity-selector svg * { fill: none !important; stroke: currentColor !important; } body quantity-selector-component.quantity-selector button:focus-visible, body cart-quantity-selector-component.quantity-selector button:focus-visible { outline: 2px solid #7ee7ff !important; outline-offset: -3px !important; box-shadow: none !important; } @media screen and (max-width: 749px) { body .product-card .quick-add__button, body product-card .quick-add__button { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; } body .product-card .quick-add__button .add-to-cart-icon, body product-card .quick-add__button .add-to-cart-icon { width: 42px !important; min-width: 42px !important; height: 42px !important; } } /* ========================================================= PRINTAVERSE — STEVE SATELLITE REPAIR HERO SCENE Transparent WebM version to blend Steve directly into the hero. ========================================================= */ .pv3-hero__visual { isolation: isolate; overflow: visible; } .pv3-hero__scene { position: relative; z-index: 3; display: grid; width: min(128%, 790px); aspect-ratio: 4 / 3; place-items: center; pointer-events: none; transform: translateX(3%); filter: drop-shadow(0 28px 46px rgba(0, 0, 0, .28)); } .pv3-hero__scene-video, .pv3-hero__scene-poster { grid-area: 1 / 1; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; border: 0; background: transparent !important; pointer-events: none; user-select: none; -webkit-user-select: none; } .pv3-hero__scene-poster { display: none; } @media (max-width: 899px) { .pv3-hero__scene { width: min(118%, 700px); transform: translateX(1.5%); } } @media (max-width: 599px) { .pv3-hero__scene { width: 122%; max-width: 560px; transform: translateX(0); } } /* Theme-editor option: use a still image instead of loading video on mobile. */ @media (max-width: 749px) { .pv3-hero__scene--desktop-only .pv3-hero__scene-video { display: none; } .pv3-hero__scene--desktop-only .pv3-hero__scene-poster { display: block; } } /* Respect the visitor's operating-system motion preference. */ @media (prefers-reduced-motion: reduce) { .pv3-hero__scene-video { display: none !important; } .pv3-hero__scene-poster { display: block !important; } } /* Hide retired hero HUD cards for the Steve satellite scene */ .pv3-hero__visual .pv3-float-card { display: none !important; } /* Remove the large orbit circles behind Steve in the hero */ .pv3-hero__visual .pv3-orbit { display: none !important; } /* ========================================================= HIDDEN MISSION CONTROL CLUES ========================================================= */ /* Homepage clue hidden beneath the green Mission Control status light. */ .pv3-status-secret { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 9px; width: 9px; height: 9px; cursor: help; z-index: 30; } /* Slightly enlarge the hover target without making the dot look larger. */ .pv3-status-secret::after { content: ""; position: absolute; inset: -8px; } .pv3-status-secret .pv3-status-dot { position: relative; z-index: 1; flex: 0 0 9px; } .pv3-home-clue { position: absolute; top: calc(100% + 14px); left: -5px; z-index: 80; width: max-content; max-width: min(390px, 72vw); padding: 10px 12px; border: 1px solid rgba(126, 231, 255, 0.18); border-radius: 8px; background: #05071a; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.58), 0 0 20px rgba(0, 212, 255, 0.08); color: rgba(160, 237, 255, 0.82); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 9px; font-weight: 700; line-height: 1.55; letter-spacing: 0.07em; text-transform: uppercase; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-5px); transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease; } .pv3-home-clue strong { display: block; margin-bottom: 3px; color: rgba(255, 91, 168, 0.82); font-weight: 900; } .pv3-status-secret:hover .pv3-home-clue { opacity: 1; visibility: visible; transform: translateY(0); } /* Very faint secondary clue inside the homepage terminal. */ .pv3-terminal__hint { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 18px 0 0; padding-top: 12px; border-top: 1px dashed rgba(126, 231, 255, 0.035); color: rgba(126, 231, 255, 0.08); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.08; filter: brightness(0.55); transition: opacity 240ms ease, color 240ms ease, filter 240ms ease; } .pv3-terminal__hint kbd { min-width: 20px; padding: 2px 4px; border: 1px solid rgba(126, 231, 255, 0.055); border-radius: 4px; background: rgba(4, 8, 28, 0.12); color: rgba(255, 255, 255, 0.08); font: inherit; text-align: center; box-shadow: none; } .pv3-terminal__hint em { color: rgba(255, 91, 168, 0.08); font-style: normal; } .pv3-mission__terminal:hover .pv3-terminal__hint { opacity: 0.18; filter: brightness(0.7); } .pv3-terminal__hint:hover { color: rgba(126, 231, 255, 0.5); opacity: 0.55; filter: brightness(1); } .pv3-terminal__hint:hover kbd { color: rgba(255, 255, 255, 0.6); border-color: rgba(126, 231, 255, 0.22); background: rgba(126, 231, 255, 0.035); } .pv3-terminal__hint:hover em { color: rgba(255, 91, 168, 0.52); } /* The launch sequence requires a physical keyboard. */ @media (max-width: 749px) { .pv3-home-clue, .pv3-terminal__hint { display: none; } } /* ========================================================= PRINTAVERSE — MOBILE MENU BACKGROUND Opaque space background for the hamburger drawer only. Desktop navigation is intentionally unchanged. ========================================================= */ @media screen and (max-width: 749px) { .header-drawer--mobile .menu-drawer, .header-drawer--mobile .menu-drawer__submenu { background-color: #050619 !important; background-image: radial-gradient(circle at 18% 16%, rgba(63, 208, 255, 0.14) 0 1px, transparent 2px), radial-gradient(circle at 78% 24%, rgba(255, 80, 197, 0.16) 0 1px, transparent 2px), radial-gradient(circle at 62% 68%, rgba(142, 89, 255, 0.16) 0 1.5px, transparent 2.5px), radial-gradient(circle at 24% 82%, rgba(255, 255, 255, 0.10) 0 1px, transparent 2px), radial-gradient(ellipse at 105% 8%, rgba(130, 62, 255, 0.28), transparent 42%), radial-gradient(ellipse at -10% 92%, rgba(0, 168, 224, 0.22), transparent 46%), linear-gradient(155deg, #040517 0%, #0a0b28 48%, #170a36 100%) !important; background-repeat: no-repeat !important; background-size: cover !important; opacity: 1 !important; color: #ffffff; border-right: 1px solid rgba(154, 102, 255, 0.35); box-shadow: 18px 0 48px rgba(0, 0, 0, 0.58), 1px 0 0 rgba(71, 214, 255, 0.12) inset; } .header-drawer--mobile .menu-drawer__inner-container, .header-drawer--mobile .menu-drawer__navigation-container, .header-drawer--mobile .menu-drawer__inner-submenu, .header-drawer--mobile .menu-drawer__navigation, .header-drawer--mobile .menu-drawer__utility-links { background: transparent !important; } .header-drawer--mobile .menu-drawer__menu-item, .header-drawer--mobile .menu-drawer__back-button, .header-drawer--mobile .menu-drawer__close-button, .header-drawer--mobile .menu-drawer__account, .header-drawer--mobile .localization-selector { color: rgba(255, 255, 255, 0.94) !important; } .header-drawer--mobile .menu-drawer__menu-item:hover, .header-drawer--mobile .menu-drawer__menu-item:focus-visible, .header-drawer--mobile .menu-drawer__menu-item--active { color: #ffffff !important; background: linear-gradient(90deg, rgba(109, 75, 255, 0.22), rgba(255, 67, 186, 0.10)) !important; text-shadow: 0 0 12px rgba(83, 214, 255, 0.44); } .header-drawer--mobile .menu-drawer__list-item--divider, .header-drawer--mobile .menu-drawer__menu-container--divider { border-color: rgba(255, 255, 255, 0.10) !important; } .header-drawer--mobile .menu-drawer__backdrop { background: rgba(1, 2, 12, 0.58); backdrop-filter: blur(5px) brightness(0.48); -webkit-backdrop-filter: blur(5px) brightness(0.48); } } /* ========================================================= PRINTAVERSE — MOBILE DRAWER OPAQUE BACKGROUND (CORRECTED) Targets Horizon's actual .header__drawer markup. ========================================================= */ @media screen and (max-width: 749px) { .header__drawer, .header__drawer header-drawer, .header__drawer .menu-drawer-container { --color-background: #07071f !important; --color-foreground: #ffffff !important; --color-foreground-rgb: 255 255 255 !important; } .header__drawer .menu-drawer, .header__drawer .menu-drawer__submenu, .header__drawer .menu-drawer__inner-submenu, .header__drawer details[open] > .menu-drawer__submenu { background-color: #07071f !important; background-image: radial-gradient(circle at 15% 14%, rgba(73, 213, 255, 0.16) 0 1px, transparent 2px), radial-gradient(circle at 82% 23%, rgba(255, 76, 195, 0.17) 0 1px, transparent 2px), radial-gradient(circle at 68% 67%, rgba(144, 91, 255, 0.18) 0 1.5px, transparent 2.5px), radial-gradient(circle at 25% 84%, rgba(255, 255, 255, 0.11) 0 1px, transparent 2px), radial-gradient(ellipse at 110% 4%, rgba(118, 54, 255, 0.30), transparent 43%), radial-gradient(ellipse at -12% 96%, rgba(0, 165, 224, 0.23), transparent 47%), linear-gradient(155deg, #040517 0%, #090a27 48%, #180a39 100%) !important; background-repeat: no-repeat !important; background-attachment: local !important; background-size: cover !important; color: #ffffff !important; opacity: 1 !important; } .header__drawer .menu-drawer { border-right: 1px solid rgba(154, 102, 255, 0.38) !important; box-shadow: 18px 0 48px rgba(0, 0, 0, 0.62), 1px 0 0 rgba(71, 214, 255, 0.12) inset !important; } .header__drawer .menu-drawer__inner-container, .header__drawer .menu-drawer__navigation-container, .header__drawer .menu-drawer__navigation, .header__drawer .menu-drawer__utility-links, .header__drawer .menu-drawer__menu, .header__drawer .menu-drawer__nav-buttons { background-color: transparent !important; background-image: none !important; } .header__drawer .menu-drawer__menu-item, .header__drawer .menu-drawer__menu-item-text, .header__drawer .menu-drawer__back-button, .header__drawer .menu-drawer__close-button, .header__drawer .menu-drawer__account, .header__drawer .localization-selector, .header__drawer summary, .header__drawer a { color: rgba(255, 255, 255, 0.96) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.96) !important; } .header__drawer .menu-drawer svg { color: #ffffff !important; fill: currentColor !important; } .header__drawer .menu-drawer__menu-item:hover, .header__drawer .menu-drawer__menu-item:focus-visible, .header__drawer .menu-drawer__menu-item--active, .header__drawer summary:hover { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: linear-gradient(90deg, rgba(109, 75, 255, 0.25), rgba(255, 67, 186, 0.11)) !important; text-shadow: 0 0 12px rgba(83, 214, 255, 0.42); } .header__drawer .menu-drawer__list-item--divider, .header__drawer .menu-drawer__menu-container--divider { border-color: rgba(255, 255, 255, 0.11) !important; } .header__drawer .menu-drawer__backdrop { background: rgba(1, 2, 12, 0.68) !important; backdrop-filter: blur(5px) brightness(0.42) !important; -webkit-backdrop-filter: blur(5px) brightness(0.42) !important; } } /* ========================================================= PRINTAVERSE — CONVERSION ROUTER / CHOOSE YOUR MISSION ========================================================= */ .pv-route-section { position: relative; z-index: 3; } .pv-route { padding: 18px max(20px, calc((100vw - 1240px) / 2)) 74px; } .pv-route__shell { max-width: 1240px; margin: 0 auto; } .pv-route__header { max-width: 780px; margin: 0 auto 34px; text-align: center; } .pv-route__eyebrow { margin: 0 0 12px; color: #8fe6ff; font-size: .76rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .pv-route__header h2 { margin: 0; color: #fff; font-family: "Audiowide", var(--font-heading--family); font-size: clamp(2.1rem, 4.5vw, 4.6rem); line-height: 1.04; letter-spacing: -.035em; } .pv-route__intro { margin: 18px auto 0; color: rgba(255,255,255,.70); font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.65; } .pv-route__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .pv-route__card { position: relative; min-height: 360px; display: flex; flex-direction: column; overflow: hidden; padding: 26px; border: 1px solid rgba(255,255,255,.11); border-radius: 24px; background: linear-gradient(145deg, rgba(12,18,51,.90), rgba(20,7,41,.76)); box-shadow: 0 24px 65px rgba(0,0,0,.22); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .pv-route__card::before { content:""; position:absolute; inset:auto -20% -45% 20%; height:75%; border-radius:50%; background:radial-gradient(circle, rgba(112,211,255,.15), transparent 66%); pointer-events:none; } .pv-route__card--2::before { background:radial-gradient(circle, rgba(184,116,255,.17), transparent 66%); } .pv-route__card--3::before { background:radial-gradient(circle, rgba(255,86,186,.15), transparent 66%); } .pv-route__card:hover { transform: translateY(-5px); border-color: rgba(131,221,255,.34); box-shadow: 0 30px 76px rgba(0,0,0,.30); } .pv-route__card-top { min-height: 28px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .pv-route__number { color:rgba(255,255,255,.30); font:700 .72rem/1 ui-monospace,monospace; letter-spacing:.14em; } .pv-route__badge { padding:7px 10px; border:1px solid rgba(255,255,255,.10); border-radius:999px; color:#a7ebff; background:rgba(255,255,255,.045); font-size:.62rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; } .pv-route__icon { width:58px; height:58px; display:grid; place-items:center; margin:26px 0 22px; border-radius:17px; color:#b8ecff; background:linear-gradient(135deg, rgba(93,201,255,.16), rgba(180,93,255,.18)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .pv-route__icon svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } .pv-route__card h3 { position:relative; margin:0; color:#fff; font-family:"Audiowide", var(--font-heading--family); font-size:clamp(1.25rem,2vw,1.8rem); line-height:1.15; } .pv-route__card p { position:relative; margin:15px 0 24px; color:rgba(255,255,255,.68); line-height:1.62; } .pv-route__link { position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:16px; width:100%; margin-top:auto; padding-top:18px; border-top:1px solid rgba(255,255,255,.09); color:#fff; font-weight:850; text-decoration:none; } .pv-route__link span { color:#7ee1ff; font-size:1.25rem; transition:transform .2s ease; } .pv-route__link:hover span { transform:translateX(4px); } .pv-route__trust { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 28px; margin-top:20px; padding:17px 22px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(7,10,31,.56); color:rgba(255,255,255,.68); font-size:.82rem; } .pv-route__trust span::before { content:"✓"; margin-right:7px; color:#67efb1; font-weight:900; } /* Clearer hierarchy: the hero's first button is the unmistakable order action. */ .pv3-hero__actions .pv3-button--primary { min-height:58px; padding-inline:30px; font-size:1.02rem; box-shadow:0 16px 46px rgba(156,100,255,.38), 0 0 0 1px rgba(255,255,255,.16) inset; } @media (max-width: 899px) { .pv-route { padding-top: 6px; } .pv-route__grid { grid-template-columns:1fr; } .pv-route__card { min-height:300px; } } @media (max-width: 599px) { .pv-route { padding:0 14px 58px; } .pv-route__header { margin-bottom:24px; } .pv-route__card { min-height:0; padding:22px; border-radius:20px; } .pv-route__icon { margin:20px 0 18px; } .pv-route__trust { align-items:flex-start; justify-content:flex-start; gap:10px; } .pv-route__trust span { width:100%; } } /* Printaverse v4.1 conversion polish — 2026-08-02 */ @media (min-width: 990px) { .pv3-hero { padding-top: 18px; padding-bottom: 28px; } .pv3-hero__inner { min-height: 560px; gap: clamp(24px, 4vw, 58px); } .pv3-hero__visual { min-height: 500px; } .pv3-hero__scene { min-height: 480px; } .pv3-hero__actions .pv3-button--primary { min-height: 64px; padding-inline: 36px; font-size: 1.08rem; } } .pv-route__visual { position: relative; min-height: 132px; display: flex; align-items: center; margin: 18px 0 12px; } .pv-route__visual .pv-route__icon { position: relative; z-index: 2; flex: 0 0 auto; margin: 0; } .pv-route__crew { position: absolute; z-index: 1; right: -18px; bottom: -16px; width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 16px 24px rgba(0,0,0,.34)); transform: rotate(2deg); pointer-events: none; } .pv-route__card--2 .pv-route__crew { transform: rotate(-2deg); } .pv-route__card--3 .pv-route__crew { width: 158px; height: 158px; } .pv-route__card h3, .pv-route__card p, .pv-route__link { z-index: 3; } /* Give the featured collection a deliberate transition instead of a visual drop-off. */ .template-index .shopify-section:has(.product-list) { position: relative; z-index: 2; } .template-index .shopify-section:has(.product-list) .section-background, .template-index .shopify-section:has(.product-list) .section { border-top: 1px solid rgba(255,255,255,.07); } /* Compress the DTF callout so it stays important without taking over the page. */ .pv3-mission { padding-top: 18px; padding-bottom: 48px; } .pv3-mission__panel { padding-top: 32px; padding-bottom: 32px; } .pv3-mission__copy h2 { margin-bottom: 14px; } .pv3-mission__text { margin-bottom: 22px; } @media (max-width: 989px) { .pv-route__visual { min-height: 112px; } .pv-route__crew { width: 128px; height: 128px; right: -8px; } .pv-route__card--3 .pv-route__crew { width: 134px; height: 134px; } } @media (max-width: 749px) { .pv3-hero__actions .pv3-button--primary { min-height: 58px; font-size: 1rem; } .pv-route__visual { min-height: 96px; margin-top: 12px; } .pv-route__crew { width: 112px; height: 112px; right: -2px; bottom: -8px; } .pv-route__card--3 .pv-route__crew { width: 118px; height: 118px; } .pv3-mission { padding-bottom: 42px; } } /* ========================================================= PRINTAVERSE MISSION ARCHIVE — real customer proof ========================================================= */ .pv-mission-archive-section { position: relative; z-index: 3; } .pv-archive { padding: 42px max(20px, calc((100vw - 1240px) / 2)) 76px; } .pv-archive__shell { max-width: 1240px; margin: 0 auto; } .pv-archive__header { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:30px; } .pv-archive__header > div { max-width:780px; } .pv-archive__eyebrow { margin:0 0 10px; color:#8fe6ff; font-size:.74rem; font-weight:850; letter-spacing:.18em; text-transform:uppercase; } .pv-archive__header h2 { margin:0; color:#fff; font-family:"Audiowide", var(--font-heading--family); font-size:clamp(2rem,4vw,4rem); line-height:1.06; letter-spacing:-.035em; } .pv-archive__intro { margin-top:14px; color:rgba(255,255,255,.68); font-size:clamp(1rem,1.35vw,1.12rem); line-height:1.65; } .pv-archive__intro p { margin:0; } .pv-archive__top-link { flex:0 0 auto; color:#fff; font-weight:850; text-decoration:none; border-bottom:1px solid rgba(126,225,255,.5); padding-bottom:5px; } .pv-archive__top-link span { color:#7ee1ff; margin-left:7px; } .pv-archive__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .pv-archive__card { min-width:0; overflow:hidden; border:1px solid rgba(255,255,255,.11); border-radius:22px; background:linear-gradient(155deg,rgba(12,18,51,.93),rgba(20,7,41,.82)); box-shadow:0 24px 64px rgba(0,0,0,.24); transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; } .pv-archive__card:hover { transform:translateY(-5px); border-color:rgba(126,225,255,.35); box-shadow:0 30px 76px rgba(0,0,0,.32); } .pv-archive__card-link { display:block; height:100%; color:inherit; text-decoration:none; } .pv-archive__media { position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1 / 1; height:auto; overflow:hidden; padding:30px; background:radial-gradient(circle at 50% 45%,rgba(109,206,255,.12),transparent 58%),rgba(5,9,28,.72); } .pv-archive__media--white { background:#fff; padding:0; } .pv-archive__media--white .pv-archive__image { width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:contain !important; background:#fff; filter:none; } .pv-archive__image { display:block !important; width:auto !important; height:auto !important; max-width:100% !important; max-height:100% !important; object-fit:contain !important; object-position:center center !important; filter:drop-shadow(0 16px 24px rgba(0,0,0,.28)); transition:transform .28s ease; } .pv-archive__card:hover .pv-archive__image { transform:scale(1.025); } .pv-archive__placeholder { width:70%; opacity:.35; } .pv-archive__status { position:absolute; top:16px; right:16px; display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid rgba(103,239,177,.28); border-radius:999px; color:#8ff2bf; background:rgba(4,31,28,.76); backdrop-filter:blur(10px); font-size:.61rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; } .pv-archive__body { display:flex; flex-direction:column; min-height:275px; padding:23px 24px 24px; } .pv-archive__meta-row { display:flex; justify-content:space-between; gap:12px; margin-bottom:13px; color:rgba(255,255,255,.46); font:750 .64rem/1.3 ui-monospace,monospace; letter-spacing:.11em; text-transform:uppercase; } .pv-archive__mission { color:#c88cff; } .pv-archive__category { text-align:right; } .pv-archive__body h3 { margin:0; color:#fff; font-family:"Audiowide",var(--font-heading--family); font-size:clamp(1.15rem,1.7vw,1.55rem); line-height:1.18; } .pv-archive__body > p { margin:13px 0 17px; color:rgba(255,255,255,.66); line-height:1.58; } .pv-archive__tags { display:flex; flex-wrap:wrap; gap:7px; } .pv-archive__tags span { padding:6px 9px; border:1px solid rgba(255,255,255,.09); border-radius:8px; color:rgba(255,255,255,.7); background:rgba(255,255,255,.035); font-size:.68rem; font-weight:750; } .pv-archive__card-cta { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:auto; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); color:#fff; font-weight:850; } .pv-archive__card-cta span { color:#7ee1ff; font-size:1.2rem; transition:transform .2s ease; } .pv-archive__card:hover .pv-archive__card-cta span { transform:translateX(4px); } .pv-archive__footer { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:20px; padding:24px 26px; border:1px solid rgba(255,255,255,.09); border-radius:18px; background:rgba(7,10,31,.62); } .pv-archive__footer h3 { margin:0; color:#fff; font-family:"Audiowide",var(--font-heading--family); font-size:clamp(1.1rem,2vw,1.55rem); } .pv-archive__footer p { margin:7px 0 0; color:rgba(255,255,255,.62); } .pv-archive__button { display:inline-flex; align-items:center; justify-content:center; gap:12px; flex:0 0 auto; min-height:48px; padding:13px 19px; border-radius:999px; color:#081126; background:linear-gradient(100deg,#72e5ff,#ed6bc8); box-shadow:0 10px 30px rgba(123,202,255,.2); font-weight:900; text-decoration:none; } .pv-archive__button span { font-size:1.1rem; } @media (max-width: 989px) { .pv-archive__header { align-items:flex-start; flex-direction:column; gap:16px; } .pv-archive__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .pv-archive__card:last-child:nth-child(odd) { grid-column:1 / -1; max-width:610px; width:100%; justify-self:center; } } @media (max-width: 639px) { .pv-archive { padding:30px 14px 58px; } .pv-archive__header { margin-bottom:22px; } .pv-archive__grid { grid-template-columns:1fr; gap:14px; } .pv-archive__card:last-child:nth-child(odd) { grid-column:auto; max-width:none; } .pv-archive__media { aspect-ratio:1 / 1; height:auto; padding:24px; } .pv-archive__body { min-height:245px; padding:20px; } .pv-archive__footer { align-items:flex-start; flex-direction:column; padding:21px; } .pv-archive__button { width:100%; } } @media (prefers-reduced-motion: reduce) { .pv-archive__card,.pv-archive__image,.pv-archive__card-cta span { transition:none; } } .pv-archive__disclaimer { margin-top:18px; padding:14px 16px; border:1px solid rgba(151,174,255,.30); border-radius:12px; background:rgba(255,255,255,.045); box-shadow:0 8px 24px rgba(5,9,32,.14); } .pv-archive__disclaimer p { margin:0; color:rgba(236,239,255,.80); font-size:14px; line-height:1.58; } .pv-archive__disclaimer strong { color:rgba(255,255,255,.96); } @media screen and (max-width:749px) { .pv-archive__disclaimer { margin-top:14px; padding:13px 14px; border-radius:11px; } .pv-archive__disclaimer p { font-size:13px; } } }