/** * CLEARLi — X-Factor Plus polish (visual layer only) * * Pointer-aware: * - (hover: hover) and (pointer: fine) → mouse / trackpad hover polish * - (hover: none) or (pointer: coarse) → finger tap :active, no sticky-hover * Layout / DOM / JS unchanged. Safe to remove this stylesheet. */ /* ── Shared tokens ── */ body.elite-body { --xf-ease: cubic-bezier(0.22, 1, 0.36, 1); --xf-dur: 0.3s; } /* ═══════════════════════════════════════════════════ ALWAYS ON — optical polish (desktop + mobile) No hover dependency; safe while scrolling ═══════════════════════════════════════════════════ */ body.elite-body .home-strips { gap: 14px; } body.elite-body .home-strip, body.elite-body:has(.home-greeting) .home-strip { transition: border-color var(--xf-dur) var(--xf-ease), box-shadow var(--xf-dur) var(--xf-ease), transform 0.18s var(--xf-ease), background var(--xf-dur) var(--xf-ease), filter var(--xf-dur) ease; -webkit-tap-highlight-color: transparent; } body.elite-body .home-strip__icon, body.elite-body:has(.home-greeting) .home-strip__icon { transition: transform 0.18s var(--xf-ease), box-shadow 0.18s ease; } body.elite-body .home-strip__cta, body.elite-body:has(.home-greeting) .home-strip__cta { display: inline-block; transition: transform 0.2s var(--xf-ease); } /* Featured LC — presence without layout shift */ body.elite-body .home-strip--featured { box-shadow: var(--clearli-inset-hi, inset 0 1px 0 rgba(255, 255, 255, 0.72)), 0 4px 10px rgba(16, 185, 129, 0.1), 0 18px 44px rgba(16, 185, 129, 0.14); } body.elite-body .home-strip--featured::before { width: 5px; } body.elite-body .home-strip--featured .home-strip__cta { letter-spacing: 0.015em; font-weight: 800; } body.elite-body:has(.home-greeting) .home-greeting__title { letter-spacing: -0.02em; text-wrap: balance; } body.elite-body:has(.home-greeting) .clearli-logo--lg { filter: drop-shadow(0 6px 18px rgba(7, 43, 110, 0.08)); } body.elite-body .home-daily-goal { box-shadow: var(--clearli-inset-hi, inset 0 1px 0 rgba(255, 255, 255, 0.72)), 0 4px 10px rgba(103, 216, 200, 0.1), 0 16px 40px rgba(103, 216, 200, 0.12); } body.elite-body .home-daily-goal__bar-fill { background: linear-gradient( 90deg, #9ee8dc 0%, #67d8c8 28%, #4bc4b3 55%, #5ea8ff 85%, #9e7df4 120% ); background-size: 220% 100%; box-shadow: 0 0 10px rgba(103, 216, 200, 0.28); } body.elite-body .home-daily-study__link { transition: transform 0.18s var(--xf-ease), border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; -webkit-tap-highlight-color: transparent; } body.elite-body .home-daily-study.glass-panel, body.elite-body .home-onboarding.glass-panel, body.elite-body .glass-panel--light { box-shadow: var(--clearli-inset-hi, inset 0 1px 0 rgba(255, 255, 255, 0.72)), 0 4px 10px rgba(7, 43, 110, 0.05), 0 16px 36px rgba(7, 43, 110, 0.07); } body.elite-body .elite-userbar, body.elite-body .elite-userbar--app { box-shadow: var(--clearli-inset-hi, inset 0 1px 0 rgba(255, 255, 255, 0.72)), 0 2px 4px rgba(7, 43, 110, 0.04), 0 12px 32px rgba(7, 43, 110, 0.07); } body.elite-body .elite-toolbar-chip, body.elite-body .btn-elite, body.elite-body .home-daily-goal__cta, body.elite-body .lc-lesson-link, body.elite-body .tile, body.elite-body .chunk-card, body.elite-body .nav-card, body.elite-body .surface-card { transition: transform 0.18s var(--xf-ease), box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, filter 0.2s ease; -webkit-tap-highlight-color: transparent; } [data-theme="dark"] body.elite-body .home-strip--featured, body[data-theme="dark"].elite-body .home-strip--featured { box-shadow: var(--clearli-inset-hi, inset 0 1px 0 rgba(255, 255, 255, 0.06)), 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 32px rgba(16, 185, 129, 0.12); } /* ═══════════════════════════════════════════════════ MOUSE / TRACKPAD — true hover (no sticky-hover on touch) ═══════════════════════════════════════════════════ */ @media (hover: hover) and (pointer: fine) { body.elite-body a.home-strip:hover, body.elite-body:has(.home-greeting) a.home-strip:hover { transform: translateY(-4px); filter: saturate(1.06); box-shadow: var(--clearli-inset-hi, inset 0 1px 0 rgba(255, 255, 255, 0.72)), 0 6px 12px rgba(7, 43, 110, 0.06), 0 22px 48px rgba(7, 43, 110, 0.12); } body.elite-body a.home-strip:active, body.elite-body:has(.home-greeting) a.home-strip:active { transform: translateY(0) scale(0.985); filter: none; } body.elite-body a.home-strip:hover .home-strip__icon, body.elite-body:has(.home-greeting) a.home-strip:hover .home-strip__icon { transform: scale(1.08) translateY(-1px); } body.elite-body a.home-strip:hover .home-strip__cta, body.elite-body:has(.home-greeting) a.home-strip:hover .home-strip__cta { transform: translateX(-3px); } body.elite-body .home-daily-study__link:hover { transform: translateX(-4px); box-shadow: var(--clearli-inset-hi, inset 0 1px 0 rgba(255, 255, 255, 0.72)), 0 6px 16px rgba(7, 43, 110, 0.08); } body.elite-body .elite-toolbar-chip:hover { transform: translateY(-2px) scale(1.04); box-shadow: var(--clearli-inset-hi, inset 0 1px 0 rgba(255, 255, 255, 0.72)), 0 6px 16px rgba(75, 131, 255, 0.14); } body.elite-body .elite-toolbar-chip:active { transform: translateY(0) scale(0.98); } body.elite-body .btn-elite:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(7, 43, 110, 0.12); } body.elite-body .btn-elite--primary:hover { box-shadow: 0 8px 24px rgba(75, 131, 255, 0.26); } body.elite-body .btn-elite:active { transform: translateY(0) scale(0.98); } body.elite-body .home-daily-goal__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(103, 216, 200, 0.2); } body.elite-body .lc-lesson-link:hover { transform: translateY(-2px); } body.elite-body a.tile:hover, body.elite-body a.chunk-card:hover, body.elite-body a.nav-card:hover { transform: translateY(-3px); } [data-theme="dark"] body.elite-body a.home-strip:hover, body[data-theme="dark"].elite-body a.home-strip:hover { box-shadow: var(--clearli-inset-hi, inset 0 1px 0 rgba(255, 255, 255, 0.06)), 0 8px 20px rgba(0, 0, 0, 0.35), 0 0 28px rgba(75, 131, 255, 0.1); } } /* ═══════════════════════════════════════════════════ TOUCH — finger press feedback (no hover lift / no scroll fight) Uses :active only while finger is down ═══════════════════════════════════════════════════ */ @media (hover: none), (pointer: coarse) { body.elite-body { --xf-dur: 0.16s; } /* Slightly tighter strip stack on narrow phones */ body.elite-body .home-strips { gap: 12px; } /* Press-in instead of lift-up — feels native, won't sticky after tap */ body.elite-body a.home-strip:active, body.elite-body:has(.home-greeting) a.home-strip:active { transform: scale(0.985); filter: none; box-shadow: var(--clearli-inset-hi, inset 0 1px 0 rgba(255, 255, 255, 0.72)), 0 2px 8px rgba(7, 43, 110, 0.08); } body.elite-body a.home-strip:active .home-strip__icon, body.elite-body:has(.home-greeting) a.home-strip:active .home-strip__icon { transform: scale(1.04); } body.elite-body .home-daily-study__link:active { transform: scale(0.985); box-shadow: var(--clearli-inset-hi, inset 0 1px 0 rgba(255, 255, 255, 0.72)), 0 2px 8px rgba(7, 43, 110, 0.08); } body.elite-body .elite-toolbar-chip:active, body.elite-body .btn-elite:active, body.elite-body .home-daily-goal__cta:active { transform: scale(0.97); } body.elite-body .btn-elite--primary:active { box-shadow: 0 2px 10px rgba(75, 131, 255, 0.22); } body.elite-body .lc-lesson-link:active, body.elite-body a.tile:active, body.elite-body a.chunk-card:active, body.elite-body a.nav-card:active { transform: scale(0.985); } /* Featured still reads premium at rest on mobile */ body.elite-body .home-strip--featured { box-shadow: var(--clearli-inset-hi, inset 0 1px 0 rgba(255, 255, 255, 0.72)), 0 3px 8px rgba(16, 185, 129, 0.1), 0 12px 28px rgba(16, 185, 129, 0.12); } } /* ═══════════════════════════════════════════════════ ENTRANCE + shimmer (respect reduced motion) Shorter / lighter on touch + small screens ═══════════════════════════════════════════════════ */ @media (prefers-reduced-motion: no-preference) { body.elite-body:has(.home-greeting) .home-greeting, body.elite-body:has(.home-greeting) .home-daily-goal, body.elite-body:has(.home-greeting) .home-daily-study, body.elite-body:has(.home-greeting) .home-onboarding, body.elite-body:has(.home-greeting) .home-strip { animation: clearliXfRise 0.65s var(--xf-ease) backwards; } body.elite-body:has(.home-greeting) .home-greeting { animation-delay: 0.02s; } body.elite-body:has(.home-greeting) .home-daily-goal { animation-delay: 0.08s; } body.elite-body:has(.home-greeting) .home-daily-study { animation-delay: 0.14s; } body.elite-body:has(.home-greeting) .home-onboarding { animation-delay: 0.18s; } body.elite-body:has(.home-greeting) .home-strip:nth-child(1) { animation-delay: 0.22s; } body.elite-body:has(.home-greeting) .home-strip:nth-child(2) { animation-delay: 0.28s; } body.elite-body:has(.home-greeting) .home-strip:nth-child(3) { animation-delay: 0.34s; } body.elite-body:has(.home-greeting) .home-strip:nth-child(4) { animation-delay: 0.4s; } body.elite-body:has(.home-greeting) .home-strip:nth-child(5) { animation-delay: 0.46s; } body.elite-body:has(.home-greeting) .home-strip:nth-child(6) { animation-delay: 0.52s; } body.elite-body:has(.home-greeting) .home-strip:nth-child(7) { animation-delay: 0.58s; } body.elite-body:has(.home-greeting) .home-strip:nth-child(8) { animation-delay: 0.64s; } body.elite-body .home-daily-goal__bar-fill { animation: clearliXfShimmer 2.8s ease-in-out infinite; } } /* Touch / narrow: faster entrance, less travel (scroll-friendly) */ @media (prefers-reduced-motion: no-preference) { @media (hover: none), (pointer: coarse), (max-width: 720px) { body.elite-body:has(.home-greeting) .home-greeting, body.elite-body:has(.home-greeting) .home-daily-goal, body.elite-body:has(.home-greeting) .home-daily-study, body.elite-body:has(.home-greeting) .home-onboarding, body.elite-body:has(.home-greeting) .home-strip { animation-name: clearliXfRiseTouch; animation-duration: 0.45s; } body.elite-body:has(.home-greeting) .home-greeting { animation-delay: 0.01s; } body.elite-body:has(.home-greeting) .home-daily-goal { animation-delay: 0.04s; } body.elite-body:has(.home-greeting) .home-daily-study { animation-delay: 0.07s; } body.elite-body:has(.home-greeting) .home-onboarding { animation-delay: 0.09s; } body.elite-body:has(.home-greeting) .home-strip:nth-child(1) { animation-delay: 0.11s; } body.elite-body:has(.home-greeting) .home-strip:nth-child(2) { animation-delay: 0.14s; } body.elite-body:has(.home-greeting) .home-strip:nth-child(3) { animation-delay: 0.17s; } body.elite-body:has(.home-greeting) .home-strip:nth-child(4) { animation-delay: 0.2s; } body.elite-body:has(.home-greeting) .home-strip:nth-child(5) { animation-delay: 0.23s; } body.elite-body:has(.home-greeting) .home-strip:nth-child(6) { animation-delay: 0.26s; } body.elite-body:has(.home-greeting) .home-strip:nth-child(7) { animation-delay: 0.29s; } body.elite-body:has(.home-greeting) .home-strip:nth-child(8) { animation-delay: 0.32s; } body.elite-body .home-daily-goal__bar-fill { animation-duration: 3.6s; } } } @keyframes clearliXfRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes clearliXfRiseTouch { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes clearliXfShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Reduced motion: kill polish motion only */ @media (prefers-reduced-motion: reduce) { body.elite-body:has(.home-greeting) .home-greeting, body.elite-body:has(.home-greeting) .home-daily-goal, body.elite-body:has(.home-greeting) .home-daily-study, body.elite-body:has(.home-greeting) .home-onboarding, body.elite-body:has(.home-greeting) .home-strip, body.elite-body .home-daily-goal__bar-fill { animation: none !important; } body.elite-body a.home-strip:hover, body.elite-body a.home-strip:active, body.elite-body .btn-elite:hover, body.elite-body .btn-elite:active, body.elite-body .elite-toolbar-chip:hover, body.elite-body .elite-toolbar-chip:active, body.elite-body .home-daily-study__link:hover, body.elite-body .home-daily-study__link:active, body.elite-body .lc-lesson-link:hover, body.elite-body .lc-lesson-link:active { transform: none; } }