/* ========================================================================= TopManager Online Shop - Lite UI effects () ------------------------------------------------------------------------- Set per DEVICE by own.os.ui.effects.js - automatically (no hardware- accelerated graphics, a software renderer, measured jank) or by the visitor (accessibility panel -> "Efecte vizuale": Automat / Complete / Reduse) - and emitted by _Layout.cshtml (UIEffectsPreferences) before first paint. Without GPU acceleration the browser composites on the CPU, where a few effects cost a lot on EVERY frame (scrolling, hovering, any animation): - backdrop-filter (frosted glass) re-blurs everything behind the element; - infinite decorative loops (animated background decor, card sheens and orbiting beams on every card of a listing, halo rings). This file removes exactly those: the blur goes (the translucent surfaces that need it get an opaque fill) and the CONTINUOUS decorative loops stop. Spinners / busy indicators, entrance animations and hover transitions are left alone, so the shop works and reads the same - just flatter and calmer. Every selector is scoped under html.ui-effects-lite, so without the class nothing here matches. Loaded after the media queries and the shop's custom CSS (see _Layout). The loops are frozen with the very selectors their own files already use under prefers-reduced-motion - those resting states are designed. ========================================================================= */ /* 1. No backdrop blur anywhere. */ html.ui-effects-lite *, html.ui-effects-lite *::before, html.ui-effects-lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 2. Frosted-glass material (html.glass, own.os.glass): every surface that reads the knobs gets the opaque tint the material already ships for browsers without backdrop-filter. :root lifts the specificity above the dark-glass knobs (html..glass) and the Custom theme's inline ones. */ :root.glass.ui-effects-lite { --tm-glass-bg: var(--tm-glass-bg-strong, rgba(255, 255, 255, 0.85)); --tm-glass-blur: none; } /* 3. Sticky top bars that stayed readable over the scrolling page only thanks to the blur (floating-hero docked bar 60%, Glacier slab 55%). */ html.ui-effects-lite.fo-floating-hero #main-navbar.bg-white.for-scrolled-doc { background: rgba(255, 255, 255, 0.94) !important; background: color-mix(in srgb, var(--tm-surface, #ffffff) 94%, transparent) !important; } html.ui-effects-lite.glacier #main-navbar.bg-white.for-scrolled-doc { background: hsla(var(--tm-glacier-hue), 60%, 97%, 0.94) !important; } /* 4. Article title chips laid over the header photo (own.os.article.layout.styles): without the blur the photo shows through - a darker tint keeps the white title readable on any picture. */ html.ui-effects-lite .article-details-container.article-style-aurora .article-header-image-wrapper .article-title-overlay .article-title { background: rgba(20, 26, 48, 0.45); } html.ui-effects-lite .article-details-container.article-style-vibrant .article-header-image-wrapper .article-title-overlay .article-title { background: rgba(0, 0, 0, 0.45); } /* 5. Background decor of the "fancy" pages (own.os.background.decor): the full-viewport layers stop drifting. */ html.ui-effects-lite[class*=fo-bg-decor-] body.with-fancy-shapes::before, html.ui-effects-lite[class*=fo-bg-decor-] body.with-fancy-shapes::after { animation: none !important; } /* 6. Product card styles (own.os.product.card.styles): the loops that run on EVERY card of a listing - Crystal aurora + sheen, Playful sway, Showroom float, Beam orbit, Lumen streak + edge glint. */ html.ui-effects-lite.fo-product-cards-crystal .tm-product-card::before, html.ui-effects-lite.fo-product-cards-crystal .tm-product-card .product-link::after, html.ui-effects-lite.fo-product-cards-playful.fo-product-cards-playful-animated .tm-product-card, html.ui-effects-lite.fo-product-cards-showroom.fo-product-cards-showroom-floating .tm-product-card .product-link .picture-wrapper, html.ui-effects-lite.fo-product-cards-beam .tm-product-card::before, html.ui-effects-lite.fo-product-cards-beam .tm-product-card::after, html.ui-effects-lite.fo-product-cards-lumen .tm-product-card::before, html.ui-effects-lite.fo-product-cards-lumen .tm-product-card::after { animation: none !important; } /* 7. Article card styles (own.os.article.card.styles): Beam orbit, Lumen streak + edge glint. */ html.ui-effects-lite.fo-article-cards-beam :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper, .ads-list-container) .articles-list-container :is(.article-card, .article-card-on-sidebar)::before, html.ui-effects-lite.fo-article-cards-beam :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper, .ads-list-container) .articles-list-container :is(.article-card, .article-card-on-sidebar)::after, html.ui-effects-lite.fo-article-cards-lumen :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper, .ads-list-container) .articles-list-container :is(.article-card, .article-card-on-sidebar)::before, html.ui-effects-lite.fo-article-cards-lumen :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper, .ads-list-container) .articles-list-container :is(.article-card, .article-card-on-sidebar)::after { animation: none !important; } /* 8. Halo buttons (own.os.fancy.controls - "Stil butoane produse": Halo): the spinning ring on every product button. */ html.ui-effects-lite.fo-product-buttons-halo .tm-fancy-command.add-to-cart-command::before, html.ui-effects-lite.fo-product-buttons-halo .tm-fancy-command.go-to-product-details-command::before, html.ui-effects-lite.fo-product-buttons-halo .tm-fancy-command.make-a-reservation-product-command::before, html.ui-effects-lite.fo-product-buttons-halo .tm-fancy-command.subscribe-to-course-command::before, html.ui-effects-lite.fo-product-buttons-halo .tm-fancy-command.subscribe-to-course-command-by-tax::before { animation: none !important; } /* 9. Alert / confirm dialogs (own.os.alert, own.os.confirm): the spinning halo ring (a repainted conic gradient) takes the static gradient their reduced-motion rule uses; the icon glow stops breathing. */ html.ui-effects-lite .alert-container::before { animation: none !important; background: linear-gradient(135deg, var(--alert-accent) 0%, transparent 60%); } html.ui-effects-lite .confirm-container::before { animation: none !important; background: linear-gradient(135deg, var(--confirm-accent) 0%, transparent 60%); } html.ui-effects-lite .alert-icon::before, html.ui-effects-lite .confirm-icon::before { animation: none !important; opacity: 0.8; } /* 10. Decorative floating icons + orbiting dots (own.os.site), the error-page illustration (own.os.error.page) and the animated bokeh background (own.os.animated.background). */ html.ui-effects-lite .tm-fancy-icon-wrapper, html.ui-effects-lite .tm-fancy-icon-wrapper::before, html.ui-effects-lite .tm-fancy-dot, html.ui-effects-lite .tm-error-illustration, html.ui-effects-lite .tm-err-halo, html.ui-effects-lite .tm-animated-background span { animation: none !important; }