/* ========================================== PREMIUM ANIMATIONS & TRANSITIONS ========================================== */ /* Load Inter font for dashboard. Pages on the shared head link this same URL from (one parallel request), so this import resolves from that request. It stays for a page whose head does not link the font yet (today only shoes.html, held back on 2026-09-24); remove it once every page links the font. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&display=swap'); @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInFromLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } @keyframes glow { 0%, 100% { box-shadow: 0 0 20px rgba(46, 209, 244, 0.3), 0 0 40px rgba(46, 209, 244, 0.1); } 50% { box-shadow: 0 0 30px rgba(46, 209, 244, 0.5), 0 0 60px rgba(46, 209, 244, 0.2); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @keyframes blur-emerge { from { opacity: 0; transform: translate(-50%, 0) scale(0.8); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } } .blur-animated { animation: blur-emerge 1.2s ease-out forwards; } /* Dashboard-style upload page adapted to work with backend */ /* Use project color variable so this matches other pages' exact dark color */ body { background: var(--color-dark) !important; color: white; font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, "Helvetica Neue", Arial; } :root { --dashboard-mobile-main-offset: calc(env(safe-area-inset-top, 0px) + 7.15rem); } @media (max-width: 639px) { body main.pt-35, body main.dashboard-main, body main.not-found-main { padding-top: var(--dashboard-mobile-main-offset) !important; } } /* Use a thinner base weight for a sleeker, lighter UI */ body { font-weight: 300; } /* Ensure headings are not bolded anywhere */ h1, h2, h3, h4, h5, h6 { font-weight: 300 !important; letter-spacing: -0.2px; } /* Neutralize utility bold classes so headers and other elements stay thin */ .font-bold, .font-semibold { font-weight: 300 !important; } body.first-load { opacity: 1; } /* Override common utility wrapper classes used in the dashboard templates */ .bg-dark { background: var(--color-dark) !important; } .bg-dark-light { background: rgba(255,255,255,0.02) !important; } .border-stroke { border-color: rgba(255,255,255,0.06) !important; } .text-white { color: white !important; } .text-white\/70 { color: rgba(255,255,255,0.7) !important; } /* Keep top-level page subtitles consistent with the mobile header treatment. */ main section.relative.z-10.mb-15 > .mb-12 > p:first-of-type, main section.relative.z-10.mb-15 > .mb-12.relative > p:first-of-type { margin-top: 0.48rem !important; max-width: 34rem; font-size: 0.92rem !important; line-height: 1.48 !important; letter-spacing: -0.01em; color: rgba(255,255,255,0.58) !important; } main section.relative.z-10.mb-15 > .analysis-header-row .analysis-header-meta > p[data-static-text="true"]:first-of-type { max-width: 34rem; font-size: 0.92rem !important; line-height: 1.48 !important; letter-spacing: -0.01em; color: rgba(255,255,255,0.58) !important; } @keyframes appPageHeaderLineScaleIn { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } } @media (max-width: 639px) { html[data-run-it-native-shell="1"] body { padding-top: 0 !important; } html[data-run-it-native-shell="1"] body > main, html[data-run-it-native-shell="1"] #__next > main, html[data-run-it-native-shell="1"] body > div > main { padding-top: calc(env(safe-area-inset-top, 0px) + 7.15rem) !important; } body main section.relative.z-10.page-header { padding-top: 0 !important; margin-bottom: 1.12rem !important; } body main section.relative.z-10 .app-page-header.app-page-header { width: auto; margin: 0 0 1.12rem !important; padding-top: 0 !important; } body main section.relative.z-10 .app-page-header.relative.app-page-header { padding-top: 0 !important; } body main section.relative.z-10 .app-page-header.app-page-header .app-page-title.app-page-title, body main section.relative.z-10 .app-page-header.app-page-header h1.app-page-title, body main section.relative.z-10 .app-page-header.app-page-header h2.app-page-title { max-width: 100%; width: fit-content !important; margin: 0 !important; padding-bottom: 0.66rem !important; font-size: clamp(1.72rem, 7.2vw, 1.98rem) !important; line-height: 1.02 !important; letter-spacing: -0.045em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block !important; position: relative !important; justify-self: start; } body main section.relative.z-10 .app-page-header.app-page-header .app-page-title.app-page-title::after, body main section.relative.z-10 .app-page-header.app-page-header h1.app-page-title::after, body main section.relative.z-10 .app-page-header.app-page-header h2.app-page-title::after { content: '' !important; display: block !important; position: absolute !important; bottom: 0 !important; left: 0 !important; height: 2px !important; width: 100% !important; max-width: none !important; opacity: 0; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, rgba(46, 209, 244, 1) 0%, rgba(46, 209, 244, 0.88) 54%, rgba(46, 209, 244, 0.28) 82%, rgba(46, 209, 244, 0) 100%) !important; box-shadow: 0 0 14px rgba(46, 209, 244, 0.32), 0 0 24px rgba(46, 209, 244, 0.12) !important; animation: appPageHeaderLineScaleIn 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards !important; } body main section.relative.z-10 .app-page-header.app-page-header > p.app-page-subtitle, body main section.relative.z-10 .app-page-header.app-page-header .app-page-subtitle.app-page-subtitle, body main section.relative.z-10 .app-page-header.app-page-header .analysis-header-meta > p.app-page-subtitle { margin-top: 0.48rem !important; max-width: 17.5rem !important; font-size: 0.88rem !important; line-height: 1.42 !important; letter-spacing: -0.01em !important; color: rgba(255,255,255,0.58) !important; } body main section.relative.z-10 .analysis-header-row.app-page-header { flex-wrap: nowrap; align-items: flex-start !important; } body main section.relative.z-10 .analysis-header-row.app-page-header .analysis-header-copy { display: flex; flex-direction: column; align-items: flex-start; row-gap: 0.48rem; } body main section.relative.z-10 .analysis-header-row.app-page-header .analysis-header-meta { display: block !important; } body main section.relative.z-10 .analysis-header-row.app-page-header .analysis-header-meta > p.app-page-subtitle { width: 100%; max-width: none !important; margin-top: 0 !important; } body main section.relative.z-10 .analysis-header-row.app-page-header .analysis-header-action, body main section.relative.z-10 .analysis-header-row.app-page-header .analysis-header-right { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; width: auto !important; margin-left: auto; } } header .logo img { height: 28px; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } .section { margin-bottom: 32px; } .section-title { color:white; font-size:24px; font-weight:700; margin:12px 0 16px; } .card { background: var(--color-dark, #001018); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 20px; } .btn { background: linear-gradient(90deg, #2ED1F4 0%, #52D9F6 100%); color: #001018; padding: 12px 18px; border-radius: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; border: none; cursor: pointer; font-size: 15px; transition: opacity 0.2s; } .btn:hover { opacity: 0.9; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-secondary { background: rgba(255,255,255,0.08); color: white; } .muted { color: rgba(255,255,255,0.7); } .badge { display:inline-block; font-size:12px; padding:4px 10px; border-radius:999px; background: rgba(46,209,244,.12); color:#2ED1F4; border:1px solid rgba(46,209,244,.35); } .form-group { margin-bottom: 18px; } .form-label { display: block; color: white; font-weight: 600; margin-bottom: 8px; font-size: 14px; } .form-help { display: block; color: rgba(255,255,255,0.6); font-size: 13px; margin-top: 4px; } .file-upload-zone { border: 2px dashed rgba(46,209,244,0.4); border-radius: 12px; padding: 32px 20px; text-align: center; background: rgba(46,209,244,0.03); cursor: pointer; transition: all 0.2s; } .file-upload-zone:hover { border-color: #2ED1F4; background: rgba(46,209,244,0.08); } .file-upload-zone.dragover { border-color: #2ED1F4; background: rgba(46,209,244,0.15); } .file-info { display: none; align-items: center; gap: 12px; padding: 12px; background: rgba(46,209,244,0.08); border-radius: 8px; margin-top: 12px; flex-wrap: wrap; } .file-info.active { display: flex; } .file-info button { white-space: nowrap; } @media (max-width: 640px) { .file-info { gap: 8px; padding: 10px; } .file-info > div { flex: 1; min-width: 0; } .file-info button { padding: 6px 10px !important; font-size: 12px !important; } } input[type="number"] { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color: white; padding: 10px 12px; border-radius: 8px; font-size: 15px; width: 80px; } input[type="number"]:focus { outline: none; border-color: #2ED1F4; } .shoe-selector { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); padding: 10px 12px; border-radius: 8px; position: relative; } .shoe-selector input { background: transparent; border: none; color: white; width: 100%; outline: none; font-size: 15px; } .shoe-selector input::placeholder { color: rgba(255,255,255,0.5); } .shoe-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: rgba(10,20,35,0.98); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; margin-top: 4px; max-height: 200px; overflow-y: auto; z-index: 1000; display: none; } .shoe-dropdown.active { display: block; } .shoe-option { padding: 10px 12px; cursor: pointer; color: white; border-bottom: 1px solid rgba(255,255,255,0.08); } .shoe-option:hover { background: rgba(46,209,244,0.15); } /* Upload page: Garmin sensor dropdown must match the darker shoe dropdown styling. Use high specificity + !important to prevent any later overrides from making it too light. */ #watchDropdown.shoe-dropdown { background: linear-gradient(135deg, rgba(20,20,30,0.98), rgba(15,15,25,0.98)) !important; border: 1px solid rgba(46, 209, 244, 0.3) !important; border-radius: 12px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.8), 0 0 0 1px rgba(46, 209, 244, 0.1) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; opacity: 1 !important; } #watchDropdown.shoe-dropdown .shoe-option { color: rgba(255,255,255,0.92) !important; border-bottom: 1px solid rgba(255,255,255,0.03) !important; background: transparent !important; } #watchDropdown.shoe-dropdown .shoe-option:hover { background: linear-gradient(90deg, rgba(46, 209, 244, 0.15), rgba(46, 209, 244, 0.05)) !important; border-left: 3px solid #2ed1f4 !important; box-shadow: inset 0 0 20px rgba(46, 209, 244, 0.1) !important; } .selected-shoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .shoe-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(46,209,244,0.15); border: 1px solid rgba(46,209,244,0.4); border-radius: 20px; color: #2ED1F4; font-size: 13px; } .shoe-tag button { background: none; border: none; color: #2ED1F4; cursor: pointer; padding: 0; font-size: 16px; line-height: 1; } .analysis-list { display: flex; flex-direction: column; gap: 12px; } .analysis-item { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 16px; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s; } .analysis-item:hover { background: rgba(255,255,255,0.08); border-color: rgba(46,209,244,0.3); } .analysis-status { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; } .status-completed { background: rgba(46,209,244,0.15); color: #2ED1F4; } .status-processing { background: rgba(255,193,7,0.15); color: #FFD54F; } .status-failed { background: rgba(244,67,54,0.15); color: #FF6B6B; } .progress-bar { width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; margin-top: 12px; display: none; } .progress-bar.active { display: block; } .progress-fill { height: 100%; background: linear-gradient(90deg, #2ED1F4 0%, #52D9F6 100%); transition: width 0.3s ease; width: 0%; } .error-message { display: flex; align-items: center; background: rgba(244,67,54,0.15); border: 1px solid rgba(244,67,54,0.4); color: #FF6B6B; padding: 0; border-radius: 8px; margin-top: 0; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-8px); visibility: hidden; transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin-top 0.4s ease, padding 0.4s ease, visibility 0.4s ease; } .error-message.active { max-height: 100px; padding: 12px 16px; margin-top: 12px; opacity: 1; transform: translateY(0); visibility: visible; } /* Hide the visible frame/border/shadow for the upload card ("kader") so it blends with background */ #uploadCard, #uploadCard .card, #uploadCard .relative, #uploadCard > .relative { background: transparent !important; border: none !important; box-shadow: none !important; } header, header a, header nav a, .nav__menu a { color: white !important; } /* If the submit button wrapper exists, make sure it's hidden as well */ #uploadCard #submitBtn { display: none !important; opacity: 0 !important; pointer-events: none !important; } /* Collapse the whole upload section so it doesn't take vertical space */ #uploadSection { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; overflow: hidden !important; } /* Make the New Analysis CTAs visible regardless of utility classes */ #newAnalysisBtnHeader, #newAnalysisBtnMobile, a[href="/app/upload.html"] { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; align-items: center !important; justify-content: center !important; } /* Cyan accent variables */ :root { --accent-cyan: #2ED1F4; --accent-cyan-strong: #07a6bf; --accent-cyan-soft: rgba(46,209,244,0.08); } /* Navigation links should stay white, not cyan by default */ .nav__menu a { color: white !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; } .nav__menu a::after { content: '' !important; position: absolute !important; bottom: -2px !important; left: 50% !important; width: 0 !important; height: 2px !important; background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent) !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; transform: translateX(-50%) !important; } .nav__menu a:hover { color: var(--accent-cyan) !important; transform: translateY(-2px) !important; } .nav__menu a:hover::after { width: 100% !important; } .nav__menu a.nav-gradient { color: white !important; } /* Remove mobile + button */ #newAnalysisBtnMobile { display: none !important; } /* Sign out button - cyan colored */ /* Button gradient tweaks used across dashboard to be more cyan than white. IMPORTANT: match the exact implementation from /static/style.css so buttons look identical across pages (e.g. Biometrics "Save Biometric Profile" and Upload "Start Analysis"). */ .button-border-gradient { position: relative; z-index: 0; /* establish stacking context for the border pseudo-element */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%) !important; } .button-border-gradient:before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; /* match style.css (border sits behind content) */ background: linear-gradient( 90deg, rgba(121, 241, 255, 0.45) 0.01%, rgba(56, 230, 215, 0.45) 50.01%, rgba(56, 230, 215, 0.45) 100% ); } .button-border-gradient:hover { background: linear-gradient(90deg, rgba(46,209,244,0.12), rgba(46,209,244,0.05)) !important; } /* Shadow button - match style.css precisely */ .shadow-button { box-shadow: inset 0px -6px 15px rgba(56, 230, 215, 0.25), inset 0px 6px 15px rgba(121, 241, 255, 0.25); } /* Accent small UI pieces */ .badge { background: rgba(46,209,244,0.08) !important; color: var(--accent-cyan) !important; border: 1px solid rgba(46,209,244,0.18) !important; } .shoe-tag { background: rgba(46,209,244,0.06) !important; border: 1px solid rgba(46,209,244,0.12) !important; color: var(--accent-cyan) !important; } /* Make header links and paragraph text subtler cyan instead of bright white */ .text-white\/50 { color: rgba(46,209,244,0.45) !important; } .text-white\/70 { color: rgba(46,209,244,0.7) !important; } /* Ensure mobile CTA is visible and colored */ #newAnalysisBtnMobile { background: var(--accent-cyan) !important; color: #001018 !important; } /* Shared UI icon tone. Keep chart series, provider marks and semantic status colors independent from decorative/navigation icons. Inline cyan occurs in both static pages and dynamically rendered controls, hence these overrides. */ :root { --ui-icon-color: #b8bec9; } svg.fill-current, svg.stroke-current, svg[style*="color: #2ed1f4" i], svg[style*="color:#2ed1f4" i], svg[style*="color: #22d3ee" i], svg[style*="color:#22d3ee" i], svg.text-cyan-400, svg.text-cyan-300, .section-header-icon, .analysis-section-icon, .dash-card-header > svg, .dash-bio-heading > svg, :is(h1, h2, h3, h4) > svg, .gp-inline-icon:not([class*="status"]):not([class*="success"]):not([class*="error"]):not([class*="warning"]), .ao-date-button-icon, .activity-shoe-icon-btn, .bucket-stats-chip-upload-icon, .catalogue-section-label .catalogue-icon, .lpi-panel-intro-icon, .lpi-compliance-icon, .lpi-factor-icon, .add-shoe-plus, .shoe-action-btn.edit-btn, .shoes-spinner-icon { color: var(--ui-icon-color) !important; } svg[stroke="#2ed1f4" i], svg[stroke="#22d3ee" i], svg[stroke="#00bcd4" i] { stroke: var(--ui-icon-color) !important; } #completionChevron path, #completionChevronMobile path, .metric-expand-arrow path { stroke: var(--ui-icon-color) !important; } svg[fill="#2ed1f4" i], svg[fill="#22d3ee" i] { fill: var(--ui-icon-color) !important; } .section-header-icon { filter: none !important; } .analysis-section-icon { background: rgba(184,190,201,0.07) !important; border-color: rgba(184,190,201,0.16) !important; box-shadow: none !important; } .shoe-action-btn.edit-btn { background: rgba(184,190,201,0.07) !important; border-color: rgba(184,190,201,0.18) !important; } .shoe-action-btn.edit-btn:hover { background: rgba(184,190,201,0.13) !important; } .dash-card-header img[src*="shoeicon-tab"], img.ao-date-button-icon { filter: brightness(0) saturate(100%) invert(81%) sepia(8%) saturate(290%) hue-rotate(179deg) brightness(94%) contrast(88%) !important; } /* Strong overrides to guarantee header CTAs are visible and not clipped by parent height/visibility */ #newAnalysisBtnHeader, #newAnalysisBtnMobile { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 99999 !important; transform: none !important; margin: 0 !important; padding: 10px 14px !important; } /* More cyan accents for headings, links and report card metadata */ h2, h3 { color: var(--accent-cyan) !important; } /* Page title and subtitle enter together once. Other headings enter with their section (the old global h2/h3 fadeInUp replayed on every re-render, double-animated modal titles and ignored reduced motion). Headers already inside an animated section keep that single motion. */ @keyframes riPageHeaderIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .app-page-title, .app-page-subtitle { animation: riPageHeaderIn var(--ri-dur-enter, 420ms) var(--ri-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both; } .fade-in-up .app-page-title, .fade-in-up .app-page-subtitle, .dashboard-shell .app-page-title, .dashboard-shell .app-page-subtitle { animation: none; } @media (prefers-reduced-motion: reduce) { .app-page-title, .app-page-subtitle { animation: none; } } /* Section headers get a subtle glow */ section h2 { text-shadow: 0 0 30px rgba(46,209,244,0.15) !important; transition: text-shadow 0.3s ease !important; } section h2:hover { text-shadow: 0 0 40px rgba(46,209,244,0.3), 0 0 60px rgba(46,209,244,0.15) !important; } /* Don't force every anchor to cyan - scope cyan accents to navigation/header only */ .nav__menu a, header nav a, nav ul a { color: white!important; } .text-white\/60 { color: rgba(46,209,244,0.6) !important; } .report-meta, .report-sub { color: rgba(46,209,244,0.45) !important; } /* Keep dashboard footers as whitespace with only the divider visible. */ footer, .footer, footer.bg-dark, .report-footer { width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; background: transparent !important; background-color: transparent !important; background-image: none !important; } footer .inline-block { max-width: 100%; box-sizing: border-box; padding-left: clamp(1rem, 6vw, 2rem) !important; padding-right: clamp(1rem, 6vw, 2rem) !important; } footer .inline-block > div:first-child { width: min(200px, calc(100vw - 4rem)) !important; max-width: 100%; } @media (max-width: 639px) { footer, .footer, .report-footer { margin-top: clamp(3rem, 11vh, 5rem) !important; padding-bottom: clamp(2rem, 8vh, 3.5rem) !important; } } html[data-run-it-native-shell="1"] footer, html[data-run-it-native-shell="1"] .footer, html[data-run-it-native-shell="1"] .report-footer { padding-bottom: calc(var(--run-it-native-bottom-chrome-inset, 88px) + 1.5rem) !important; } /* Slightly increase cyan presence in badges */ .badge, .status-completed { box-shadow: 0 2px 8px rgba(46,209,244,0.04) !important; } /* Navigation layout fixes: ensure 4 tabs align consistently */ nav ul { flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; gap: 0.625rem !important; } .nav__menu a { display: inline-flex !important; align-items: center !important; height: auto !important; white-space: nowrap !important; } /* Make the right-side actions vertically centered with nav links */ .max-w\[\1170px\] > div, header .max-w\[\1170px\] > div, header .max-w\[1170px\] > div { align-items: center !important; } /* ========================================== REPORTS CARDS - Single unified card design ========================================== */ /* Grid: force proper layout with no overlaps */ #reports { display: grid !important; grid-template-columns: 1fr !important; gap: 28px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; align-items: start !important; } /* Loading spinner container - exclude from grid card styling */ #reports #reportsLoading { grid-column: 1 / -1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-height: 150px !important; gap: 1rem !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; animation: none !important; } @media (min-width: 768px) { #reports { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 1024px) { #reports { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* Card base: clean, spacious, no overlaps - EXCLUDE loading spinner */ #reports > div:not(#reportsLoading) { position: relative !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 28px !important; min-height: 240px !important; background: rgba(18, 18, 44, 0.6) !important; border: 0.5px solid rgba(46, 209, 244, 0.15) !important; border-radius: 16px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; overflow: hidden !important; backdrop-filter: blur(8px) !important; animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) backwards !important; box-sizing: border-box !important; width: 100% !important; margin: 0 !important; } /* Staggered entrance for cards - exclude loading spinner */ #reports > div:not(#reportsLoading):nth-child(1) { animation-delay: 0.1s !important; } #reports > div:not(#reportsLoading):nth-child(2) { animation-delay: 0.2s !important; } #reports > div:not(#reportsLoading):nth-child(3) { animation-delay: 0.3s !important; } #reports > div:not(#reportsLoading):nth-child(4) { animation-delay: 0.15s !important; } #reports > div:not(#reportsLoading):nth-child(5) { animation-delay: 0.25s !important; } #reports > div:not(#reportsLoading):nth-child(6) { animation-delay: 0.35s !important; } #reports > div:not(#reportsLoading):nth-child(n+7) { animation-delay: 0.4s !important; } /* Hover: lift and glow - exclude loading spinner */ #reports > div:not(#reportsLoading):hover { transform: translateY(-4px) scale(1.02) !important; border-color: rgba(46, 209, 244, 0.4) !important; box-shadow: 0 12px 40px rgba(46, 209, 244, 0.2), 0 0 80px rgba(46, 209, 244, 0.1) !important; background: rgba(18, 18, 44, 0.85) !important; } /* Metadata row at top - exclude loading spinner */ #reports > div:not(#reportsLoading) > .mb-4, #reports > div:not(#reportsLoading) > div:first-child:not(.spinner-loader) { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 16px !important; padding-bottom: 12px !important; border-bottom: 1px solid rgba(46, 209, 244, 0.08) !important; } /* Title - exclude loading spinner */ #reports > div:not(#reportsLoading) h3 { font-size: 1.25rem !important; font-weight: 600 !important; line-height: 1.4 !important; color: rgba(255, 255, 255, 0.95) !important; margin: 0 0 12px 0 !important; word-wrap: break-word !important; } /* Description - exclude loading spinner */ #reports > div:not(#reportsLoading) p { font-size: 0.925rem !important; line-height: 1.6 !important; color: rgba(255, 255, 255, 0.65) !important; margin: 0 0 20px 0 !important; flex-grow: 1 !important; } /* Action row at bottom - exclude loading spinner */ #reports > div:not(#reportsLoading) > .flex:last-child, #reports > div:not(#reportsLoading) > div:last-child { display: flex !important; gap: 12px !important; margin-top: auto !important; padding-top: 16px !important; border-top: 1px solid rgba(46, 209, 244, 0.06) !important; } /* View Details button - exclude loading spinner */ #reports > div:not(#reportsLoading) a.button-border-gradient { flex: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px 20px !important; background: linear-gradient(135deg, rgba(46, 209, 244, 0.12), rgba(46, 209, 244, 0.06)) !important; border: 0.5px solid rgba(46, 209, 244, 0.25) !important; border-radius: 10px !important; color: #ffffff !important; font-size: 0.9rem !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.25s ease !important; white-space: nowrap !important; } #reports > div:not(#reportsLoading) a.button-border-gradient:hover { background: linear-gradient(135deg, rgba(46, 209, 244, 0.25), rgba(46, 209, 244, 0.15)) !important; border-color: rgba(46, 209, 244, 0.5) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(46, 209, 244, 0.25) !important; } /* Delete button - exclude loading spinner */ #reports > div:not(#reportsLoading) button { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px !important; background: rgba(244, 67, 54, 0.1) !important; border: 1px solid rgba(244, 67, 54, 0.3) !important; border-radius: 10px !important; color: rgba(244, 67, 54, 0.9) !important; transition: all 0.25s ease !important; cursor: pointer !important; } #reports > div:not(#reportsLoading) button:hover { background: rgba(244, 67, 54, 0.2) !important; border-color: rgba(244, 67, 54, 0.5) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3) !important; } /* SVG icons: keep clean and scaled */ #reports svg { flex-shrink: 0 !important; width: auto !important; height: auto !important; max-width: 100% !important; } /* Timestamp styling */ #reports .text-xs { font-size: 0.8rem !important; color: rgba(255, 255, 255, 0.5) !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } /* Delete X button in top right of cards */ .delete-x-btn { width: 28px !important; height: 28px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(244, 67, 54, 0.1) !important; border: 1px solid rgba(244, 67, 54, 0.3) !important; border-radius: 50% !important; color: rgba(244, 67, 54, 0.9) !important; font-size: 1.5rem !important; line-height: 1 !important; cursor: pointer !important; transition: all 0.25s ease !important; padding: 0 !important; font-weight: 300 !important; } .delete-x-btn:hover { background: rgba(244, 67, 54, 0.25) !important; border-color: rgba(244, 67, 54, 0.6) !important; transform: rotate(90deg) scale(1.1) !important; box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4) !important; } /* Delete Report button (styled version in page header) */ .delete-report-btn { padding: 14px 28px; font-size: 13px; border-radius: 10px; background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1)); border: 1px solid rgba(239, 68, 68, 0.3); color: rgba(239, 68, 68, 1); font-weight: 600; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s ease; cursor: pointer; flex-shrink: 0; } #deleteReportBtn:hover, .delete-report-btn:hover { background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(220, 38, 38, 0.2)) !important; border-color: rgba(239, 68, 68, 0.5) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3) !important; } /* Empty state */ #reports .col-span-full { grid-column: 1 / -1 !important; padding: 60px 40px !important; text-align: center !important; background: rgba(18, 18, 44, 0.4) !important; border: 1px dashed rgba(46, 209, 244, 0.2) !important; border-radius: 16px !important; } #reports .col-span-full svg { opacity: 0.3 !important; margin: 0 auto 20px !important; } #reports .col-span-full p { color: rgba(255, 255, 255, 0.5) !important; font-size: 1rem !important; } /* Small responsive tweak: slightly reduce min-height on small screens - exclude loading spinner */ @media (max-width: 640px) { #reports > div:not(#reportsLoading) { min-height: 140px !important; padding: 18px !important; } } /* ============================ SHOE RECOMMENDATIONS ============================ */ /* Shoe recommendations - use same cards as index.html with premium animations */ /* Shoe image white background removal fallback */ .shoe-image-wrapper { isolation: isolate; } .shoe-image-fallback { mix-blend-mode: multiply; filter: contrast(1.1) brightness(1.05); } /* Dark mode: invert the blend mode for better contrast */ @media (prefers-color-scheme: dark) { .shoe-image-fallback { mix-blend-mode: screen; filter: contrast(1.1) brightness(0.95); } } /* Premium shoe card animations - targeting actual classes used */ #shoeList .metric-card.shoe-card-animate.animate-in { animation: fadeInUp 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important; animation-duration: 1.2s !important; } #shoeList .hero-shoe-animate.animate-in { animation: fadeInUp 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important; animation-duration: 1.4s !important; } /* Legacy: Keep .wow.fadeInUp for backwards compatibility */ #shoeList .wow.fadeInUp { animation: fadeInUp 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) backwards !important; animation-duration: 1.2s !important; } /* Show a visible purple border for Great tier by default (overrides earlier generic border) */ #shoeList .wow.fadeInUp[data-tier="great"], .metric-card[data-tier="great"] { border: 0.5px solid rgba(167, 139, 250, 0.45) !important; } /* Show a visible green border for Good tier by default (overrides earlier generic border) */ #shoeList .wow.fadeInUp[data-tier="good"], .metric-card[data-tier="good"] { border: 0.5px solid rgba(1, 195, 168, 0.45) !important; } /* Show a visible orange border for Not Ideal and Alt tiers by default (overrides earlier generic border) */ #shoeList .wow.fadeInUp[data-tier="not-ideal"], #shoeList .wow.fadeInUp[data-tier="alt"], .metric-card[data-tier="not-ideal"], .metric-card[data-tier="alt"] { border: 0.5px solid rgba(255, 183, 65, 0.45) !important; } /* Purchased shoe indicator */ .shoe-purchased-badge { display: inline-block; position: relative; background: linear-gradient(135deg, #01c3a8, #00a890); color: white; padding: 6px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 4px 12px rgba(1, 195, 168, 0.4); z-index: 10; margin-bottom: 4px; } /* Purchase toggle section */ .shoe-purchase-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(46, 209, 244, 0.1); } .shoe-purchase-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 14px; border-radius: 8px; transition: background 0.2s ease; background: rgba(46, 209, 244, 0.03); border: 1px solid rgba(46, 209, 244, 0.15); } .shoe-purchase-toggle:hover { background: rgba(46, 209, 244, 0.08); border-color: rgba(46, 209, 244, 0.25); } .shoe-purchase-toggle input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: #01c3a8; margin: 0; flex-shrink: 0; } .shoe-purchase-toggle .toggle-label { color: rgba(255, 255, 255, 0.8); font-size: 14px; font-weight: 500; cursor: pointer; user-select: none; } .shoe-purchase-details { margin-top: 0; padding: 0; background: rgba(46, 209, 244, 0.03); border: 1px solid rgba(46, 209, 244, 0.1); border-radius: 8px; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-8px); transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin-top 0.4s ease, padding 0.4s ease; } .shoe-purchase-details.active { max-height: 500px; opacity: 1; transform: translateY(0); margin-top: 12px; padding: 16px; } .shoe-purchase-details label { display: block; color: rgba(255, 255, 255, 0.8); font-size: 13px; font-weight: 500; margin-bottom: 6px; } .shoe-purchase-details input, .shoe-purchase-details select { width: 100%; padding: 10px 12px; background: rgba(18, 18, 44, 0.8); border: 1px solid rgba(46, 209, 244, 0.2); border-radius: 6px; color: white; font-size: 14px; margin-bottom: 12px; transition: border-color 0.2s ease; } .shoe-purchase-details input:focus, .shoe-purchase-details select:focus { outline: none; border-color: rgba(46, 209, 244, 0.5); box-shadow: 0 0 0 3px rgba(46, 209, 244, 0.1); } .shoe-purchase-details input::placeholder { color: rgba(255, 255, 255, 0.4); } /* Fade animation for conditional reason field */ [id^="reason-wrap-"] { max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-8px); transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin-bottom 0.4s ease; margin-bottom: 0; } [id^="reason-wrap-"].show { max-height: 200px; opacity: 1; transform: translateY(0); margin-bottom: 6px; } .shoe-update-btn { width: 100%; padding: 10px 16px; background: linear-gradient(135deg, rgba(46, 209, 244, 0.15), rgba(46, 209, 244, 0.08)); border: 1px solid rgba(46, 209, 244, 0.3); border-radius: 8px; color: rgba(46, 209, 244, 1); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 4px; } .shoe-update-btn:hover { background: linear-gradient(135deg, rgba(46, 209, 244, 0.25), rgba(46, 209, 244, 0.15)); border-color: rgba(46, 209, 244, 0.5); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(46, 209, 244, 0.2); } /* Key Metrics with category-based hover colors */ .metric-card { position: relative; transition: transform 0.12s ease-in-out, box-shadow 0.12s ease-in-out, border-color 0.12s ease-in-out !important; } /* Key metric cards fade-in animation - opacity only, keeps hover transitions */ .metric-card.scale-in-hidden { opacity: 0 !important; } /* Key metrics cards - fade-in animation with !important, dimming handled via inline styles */ .key-metrics-grid .metric-card.scale-in-visible { opacity: 1 !important; transition: opacity 1.2s ease, filter 0.2s ease, transform 0.12s ease-in-out, box-shadow 0.12s ease-in-out, border-color 0.12s ease-in-out !important; } /* Shoe cards fade-in */ #shoeList .metric-card.scale-in-visible { opacity: 1 !important; transition: opacity 1.2s ease !important; } /* Shoe cards - hover transitions handled in report.html for unified animation */ /* No conflicting transitions here */ /* Shoe section wrappers - slow fade animation (NOT fast hover transitions) */ #shoeList > div.mb-12, #shoeList > .mb-12 { transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) !important; } /* Ensure the blur stays inside the card and sits behind content */ .metric-card { overflow: hidden !important; position: relative !important; } /* Shoe cards need visible overflow for absolute badges on the border */ #shoeList .metric-card { overflow: visible !important; } #shoeList .metric-card .metric-card-blur { overflow: hidden !important; border-radius: inherit !important; } /* Nudge unlock/mystery cards up to align with LPI badge height */ .metric-card .metric-card-blur { position: absolute !important; inset: 0 !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; pointer-events: none !important; z-index: 0 !important; overflow: hidden !important; border-radius: inherit !important; } .metric-card .metric-card-blur img { /* wider glow to match card width */ width: 100% !important; /* full width of card */ max-width: none !important; /* reduced height so the glow is focused toward the bottom-center */ height: 180% !important; /* reduced default opacity - increases on hover */ opacity: 0.55 !important; object-fit: cover !important; object-position: center bottom !important; pointer-events: none !important; display: block !important; /* concentrated blur radius for a dense glow */ filter: blur(32px) saturate(1.45) brightness(1.07) !important; /* smaller translate & scale to keep glow concentrated at bottom center */ transform: translateY(22%) scale(1.22) !important; mix-blend-mode: screen !important; } /* Ensure card content paints above the decorative blur */ .metric-card > .flex, .metric-card > div:not(.metric-card-blur) { position: relative !important; z-index: 10 !important; } /* Keep LPI badge absolute so it doesn't push card content */ #shoeList .metric-card > .lpi-fit-badge { position: absolute !important; top: -1px !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 50 !important; pointer-events: none !important; } /* Center text vertically within metric cards */ .metric-card > .flex.items-center { display: flex !important; align-items: center !important; min-height: 100px !important; } .metric-card .flex-1 { display: flex !important; flex-direction: column !important; justify-content: center !important; } /* Ensure metric cards show a visible border by default and respect categories (use !important to override generic card rules) */ .metric-card[data-category="excellent"] { border: 2px solid rgba(139, 92, 246, 0.4) !important; } .metric-card[data-category="good"] { border: 2px solid rgba(1, 195, 168, 0.4) !important; } .metric-card[data-category="warning"] { border: 2px solid rgba(255, 183, 65, 0.4) !important; } .metric-card[data-category="bad"] { border: 2px solid rgba(239, 68, 68, 0.4) !important; } .metric-card[data-category="neutral"], .metric-card:not([data-category]):not([data-tier]) { border: 2px solid rgba(230, 200, 85, 0.3) !important; } .metric-card:hover { transform: translateY(-2px) scale(1.01) !important; } /* Purple for excellent metrics */ .metric-card[data-category="excellent"]:hover { border-color: rgba(139, 92, 246, 0.45) !important; box-shadow: 0 4px 16px rgba(139, 92, 246, 0.12), 0 0 20px rgba(139, 92, 246, 0.06) !important; } .metric-card[data-category="excellent"]:hover .metric-icon-bg { background: rgba(139, 92, 246, 0.15) !important; } /* Green for good metrics (cadence ~170-180) */ .metric-card[data-category="good"]:hover { border-color: rgba(1, 195, 168, 0.45) !important; box-shadow: 0 4px 16px rgba(1, 195, 168, 0.12), 0 0 20px rgba(1, 195, 168, 0.06) !important; } .metric-card[data-category="good"]:hover .metric-icon-bg { background: rgba(1, 195, 168, 0.15) !important; } /* Yellow for warning metrics */ .metric-card[data-category="warning"]:hover { border-color: rgba(255, 183, 65, 0.45) !important; box-shadow: 0 4px 16px rgba(255, 183, 65, 0.12), 0 0 20px rgba(255, 183, 65, 0.06) !important; } .metric-card[data-category="warning"]:hover .metric-icon-bg { background: rgba(255, 183, 65, 0.15) !important; } /* Red for bad metrics */ .metric-card[data-category="bad"]:hover { border-color: rgba(239, 68, 68, 0.45) !important; box-shadow: 0 4px 16px rgba(239, 68, 68, 0.12), 0 0 20px rgba(239, 68, 68, 0.06) !important; } .metric-card[data-category="bad"]:hover .metric-icon-bg { background: rgba(239, 68, 68, 0.15) !important; } /* Yellow for neutral/default metrics (excluding shoe cards with data-tier) */ .metric-card[data-category="neutral"]:hover, .metric-card:not([data-category]):not([data-tier]):hover { border-color: rgba(230, 200, 85, 0.45) !important; box-shadow: 0 4px 16px rgba(230, 200, 85, 0.12), 0 0 20px rgba(230, 200, 85, 0.06) !important; } .metric-card[data-category="neutral"]:hover .metric-icon-bg, .metric-card:not([data-category]):not([data-tier]):hover .metric-icon-bg { background: rgba(230, 200, 85, 0.15) !important; } .metric-icon-bg { transition: background 0.12s ease-in-out; } /* ============================ SHOE CARD VISUALS (decorative blur + tier tint) ============================ */ @keyframes fadeInFromBottom { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* Ensure card content is above the decorative blur */ .shoe-card > * { position: relative !important; z-index: 2 !important; } /* Tier tints: apply hue rotation and subtle saturation/brightness tweaks */ .shoe-card[data-tier="good"]::before { filter: hue-rotate(95deg) saturate(1.35) brightness(1.02) !important; } .shoe-card[data-tier="warning"]::before { filter: hue-rotate(25deg) saturate(1.25) brightness(1.02) !important; } .shoe-card[data-tier="great"]::before { filter: hue-rotate(265deg) saturate(1.2) brightness(1.02) !important; } /* ============================ SHOE CARDS ON REPORT.HTML (matching dashboard card style with tier-colored blur) ============================ */ /* ========================================== HARD OVERRIDE: DISABLE ALL TRANSFORMS FOR SHOE CARDS ONLY (NO METRIC CARDS) ========================================== */ /* Explicitly neutralize hover transforms */ #shoeList .shoe-card:hover, #shoeList .shoe-card-link:hover, #shoeList .wow.fadeInUp[data-tier]:hover, .metric-card[data-tier]:hover, .metric-card[data-shoe-id]:hover { transform: none !important; } /* ========================================== SHOE CARD HOVER ANIMATIONS (blur + opacity + glow) NO TRANSFORMS - ONLY VISUAL EFFECTS ========================================== */ /* Base transition for shoe card blur images and box-shadow */ .shoe-card-link, .metric-card[data-tier], .metric-card[data-shoe-id] { transition: box-shadow 1s cubic-bezier(0.4, 0, 0.2, 1), border-color 1s cubic-bezier(0.4, 0, 0.2, 1) !important; } .shoe-card-link .metric-card-blur img, .metric-card[data-tier] .metric-card-blur img, .metric-card[data-shoe-id] .metric-card-blur img { transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Hover: increase opacity for blur glow effect */ .shoe-card-link:hover .metric-card-blur img, .metric-card[data-tier]:hover .metric-card-blur img, .metric-card[data-shoe-id]:hover .metric-card-blur img { opacity: 0.95 !important; } /* Great tier (Purple) - glow on hover */ .shoe-card-link[data-tier="great"]:hover, .metric-card[data-tier="great"]:hover { box-shadow: 0 0 35px rgba(167, 139, 250, 0.35), 0 0 60px rgba(167, 139, 250, 0.15) !important; border-color: rgba(167, 139, 250, 0.6) !important; } /* Good tier (Green/Teal) - glow on hover */ .shoe-card-link[data-tier="good"]:hover, .metric-card[data-tier="good"]:hover { box-shadow: 0 0 35px rgba(1, 195, 168, 0.35), 0 0 60px rgba(1, 195, 168, 0.15) !important; border-color: rgba(1, 195, 168, 0.6) !important; } /* Not-ideal tier (Orange) - glow on hover */ .shoe-card-link[data-tier="not-ideal"]:hover, .metric-card[data-tier="not-ideal"]:hover, .shoe-card-link[data-tier="alt"]:hover, .metric-card[data-tier="alt"]:hover { box-shadow: 0 0 35px rgba(255, 183, 65, 0.35), 0 0 60px rgba(255, 183, 65, 0.15) !important; border-color: rgba(255, 183, 65, 0.6) !important; } /* Tags shine harder on hover - Great tier (Purple) - keep text white */ .shoe-card-link[data-tier="great"]:hover .shoe-tag-item, .metric-card[data-tier="great"]:hover .shoe-tag-item { background: rgba(167, 139, 250, 0.2) !important; border-color: rgba(167, 139, 250, 0.5) !important; } /* Tags shine harder on hover - Good tier (Teal) - keep text white */ .shoe-card-link[data-tier="good"]:hover .shoe-tag-item, .metric-card[data-tier="good"]:hover .shoe-tag-item { background: rgba(1, 195, 168, 0.2) !important; border-color: rgba(1, 195, 168, 0.5) !important; } /* Tags shine harder on hover - Not-ideal tier (Orange) - keep text white */ .shoe-card-link[data-tier="not-ideal"]:hover .shoe-tag-item, .metric-card[data-tier="not-ideal"]:hover .shoe-tag-item, .shoe-card-link[data-tier="alt"]:hover .shoe-tag-item, .metric-card[data-tier="alt"]:hover .shoe-tag-item { background: rgba(255, 183, 65, 0.2) !important; border-color: rgba(255, 183, 65, 0.5) !important; } /* Tag transition for smooth effect */ .shoe-tag-item { transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Divider shines on hover too */ .shoe-card-link[data-tier="great"]:hover .shoe-card-divider, .metric-card[data-tier="great"]:hover .shoe-card-divider { background: rgba(167, 139, 250, 0.4) !important; } .shoe-card-link[data-tier="good"]:hover .shoe-card-divider, .metric-card[data-tier="good"]:hover .shoe-card-divider { background: rgba(1, 195, 168, 0.4) !important; } .shoe-card-link[data-tier="not-ideal"]:hover .shoe-card-divider, .metric-card[data-tier="not-ideal"]:hover .shoe-card-divider, .shoe-card-link[data-tier="alt"]:hover .shoe-card-divider, .metric-card[data-tier="alt"]:hover .shoe-card-divider { background: rgba(255, 183, 65, 0.4) !important; } .shoe-card-divider { transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Mystery/unlock cards: NO hover effects at all */ .unlock-card:hover, .metric-card[data-locked="true"]:hover { transform: none !important; box-shadow: none !important; } .unlock-card .metric-card-blur img, .metric-card[data-locked="true"] .metric-card-blur img { transition: none !important; } .unlock-card:hover .metric-card-blur img, .metric-card[data-locked="true"]:hover .metric-card-blur img { opacity: 0.78 !important; } /* ========================================== REUSABLE: Premium Toggle Switch (.rii-toggle) ========================================== */ .rii-toggle { display: none; } .rii-toggle-label { display: flex; align-items: center; justify-content: center; position: relative; width: 52px; height: 26px; background-color: rgba(255,255,255,0.15); border-radius: 13px; cursor: pointer; transition: background-color 0.3s ease; } .rii-toggle-label::after { content: ""; position: absolute; height: 26px; width: 26px; left: 0; background: conic-gradient(rgb(160,160,160), white, rgb(160,160,160), white, rgb(160,160,160)); border-radius: 50%; transition: transform 0.3s ease; box-shadow: 3px 1px 5px rgba(0,0,0,0.3); } .rii-toggle:checked + .rii-toggle-label::after { transform: translateX(100%); } .rii-toggle:checked + .rii-toggle-label { background-color: rgba(46, 209, 244, 0.45); } .rii-toggle:disabled + .rii-toggle-label { opacity: 0.4; cursor: not-allowed; } .rii-toggle:disabled:checked + .rii-toggle-label { background-color: rgba(46, 209, 244, 0.25); } .rii-toggle:focus-visible + .rii-toggle-label { outline: 2px solid rgba(46, 209, 244, 0.6); outline-offset: 2px; } /* Small variant - for table rows / inline contexts */ .rii-toggle-label--sm { width: 34px; height: 18px; border-radius: 9px; } .rii-toggle-label--sm::after { height: 18px; width: 18px; } .rii-toggle:checked + .rii-toggle-label--sm::after { transform: translateX(calc(34px - 18px)); } /* ========================================== REUSABLE: Premium Compare Button (.rii-compare-btn) ========================================== */ .rii-compare-btn { width: auto; min-width: 100px; height: 38px; border-radius: 12px; cursor: pointer; transition: 0.3s ease; background: linear-gradient(to bottom right, rgba(46,209,244,1) 0%, rgba(46,209,244,0) 30%); background-color: rgba(46,209,244,0.15); display: inline-flex; align-items: center; justify-content: center; border: none; padding: 0; } .rii-compare-btn:hover, .rii-compare-btn:focus { background-color: rgba(46, 209, 244, 0.5); box-shadow: 0 0 10px rgba(46, 209, 244, 0.4); outline: none; } .rii-compare-btn-inner { width: calc(100% - 4px); height: 34px; border-radius: 10px; background-color: rgba(10, 12, 28, 0.92); display: flex; align-items: center; justify-content: center; gap: 6px; color: rgba(255,255,255,0.85); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0 14px; white-space: nowrap; } .rii-compare-btn.rii-compare-active { background: linear-gradient(to bottom right, rgba(46,209,244,1) 0%, rgba(46,209,244,0) 40%); background-color: rgba(46,209,244,0.35); box-shadow: 0 0 14px rgba(46, 209, 244, 0.35); } .rii-compare-btn.rii-compare-active .rii-compare-btn-inner { color: #2ed1f4; } .rii-compare-btn.rii-compare-active .rii-compare-dot { background: #2ed1f4; box-shadow: 0 0 6px rgba(46, 209, 244, 0.8); } .rii-compare-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(46, 209, 244, 0.45); flex-shrink: 0; transition: background 0.2s ease, box-shadow 0.2s ease; } /* ========================================== REUSABLE: Data Source Dropdown Toggle (.rii-data-toggle) ========================================== */ .rii-data-toggle { position: relative; display: inline-block; width: min(100%, 176px); z-index: 1; isolation: isolate; --rii-toggle-accent-rgb: 46, 209, 244; --rii-toggle-accent: #2ed1f4; } .rii-data-toggle[data-source="strava"] { --rii-toggle-accent-rgb: 252, 76, 2; --rii-toggle-accent: #fc4c02; } .rii-data-toggle[data-source="stryd"] { --rii-toggle-accent-rgb: 254, 202, 47; --rii-toggle-accent: #feca2f; } .rii-data-toggle[data-source="apple"] { --rii-toggle-accent-rgb: 32, 199, 122; --rii-toggle-accent: #20c77a; } .rii-data-toggle[data-source="apple"] .rii-data-toggle-logo-wrap, .rii-data-toggle-item:has(img[src*="apple-wordmark-white.svg"]) { display: flex; align-items: center; justify-content: center; gap: 6px; } .rii-data-toggle-btn { position: relative; width: 100%; min-height: 38px; border-radius: 11px; border: none; background: linear-gradient(135deg, rgba(var(--rii-toggle-accent-rgb),0.92) 0%, rgba(var(--rii-toggle-accent-rgb),0.18) 34%, rgba(var(--rii-toggle-accent-rgb),0) 66%); background-color: rgba(var(--rii-toggle-accent-rgb),0.12); color: rgba(255,255,255,0.92); display: inline-grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 2px 10px 2px 12px; cursor: pointer; box-shadow: 0 0 0 1px rgba(var(--rii-toggle-accent-rgb),0.18); transition: background-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; } .rii-data-toggle-btn::before { content: ""; position: absolute; inset: 2px; border-radius: 9px; background: linear-gradient(180deg, rgba(6,10,14,0.98), rgba(0,0,0,0.98)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } .rii-data-toggle-btn > * { position: relative; z-index: 1; } .rii-data-toggle-btn:hover { background-color: rgba(var(--rii-toggle-accent-rgb),0.18); box-shadow: 0 0 0 1px rgba(var(--rii-toggle-accent-rgb),0.22), 0 0 12px rgba(var(--rii-toggle-accent-rgb),0.18); } .rii-data-toggle-btn:focus-visible { outline: 2px solid rgba(var(--rii-toggle-accent-rgb),0.58); outline-offset: 2px; } .rii-data-toggle-logo-wrap { display: inline-flex; align-items: center; justify-content: flex-start; min-width: 0; } .rii-data-toggle-logo { display: inline-block; box-sizing: border-box; width: 94px; height: 22px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.22); background: rgba(0,0,0,0.54); padding: 2px 8px; object-fit: contain; } .rii-data-toggle-logo[src*="stryd-logo"], .rii-data-toggle-logo[src*="strava-logo"], .rii-data-toggle-logo[src*="apple-wordmark-white.svg"] { width: 94px; height: 22px; padding: 2px 8px; } .rii-data-toggle-chevron { width: 14px; height: 14px; color: rgba(255,255,255,0.62); flex-shrink: 0; transition: transform 0.2s ease, color 0.2s ease; } .rii-data-toggle-menu { position: absolute; top: calc(100% + 8px); left: 0; width: 100%; border-radius: 11px; border: 1px solid rgba(var(--rii-toggle-accent-rgb),0.28); background: linear-gradient(180deg, rgba(8,12,18,0.98), rgba(0,0,0,0.98)); box-shadow: 0 18px 42px rgba(0,0,0,0.42), 0 0 0 1px rgba(var(--rii-toggle-accent-rgb),0.06); padding: 7px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(0.98); transform-origin: top center; will-change: opacity, transform; transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.24s; z-index: 2401; } .rii-data-toggle-item { width: 100%; min-height: 38px; border: 1px solid transparent; background: rgba(0,0,0,0.58); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; cursor: pointer; transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .rii-data-toggle-item:hover { border-color: rgba(var(--rii-toggle-accent-rgb),0.3); background: rgba(6,10,16,0.96); box-shadow: 0 0 0 1px rgba(var(--rii-toggle-accent-rgb),0.08); } .rii-data-toggle-item.is-active { border-color: rgba(var(--rii-toggle-accent-rgb),0.46); background: rgba(0,0,0,0.92); box-shadow: 0 0 0 1px rgba(var(--rii-toggle-accent-rgb),0.12), 0 0 12px rgba(var(--rii-toggle-accent-rgb),0.14); } .rii-data-toggle-item .rii-data-toggle-logo { width: 90px; height: 21px; padding: 2px 8px; } .rii-data-toggle-item .rii-data-toggle-logo[src*="stryd-logo"], .rii-data-toggle-item .rii-data-toggle-logo[src*="strava-logo"], .rii-data-toggle-item .rii-data-toggle-logo[src*="apple-wordmark-white.svg"] { width: 90px; height: 21px; padding: 2px 8px; } .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-btn { background: linear-gradient(135deg, rgba(var(--rii-toggle-accent-rgb),0.98) 0%, rgba(var(--rii-toggle-accent-rgb),0.22) 36%, rgba(var(--rii-toggle-accent-rgb),0) 68%); background-color: rgba(var(--rii-toggle-accent-rgb),0.18); box-shadow: 0 0 0 1px rgba(var(--rii-toggle-accent-rgb),0.24), 0 0 16px rgba(var(--rii-toggle-accent-rgb),0.24); } .rii-data-toggle.rii-data-toggle-open { z-index: 2400; } .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-chevron { color: var(--rii-toggle-accent); transform: rotate(180deg); } .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s, 0s, 0s; } /* Keep the profile/upload/shoes data-source toggle identical across pages. Several pages ship inline overrides with slightly different widths/heights, so pin the shared component dimensions here with higher specificity. */ :root { --rii-profile-toggle-width: 116px; --rii-profile-toggle-height: 34px; --rii-profile-toggle-radius: 9px; --rii-profile-toggle-logo-height: 26px; --rii-profile-toggle-garmin-logo-width: 84px; --rii-profile-toggle-stryd-logo-width: 84px; --rii-profile-toggle-item-height: 38px; --rii-profile-toggle-chevron-icon: 12px; --rii-profile-toggle-chevron-padding: 2px; } body .profile-toggle-wrap { width: var(--rii-profile-toggle-width) !important; min-width: var(--rii-profile-toggle-width) !important; max-width: var(--rii-profile-toggle-width) !important; flex: 0 0 auto !important; } body .profile-toggle-wrap .rii-data-toggle { width: 100% !important; } body .profile-toggle-wrap .rii-data-toggle-btn { display: inline-grid !important; width: 100% !important; min-height: var(--rii-profile-toggle-height) !important; height: var(--rii-profile-toggle-height) !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 6px !important; padding: 4px 8px 4px 6px !important; border-radius: var(--rii-profile-toggle-radius) !important; } body .profile-toggle-wrap .rii-data-toggle-btn::before { border-radius: calc(var(--rii-profile-toggle-radius) - 2px) !important; background: #000 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important; } body .profile-toggle-wrap .rii-data-toggle-btn .rii-data-toggle-logo-wrap { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: var(--rii-profile-toggle-garmin-logo-width) !important; height: var(--rii-profile-toggle-logo-height) !important; flex: 0 0 var(--rii-profile-toggle-garmin-logo-width) !important; min-width: 0 !important; position: relative !important; } body .profile-toggle-wrap .rii-data-toggle[data-source="stryd"] .rii-data-toggle-btn .rii-data-toggle-logo-wrap, body .profile-toggle-wrap .rii-data-toggle[data-source="strava"] .rii-data-toggle-btn .rii-data-toggle-logo-wrap, body .profile-toggle-wrap .rii-data-toggle[data-source="apple"] .rii-data-toggle-btn .rii-data-toggle-logo-wrap { width: var(--rii-profile-toggle-stryd-logo-width) !important; flex-basis: var(--rii-profile-toggle-stryd-logo-width) !important; } body .profile-toggle-wrap .rii-data-toggle-btn .rii-data-toggle-logo { width: var(--rii-profile-toggle-garmin-logo-width) !important; max-width: var(--rii-profile-toggle-garmin-logo-width) !important; height: var(--rii-profile-toggle-logo-height) !important; padding: 3px 8px !important; border: none !important; border-radius: 6px !important; background: #000 !important; box-shadow: 0 0 8px rgba(0,0,0,0.6) !important; object-fit: contain !important; display: block !important; box-sizing: border-box !important; transition: opacity 0.18s ease !important; } body .profile-toggle-wrap .rii-data-toggle-btn .rii-data-toggle-logo[src*="stryd-logo"], body .profile-toggle-wrap .rii-data-toggle-btn .rii-data-toggle-logo[src*="strava-logo"], body .profile-toggle-wrap .rii-data-toggle-btn .rii-data-toggle-logo[src*="apple-wordmark-white.svg"] { width: var(--rii-profile-toggle-stryd-logo-width) !important; max-width: var(--rii-profile-toggle-stryd-logo-width) !important; height: var(--rii-profile-toggle-logo-height) !important; padding: 7px 12px !important; border-radius: 6px !important; background: #000 !important; box-shadow: 0 0 8px rgba(0,0,0,0.6) !important; box-sizing: border-box !important; } body .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo { width: var(--rii-profile-toggle-garmin-logo-width) !important; max-width: var(--rii-profile-toggle-garmin-logo-width) !important; height: var(--rii-profile-toggle-logo-height) !important; padding: 3px 8px !important; border: none !important; border-radius: 6px !important; background: #000 !important; box-shadow: 0 0 8px rgba(0,0,0,0.6) !important; object-fit: contain !important; display: block !important; box-sizing: border-box !important; } body .profile-toggle-wrap .rii-data-toggle-item:has(.rii-data-toggle-logo[src*="stryd-logo"]), body .profile-toggle-wrap .rii-data-toggle-item:has(.rii-data-toggle-logo[src*="strava-logo"]), body .profile-toggle-wrap .rii-data-toggle-item:has(.rii-data-toggle-logo[src*="apple-wordmark-white.svg"]) { --rii-toggle-option-logo-width: var(--rii-profile-toggle-stryd-logo-width); } body .profile-toggle-wrap .rii-data-toggle-item:has(.rii-data-toggle-logo[src*="Garmin"]) { --rii-toggle-option-logo-width: var(--rii-profile-toggle-garmin-logo-width); } body .profile-toggle-wrap .rii-data-toggle-item:has(.rii-data-toggle-logo)::after { content: ""; position: absolute; top: 50%; left: calc((100% - var(--rii-toggle-option-logo-width, var(--rii-profile-toggle-garmin-logo-width))) / 2); right: 5px; height: var(--rii-profile-toggle-logo-height); transform: translateY(-50%); border-radius: 6px; background: #000; box-shadow: 0 0 8px rgba(0,0,0,0.6); pointer-events: none; z-index: 0; } body .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo { position: relative !important; z-index: 1 !important; } body .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="stryd-logo"], body .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="strava-logo"], body .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="apple-wordmark-white.svg"] { width: var(--rii-profile-toggle-stryd-logo-width) !important; max-width: var(--rii-profile-toggle-stryd-logo-width) !important; height: var(--rii-profile-toggle-logo-height) !important; padding: 7px 12px !important; } body .profile-toggle-wrap .rii-data-toggle-menu { top: calc(100% + 6px) !important; margin-top: 0 !important; padding: 4px !important; border-radius: 10px !important; border-color: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.2) !important; background: linear-gradient(180deg, rgba(3,7,14,0.99), rgba(0,0,0,0.99)) !important; box-shadow: 0 14px 30px rgba(0,0,0,0.48), 0 0 0 1px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.06), inset 0 1px 0 rgba(255,255,255,0.035) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } body .profile-toggle-wrap .rii-data-toggle-item { min-height: var(--rii-profile-toggle-item-height) !important; padding: 3px 5px !important; position: relative !important; justify-content: center !important; border: 1px solid transparent !important; border-radius: 7px !important; background: transparent !important; box-shadow: none !important; } body .profile-toggle-wrap .rii-data-toggle-item + .rii-data-toggle-item { margin-top: 2px !important; } body .profile-toggle-wrap .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-menu { border-color: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.22) !important; background: linear-gradient(180deg, rgba(3,7,14,0.99), rgba(0,0,0,0.99)) !important; box-shadow: 0 14px 30px rgba(0,0,0,0.52), 0 0 0 1px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.07), inset 0 1px 0 rgba(255,255,255,0.035) !important; } body .profile-toggle-wrap .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-item { border-color: transparent !important; background: transparent !important; box-shadow: none !important; } body .profile-toggle-wrap .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-item:hover { border-color: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.18) !important; background: rgba(255,255,255,0.045) !important; box-shadow: inset 0 0 0 1px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.04) !important; } body .profile-toggle-wrap .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-item.is-active { border-color: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.28) !important; background: linear-gradient(90deg, rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.13), rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.035)) !important; box-shadow: inset 0 0 0 1px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.08) !important; } body .profile-toggle-wrap .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-item.is-active::before { content: ""; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 2px; border-radius: 999px; background: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.78); pointer-events: none; } body .profile-toggle-wrap .rii-data-toggle-chevron { width: var(--rii-profile-toggle-chevron-icon) !important; height: var(--rii-profile-toggle-chevron-icon) !important; padding: var(--rii-profile-toggle-chevron-padding) !important; box-sizing: content-box !important; border-radius: 999px !important; color: rgba(255,255,255,0.88) !important; background: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.14) !important; box-shadow: inset 0 0 0 1px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.18), 0 0 14px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.16) !important; animation: none !important; transition: transform 0.24s ease, color 0.24s ease, background-color 0.24s ease, box-shadow 0.24s ease !important; } body .profile-toggle-wrap .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-chevron { transform: rotate(180deg) scale(1.06) !important; color: rgba(255,255,255,0.98) !important; background: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.2) !important; box-shadow: inset 0 0 0 1px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.28), 0 0 16px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.2) !important; } @media (min-width: 641px) { :root { --rii-profile-toggle-width: 176px; --rii-profile-toggle-height: 38px; --rii-profile-toggle-logo-height: 30px; --rii-profile-toggle-garmin-logo-width: 122px; --rii-profile-toggle-stryd-logo-width: 122px; --rii-profile-toggle-chevron-icon: 14px; } body .profile-toggle-wrap .rii-data-toggle-btn .rii-data-toggle-logo[src*="stryd-logo"], body .profile-toggle-wrap .rii-data-toggle-btn .rii-data-toggle-logo[src*="strava-logo"], body .profile-toggle-wrap .rii-data-toggle-btn .rii-data-toggle-logo[src*="apple-wordmark-white.svg"] { padding: 8px 14px !important; } body .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="stryd-logo"], body .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="strava-logo"], body .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="apple-wordmark-white.svg"] { padding: 8px 14px !important; } body .analysis-header-row:has(#sourceSwitcher), body .analysis-header-row:has(#profileViewToggle) { display: block !important; position: relative !important; overflow: visible !important; } body .analysis-header-row:has(#sourceSwitcher) .analysis-header-copy, body .analysis-header-row:has(#profileViewToggle) .analysis-header-copy { max-width: calc(100% - var(--rii-profile-toggle-width) - 32px) !important; } body .analysis-header-row:has(#profileViewToggle):has(.analysis-upload-switcher) .analysis-header-copy { max-width: calc(100% - 430px) !important; } body .analysis-header-row:has(#sourceSwitcher) .app-page-title, body .analysis-header-row:has(#profileViewToggle) .app-page-title { display: inline-block !important; margin: 0 0 12px 0 !important; padding-bottom: 12px !important; font-size: 36px !important; line-height: 1.15 !important; } body .analysis-header-row:has(#sourceSwitcher) .analysis-header-meta, body .analysis-header-row:has(#profileViewToggle) .analysis-header-meta { margin-top: 0 !important; } body .analysis-header-row:has(#sourceSwitcher) .app-page-subtitle, body .analysis-header-row:has(#profileViewToggle) .app-page-subtitle { margin: 0 !important; font-size: 0.92rem !important; line-height: 1.48 !important; } body .analysis-header-row:has(#sourceSwitcher) .analysis-header-right, body .analysis-header-row:has(#profileViewToggle) .analysis-header-right { transform: none !important; } body .analysis-header-row:has(#sourceSwitcher) .analysis-header-action, body .analysis-header-row:has(#profileViewToggle) .analysis-header-action { position: absolute !important; top: 0 !important; right: 0 !important; width: auto !important; height: var(--rii-profile-toggle-height) !important; min-height: var(--rii-profile-toggle-height) !important; margin: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; z-index: 242 !important; } body .analysis-header-row:has(#sourceSwitcher) .profile-toggle-wrap, body .analysis-header-row:has(#profileViewToggle) .profile-toggle-wrap, body .analysis-header-row:has(#sourceSwitcher) .rii-data-toggle, body .analysis-header-row:has(#profileViewToggle) .rii-data-toggle { height: var(--rii-profile-toggle-height) !important; min-height: var(--rii-profile-toggle-height) !important; max-height: var(--rii-profile-toggle-height) !important; } } @media (max-width: 640px) { html:not([data-run-it-native-shell="1"]) body .analysis-header-row.app-page-header:has(#profileViewToggle):not(:has(.analysis-upload-switcher)) { position: relative !important; overflow: visible !important; } html:not([data-run-it-native-shell="1"]) body .analysis-header-row.app-page-header:has(#profileViewToggle):not(:has(.analysis-upload-switcher)) .analysis-header-action { position: absolute !important; top: 3px !important; right: 0 !important; width: var(--rii-profile-toggle-width) !important; height: var(--rii-profile-toggle-height) !important; min-height: var(--rii-profile-toggle-height) !important; max-height: var(--rii-profile-toggle-height) !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; z-index: 242 !important; } html:not([data-run-it-native-shell="1"]) body .analysis-header-row.app-page-header:has(#profileViewToggle):not(:has(.analysis-upload-switcher)) .profile-toggle-wrap, html:not([data-run-it-native-shell="1"]) body .analysis-header-row.app-page-header:has(#profileViewToggle):not(:has(.analysis-upload-switcher)) .rii-data-toggle { height: var(--rii-profile-toggle-height) !important; min-height: var(--rii-profile-toggle-height) !important; max-height: var(--rii-profile-toggle-height) !important; } html[data-run-it-native-shell="1"] body .analysis-header-row:has(#sourceSwitcher), html[data-run-it-native-shell="1"] body .analysis-header-row:has(#profileViewToggle) { position: relative !important; } html[data-run-it-native-shell="1"] body .analysis-header-row:has(#sourceSwitcher) .analysis-header-right, html[data-run-it-native-shell="1"] body .analysis-header-row:has(#profileViewToggle) .analysis-header-right { transform: none !important; } html[data-run-it-native-shell="1"] body .analysis-header-row:has(#sourceSwitcher) .analysis-header-action, html[data-run-it-native-shell="1"] body .analysis-header-row:has(#profileViewToggle):not(:has(.analysis-upload-switcher)) .analysis-header-action { position: absolute !important; top: 3px !important; right: 0 !important; width: var(--rii-profile-toggle-width) !important; height: var(--rii-profile-toggle-height) !important; min-height: var(--rii-profile-toggle-height) !important; max-height: var(--rii-profile-toggle-height) !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; z-index: 242 !important; } html[data-run-it-native-shell="1"] body .analysis-header-row:has(#sourceSwitcher) .profile-toggle-wrap, html[data-run-it-native-shell="1"] body .analysis-header-row:has(#sourceSwitcher) .rii-data-toggle, html[data-run-it-native-shell="1"] body .analysis-header-row:has(#profileViewToggle) .profile-toggle-wrap, html[data-run-it-native-shell="1"] body .analysis-header-row:has(#profileViewToggle) .rii-data-toggle { height: var(--rii-profile-toggle-height) !important; min-height: var(--rii-profile-toggle-height) !important; max-height: var(--rii-profile-toggle-height) !important; } } @media (prefers-reduced-motion: reduce) { .rii-data-toggle-btn, .rii-data-toggle-chevron, .rii-data-toggle-menu, .rii-data-toggle-item { transition: none; } } /* Apple's wordmark is narrower than the Stryd/Strava marks, so the shared padding leaves it looking undersized next to them. Give it a little more ink. */ body .profile-toggle-wrap .rii-data-toggle-btn .rii-data-toggle-logo[src*="apple-wordmark-white.svg"], body .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="apple-wordmark-white.svg"] { padding: 5px 12px !important; } @media (min-width: 641px) { body .profile-toggle-wrap .rii-data-toggle-btn .rii-data-toggle-logo[src*="apple-wordmark-white.svg"], body .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="apple-wordmark-white.svg"] { padding: 5px 14px !important; } }