/* ========================================================= trainers-enhance.css Decorative overlay on top of pre-built React bundle. Designed to coexist with the Vite CSS already loaded. Higher specificity via `#root main` scope wherever needed. ========================================================= */ :root { --ow-bg: #0a0a0b; --ow-surface: rgba(255, 255, 255, 0.04); --ow-surface-hi: rgba(255, 255, 255, 0.07); --ow-border: rgba(255, 255, 255, 0.08); --ow-border-hi: rgba(255, 255, 255, 0.14); --ow-text: #fafafa; --ow-text-muted: #a0a0a8; --ow-text-dim: #6b7280; --ow-cyan: #6FE0FF; --ow-cyan-soft: rgba(111, 224, 255, 0.18); --ow-cyan-glow: rgba(111, 224, 255, 0.35); --ow-red: #FF4D4D; --ow-orange: #FF7A45; --ow-grad-red: linear-gradient(135deg, #FF4D4D 0%, #FF7A45 100%); --ow-grad-cyan: linear-gradient(135deg, #6FE0FF 0%, #A8F0FF 100%); --ow-amber: #FFB74D; --ow-tier-pro: var(--ow-red); --ow-tier-high: var(--ow-amber); --ow-tier-mid: var(--ow-cyan); --ow-tier-low: var(--ow-text-dim); --ow-radius-sm: 10px; --ow-radius: 16px; --ow-radius-lg: 24px; --ow-radius-xl: 32px; --ow-easing: cubic-bezier(0.22, 1, 0.36, 1); --ow-easing-elastic: cubic-bezier(0.34, 1.56, 0.64, 1); --ow-glass-blur: saturate(140%) blur(20px); --ow-shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.35); --ow-shadow-lift: 0 16px 48px rgba(0, 0, 0, 0.45); } html, body { font-family: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* FIXED: data-theme attribute lives on , not . Cover all mount points (html + body + #root) because theme-guard MutationObserver propagates it to all three post-mount. */ html[data-theme="dark"], html[data-theme="dark"] body, body[data-theme="dark"], #root[data-theme="dark"] { background: var(--ow-bg) !important; } /* ========================================================= 1. BG atmosphere layer (injected by enhance.js) ========================================================= */ #ow-bg-atmosphere { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } #ow-bg-atmosphere::before, #ow-bg-atmosphere::after { content: ""; position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.45; transition: transform 1.2s var(--ow-easing); will-change: transform; } #ow-bg-atmosphere::before { width: 720px; height: 720px; top: -240px; left: -240px; background: radial-gradient(circle, rgba(255, 77, 77, 0.22) 0%, transparent 70%); } #ow-bg-atmosphere::after { width: 880px; height: 880px; bottom: -340px; right: -300px; background: radial-gradient(circle, rgba(111, 224, 255, 0.16) 0%, transparent 70%); } #ow-bg-atmosphere .ow-bg-grain { position: absolute; inset: 0; opacity: 0.04; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); pointer-events: none; } #ow-bg-atmosphere .ow-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 75%); } #root > div > div.pointer-events-none.fixed.inset-0.z-0 { opacity: 0 !important; } /* ========================================================= 2. Main container ========================================================= */ #root main { position: relative; z-index: 1; } /* Neutralize React's hardcoded bg on the inner shell so our themed body bg shows through. React's ThemeProvider doesn't see the vanilla navbar toggle, so its inner div keeps the boot-time class (often `bg-gray-50` in light or `bg-[#0a0a0b]` in dark). Force transparent for all variants. */ #root main > div, #root main > div[class*="bg-"], #root main > div[class*="bg-["] { background: transparent !important; background-color: transparent !important; } /* ========================================================= 3. Pre-hero chip "ELITE ACADEMY · v1.0" ========================================================= */ .ow-elite-chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 12px; border-radius: 999px; background: var(--ow-surface); border: 1px solid var(--ow-border); backdrop-filter: var(--ow-glass-blur); -webkit-backdrop-filter: var(--ow-glass-blur); font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--ow-text-muted); text-transform: uppercase; user-select: none; position: relative; overflow: hidden; opacity: 0; transform: translateY(-6px); } .ow-elite-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ow-cyan); box-shadow: 0 0 12px var(--ow-cyan-glow), 0 0 4px var(--ow-cyan); flex-shrink: 0; animation: ow-chip-pulse 2.4s var(--ow-easing) infinite; } @keyframes ow-chip-pulse { 0%, 100% { box-shadow: 0 0 12px var(--ow-cyan-glow), 0 0 4px var(--ow-cyan); } 50% { box-shadow: 0 0 24px var(--ow-cyan-glow), 0 0 8px var(--ow-cyan); } } .ow-elite-chip .sep { color: var(--ow-text-dim); margin: 0 2px; } .ow-elite-chip .ver { color: var(--ow-text); } [data-ow-old-chip="hide"] { display: none !important; } /* React renders a static `bg-red-50 border-red-200 text-red-600` pill that doesn't switch in dark mode (theme decoupled from our toggle). Force a matching dark/light-aware visual via attribute. The chip we inject above (.ow-elite-chip) is the real one we render; this defensive rule kicks in if/when our JS hide-old-chip attribute fails. */ #root main [class*="bg-red-50"][class*="border-red-200"][class*="text-red-600"] { background: var(--ow-surface) !important; border-color: var(--ow-border) !important; color: var(--ow-text-muted) !important; } /* ========================================================= 4. Hero h1 ========================================================= */ #root main h1 { font-family: 'Geist', sans-serif !important; font-weight: 700 !important; font-size: clamp(40px, 6.4vw, 92px) !important; line-height: 0.95 !important; letter-spacing: -0.04em !important; margin-bottom: 24px !important; color: var(--ow-text) !important; } #root main h1 .ow-hero-accent { background: var(--ow-grad-red); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; background-size: 200% 100%; background-position: 0% 50%; display: inline-block; opacity: 0; transform: translateY(0.4em); /* background-position is NEVER composited (always repaint) — promoting a layer for it wastes GPU memory and on Firefox can suppress the transform hint entirely on weak GPUs. Composite-friendly only. */ will-change: opacity, transform; } #root main h1 .ow-char { display: inline-block; opacity: 0; transform: translateY(0.6em) rotateX(-30deg); transform-origin: 50% 100%; will-change: transform, opacity; } #root main h1 + p, #root main .text-center.mb-16 p { font-family: 'Geist', sans-serif !important; font-size: clamp(15px, 1.4vw, 18px) !important; line-height: 1.6 !important; color: var(--ow-text-muted) !important; max-width: 640px !important; margin: 0 auto !important; opacity: 0; } /* ========================================================= 5. Stats strip ========================================================= */ .ow-stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 880px; margin: 40px auto 0; padding: 0 12px; opacity: 0; } @media (max-width: 720px) { .ow-stats-strip { grid-template-columns: repeat(2, 1fr); max-width: 480px; } } .ow-stats-strip .stat { position: relative; padding: 18px 16px 16px; border-radius: var(--ow-radius); background: var(--ow-surface); border: 1px solid var(--ow-border); backdrop-filter: var(--ow-glass-blur); -webkit-backdrop-filter: var(--ow-glass-blur); text-align: left; overflow: hidden; transition: transform 0.5s var(--ow-easing), border-color 0.3s var(--ow-easing), background 0.3s var(--ow-easing); } .ow-stats-strip .stat:hover { transform: translateY(-3px); border-color: var(--ow-border-hi); background: var(--ow-surface-hi); } .ow-stats-strip .stat .num { font-family: 'Geist', sans-serif; font-weight: 700; font-size: 28px; line-height: 1; color: var(--ow-text); letter-spacing: -0.02em; } .ow-stats-strip .stat .num.check { color: var(--ow-cyan); font-size: 32px; } .ow-stats-strip .stat .label { font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; /* Hardcoded #a0a0a8 (passes WCAG AA ~7.6:1 on #0a0a0b dark bg). The CSS var --ow-text-muted is REDEFINED at body level by the React bundle to rgba(255,255,255,.3) which fails contrast — we bypass it. */ color: #a0a0a8; text-transform: uppercase; margin-top: 8px; } html[data-theme="light"] .ow-stats-strip .stat .label { /* Light mode: #6b7280 on light surface ~8.5:1. */ color: #6b7280; } .ow-stats-strip .stat::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(111, 224, 255, 0.06), transparent 60%); opacity: 0; transition: opacity 0.4s var(--ow-easing); pointer-events: none; } .ow-stats-strip .stat:hover::before { opacity: 1; } /* ========================================================= 6. Tier tabs ========================================================= */ #root main button[class*="from-red-600"] { background: var(--ow-grad-red) !important; box-shadow: 0 6px 24px rgba(255, 77, 77, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; border: 1px solid rgba(255, 77, 77, 0.35) !important; } #root main button[class*="rounded-xl"][class*="text-xs"][class*="font-black"][class*="uppercase"] { font-family: 'Geist', sans-serif !important; letter-spacing: 0.16em !important; font-size: 11px !important; padding: 10px 18px !important; border-radius: 12px !important; transition: all 0.35s var(--ow-easing) !important; position: relative; overflow: hidden; } #root main button[class*="rounded-xl"][class*="text-xs"][class*="font-black"][class*="uppercase"]:not([class*="from-red-600"]) { background: var(--ow-surface) !important; border: 1px solid var(--ow-border) !important; color: var(--ow-text-muted) !important; backdrop-filter: var(--ow-glass-blur); -webkit-backdrop-filter: var(--ow-glass-blur); } #root main button[class*="rounded-xl"][class*="text-xs"][class*="font-black"][class*="uppercase"]:not([class*="from-red-600"]):hover { background: var(--ow-surface-hi) !important; border-color: var(--ow-cyan-soft) !important; color: var(--ow-text) !important; transform: translateY(-2px); box-shadow: 0 0 0 1px var(--ow-cyan-soft), 0 8px 24px rgba(0, 0, 0, 0.35); } #root main div:has(> button[class*="from-red-600"]) { padding: 6px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--ow-border); border-radius: 18px; backdrop-filter: var(--ow-glass-blur); -webkit-backdrop-filter: var(--ow-glass-blur); } /* ========================================================= 7. Search input + refresh button ========================================================= */ #root main input[placeholder*="Buscar entrenador" i] { background: var(--ow-surface) !important; border: 1px solid var(--ow-border) !important; color: var(--ow-text) !important; font-family: 'Geist', sans-serif !important; font-weight: 500 !important; border-radius: 14px !important; padding: 12px 16px 12px 44px !important; transition: all 0.3s var(--ow-easing) !important; } #root main input[placeholder*="Buscar entrenador" i]:focus { background: var(--ow-surface-hi) !important; border-color: var(--ow-cyan-soft) !important; box-shadow: 0 0 0 4px rgba(111, 224, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.25) !important; outline: none !important; } #root main input[placeholder*="Buscar entrenador" i]::placeholder { color: var(--ow-text-dim) !important; } #root main button[class*="aspect-square"][class*="rounded"][class*="border"] { background: var(--ow-surface) !important; border: 1px solid var(--ow-border) !important; transition: all 0.3s var(--ow-easing) !important; } #root main button[class*="aspect-square"][class*="rounded"][class*="border"]:hover { background: var(--ow-surface-hi) !important; border-color: var(--ow-cyan-soft) !important; transform: rotate(60deg); } /* ========================================================= 8. Empty state ========================================================= */ #root main div[class*="border-dashed"][class*="rounded-"] { background: var(--ow-surface) !important; border: 1.5px dashed var(--ow-border-hi) !important; backdrop-filter: var(--ow-glass-blur); -webkit-backdrop-filter: var(--ow-glass-blur); padding: 80px 32px !important; border-radius: var(--ow-radius-xl) !important; position: relative; overflow: hidden; } #root main div[class*="border-dashed"][class*="rounded-"]::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(111, 224, 255, 0.07), transparent 70%); pointer-events: none; } #root main div[class*="border-dashed"][class*="rounded-"] .ow-empty-icon { display: flex !important; justify-content: center !important; align-items: center !important; margin-bottom: 24px !important; } #root main .ow-empty-icon-wrap { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle, rgba(111, 224, 255, 0.10) 0%, transparent 70%); position: relative; } #root main .ow-empty-icon-wrap::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; background: radial-gradient(circle, rgba(111, 224, 255, 0.16) 0%, transparent 60%); filter: blur(8px); z-index: -1; } #root main .ow-empty-icon-wrap svg { filter: drop-shadow(0 0 16px rgba(111, 224, 255, 0.45)); } #root main div[class*="border-dashed"][class*="rounded-"] h2, #root main div[class*="border-dashed"][class*="rounded-"] h3, #root main div[class*="border-dashed"][class*="rounded-"] [class*="text-xl"], #root main div[class*="border-dashed"][class*="rounded-"] [class*="text-2xl"] { font-family: 'Geist', sans-serif !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: var(--ow-text) !important; margin-top: 20px !important; } #root main div[class*="border-dashed"][class*="rounded-"] p, #root main div[class*="border-dashed"][class*="rounded-"] [class*="text-sm"]:not(h2):not(h3) { color: var(--ow-text-muted) !important; font-family: 'Geist', sans-serif !important; max-width: 480px; margin: 12px auto 0 !important; } /* ========================================================= 9. Card reveal ========================================================= */ .ow-card-reveal { opacity: 0; transform: translateY(16px) scale(0.96); transition: opacity 0.6s var(--ow-easing), transform 0.6s var(--ow-easing); } .ow-card-reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); } /* ========================================================= 10. Discord floating button ========================================================= */ a[class*="fixed"][class*="bottom-6"][class*="right-6"] { border: 1px solid var(--ow-border) !important; backdrop-filter: var(--ow-glass-blur); -webkit-backdrop-filter: var(--ow-glass-blur); transition: all 0.35s var(--ow-easing) !important; } a[class*="fixed"][class*="bottom-6"][class*="right-6"]:hover { border-color: var(--ow-cyan-soft) !important; transform: translateY(-3px); } /* ========================================================= 11. Potato Mode + reduced-motion ========================================================= */ [data-perf="lite"] #ow-bg-atmosphere::before, [data-perf="lite"] #ow-bg-atmosphere::after, [data-perf="lite"] #ow-bg-atmosphere .ow-bg-grain, [data-perf="lite"] .ow-elite-chip::before { animation: none !important; transition: none !important; } [data-perf="lite"] #ow-bg-atmosphere { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } #root main h1 .ow-char { opacity: 1; transform: none; } .ow-elite-chip, .ow-stats-strip, #root main h1 + p, #root main .text-center.mb-16 p { opacity: 1; } } /* ========================================================= 12. Light theme ========================================================= */ html[data-theme="light"] { --ow-bg: #fafafa; --ow-surface: rgba(0, 0, 0, 0.04); --ow-surface-hi: rgba(0, 0, 0, 0.06); --ow-border: rgba(0, 0, 0, 0.08); --ow-border-hi: rgba(0, 0, 0, 0.14); --ow-text: #0a0a0b; --ow-text-muted: #4a4a52; --ow-text-dim: #84848e; } html[data-theme="light"], html[data-theme="light"] body, body[data-theme="light"], #root[data-theme="light"] { background: var(--ow-bg) !important; } html[data-theme="light"] #ow-bg-atmosphere::before { background: radial-gradient(circle, rgba(255, 77, 77, 0.10) 0%, transparent 70%); } html[data-theme="light"] #ow-bg-atmosphere::after { background: radial-gradient(circle, rgba(111, 224, 255, 0.10) 0%, transparent 70%); } /* Light-mode foreground tweaks for our custom elements */ html[data-theme="light"] .ow-elite-chip { color: var(--ow-text-muted) !important; } html[data-theme="light"] .ow-stats-strip .stat { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.08) !important; } html[data-theme="light"] .ow-stats-strip .stat .num { color: var(--ow-text) !important; } html[data-theme="light"] .ow-stats-strip .stat .label { color: var(--ow-text-dim) !important; } html[data-theme="light"] #root main h1 { color: var(--ow-text) !important; } html[data-theme="light"] #root main h1 + p, html[data-theme="light"] #root main .text-center.mb-16 p { color: var(--ow-text-muted) !important; } /* ========================================================= 13. Navbar token overrides (font + cyan accent) Override variables consumed by oneway-navbar.css without touching the shared navbar file itself. ========================================================= */ :root { --ow-nav-font: 'Geist', 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif !important; /* Both accent vars stay in the cyan family so the active-tab underline gradient is a smooth cyan→light-cyan glow (NOT rainbow). */ --ow-nav-accent: #6FE0FF !important; --ow-nav-accent-2: #A8F0FF !important; --ow-nav-surface-active: rgba(111, 224, 255, 0.14) !important; --ow-nav-glow: rgba(111, 224, 255, 0.28) !important; --ow-nav-bg: rgba(10, 10, 12, 0.72) !important; --ow-nav-border: rgba(255, 255, 255, 0.07) !important; } .ow-navbar, .ow-navbar * { font-family: var(--ow-nav-font) !important; } /* Cyan hover on nav links instead of indigo */ .ow-navbar .ow-nav-link:hover, .ow-navbar a:hover, .ow-navbar button:hover { color: var(--ow-cyan) !important; } /* Active nav link cyan underline / shadow */ .ow-navbar .ow-nav-link.active, .ow-navbar .ow-nav-link[data-active="true"], .ow-navbar .ow-nav-link.is-active { color: var(--ow-cyan) !important; background: rgba(111, 224, 255, 0.10) !important; border-color: rgba(111, 224, 255, 0.20) !important; } /* Smoother glass on scrolled state */ .ow-navbar.ow-nav-scrolled { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } /* ========================================================= 14. Animation upgrade pack (iter 2) Cursor follower / scroll progress bar / breathing surfaces / magnetic CTA / animated mesh drift / chip shimmer / accent sweep ========================================================= */ /* --- 14.1 Custom cursor follower --- */ #ow-cursor { position: fixed; top: 0; left: 0; width: 28px; height: 28px; border-radius: 50%; pointer-events: none; /* Above navbar (99999) and any dropdown overlay layer (100001) */ z-index: 100002; background: radial-gradient(circle, rgba(111, 224, 255, 0.42) 0%, rgba(111, 224, 255, 0.10) 50%, transparent 70%); mix-blend-mode: screen; transform: translate3d(-50%, -50%, 0); will-change: transform, opacity; transition: opacity 0.25s var(--ow-easing), width 0.3s var(--ow-easing), height 0.3s var(--ow-easing); opacity: 0; } /* Light mode: `screen` blend washes cyan to invisible on white bg. Switch to `multiply` so cyan darkens against white instead. */ html[data-theme="light"] #ow-cursor { mix-blend-mode: multiply; background: radial-gradient(circle, rgba(56, 165, 200, 0.55) 0%, rgba(56, 165, 200, 0.15) 50%, transparent 70%); } #ow-cursor.is-active { opacity: 1; } #ow-cursor.is-hovering { width: 56px; height: 56px; background: radial-gradient(circle, rgba(111, 224, 255, 0.65) 0%, rgba(111, 224, 255, 0.20) 40%, transparent 70%); } #ow-cursor.is-pressing { width: 18px; height: 18px; background: radial-gradient(circle, rgba(255, 77, 77, 0.65) 0%, rgba(255, 122, 69, 0.20) 50%, transparent 70%); } html[data-perf="lite"] #ow-cursor { display: none !important; } @media (hover: none), (pointer: coarse) { #ow-cursor { display: none !important; } } /* --- 14.2 Scroll progress bar (top of viewport) --- */ #ow-scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--ow-red) 0%, var(--ow-orange) 40%, var(--ow-cyan) 100%); box-shadow: 0 0 12px rgba(111, 224, 255, 0.45); z-index: 99999; pointer-events: none; transition: width 0.05s linear; will-change: width; } html[data-perf="lite"] #ow-scroll-progress { display: none !important; } /* --- 14.3 Animated gradient mesh drift on BG --- */ @keyframes ow-mesh-drift-a { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(40px, 60px, 0) rotate(20deg); } } @keyframes ow-mesh-drift-b { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(-60px, -40px, 0) rotate(-15deg); } } #ow-bg-atmosphere::before { animation: ow-mesh-drift-a 22s ease-in-out infinite; } #ow-bg-atmosphere::after { animation: ow-mesh-drift-b 28s ease-in-out infinite; } html[data-perf="lite"] #ow-bg-atmosphere::before, html[data-perf="lite"] #ow-bg-atmosphere::after { animation: none !important; } /* --- 14.4 Glass surface breathing on hover --- */ .ow-stats-strip .stat, #root main div[class*="border-dashed"][class*="rounded-"] { transition: transform 0.5s var(--ow-easing), border-color 0.4s var(--ow-easing), background 0.4s var(--ow-easing), box-shadow 0.5s var(--ow-easing) !important; } .ow-stats-strip .stat:hover { box-shadow: 0 12px 36px rgba(111, 224, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06); } #root main div[class*="border-dashed"][class*="rounded-"]:hover { border-color: rgba(111, 224, 255, 0.30) !important; box-shadow: 0 24px 72px rgba(111, 224, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* --- 14.5 Accent sweep keyframe (gradient) on hero accent --- */ @keyframes ow-accent-shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* When hovering hero, shimmer the gradient */ #root main h1:hover .ow-hero-accent { animation: ow-accent-shimmer 2.4s var(--ow-easing) infinite; } /* --- 14.6 Subtle floating dots in BG (parallax depth) --- */ #ow-bg-atmosphere .ow-bg-dots { position: absolute; inset: 0; background-image: radial-gradient(circle at center, rgba(111, 224, 255, 0.10) 1px, transparent 1.5px); background-size: 32px 32px; mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, black 20%, transparent 65%); -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, black 20%, transparent 65%); opacity: 0.7; animation: ow-dots-drift 32s linear infinite; } @keyframes ow-dots-drift { 0% { background-position: 0 0; } 100% { background-position: 64px 64px; } } html[data-perf="lite"] #ow-bg-atmosphere .ow-bg-dots { display: none !important; } /* --- 14.7 Tab "active" pulsing glow ring --- */ @keyframes ow-tab-active-pulse { 0%, 100% { box-shadow: 0 6px 24px rgba(255, 77, 77, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18); } 50% { box-shadow: 0 10px 32px rgba(255, 77, 77, 0.42), 0 0 0 4px rgba(255, 77, 77, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.22); } } #root main button[class*="from-red-600"] { animation: ow-tab-active-pulse 3.8s var(--ow-easing) infinite; } html[data-perf="lite"] #root main button[class*="from-red-600"] { animation: none !important; } /* --- 14.8 Search input focus shimmer ring --- */ #root main input[placeholder*="Buscar entrenador" i]:focus { animation: ow-search-shimmer 1.6s var(--ow-easing); } @keyframes ow-search-shimmer { 0% { box-shadow: 0 0 0 0 rgba(111, 224, 255, 0.45), 0 8px 24px rgba(0, 0, 0, 0.25); } 60% { box-shadow: 0 0 0 8px rgba(111, 224, 255, 0.0), 0 8px 24px rgba(0, 0, 0, 0.25); } 100% { box-shadow: 0 0 0 4px rgba(111, 224, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.25); } } /* --- 14.9 Stats num count-up shimmer --- */ .ow-stats-strip .stat .num { background: linear-gradient(135deg, currentColor 0%, currentColor 50%, rgba(255,255,255,0.65) 60%, currentColor 70%); background-size: 250% 100%; background-position: 100% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: background-position 0.6s var(--ow-easing); } .ow-stats-strip .stat:hover .num { background-position: 0% 50%; } html[data-theme="light"] .ow-stats-strip .stat .num { background: none; -webkit-text-fill-color: var(--ow-text); color: var(--ow-text); } /* Keep cyan check visible in both themes — also reset background-clip inherited from `.num` so Chromium doesn't clip the unicode glyph. */ .ow-stats-strip .stat .num.check { background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: var(--ow-cyan) !important; color: var(--ow-cyan) !important; } /* --- 14.10 Brand logo subtle breath --- */ @keyframes ow-brand-breath { 0%, 100% { filter: drop-shadow(0 0 8px rgba(111, 224, 255, 0.0)); } 50% { filter: drop-shadow(0 0 14px rgba(111, 224, 255, 0.25)); } } .ow-navbar .ow-nav-brand .ow-nav-logo-img { animation: ow-brand-breath 6s var(--ow-easing) infinite; } html[data-perf="lite"] .ow-navbar .ow-nav-brand .ow-nav-logo-img { animation: none !important; } /* Potato Mode contract: ALL infinite + decorative animations must stop. Closes the gap for accent-shimmer (hover-triggered infinite) and search-shimmer (one-shot but still nice to silence). */ html[data-perf="lite"] #root main h1:hover .ow-hero-accent, html[data-perf="lite"] #root main input[placeholder*="Buscar entrenador" i]:focus { animation: none !important; } /* --- 14.11 Page load fade-in for entire main --- */ @keyframes ow-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Disabled if Potato */ html:not([data-perf="lite"]) #root main { animation: ow-page-in 0.8s var(--ow-easing) both; } /* --- 14.12 Reduced motion overrides --- */ @media (prefers-reduced-motion: reduce) { #ow-bg-atmosphere::before, #ow-bg-atmosphere::after, #ow-bg-atmosphere .ow-bg-dots, #root main button[class*="from-red-600"], .ow-navbar .ow-nav-brand .ow-nav-logo-img, #root main h1:hover .ow-hero-accent, .ow-elite-chip::before { /* chip-pulse was missing from this block */ animation: none !important; } /* FIX MED1: ow-page-in has fill-mode:both. The 0.001ms catch-all was leaving #root main stuck at opacity:0/translateY(8px) for reduced-motion users -> blank page until interaction. */ #root main { animation: none !important; opacity: 1 !important; transform: none !important; } #ow-cursor, #ow-scroll-progress { display: none !important; } } /* ========================================================= 15. Mobile / coarse-pointer perf overrides Backdrop-filter stacking on mobile GPUs (esp. Firefox 137 Zen) causes paint storm + icon-render corruption ("iconos malo" reported on phone). Drop bd-filter from non-essential elements on mobile; keep only navbar. Reduce atmosphere blur radius. ========================================================= */ @media (max-width: 768px), (pointer: coarse) { /* Disable backdrop-filter everywhere except navbar (where it's critical for the iOS-18 glassmorph aesthetic). Replace with a flat semi-opaque bg so the glass feel survives. */ .ow-elite-chip, .ow-stats-strip .stat, #root main div[class*="border-dashed"][class*="rounded-"], a[class*="fixed"][class*="bottom-6"][class*="right-6"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(10, 10, 14, 0.78) !important; } html[data-theme="light"] .ow-elite-chip, html[data-theme="light"] .ow-stats-strip .stat, html[data-theme="light"] #root main div[class*="border-dashed"][class*="rounded-"], html[data-theme="light"] a[class*="fixed"][class*="bottom-6"][class*="right-6"] { background: rgba(255, 255, 255, 0.85) !important; } /* Tier tab container loses bd-filter too */ #root main div:has(> button[class*="from-red-600"]) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Reduce atmosphere blur radius on mobile (120px → 40px). */ #ow-bg-atmosphere::before, #ow-bg-atmosphere::after { filter: blur(40px) !important; opacity: 0.28 !important; } /* Tier tabs: enforce WCAG 2.5.8 minimum 44px tap target + gap */ #root main button[class*="rounded-xl"][class*="text-xs"][class*="font-black"][class*="uppercase"] { min-height: 44px !important; padding: 12px 16px !important; margin: 2px !important; } /* Brand logo breath off on mobile (Firefox: filter animation = repaint storm) */ .ow-navbar .ow-nav-brand .ow-nav-logo-img { animation: none !important; } } /* ========================================================= 16. Replace `transition: all` on backdrop-filter elements `all` + backdrop-filter forces full-paint on Firefox/Zen. Enumerate properties to avoid triggering bd-filter transition. ========================================================= */ #root main button[class*="rounded-xl"][class*="text-xs"][class*="font-black"][class*="uppercase"] { transition: transform 0.35s var(--ow-easing), background 0.35s var(--ow-easing), border-color 0.35s var(--ow-easing), color 0.35s var(--ow-easing), box-shadow 0.35s var(--ow-easing) !important; } #root main input[placeholder*="Buscar entrenador" i] { transition: transform 0.3s var(--ow-easing), background 0.3s var(--ow-easing), border-color 0.3s var(--ow-easing), box-shadow 0.3s var(--ow-easing) !important; } #root main button[class*="aspect-square"][class*="rounded"][class*="border"] { transition: transform 0.3s var(--ow-easing), background 0.3s var(--ow-easing), border-color 0.3s var(--ow-easing) !important; } a[class*="fixed"][class*="bottom-6"][class*="right-6"] { transition: transform 0.35s var(--ow-easing), border-color 0.35s var(--ow-easing), box-shadow 0.35s var(--ow-easing) !important; } /* ========================================================= 17. Search input focus ring (a11y: WCAG 2.4.7 + 2.4.11) Replace nuked outline with a visible 3:1-contrast ring. ========================================================= */ #root main input[placeholder*="Buscar entrenador" i]:focus-visible { outline: 2px solid var(--ow-cyan) !important; outline-offset: 2px !important; box-shadow: 0 0 0 4px rgba(111, 224, 255, 0.20), 0 8px 24px rgba(0, 0, 0, 0.25) !important; }