/* ══════════════════════════════════════════════════════════════════════ SMSAK POLISH v1.0 — Premium Glasless Mobile Experience ══════════════════════════════════════════════════════════════════════ Adds the visual layer that makes mobile/tablet feel premium: - #14 Real shadow depth system (no blur, no glass) - #15 View Transitions API styles - #17 Scroll-linked animations (scroll-timeline) - Toast + pull-refresh + bottom-sheet styling - Skeleton loading (#8) Drop once in — works alongside existing styles. ══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════ #14 GLASLESS DEPTH SYSTEM ═══════════════════════════════════════════════════ Five elevation levels — layered shadows, no blur. Each level has: ambient (wide soft) + directional (tight) shadow. Use like:
...
*/ .sm-elev-0 { box-shadow: none; } .sm-elev-1 { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 4px rgba(15, 23, 42, .02); } .sm-elev-2 { box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 4px 8px rgba(15, 23, 42, .04); } .sm-elev-3 { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 8px rgba(15, 23, 42, .06), 0 12px 24px rgba(15, 23, 42, .06); } .sm-elev-4 { box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 8px 16px rgba(15, 23, 42, .08), 0 20px 40px rgba(15, 23, 42, .10); } .sm-elev-5 { box-shadow: 0 4px 8px rgba(15, 23, 42, .06), 0 16px 32px rgba(15, 23, 42, .10), 0 32px 64px rgba(15, 23, 42, .14); } /* Dark mode — shift shadows to pure black with higher opacity */ @media (prefers-color-scheme: dark) { .sm-elev-1 { box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2); } .sm-elev-2 { box-shadow: 0 2px 4px rgba(0,0,0,.35), 0 4px 8px rgba(0,0,0,.25); } .sm-elev-3 { box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 8px rgba(0,0,0,.3), 0 12px 24px rgba(0,0,0,.25); } .sm-elev-4 { box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 8px 16px rgba(0,0,0,.35), 0 20px 40px rgba(0,0,0,.3); } .sm-elev-5 { box-shadow: 0 4px 8px rgba(0,0,0,.45), 0 16px 32px rgba(0,0,0,.4), 0 32px 64px rgba(0,0,0,.35); } } /* Hover lifts element one elevation */ .sm-elev-hover { transition: box-shadow .22s cubic-bezier(.2,.8,.2,1), transform .22s cubic-bezier(.2,.8,.2,1); } .sm-elev-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(15, 23, 42, .08), 0 20px 40px rgba(15, 23, 42, .12); } /* Replace any existing glassmorphism — if we see backdrop-filter: blur, replace it */ .no-glass { background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid rgba(15, 23, 42, .06); } /* ═══════════════════════════════════════════════════ #15 VIEW TRANSITIONS ═══════════════════════════════════════════════════ */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: sm-vt-fade-out .22s cubic-bezier(.4, 0, .2, 1) both; } ::view-transition-new(root) { animation: sm-vt-fade-in .28s cubic-bezier(.2, .8, .2, 1) both; } @keyframes sm-vt-fade-out { to { opacity: 0; transform: translateY(-8px); } } @keyframes sm-vt-fade-in { from { opacity: 0; transform: translateY(12px); } } /* Shared element: tool cards keep identity between /tools/ and /tools/X/ */ .sm-vt-tool-card { view-transition-name: var(--vt, auto); } /* ═══════════════════════════════════════════════════ #17 SCROLL-LINKED ANIMATIONS (scroll-timeline) ═══════════════════════════════════════════════════ Native CSS scroll animations — no JS, no jank. Falls back to IntersectionObserver below. */ @supports (animation-timeline: scroll()) { .sm-scroll-fade { animation: sm-scroll-fade linear; animation-timeline: view(); animation-range: entry 0% entry 80%; } .sm-scroll-rise { animation: sm-scroll-rise linear; animation-timeline: view(); animation-range: entry 0% entry 80%; } .sm-scroll-hero-parallax { animation: sm-hero-parallax linear; animation-timeline: scroll(root block); } } @keyframes sm-scroll-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes sm-scroll-rise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: translateY(0); } } @keyframes sm-hero-parallax { to { transform: translateY(40px) scale(1.06); } } /* IntersectionObserver fallback (older browsers) */ @supports not (animation-timeline: scroll()) { .sm-scroll-fade, .sm-scroll-rise { opacity: 0; transition: opacity .6s ease, transform .6s ease; } .sm-scroll-fade.sm-visible { opacity: 1; } .sm-scroll-rise { transform: translateY(36px); } .sm-scroll-rise.sm-visible { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════ TOAST ═══════════════════════════════════════════════════ */ .smsak-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(60px); z-index: 2147483100; background: #0d0d1a; color: #fff; padding: .75rem 1.4rem; border-radius: 999px; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: .85rem; font-weight: 600; letter-spacing: .01em; box-shadow: 0 4px 8px rgba(0,0,0,.2), 0 12px 24px rgba(0,0,0,.25); opacity: 0; transition: opacity .24s cubic-bezier(.2,.8,.2,1), transform .24s cubic-bezier(.2,.8,.2,1); pointer-events: none; max-width: 90vw; text-align: center; } .smsak-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ═══════════════════════════════════════════════════ BOTTOM SHEET ═══════════════════════════════════════════════════ */ .smsak-sheet-ov { position: fixed; inset: 0; z-index: 2147483400; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .28s cubic-bezier(.2,.8,.2,1); } .smsak-sheet-ov.show { opacity: 1; pointer-events: auto; } .smsak-sheet { width: 100%; max-width: 640px; background: #fff; color: #0d0d1a; border-radius: 20px 20px 0 0; padding: 12px 20px 32px; max-height: 85vh; overflow-y: auto; transform: translateY(100%); transition: transform .32s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -20px 60px rgba(0,0,0,.3); padding-bottom: max(32px, env(safe-area-inset-bottom)); } .smsak-sheet-ov.show .smsak-sheet { transform: translateY(0); } @media (prefers-color-scheme: dark) { .smsak-sheet { background: #14141f; color: #e5e7eb; } } .smsak-sheet-handle { width: 40px; height: 4px; border-radius: 999px; background: rgba(0, 0, 0, .15); margin: 0 auto 12px; cursor: grab; touch-action: none; } @media (prefers-color-scheme: dark) { .smsak-sheet-handle { background: rgba(255, 255, 255, .15); } } .smsak-sheet-title { font-size: 1.1rem; font-weight: 800; margin: 0 0 16px; text-align: center; letter-spacing: -.01em; } .smsak-sheet-body { font-size: .95rem; line-height: 1.55; } .smsak-sheet-body ul { list-style: none; padding: 0; margin: 0; } .smsak-sheet-body ul li { margin: 0; } .smsak-sheet-body a { display: block; padding: 14px 16px; color: inherit; text-decoration: none; border-radius: 12px; transition: background .15s; } .smsak-sheet-body a:hover, .smsak-sheet-body a:focus-visible { background: rgba(0, 0, 0, .04); } @media (prefers-color-scheme: dark) { .smsak-sheet-body a:hover { background: rgba(255, 255, 255, .05); } } /* ═══════════════════════════════════════════════════ PULL-TO-REFRESH INDICATOR ═══════════════════════════════════════════════════ */ .smsak-pull-indicator { position: fixed; top: -20px; left: 50%; transform: translateX(-50%) translateY(0) rotate(0); z-index: 2147482000; width: 44px; height: 44px; background: #0d0d1a; color: #F5C000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: bold; opacity: 0; transition: opacity .1s; box-shadow: 0 4px 12px rgba(0,0,0,.2); pointer-events: none; } .smsak-pull-spin { width: 18px; height: 18px; border: 2px solid rgba(245, 192, 0, .25); border-top-color: #F5C000; border-radius: 50%; animation: sm-spin 0.7s linear infinite; } @keyframes sm-spin { to { transform: rotate(360deg); } } /* ═══════════════════════════════════════════════════ #8 SKELETON LOADERS ═══════════════════════════════════════════════════ */ .sm-skel { background: linear-gradient(90deg, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .08) 50%, rgba(0, 0, 0, .05) 75%); background-size: 200% 100%; animation: sm-skel-shimmer 1.4s ease-in-out infinite; border-radius: 8px; color: transparent !important; user-select: none; } .sm-skel-text { height: 1em; margin: .25em 0; } .sm-skel-line { height: .85em; margin: .4em 0; } .sm-skel-title { height: 1.3em; margin: .3em 0; width: 70%; } .sm-skel-circle { border-radius: 50%; } .sm-skel-block { width: 100%; min-height: 2rem; } @keyframes sm-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-color-scheme: dark) { .sm-skel { background: linear-gradient(90deg, rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .04) 75%); background-size: 200% 100%; } } /* ═══════════════════════════════════════════════════ TIP TICKER (live scrolling donations) ═══════════════════════════════════════════════════ */ .smsak-tipticker { position: fixed; bottom: 0; left: 0; right: 0; z-index: 2147482500; background: linear-gradient(90deg, #0d0d1a 0%, #14141f 100%); color: #fff; height: 36px; display: none; overflow: hidden; white-space: nowrap; border-top: 1px solid rgba(245, 192, 0, .3); font-family: system-ui, -apple-system, sans-serif; font-size: .78rem; } .smsak-tipticker.show { display: flex; align-items: center; } .smsak-tipticker-prefix { flex-shrink: 0; padding: 0 12px; background: #F5C000; color: #0d0d1a; height: 100%; display: flex; align-items: center; font-weight: 800; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; } .smsak-tipticker-track { display: inline-flex; animation: sm-ticker-scroll 60s linear infinite; padding-left: 100%; } .smsak-tipticker-item { padding: 0 2rem; white-space: nowrap; color: #e5e7eb; } .smsak-tipticker-item b { color: #F5C000; font-weight: 700; } .smsak-tipticker-item .sm-tt-tool { color: #fff; font-weight: 600; } .smsak-tipticker-close { position: absolute; right: 0; top: 0; height: 100%; width: 32px; background: transparent; border: 0; color: #9ca3af; cursor: pointer; font-size: 1rem; } .smsak-tipticker-close:hover { color: #fff; } @keyframes sm-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .smsak-tipticker:hover .smsak-tipticker-track { animation-play-state: paused; } /* Add bottom padding to body so ticker doesn't overlap content */ body.smsak-has-tipticker { padding-bottom: 36px; } /* When tipticker is active, push fixed-position widgets up by 36px so they stay above the ticker bar */ body.smsak-has-tipticker .swissy-launcher, body.smsak-has-tipticker .smsak-fb-btn { bottom: 56px; } body.smsak-has-tipticker .smsak-fb-btn[style*="bottom"] { bottom: 56px !important; } body.smsak-has-tipticker .swissy-window { bottom: 126px; } body.smsak-has-tipticker .smsak-tipjar { bottom: 136px; } body.smsak-has-tipticker .ss-action-bar { /* top-positioned, no change needed */ } @media (max-width:600px){ body.smsak-has-tipticker .swissy-launcher, body.smsak-has-tipticker .smsak-fb-btn { bottom: 54px; } body.smsak-has-tipticker .swissy-window { bottom: 116px; } body.smsak-has-tipticker .smsak-tipjar { bottom: 126px; } } /* ═══════════════════════════════════════════════════ RESPECT REDUCED MOTION ═══════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .smsak-toast, .smsak-sheet-ov, .smsak-sheet, .smsak-pull-indicator, .sm-skel, .smsak-tipticker-track, .sm-elev-hover, ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; transition: none !important; } } /* ═══════════════════════════════════════════════════ AUTO-GLASLESS on mobile (voorstel #14) Disable backdrop-filter:blur on small screens to improve perf + feel more solid ═══════════════════════════════════════════════════ */ @media (max-width: 768px) { [class*="glass"], [class*="backdrop"], .hero-glass, .glass-nav, .nav-glass { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--smsak-solid-bg, rgba(255, 255, 255, 0.96)) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 6px rgba(15, 23, 42, .06) !important; } @media (prefers-color-scheme: dark) { [class*="glass"], [class*="backdrop"], .hero-glass, .glass-nav, .nav-glass { background: var(--smsak-solid-bg, rgba(20, 20, 31, 0.96)) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25) !important; } } }