/* ============================================================ DENIO UI REVAMP v5.1 — non-invasive overlay v4.1 fixes: - Mobile zoom DEAD: input font-size 16px at ALL viewport widths (no more @media max-width:768px gate). Viewport meta on auth pages now includes maximum-scale=1 + user-scalable=no. - Mobile auto-zoom on input focus killed (font-size >= 16px, text-size-adjust locked). This was making the "Sign In" page appear to zoom in when the user tapped email/password. - Login submit button can no longer balloon during loading state (max-height + max-width + locked padding while keeping ripples). - Horizontal overflow hidden on / so cards never push the layout sideways (the cause of "TEAM ALPHA" being cut off and the landing-page text overlap on small screens). - Toast: hide the JS-injected leading "✅" emoji so only the SVG icon shows (no more double check-mark). - Added micro-interactions: button glint, input focus glow, stat-card tilt, link underline animation, page fade-in. ============================================================ */ /* ---------- 1. PREVENT MOBILE ZOOM-ON-FOCUS / TAP-ZOOM ---------- */ html { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; touch-action: manipulation; } html, body { overflow-x: hidden; max-width: 100vw; overscroll-behavior-x: none; } body, a, button, input, select, textarea, label, [role="button"], [onclick], .btn, .btn-submit, .btn-secondary, .btn-glow, .btn-outline, .tab-btn, .nav-item, .menu-toggle-btn { touch-action: manipulation !important; } input, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], input[type="tel"], input[type="number"] { font-size: 16px !important; /* transform: translateZ(0); */ } /* ---------- 2. LOGIN / AUTH SUBMIT BUTTON SAFE-SIZE ---------- */ /* Prevent ANY submit/primary button from growing past its row. */ form button[type="submit"], .auth-form button[type="submit"], .login-form button[type="submit"], .btn-primary, .btn-glow, .btn-action { box-sizing: border-box; max-width: 100%; width: 100%; } form button[type="submit"] { min-height: 48px; max-height: 56px; height: auto !important; padding: 0 22px !important; line-height: 1.2 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* loading state must NOT enlarge button */ button.loading, button[disabled].loading, .btn-primary.loading, .btn-glow.loading, .btn-submit:disabled, .btn-submit.loading, form button[type="submit"]:disabled { transform: none !important; filter: none !important; animation: none !important; } .btn-submit, .btn-secondary, form button[type="submit"] { contain: layout paint; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* ---------- 3. LANDING / GENERAL TEXT FIT ---------- */ h1, h2, h3, .title, .hero-title, .section-title { overflow-wrap: anywhere; word-break: break-word; hyphens: auto; } @media (max-width: 600px) { h1, .hero-title { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; line-height: 1.15 !important; } h2, .section-title { font-size: clamp(1.3rem, 5.5vw, 1.9rem) !important; line-height: 1.2 !important; } .subtitle, .hero-subtitle, p.lead { font-size: clamp(.95rem, 4vw, 1.1rem) !important; line-height: 1.45 !important; } .container, .wrapper, .auth-container, .page-container { padding-left: 16px !important; padding-right: 16px !important; } } /* ============================================================ ANIMATIONS / 3D EFFECTS (respects reduced motion) ============================================================ */ @media (prefers-reduced-motion: no-preference) { /* ---------- shared 3D button base (SCOPED, login excluded) ---------- */ .btn, .btn-glow, .btn-paste, .btn-animated, .btn-action, .btn-outline, .btn-danger-outline, .btn-glow-danger, .btn-primary, .btn-danger { position: relative; transition: transform .18s cubic-bezier(.2,.8,.2,1.2), box-shadow .25s ease, background .25s ease, border-color .25s ease, filter .25s ease; will-change: transform; } .btn:hover:not(:disabled), .btn-glow:hover:not(:disabled), .btn-paste:hover:not(:disabled), .btn-animated:hover:not(:disabled), .btn-action:hover:not(:disabled), .btn-primary:hover:not(:disabled), .btn-danger:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.07); } .btn:active:not(:disabled), .btn-glow:active:not(:disabled), .btn-paste:active:not(:disabled), .btn-animated:active:not(:disabled), .btn-action:active:not(:disabled), .btn-primary:active:not(:disabled), .btn-danger:active:not(:disabled) { transform: translateY(1px) scale(.99); transition-duration: .08s; } .btn-glow, .btn-primary { box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), inset 0 -2px 0 rgba(128,19,54,0.55), 0 6px 18px -6px rgba(238,69,64,0.55), 0 10px 24px -10px rgba(0,0,0,0.45); } .btn-glow:hover:not(:disabled), .btn-primary:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(128,19,54,0.65), 0 12px 28px -6px rgba(238,69,64,0.7), 0 16px 36px -12px rgba(0,0,0,0.55); } /* button glint sweep on hover */ .btn-glow, .btn-primary, .btn-action { overflow: hidden; } .btn-glow::before, .btn-primary::before, .btn-action::before { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255,255,255,0.35) 50%, transparent); transform: skewX(-18deg); transition: left .65s ease; pointer-events: none; } .btn-glow:hover::before, .btn-primary:hover::before, .btn-action:hover::before { left: 130%; } .btn-outline, .btn-paste { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.45), 0 6px 18px -8px rgba(0,0,0,0.55); } .btn-outline:hover:not(:disabled), .btn-paste:hover:not(:disabled) { border-color: rgba(238,69,64,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.45), 0 10px 24px -8px rgba(238,69,64,0.45); } .btn-danger, .btn-danger-outline, .btn-action { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -2px 0 rgba(60,0,0,0.6), 0 6px 18px -8px rgba(255,77,77,0.45); } /* ---------- ripple removed (caused white flash bug across pages) ---------- */ .lov-ripple { display: none !important; } .lov-click-pulse { animation: lov-click-pulse .22s ease; } @keyframes lov-click-pulse { 0% { transform: scale(1); } 50% { transform: scale(.97); } 100% { transform: scale(1); } } /* ---------- input focus glow (no layout shift, no zoom) ---------- */ input:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 0 0 2px rgba(238,69,64,0.55), 0 6px 22px -8px rgba(238,69,64,0.35) !important; transition: box-shadow .25s ease; } /* ---------- modal / popup pop-in ---------- */ .popup, .popup-container, .voice-modal, .voice-modal-content, .lov-modal, .modal-card { animation: lov-modal-pop .42s cubic-bezier(.2,.9,.25,1.25) both; transform-origin: center 30%; } @keyframes lov-modal-pop { 0% { opacity: 0; transform: perspective(900px) rotateX(-10deg) translateY(30px) scale(.94); filter: blur(6px); } 60% { opacity: 1; transform: perspective(900px) rotateX(2deg) translateY(-3px) scale(1.015); filter: blur(0); } 100% { opacity: 1; transform: perspective(900px) rotateX(0) translateY(0) scale(1); } } .modal-backdrop, .popup-backdrop, .lov-overlay { animation: lov-backdrop-in .32s ease both; backdrop-filter: blur(8px); } @keyframes lov-backdrop-in { from { opacity: 0; } to { opacity: 1; } } /* ---------- tab / panel swap ---------- */ .tab-pane.active, .step-pane.active, .tab-content.active { animation: lov-panel-swap .45s cubic-bezier(.2,.9,.25,1.1) both; } @keyframes lov-panel-swap { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } .tab-btn.active, .step-btn.active, .nav-tab.active { animation: lov-step-pop .35s cubic-bezier(.2,.9,.25,1.4) both; } @keyframes lov-step-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } } /* page fade-in — opacity only, NEVER transform on body (creates a containing block that breaks position:fixed modals on mobile) */ body { animation: lov-page-in .5s ease both; } @keyframes lov-page-in { from { opacity: 0; } to { opacity: 1; } } /* Bento / auto-rows grids: let rows size to content so cards never clip or overlap */ [class*="auto-rows-"], .bento-grid, .bento { grid-auto-rows: auto !important; } @media (max-width: 768px) { [class*="md:row-span-"], [class*="md:col-span-"] { grid-row: auto !important; grid-column: auto !important; } } /* Hard cap submit buttons so loading-state content can't balloon them, even if page CSS lacks max-height */ .btn-submit, .btn-primary, .btn-glow, form button[type="submit"] { max-height: 56px !important; min-height: 48px; line-height: 1.2 !important; overflow: hidden; contain: layout paint; } /* Ensure fixed modal overlays escape any ancestor transform/animation */ .modal-overlay, .modal-backdrop, [class*="modal-overlay"] { position: fixed !important; inset: 0 !important; z-index: 9999 !important; } /* link underline */ a:not(.btn):not(.btn-primary):not(.btn-glow):not(.nav-tab):not(.tab-btn) { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s ease; } a:not(.btn):not(.btn-primary):not(.btn-glow):not(.nav-tab):not(.tab-btn):hover { background-size: 100% 1px; } /* ============================================================ 3D HAMBURGER ============================================================ */ .hamburger { position: relative; padding: 10px; border-radius: 14px; transition: transform .3s cubic-bezier(.2,.9,.25,1.3), box-shadow .3s ease, background .3s ease; background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(0,0,0,0.25)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -2px 0 rgba(0,0,0,0.55), 0 6px 16px -6px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04); } .hamburger::before { content: ""; position: absolute; inset: -2px; border-radius: 16px; background: conic-gradient(from 0deg, transparent, rgba(238,69,64,0.55), transparent 35%); opacity: 0; z-index: -1; transition: opacity .35s ease; animation: lov-hamburger-spin 4s linear infinite; } .hamburger:hover { transform: translateY(-2px) scale(1.08) rotateZ(-3deg); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -2px 0 rgba(128,19,54,0.6), 0 12px 28px -8px rgba(238,69,64,0.6), 0 0 0 1px rgba(238,69,64,0.35); } .hamburger:hover::before { opacity: 1; } .hamburger:active { transform: translateY(2px) scale(.95); } .hamburger svg { filter: drop-shadow(0 2px 8px rgba(238,69,64,0.5)); transition: transform .5s cubic-bezier(.2,.9,.25,1.3), filter .3s ease; } .hamburger:hover svg { filter: drop-shadow(0 4px 14px rgba(238,69,64,0.85)) brightness(1.15); transform: rotate(8deg) scale(1.08); } @keyframes lov-hamburger-spin { to { transform: rotate(360deg); } } .hamburger .bar, .menu-toggle .bar, .nav-toggle .bar { transition: transform .35s cubic-bezier(.2,.9,.25,1.3), opacity .25s ease, background .25s; } .hamburger:hover .bar, .menu-toggle:hover .bar { background: linear-gradient(90deg, #ee4540, #ff7a6f); box-shadow: 0 0 8px rgba(238,69,64,0.6); } /* nav menu slide-in */ .nav-links.open, .mobile-menu.open, .mobile-nav.open { animation: lov-nav-in .45s cubic-bezier(.2,.9,.25,1.15) forwards; } .nav-links.open a, .nav-links.open button, .nav-links.open [role="button"], .mobile-menu.open a, .mobile-menu.open button, .mobile-nav.open a, .mobile-nav.open button { pointer-events: auto !important; } @keyframes lov-nav-in { from { opacity: 0; transform: translateX(20px) scale(.98); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } .nav-links a:hover, .mobile-menu a:hover { transform: translateX(6px); transition: transform .25s ease; } /* glass cursor sheen */ .glass-panel, .stat-card { position: relative; overflow: hidden; } .glass-panel::after, .stat-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(238,69,64,0.10), transparent 60%); opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: 0; } .glass-panel:hover::after, .stat-card:hover::after { opacity: 1; } .glass-panel > *, .stat-card > * { position: relative; z-index: 1; } .stat-card { transition: transform .3s cubic-bezier(.2,.9,.25,1.2), box-shadow .3s ease; } .stat-card:hover { transform: translateY(-4px) scale(1.01); } /* ============================================================ 3D GLASS TOAST NOTIFICATIONS ============================================================ */ .notification-toast { pointer-events: none; } .notification-toast > div { pointer-events: auto; } .notification-toast #notification-toast-container > div:first-child { background: linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 40%, rgba(13,17,23,0.55)) !important; backdrop-filter: blur(28px) saturate(200%) !important; border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 18px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.4), 0 20px 50px -10px rgba(0,0,0,0.7), 0 0 30px rgba(238,69,64,0.2) !important; position: relative !important; overflow: hidden !important; padding: 16px 18px !important; transform-style: preserve-3d; animation: lov-toast-float 3.5s ease-in-out infinite; } .notification-toast #notification-toast-container > div:first-child::before { content: ""; position: absolute; top: 0; left: -150%; width: 60%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255,255,255,0.18) 40%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.18) 60%, transparent); transform: skewX(-18deg); animation: lov-toast-shimmer 2.8s ease-in-out infinite; pointer-events: none; } .notification-toast #notification-toast-container { animation: lov-toast-pop .55s cubic-bezier(.2,.9,.25,1.35) both; } @keyframes lov-toast-pop { 0% { transform: perspective(900px) translateX(140%) rotateY(-25deg) scale(.85) !important; opacity: 0 !important; } 60% { transform: perspective(900px) translateX(-8px) rotateY(4deg) scale(1.03) !important; opacity: 1 !important; } 100% { transform: perspective(900px) translateX(0) rotateY(0) scale(1) !important; opacity: 1 !important; } } @keyframes lov-toast-shimmer { 0% { left: -150%; } 60% { left: 150%; } 100% { left: 150%; } } @keyframes lov-toast-float { 0%, 100% { transform: translateY(0) rotateX(0deg); } 50% { transform: translateY(-3px) rotateX(1deg); } } .notification-toast.toast-success #notification-toast-container > div:first-child { box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.4), 0 20px 50px -10px rgba(0,0,0,0.7), 0 0 30px rgba(0,230,118,0.35) !important; } .notification-toast.toast-error #notification-toast-container > div:first-child { box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.4), 0 20px 50px -10px rgba(0,0,0,0.7), 0 0 30px rgba(238,69,64,0.4) !important; } .notification-toast svg { animation: lov-toast-icon .9s cubic-bezier(.2,.9,.25,1.4) both; filter: drop-shadow(0 2px 6px currentColor); } @keyframes lov-toast-icon { 0% { transform: scale(0) rotate(-180deg); opacity: 0; } 60% { transform: scale(1.25) rotate(15deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } } } /* end prefers-reduced-motion */ /* ============================================================ BUY CREDITS / ORDER PAGE — restore red TeamAlpha style ============================================================ */ body.buy-order-page, body:has(#monthly-plans-grid), body:has(#credit-plans-grid), body:has(#paymentModal) { --bg-deep: #0B0D11 !important; --bg-gradient: radial-gradient(ellipse at 50% 0%, #2D142C 0%, #0B0D11 70%) !important; --glass-bg: rgba(17, 21, 28, 0.78) !important; --glass-border: rgba(238, 69, 64, 0.25) !important; --glass-highlight: rgba(238, 69, 64, 0.12) !important; --neon-cyan: #EE4540 !important; --neon-violet: #C72C41 !important; --neon-purple: #801336 !important; --neon-green: #ff7a6f !important; --neon-warning: #ffd166 !important; --card-bg: rgba(17, 21, 28, 0.82) !important; --card-hover: rgba(45, 20, 44, 0.92) !important; } body.buy-order-page::before, body:has(#monthly-plans-grid)::before { background: radial-gradient(circle, rgba(238,69,64,0.24) 0%, transparent 70%) !important; } body.buy-order-page::after, body:has(#monthly-plans-grid)::after { background: radial-gradient(circle, rgba(128,19,54,0.28) 0%, transparent 70%) !important; } body.buy-order-page .page-title, body:has(#monthly-plans-grid) .page-title { background: linear-gradient(135deg, #ffffff 0%, #ffd1cc 28%, #EE4540 58%, #C72C41 82%, #ffffff 100%) !important; background-size: 220% 220% !important; -webkit-background-clip: text !important; background-clip: text !important; filter: drop-shadow(0 0 28px rgba(238,69,64,0.34)) !important; } body.buy-order-page .plan-card, body.buy-order-page .modal-content, body.buy-order-page .payment-info-box, body:has(#monthly-plans-grid) .plan-card, body:has(#monthly-plans-grid) .modal-content, body:has(#monthly-plans-grid) .payment-info-box { background: linear-gradient(145deg, rgba(45,20,44,0.88), rgba(11,13,17,0.88)) !important; border-color: rgba(238,69,64,0.26) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(128,19,54,0.35), 0 24px 60px -28px rgba(238,69,64,0.5), 0 18px 46px -30px rgba(0,0,0,0.9) !important; } body.buy-order-page .plan-card::before, body:has(#monthly-plans-grid) .plan-card::before { height: 3px !important; background: linear-gradient(90deg, transparent, #EE4540, #C72C41, #801336, transparent) !important; opacity: .85 !important; } body.buy-order-page .plan-card:hover, body:has(#monthly-plans-grid) .plan-card:hover { transform: translateY(-8px) perspective(900px) rotateX(2deg) !important; border-color: rgba(238,69,64,0.54) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 28px 80px -30px rgba(238,69,64,0.78), 0 20px 54px -30px rgba(0,0,0,0.95) !important; } body.buy-order-page .tab-btn.active, body.buy-order-page .btn-glow, body.buy-order-page .nav-item.active, body:has(#monthly-plans-grid) .tab-btn.active, body:has(#monthly-plans-grid) .btn-glow, body:has(#monthly-plans-grid) .nav-item.active { background: linear-gradient(135deg, #EE4540 0%, #C72C41 52%, #801336 100%) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -2px 0 rgba(81,10,50,0.72), 0 12px 32px -12px rgba(238,69,64,0.75) !important; } body.buy-order-page .btn-glow:hover, body.buy-order-page .tab-btn:hover, body.buy-order-page .menu-toggle-btn:hover, body.buy-order-page .copy-btn:hover, body:has(#monthly-plans-grid) .btn-glow:hover, body:has(#monthly-plans-grid) .tab-btn:hover, body:has(#monthly-plans-grid) .menu-toggle-btn:hover, body:has(#monthly-plans-grid) .copy-btn:hover { background: linear-gradient(135deg, #ff6b63 0%, #EE4540 48%, #C72C41 100%) !important; color: #fff !important; border-color: rgba(238,69,64,0.7) !important; box-shadow: 0 14px 34px -12px rgba(238,69,64,0.85) !important; } body.buy-order-page .plan-icon, body.buy-order-page .brand-logo i, body.buy-order-page .spinner, body.buy-order-page .upload-icon, body:has(#monthly-plans-grid) .plan-icon, body:has(#monthly-plans-grid) .brand-logo i, body:has(#monthly-plans-grid) .spinner, body:has(#monthly-plans-grid) .upload-icon { color: #EE4540 !important; filter: drop-shadow(0 0 15px rgba(238,69,64,0.48)) !important; } @media (prefers-reduced-motion: no-preference) { body.buy-order-page .plan-card, body:has(#monthly-plans-grid) .plan-card { animation: lov-order-card-in .55s cubic-bezier(.2,.9,.25,1.18) both; } body.buy-order-page .plan-card:nth-child(2), body:has(#monthly-plans-grid) .plan-card:nth-child(2) { animation-delay: .06s; } body.buy-order-page .plan-card:nth-child(3), body:has(#monthly-plans-grid) .plan-card:nth-child(3) { animation-delay: .12s; } body.buy-order-page .plan-card:nth-child(4), body:has(#monthly-plans-grid) .plan-card:nth-child(4) { animation-delay: .18s; } body.buy-order-page .modal-overlay[style*="flex"] .modal-content, body:has(#monthly-plans-grid) .modal-overlay[style*="flex"] .modal-content { animation: lov-modal-pop .42s cubic-bezier(.2,.9,.25,1.25) both; } @keyframes lov-order-card-in { from { opacity: 0; transform: translateY(28px) perspective(900px) rotateX(-7deg); filter: blur(8px); } to { opacity: 1; transform: translateY(0) perspective(900px) rotateX(0); filter: blur(0); } } } /* ============================================================ v5.3 — Tab overflow, order card readability, page transitions ============================================================ */ /* Horizontal-scroll tab strips so labels never get clipped on mobile. Targets common tab-strip wrappers without changing markup. */ .tabs, .tab-bar, .tabs-row, .nav-tabs, .studio-tabs, [role="tablist"], .tab-list, .tab-buttons { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; gap: .5rem; padding-bottom: 4px; } .tabs::-webkit-scrollbar, .tab-bar::-webkit-scrollbar, .nav-tabs::-webkit-scrollbar, [role="tablist"]::-webkit-scrollbar, .tab-list::-webkit-scrollbar, .tab-buttons::-webkit-scrollbar { display: none; } .tabs > *, .tab-bar > *, .nav-tabs > *, [role="tablist"] > *, .tab-list > *, .tab-buttons > *, .studio-tabs > * { flex: 0 0 auto !important; scroll-snap-align: start; white-space: nowrap; } /* Order / credit-order card readability (my_orders.html mobile) */ @media (max-width: 640px) { .order-card, .credit-order, .order-row, .order-item, .my-order-card, .order-history-item { padding: 18px 16px !important; margin-bottom: 14px !important; line-height: 1.55 !important; } .order-card *, .credit-order *, .order-row * { word-break: break-word; } .order-card h3, .order-card h4, .credit-order h3, .credit-order h4 { font-size: 1.05rem !important; line-height: 1.35 !important; margin-bottom: 6px !important; } .order-card p, .order-card li, .order-card div, .credit-order p, .credit-order li, .credit-order div { font-size: .95rem !important; } .order-card .meta-row, .credit-order .meta-row, .order-card ul, .credit-order ul { display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 8px 0; list-style: none; } } /* Order card: subtle inner divider + chip spacing for clarity */ .order-card, .credit-order, .order-row { border-radius: 16px; } .order-card .status, .order-card .badge, .credit-order .status, .credit-order .badge, .order-row .status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; letter-spacing: .02em; margin-top: 8px; } /* Page transition: smooth fade-out when navigating from hamburger / nav links */ html.lov-page-leaving body { animation: lov-page-out .32s ease forwards !important; } @keyframes lov-page-out { from { opacity: 1; filter: blur(0); transform: translateY(0); } to { opacity: 0; filter: blur(4px); transform: translateY(-6px); } } /* Universal mobile-friendly typography polish */ @media (max-width: 640px) { body { letter-spacing: .005em; } .nav-links a, .mobile-menu a, .mobile-nav a { padding: 14px 16px !important; font-size: 1rem !important; } } /* ============================================================ v5.7 — Sidebar nav icon revamp (global, all pages) Wraps every .nav-item in a glossy circular badge with gradient, glow, hover lift, and active pulse. Plus a staggered slide-in animation when the sidebar opens. ============================================================ */ .sidebar .nav-item { position: relative; isolation: isolate; } .sidebar .nav-item i { display: inline-flex !important; align-items: center; justify-content: center; width: 38px !important; height: 38px !important; min-width: 38px; font-size: 1rem !important; border-radius: 12px; background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 10px rgba(0,0,0,0.25); color: var(--text-secondary); transition: transform 0.35s cubic-bezier(0.2,0.9,0.4,1.1), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; position: relative; overflow: hidden; } body.light .sidebar .nav-item i { background: linear-gradient(135deg, rgba(0,0,0,0.04), rgba(0,0,0,0.01)); border-color: rgba(0,0,0,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.06); } .sidebar .nav-item i::before { position: relative; z-index: 2; transition: transform 0.35s cubic-bezier(0.2,0.9,0.4,1.1); } .sidebar .nav-item i::after { content: ''; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0deg, rgba(238,69,64,0.55) 60deg, transparent 120deg); opacity: 0; transition: opacity 0.4s ease; animation: lov-nav-spin 4s linear infinite; z-index: 1; } @keyframes lov-nav-spin { to { transform: rotate(360deg); } } /* Hover state */ .sidebar .nav-item:hover i { transform: translateY(-2px) scale(1.06); color: var(--accent); border-color: rgba(238,69,64,0.45); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 18px rgba(238,69,64,0.28), 0 0 0 1px rgba(238,69,64,0.2); } .sidebar .nav-item:hover i::before { transform: scale(1.12) rotate(-6deg); } .sidebar .nav-item:hover i::after { opacity: 0.35; } /* Active state */ .sidebar .nav-item.active i { background: linear-gradient(135deg, var(--accent), #b81e1a); color: #fff !important; border-color: rgba(255,255,255,0.18); box-shadow: 0 0 0 1px rgba(238,69,64,0.45), 0 6px 20px rgba(238,69,64,0.55), inset 0 1px 0 rgba(255,255,255,0.25); animation: lov-nav-pulse 2.4s ease-in-out infinite; } .sidebar .nav-item.active i::after { opacity: 0.5; } @keyframes lov-nav-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(238,69,64,0.45), 0 6px 20px rgba(238,69,64,0.55), inset 0 1px 0 rgba(255,255,255,0.25); } 50% { box-shadow: 0 0 0 1px rgba(238,69,64,0.7), 0 10px 28px rgba(238,69,64,0.75), inset 0 1px 0 rgba(255,255,255,0.3); } } /* Preserve brand colors for Telegram / Messenger icons but inside our badge */ .sidebar .nav-item i.fa-telegram { color: #0088cc !important; } .sidebar .nav-item i.fa-facebook-messenger { color: #00B2FF !important; } .sidebar .nav-item:hover i.fa-telegram, .sidebar .nav-item:hover i.fa-facebook-messenger { filter: drop-shadow(0 0 6px currentColor); } /* Press feedback */ .sidebar .nav-item:active i { transform: translateY(0) scale(0.94); transition-duration: 0.12s; } /* Staggered slide-in when sidebar opens */ .sidebar.active .nav-item { animation: lov-nav-in 0.5s cubic-bezier(0.2,0.9,0.4,1.1) both; } .sidebar.active .nav-item:nth-child(1) { animation-delay: 0.05s; } .sidebar.active .nav-item:nth-child(2) { animation-delay: 0.10s; } .sidebar.active .nav-item:nth-child(3) { animation-delay: 0.15s; } .sidebar.active .nav-item:nth-child(4) { animation-delay: 0.20s; } .sidebar.active .nav-item:nth-child(5) { animation-delay: 0.25s; } .sidebar.active .nav-item:nth-child(6) { animation-delay: 0.30s; } .sidebar.active .nav-item:nth-child(7) { animation-delay: 0.35s; } .sidebar.active .nav-item:nth-child(8) { animation-delay: 0.40s; } .sidebar.active .nav-item:nth-child(9) { animation-delay: 0.45s; } @keyframes lov-nav-in { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .sidebar .nav-item i, .sidebar .nav-item.active i, .sidebar.active .nav-item { animation: none !important; transition: none !important; } } /* ============================================================ DENIO UI REVAMP v5.8 — fresh hamburger icon style, revamped processing animation, clean global micro-effects. Applies sitewide (loaded on every page). ============================================================ */ /* -- 5.8.1 Sidebar nav icons: hex-glass with neon stroke -- */ .sidebar .nav-item i { /* Override v5.7 circular badge */ width: 40px !important; height: 40px !important; min-width: 40px; border-radius: 14px; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.10), transparent 55%), linear-gradient(145deg, rgba(238,69,64,0.10), rgba(20,22,28,0.55)); border: 1px solid rgba(255,255,255,0.10); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -8px 14px -10px rgba(238,69,64,0.45), 0 6px 14px rgba(0,0,0,0.35); -webkit-mask-image: none; } body.light .sidebar .nav-item i { background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7), transparent 55%), linear-gradient(145deg, rgba(238,69,64,0.08), rgba(255,255,255,0.85)); border-color: rgba(0,0,0,0.10); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -8px 14px -10px rgba(238,69,64,0.25), 0 6px 14px rgba(0,0,0,0.08); } /* replace conic sweep with a soft animated stroke ring */ .sidebar .nav-item i::after { content: ''; position: absolute; inset: -2px; border-radius: 16px; padding: 1px; background: conic-gradient(from var(--lov-ang, 0deg), rgba(238,69,64,0) 0deg, rgba(238,69,64,0.75) 80deg, rgba(255,180,90,0.55) 140deg, rgba(238,69,64,0) 220deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; animation: lov-ring-spin 5s linear infinite; z-index: 1; } @property --lov-ang { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes lov-ring-spin { to { --lov-ang: 360deg; } } /* Hover: icon pops, stroke ring lights up, subtle tilt */ .sidebar .nav-item:hover i { transform: translateY(-2px) rotate(-3deg) scale(1.08); color: #fff; border-color: rgba(238,69,64,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -10px 18px -10px rgba(238,69,64,0.7), 0 10px 24px rgba(238,69,64,0.35); } .sidebar .nav-item:hover i::after { opacity: 0.95; } .sidebar .nav-item:hover i::before { transform: scale(1.18) rotate(6deg); } /* Active: filled red gradient + soft pulse halo (cleaner than v5.7) */ .sidebar .nav-item.active i { background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.35), transparent 55%), linear-gradient(145deg, #ff5a52, #b81e1a); border-color: rgba(255,255,255,0.25); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 0 1px rgba(238,69,64,0.55), 0 10px 26px rgba(238,69,64,0.55); animation: lov-icon-halo 2.6s ease-in-out infinite; } .sidebar .nav-item.active i::after { opacity: 1; } @keyframes lov-icon-halo { 0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 0 1px rgba(238,69,64,0.55), 0 10px 26px rgba(238,69,64,0.55); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 0 0 1px rgba(238,69,64,0.85), 0 14px 34px rgba(238,69,64,0.75); } } /* Tighter, snappier slide-in (cleaner + faster) */ .sidebar.active .nav-item { animation: lov-nav-in 0.38s cubic-bezier(0.2,0.9,0.4,1.1) both; } .sidebar.active .nav-item:nth-child(n) { animation-delay: calc(0.04s * var(--i, 1)); } .sidebar.active .nav-item:nth-child(1){--i:1}.sidebar.active .nav-item:nth-child(2){--i:2} .sidebar.active .nav-item:nth-child(3){--i:3}.sidebar.active .nav-item:nth-child(4){--i:4} .sidebar.active .nav-item:nth-child(5){--i:5}.sidebar.active .nav-item:nth-child(6){--i:6} .sidebar.active .nav-item:nth-child(7){--i:7}.sidebar.active .nav-item:nth-child(8){--i:8} .sidebar.active .nav-item:nth-child(9){--i:9}.sidebar.active .nav-item:nth-child(10){--i:10} /* Sidebar text gains a subtle gradient on hover */ .sidebar .nav-item span { transition: color .25s ease, transform .25s ease, letter-spacing .25s ease; } .sidebar .nav-item:hover span { color: #fff; transform: translateX(2px); letter-spacing: 0.4px; } /* -- 5.8.2 Revamped processing animation (index.html loader) -- */ /* Outer neural orbit: dual ring, counter-rotating, with comet dot */ .blob-loader-container { perspective: 600px; } .neural-orbit { width: 160px !important; height: 160px !important; border: 1px dashed rgba(255,255,255,0.10) !important; border-top-color: rgba(238,69,64,0.55) !important; border-bottom-color: rgba(255,170,90,0.45) !important; box-shadow: 0 0 30px rgba(238,69,64,0.12), inset 0 0 20px rgba(238,69,64,0.08); animation: orbit-spin 6s linear infinite !important; } .blob-loader-container::before, .blob-loader-container::after { content: ''; position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; } .blob-loader-container::before { width: 195px; height: 195px; margin: -97.5px 0 0 -97.5px; border: 1px solid transparent; background: conic-gradient(from 0deg, transparent 0 65%, rgba(238,69,64,0.85) 78%, transparent 90%) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: orbit-spin 4s linear infinite reverse; filter: drop-shadow(0 0 6px rgba(238,69,64,0.55)); } .blob-loader-container::after { width: 230px; height: 230px; margin: -115px 0 0 -115px; border: 1px dashed rgba(255,255,255,0.06); animation: orbit-spin 14s linear infinite; } @media (max-width: 768px) { .neural-orbit { width: 124px !important; height: 124px !important; } .blob-loader-container::before { width: 152px; height: 152px; margin: -76px 0 0 -76px; } .blob-loader-container::after { width: 180px; height: 180px; margin: -90px 0 0 -90px; } } /* Inner orb: stronger glow + rotating sheen */ .blob-loader { box-shadow: 0 0 40px rgba(238,69,64,0.45), 0 0 80px rgba(238,69,64,0.18), inset 0 0 20px rgba(0,0,0,0.75) !important; } .blob-loader::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 70%, rgba(255,255,255,0.18) 82%, transparent 92%); mix-blend-mode: screen; animation: orbit-spin 3s linear infinite; pointer-events: none; } .blob-percentage { background: linear-gradient(180deg, #fff 0%, #ffd9d6 65%, #ff9a8f 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55)); } /* Step row: gradient halo when active, smoother transition */ .process-step.active { background: linear-gradient(90deg, rgba(238,69,64,0.10), rgba(16,20,26,0.0)) !important; border-left-width: 3px !important; box-shadow: 0 6px 20px rgba(0,0,0,0.5), inset 14px 0 18px -14px rgba(238,69,64,0.35) !important; } /* Animated tri-color shimmer progress bar with moving stripes */ .progress-track { height: 5px !important; background: rgba(255,255,255,0.05) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.6); } .progress-fill { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 8px, rgba(255,255,255,0) 8px 16px), linear-gradient(90deg, #ff5a52 0%, #ffae6b 55%, #ff5a52 100%) !important; background-size: 22px 22px, 200% 100%; box-shadow: 0 0 10px rgba(238,69,64,0.65), 0 0 18px rgba(238,69,64,0.35) !important; animation: lov-bar-stripes 1.1s linear infinite, lov-bar-shine 2.4s ease-in-out infinite !important; } .process-step.active .progress-fill { animation: fill-bar 3s ease-in-out forwards, lov-bar-stripes 1.1s linear infinite, lov-bar-shine 2.4s ease-in-out infinite !important; } @keyframes lov-bar-stripes { from { background-position: 0 0, 0 0; } to { background-position: 22px 0, 0 0; } } @keyframes lov-bar-shine { 0%,100% { background-position: 0 0, 0 0; } 50% { background-position: 22px 0, 100% 0; } } /* Cube cluster: glow trail + smoother pulse */ .loader-cubes { filter: drop-shadow(0 0 4px rgba(238,69,64,0.6)); animation: cube-rotate 1.8s cubic-bezier(.6,.2,.1,1) infinite !important; } .cube-step { background: linear-gradient(145deg, #ff7a72, #b81e1a) !important; box-shadow: 0 0 6px rgba(238,69,64,0.7), inset 0 1px 0 rgba(255,255,255,0.35) !important; } /* Terminal: scanning highlight + breathing dot */ .ai-terminal { position: relative; overflow: hidden; border-color: rgba(238,69,64,0.18) !important; } .ai-terminal::after { content: ''; position: absolute; top: 0; left: -40%; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, rgba(238,69,64,0.18), transparent); animation: lov-term-scan 3.2s linear infinite; pointer-events: none; } @keyframes lov-term-scan { to { left: 140%; } } .terminal-dot { box-shadow: 0 0 10px var(--accent), 0 0 20px rgba(238,69,64,0.45) !important; animation: lov-dot-breathe 1.6s ease-in-out infinite !important; } @keyframes lov-dot-breathe { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .55; } } /* -- 5.8.3 Generic processing/spinner upgrades (other pages) -- */ .spinner { border-width: 3px !important; border-color: rgba(255,255,255,0.08) !important; border-top-color: var(--accent, #ee4540) !important; border-right-color: rgba(238,69,64,0.45) !important; box-shadow: 0 0 16px rgba(238,69,64,0.35); animation: spin 0.85s cubic-bezier(.6,.1,.3,1) infinite !important; } .fa-spinner.fa-spin { filter: drop-shadow(0 0 6px rgba(238,69,64,0.55)); } /* -- 5.8.4 Clean, fast site-wide micro effects -- */ /* Cards lift slightly on hover (only when not a button/grid item) */ .glass-panel, .stat-card, .plan-card, .feature-card, .order-card, .download-card { transition: transform .35s cubic-bezier(.2,.9,.3,1.1), box-shadow .35s ease, border-color .35s ease; will-change: transform; } .glass-panel:hover, .stat-card:hover, .plan-card:hover, .feature-card:hover, .order-card:hover, .download-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.35), 0 0 0 1px rgba(238,69,64,0.18); } /* Soft sweep on primary buttons (no layout impact) */ .btn-glow, .btn-primary, .btn-submit, .btn-animated { position: relative; overflow: hidden; } .btn-glow::after, .btn-primary::after, .btn-submit::after, .btn-animated::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(110deg, transparent, rgba(255,255,255,0.28), transparent); transform: skewX(-18deg); transition: left .8s cubic-bezier(.4,.0,.2,1); pointer-events: none; } .btn-glow:hover::after, .btn-primary:hover::after, .btn-submit:hover::after, .btn-animated:hover::after { left: 130%; } /* Page transition fade in (kept fast) */ .lov-page-leaving { opacity: 0; transition: opacity .25s ease; } body { animation: lov-page-in .35s ease both; } @keyframes lov-page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .blob-loader::after, .blob-loader-container::before, .blob-loader-container::after, .ai-terminal::after, .terminal-dot, .progress-fill, .loader-cubes, .sidebar .nav-item i::after, .sidebar .nav-item.active i, body { animation: none !important; } }