itself rather than requiring a nested .card — a shortcode from another plugin never has that class, so requiring it meant shadow="yes" silently did nothing for anything but the theme's own stat/account shortcodes. This still isn't necessarily the exact shadow the plugin drew before the global setting stripped it (that value is gone once removed with !important — it can't be recovered), but it reliably puts *a* soft shadow back around the whole boxed shortcode. */ .aiap-clean-box.aiap-clean-force-shadow { box-shadow: var(--shadow-soft-lg) !important; } /* -------------------------------------------------------------------------- Dashboard card border (Appearance -> Customize -> Widget Zone Layout -> "Border on dashboard cards") -------------------------------------------------------------------------- */ /* Scoped to body.aiap-app — the dashboard, its widget positions/shortcode boxes, and the login/register/forgot-password screens — so it never touches the public-site cards (feature grid, blog list, etc.). Reaches every descendant with !important for the same reason as the shadow rule above: a widget from another plugin may draw its own border, not the theme's. */ body.aiap-app.aiap-no-dashboard-border .card, body.aiap-app.aiap-no-dashboard-border .card *, body.aiap-app.aiap-no-dashboard-border .auth-card, body.aiap-app.aiap-no-dashboard-border .auth-card * { border: none !important; } /* Per-instance override, same idea as the shadow one above: a single [aiap_widget_area border="no"/"yes"] call (or aiap_widget_position()'s third argument) beats the global setting for just that position. */ .aiap-no-card-border .card, .aiap-no-card-border .card *, .aiap-no-card-border .dash-widget-item, .aiap-no-card-border .dash-widget-item * { border: none !important; } body.aiap-app.aiap-no-dashboard-border .aiap-force-card-border .card { border: 1px solid var(--border) !important; } /* -------------------------------------------------------------------------- [aiap_clean_box] border (the shadow half of this shortcode's rules lives above, next to the global shadow switch, since it has to win a tie-break against the .page-content blanket rule there). border="no" strips the border from anything inside — a plugin's own included — even when the dashboard-border setting above is on, or the wrapped content isn't in the dashboard at all. See inc/widget-positions.php for the shortcode itself. -------------------------------------------------------------------------- */ .aiap-clean-box.aiap-clean-no-border, .aiap-clean-box.aiap-clean-no-border * { border: none !important; } .aiap-clean-box.aiap-clean-force-border, .aiap-clean-box.aiap-clean-force-border .card { border: 1px solid var(--border) !important; } /* -------------------------------------------------------------------------- [aiap_widget_area float="yes"] — a gentle, continuous up/down float on every widget in that one position, staggered per widget so they don't all bob in sync. Opt-in per position (default off); respects prefers-reduced- motion, since this is pure decoration with no information carried in the movement. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .aiap-widget-float > .dash-widget-item { animation: aiap-widget-float 4.5s ease-in-out infinite; } .aiap-widget-float > .dash-widget-item:nth-child(2n) { animation-delay: .6s; animation-duration: 5.2s; } .aiap-widget-float > .dash-widget-item:nth-child(3n) { animation-delay: 1.1s; animation-duration: 4.8s; } @keyframes aiap-widget-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* -------------------------------------------------------------------- Homepage Hero Visual Panel — special effects (Appearance -> Customize -> Color Scheme & Layout Style -> "Hero visual panel — special effect"). One .aiap-hero-fx-* class on .hero-visual per choice; "none" adds no class at all, so the panel just keeps today's static look. -------------------------------------------------------------------- */ /* "float": reuses the same keyframes as [aiap_widget_area float="yes"] above, applied to .hero-visual-card instead of .dash-widget-item — the Split hero uses that class for both its two default stat cards and any widgets added to the "Homepage Hero Visual Panel" position. */ .aiap-hero-fx-float > .hero-visual-card { animation: aiap-widget-float 4.5s ease-in-out infinite; } .aiap-hero-fx-float > .hero-visual-card:nth-child(2n) { animation-delay: .6s; animation-duration: 5.2s; } .aiap-hero-fx-float > .hero-visual-card:nth-child(3n) { animation-delay: 1.1s; animation-duration: 4.8s; } /* "glow": the panel's own drop-shadow slowly breathes into a soft colored halo and back — a premium SaaS-dashboard touch. Keeps the panel's normal elevation shadow at both ends so it never looks like the shadow just disappears. */ .aiap-hero-fx-glow { animation: aiap-hero-glow 3.6s ease-in-out infinite; } @keyframes aiap-hero-glow { 0%, 100% { box-shadow: var(--shadow-soft-lg), 0 0 0 0 rgba(var(--primary-rgb), 0); } 50% { box-shadow: var(--shadow-soft-lg), 0 0 55px 14px rgba(var(--primary-rgb), .38); } } /* "shimmer": a diagonal band of light glides across the panel on a loop, like light catching glass — a common "premium" cue in modern product UI. Clipped to the panel's rounded corners by its existing overflow:hidden. */ /* .hero-visual::after is already used for one of the panel's two decorative blur blobs (width/height/position/opacity/filter/ border-radius, declared with .before near the top of this file), and since a class selector + pseudo-element always has the same specificity, those un-overridden properties were still winning here — the gradient sweep was inheriting that rule's filter:blur(40px), opacity:.55 and border-radius:50%, which smeared it into an invisible haze. Every property that blob rule sets has to be explicitly reset back to normal below so the sweep actually renders as a crisp light band instead. */ .aiap-hero-fx-shimmer { position: relative; } .aiap-hero-fx-shimmer::after { content: ''; position: absolute; inset: 0; z-index: 1; width: auto; height: auto; border-radius: 0; filter: none; opacity: 1; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.4) 50%, transparent 60%); background-repeat: no-repeat; background-size: 250% 250%; animation: aiap-hero-shimmer 3.2s ease-in-out infinite; pointer-events: none; } @keyframes aiap-hero-shimmer { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } } /* "drift": the first version of this only moved the panel's two corner blur blobs, but those sit mostly OUTSIDE the panel by design (e.g. top:-2.5rem, so most of the blob is already clipped by .hero-visual's overflow:hidden) — animating something that's already mostly cropped out of view is why moving it further didn't read as any visible change. The actual, reliably-visible part of "drift" is now the gradient itself slowly panning behind everything (the same trick used for animated "aurora" gradients): the blobs still drift too, as a bonus layered on top, but they're no longer the only thing carrying the effect. */ .aiap-hero-fx-drift { background-size: 220% 220%; animation: aiap-hero-drift-bg 12s ease-in-out infinite; } @keyframes aiap-hero-drift-bg { 0%, 100% { background-position: 0% 30%; } 50% { background-position: 100% 70%; } } .aiap-hero-fx-drift::before { animation: aiap-hero-drift-a 9s ease-in-out infinite; } .aiap-hero-fx-drift::after { animation: aiap-hero-drift-b 11s ease-in-out infinite; } @keyframes aiap-hero-drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-2.75rem, 2.5rem) scale(1.2); } } @keyframes aiap-hero-drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(2.75rem, -2.5rem) scale(1.2); } } /* "scroll": unlike "drift" (which eases back and forth, so it visibly changes direction), this pans the background in ONE direction only, forever, with the end of the image connecting straight into its own start ("پشت هم" — back-to-back), no jump when it loops. v1 animated background-position from 0% to -100% on a single repeating background — jumped on most screens, because percentage background-position isn't measured against the tile's own width, so -100% is almost never exactly one whole tile. v2 tried two full-panel "cover" copies sliding side by side — that avoided the jump but CROPPED the image (each copy fills the panel like a photo crop) and, because "cover" crops differ from a true repeating tile, looked like two overlapping photos rather than one continuous strip. Not what "کل تصویر، سر و ته وصل" asked for. v3 (this version) shows the image uncropped at its own aspect ratio (background-size: auto 100%, same as a plain, non-scrolling background would) and tiles it edge-to-edge with background-repeat, which is what actually makes the end of one copy touch the start of the next. The only remaining piece is sliding it by EXACTLY one tile's width so the loop restart is invisible — that width depends on the real image's pixel aspect ratio, which isn't knowable from CSS alone, so assets/js/main.js measures it once the image has loaded and writes it into the --aiap-scroll-tile custom property used below. Without JS (or before it runs) this still falls back to a -100% shift, which scrolls fine and only risks a soft seam instead of a hard jump until the exact value is set. */ .aiap-hero-fx-scroll { background-repeat: repeat-x; background-size: auto 100%; animation: aiap-hero-scroll 18s linear infinite; } @keyframes aiap-hero-scroll { from { background-position-x: 0; } to { background-position-x: calc(-1 * var(--aiap-scroll-tile, 100%)); } } }