Parent:

auto-delays child [data-animate] ===================================================================== */ /* --- Initial Hidden State --- */ [data-animate] { opacity: 0; /* will-change moved to .is-visible — setting it on ALL hidden elements forces mobile GPU to allocate compositor layers for every single one, exhausting memory and causing scroll frame drops on low-end devices. */ } /* --- Triggered: .is-visible added by IntersectionObserver --- */ [data-animate].is-visible { will-change: opacity, transform; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /* Fade Slide Up (most common — like OrderConfirmation) */ [data-animate="fadeSlideUp"].is-visible { animation: anim-fadeSlideUp 0.6s both; } /* Fade Slide Right (for RTL: slides from left) */ [data-animate="fadeSlideRight"].is-visible { animation: anim-fadeSlideRight 0.6s both; } /* Scale In (icons, badges) */ [data-animate="scaleIn"].is-visible { animation: anim-scaleIn 0.5s both; } /* Bounce In (hero elements, CTAs) */ [data-animate="bounceIn"].is-visible { animation: anim-bounceIn 0.7s both; } /* Fade In (subtle, no transform) */ [data-animate="fadeIn"].is-visible { animation: anim-fadeIn 0.5s both; } /* --- Stagger Children: auto-delay for each child --- */ .stagger-children>[data-animate]:nth-child(1) { animation-delay: 0.05s; } .stagger-children>[data-animate]:nth-child(2) { animation-delay: 0.1s; } .stagger-children>[data-animate]:nth-child(3) { animation-delay: 0.15s; } .stagger-children>[data-animate]:nth-child(4) { animation-delay: 0.2s; } .stagger-children>[data-animate]:nth-child(5) { animation-delay: 0.25s; } .stagger-children>[data-animate]:nth-child(6) { animation-delay: 0.3s; } .stagger-children>[data-animate]:nth-child(7) { animation-delay: 0.35s; } .stagger-children>[data-animate]:nth-child(8) { animation-delay: 0.4s; } .stagger-children>[data-animate]:nth-child(9) { animation-delay: 0.45s; } .stagger-children>[data-animate]:nth-child(10) { animation-delay: 0.5s; } .stagger-children>[data-animate]:nth-child(n+11) { animation-delay: 0.55s; } /* --- Manual Delay Classes (for fine-tuning) --- */ [data-delay="1"] { animation-delay: 0.1s !important; } [data-delay="2"] { animation-delay: 0.2s !important; } [data-delay="3"] { animation-delay: 0.3s !important; } [data-delay="4"] { animation-delay: 0.4s !important; } [data-delay="5"] { animation-delay: 0.5s !important; } [data-delay="6"] { animation-delay: 0.6s !important; } [data-delay="7"] { animation-delay: 0.7s !important; } [data-delay="8"] { animation-delay: 0.8s !important; } /* --- Keyframes --- */ @keyframes anim-fadeSlideUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes anim-fadeSlideRight { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } } @keyframes anim-scaleIn { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } } @keyframes anim-bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.08); } 70% { transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } @keyframes anim-fadeIn { from { opacity: 0; } to { opacity: 1; } } /* --- Accessibility: Reduced Motion --- */ @media (prefers-reduced-motion: reduce) { [data-animate] { opacity: 1 !important; animation: none !important; transform: none !important; } } /* ===================================================================== Theme Switch — Instant Synchronized Change (Zero Lag) Disables ALL existing transitions during dark/light toggle so every element changes color at the exact same instant. Applied briefly by JS. ===================================================================== */ .theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition-duration: 0s !important; transition-delay: 0s !important; } /* ===================================================================== Bootstrap Compatibility Layer To prevent layout breaking after removing Bootstrap until Tailwind handles everything ===================================================================== */ .d-none { display: none !important; } .d-flex { display: flex !important; } .d-block { display: block !important; } .d-inline-block { display: inline-block !important; } .d-inline { display: inline !important; } .align-items-center { align-items: center !important; } .justify-content-center { justify-content: center !important; } .justify-content-between { justify-content: space-between !important; } .text-center { text-align: center !important; } .text-start { text-align: right !important; } /* RTL mapping */ .text-end { text-align: left !important; } /* RTL mapping */ .text-muted { color: var(--text-muted, #9ca3af) !important; } .fw-bold { font-weight: bold !important; } .position-relative { position: relative !important; } .position-absolute { position: absolute !important; } .w-100 { width: 100% !important; } .h-100 { height: 100% !important; } /* Alerts */ .alert { padding: 1rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.75rem; background: rgba(255,255,255,0.03); backdrop-filter: blur(10px); font-weight: 500; } .alert-warning { color: #eab308; background-color: rgba(234, 179, 8, 0.1); border-color: rgba(234, 179, 8, 0.2); } .alert-success { color: #10b981; background-color: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.2); } .alert-danger { color: #ef4444; background-color: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2); } /* Grid & Container — Modern fluid (replaces old Bootstrap breakpoints) */ .container { width: 100%; margin-right: auto; margin-left: auto; padding-right: 1rem; padding-left: 1rem; } .container-fluid { width: 100%; padding-right: 1rem; padding-left: 1rem; margin-right: auto; margin-left: auto; } @media (min-width: 640px) { .container { padding-right: 1.5rem; padding-left: 1.5rem; } } @media (min-width: 1024px) { .container { padding-right: 2rem; padding-left: 2rem; } } @media (min-width: 1400px) { .container { max-width: 1400px; } } /* Dropdowns */ .dropdown-menu { position: absolute; top: 100%; right: 0; z-index: 1000; display: none; min-width: 10rem; padding: 0.5rem 0; margin: 0.5rem 0 0; background-color: hsl(var(--card)); border: 1px solid hsl(var(--border) / 0.5); border-radius: 1rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); list-style: none; backdrop-filter: blur(12px); } .dropdown-menu.show { display: block; } .share-hover-container.open .dropdown-menu { display: block; animation: anim-fadeSlideUp 0.3s forwards; } .dropdown-menu li { padding: 4px 8px; } .dropdown-menu a { display: flex; align-items: center; gap: 8px; padding: 0.5rem 1rem; color: hsl(var(--foreground)); border-radius: 0.5rem; transition: background-color 0.2s; } .dropdown-menu a:hover { background-color: hsl(var(--muted)); } /* Flexbox Extras */ .flex-column { flex-direction: column !important; } .flex-wrap { flex-wrap: wrap !important; } .flex-row { flex-direction: row !important; } /* Border & Shape */ .rounded-circle { border-radius: 50% !important; } .overflow-hidden { overflow: hidden !important; } /* Text */ .text-danger { color: #ef4444 !important; } .text-secondary { color: var(--text-muted, #9ca3af) !important; } .small { font-size: 0.875em !important; } .fs-2 { font-size: clamp(1.75rem, 2.5vw, 2rem) !important; } .fs-5 { font-size: 1.25rem !important; } .fs-6 { font-size: 1rem !important; } .fw-semibold { font-weight: 600 !important; } .text-decoration-none { text-decoration: none !important; } .text-primary { color: #0ea5e9 !important; } /* Accessibility */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Margins (Bootstrap) */ .me-1 { margin-inline-end: 0.25rem !important; } .me-2 { margin-inline-end: 0.5rem !important; } .ms-1 { margin-inline-start: 0.25rem !important; } .ms-2 { margin-inline-start: 0.5rem !important; } /* Z-Index helpers */ .z-index-2 { z-index: 2 !important; } /* Bootstrap Grid Compat */ .row { display: flex; flex-wrap: wrap; margin-right: -0.75rem; margin-left: -0.75rem; } .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: 0.75rem; padding-left: 0.75rem; box-sizing: border-box; } .col-12 { flex: 0 0 auto; width: 100%; } .col-6 { flex: 0 0 auto; width: 50%; } .g-3 { gap: 1rem; } .g-4 { gap: 1.5rem; } @media (min-width: 576px) { .col-sm-6 { flex: 0 0 auto; width: 50%; } } @media (min-width: 768px) { .col-md-6 { flex: 0 0 auto; width: 50%; } } @media (min-width: 1200px) { .col-xl-6 { flex: 0 0 auto; width: 50%; } } /* Spinner (was Bootstrap spinner-border) */ .spinner-border { display: inline-block; width: 1rem; height: 1rem; vertical-align: -.125em; border: .2em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spinner-border-anim .65s linear infinite; } .spinner-border-sm { width: .75rem; height: .75rem; border-width: .15em; } @keyframes spinner-border-anim { to { transform: rotate(360deg); } } /* ===== Search Input: Centered Placeholder ===== */ #search-input-desktop::placeholder, #search-input-mobile::placeholder { text-align: center !important; color: #94a3b8 !important; opacity: 1 !important; } html.dark-theme #search-input-desktop::placeholder, html.dark-theme #search-input-mobile::placeholder { color: #64748b !important; opacity: 1 !important; } #search-input-desktop, #search-input-mobile { text-align: right; color: var(--text-primary) !important; } /* ===== Desktop Search Input: Kill all borders from global rules ===== */ #search-input-desktop, #search-input-desktop:focus, #search-input-desktop:active { border: none !important; border-width: 0 !important; border-color: transparent !important; box-shadow: none !important; outline: none !important; border-radius: 0 !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* ===== Custom Premium Scrollbar ===== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(14, 165, 233, 0.5); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; } .dark-theme ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.2); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; } .dark-theme ::-webkit-scrollbar-thumb:hover { background: rgba(14, 165, 233, 0.6); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; } /* ===== Glass Input, Textarea & Custom Dropdown Styling ===== */ .pf-glass-input, .pf-glass-textarea { width: 100%; border-radius: 0.75rem; border: 1px solid hsl(var(--border) / 0.5); padding: 0.875rem 1rem; font-size: 0.85rem; transition: all 0.3s ease; outline: none; background: #f1f5f9; color: hsl(var(--foreground)); } html.dark-theme .pf-glass-input, html.dark-theme .pf-glass-textarea { background: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #e2e8f0 !important; } .pf-glass-input:focus, .pf-glass-textarea:focus { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15), 0 0 20px hsl(var(--primary) / 0.1); background: #ffffff; } html.dark-theme .pf-glass-input:focus, html.dark-theme .pf-glass-textarea:focus { background: rgba(255, 255, 255, 0.05) !important; } .pf-glass-input option, .pf-glass-textarea option { background-color: var(--bg-secondary, #131a2b); color: var(--text-primary, #e2e8f0); } /* ===== Support Tickets ID Badge Styling ===== */ .ticket-id-badge { background-color: rgba(30, 41, 59, 0.08); border: 1px solid rgba(30, 41, 59, 0.15); color: #475569; } html.dark-theme .ticket-id-badge { background-color: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #94a3b8 !important; } /* ===== Support Tickets Bubble Styling ===== */ .ticket-bubble-user { background-color: #f1f5f9; /* light slate-100 */ border: 1px solid #e2e8f0; /* light slate-200 */ color: #1e293b; /* text-slate-800 */ } html.dark-theme .ticket-bubble-user { background-color: rgba(30, 41, 59, 0.4) !important; border-color: rgba(255, 255, 255, 0.08) !important; color: #f1f5f9 !important; } .ticket-bubble-admin { background-color: rgba(59, 130, 246, 0.06); border: 1px solid rgba(59, 130, 246, 0.15); color: #1e3a8a; } html.dark-theme .ticket-bubble-admin { background-color: rgba(14, 165, 233, 0.08) !important; border-color: rgba(14, 165, 233, 0.2) !important; color: #38bdf8 !important; } /* ===== SVG Icons Base Styles ===== */ /* Default: Lucide-style stroke icons (the project standard) */ svg.icon { display: inline-block; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -0.125em; /* Match text baseline */ transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } /* Explicit stroke-only modifier (e.g. unfilled heart) */ svg.icon.stroke-only { fill: none; stroke-width: 2; } /* Make fill-current win over svg.icon defaults — used for like heart on product pages */ svg.icon.fill-current { fill: currentColor; stroke: currentColor; } /* Brand icons need fill instead of stroke */ svg.icon.fab-icon { fill: currentColor; } /* Compatibility: Tailwind utilities often used with icons */ .text-glow { filter: drop-shadow(0 0 8px rgba(34,211,238,0.8)); } /* ========================================================================== TraderFa - Centralized Third-Party Plugin Overrides & Global Utilities ========================================================================== */ /* 100% Guaranteed Custom Classes to bypass Windows Tailwind Compiler bugs */ .tf-breadcrumb-pill { background: rgba(255, 255, 255, 0.85) !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; border-radius: 9999px !important; padding: 0.5rem 0.875rem !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; -ms-overflow-style: none; scrollbar-width: none; } .tf-breadcrumb-pill::-webkit-scrollbar { display: none; } .dark-theme .tf-breadcrumb-pill { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; } .tf-stat-badge { background: rgba(255, 255, 255, 1) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; padding: 1.625rem 0.625rem !important; } .tf-stat-badge p { margin: 0 !important; line-height: 1.25 !important; } .dark-theme .tf-stat-badge { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.1) !important; } .tf-breadcrumb-pill svg { min-width: 12px; min-height: 12px; display: inline-block; vertical-align: middle; } /* gradient-neon-btn variables Ã¢â€ â€™ Moved to input.css */ /* Content Article Images - proper borders and spacing */ .content-article-prose img, .post-content img { max-width: 75%; height: auto; border-radius: 1rem; margin: 1.5rem auto; display: block; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .content-article-prose img:hover, .post-content img:hover { transform: scale(1.01); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); } .dark-theme .content-article-prose img, .dark-theme .post-content img { border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } .dark-theme .content-article-prose img:hover, .dark-theme .post-content img:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); } /* Responsive: images need more width on mobile */ @media (max-width: 639px) { .content-article-prose img, .post-content img { max-width: 95%; } } .hide-initially { display: none !important; } /* ========================================================================== Mobile TOC — Horizontal Scroll Strip (Centralized) Used by: _TocSidebar.cshtml, Rules.cshtml, and any page with a TOC ========================================================================== */ .mobile-toc-scroll::-webkit-scrollbar { display: none; } .mobile-toc-scroll { -ms-overflow-style: none; scrollbar-width: none; } /* Each pill in the mobile TOC strip */ .mobile-toc-pill { display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 0.5rem 1rem; border-radius: 0.75rem; font-size: 0.8rem; font-weight: 600; line-height: 1.4; min-width: 110px; max-width: 160px; /* Allow 2-3 lines for long titles */ white-space: normal; word-break: break-word; transition: all 0.2s ease; background: rgba(0, 0, 0, 0.03); color: hsl(var(--muted-foreground)); border: 1px solid transparent; flex-shrink: 0; cursor: pointer; } .mobile-toc-pill:hover, .mobile-toc-pill:focus { background: rgba(59, 130, 246, 0.06); color: hsl(var(--foreground)); border-color: rgba(59, 130, 246, 0.15); } /* Active state for mobile TOC pill */ .mobile-toc-pill.active { background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(56, 189, 248, 0.12)); color: #2563eb; border-color: rgba(59, 130, 246, 0.3); font-weight: 700; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15); } .dark-theme .mobile-toc-pill { background: rgba(255, 255, 255, 0.04); color: hsl(var(--muted-foreground)); } .dark-theme .mobile-toc-pill:hover, .dark-theme .mobile-toc-pill:focus { background: rgba(96, 165, 250, 0.08); color: hsl(var(--foreground)); border-color: rgba(96, 165, 250, 0.15); } .dark-theme .mobile-toc-pill.active { background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(56, 189, 248, 0.15)); color: #93c5fd; border-color: rgba(96, 165, 250, 0.3); box-shadow: 0 2px 8px rgba(96, 165, 250, 0.2); } /* ========================================================================== Content Article Prose Typography (Premium Minimalist) ========================================================================== */ .content-article-prose { font-size: 1rem !important; line-height: 1.85 !important; font-weight: 500 !important; color: hsl(var(--foreground)); letter-spacing: 0 !important; } /* --- Shared headings --- */ .content-article-prose h1, .content-article-prose h2, .content-article-prose h3, .content-article-prose h4 { font-weight: 900 !important; line-height: 1.3 !important; letter-spacing: -0.01em !important; margin-top: 2.5rem !important; margin-bottom: 1rem !important; display: block !important; } /* --- H1 --- */ .content-article-prose h1 { font-size: clamp(1.5rem, 3vw, 2rem) !important; font-weight: 950 !important; margin-bottom: 1.25rem !important; background: linear-gradient(135deg, #2563eb, #60a5fa) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } .dark-theme .content-article-prose h1 { background: linear-gradient(135deg, #60a5fa, #93c5fd) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* --- H2 --- */ .content-article-prose h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem) !important; font-weight: 950 !important; color: #1e40af !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; } .content-article-prose h2::before { content: "" !important; display: inline-block !important; width: 4px !important; height: 1.25rem !important; border-radius: 4px !important; background: #3b82f6 !important; box-shadow: 0 0 10px rgba(59, 130, 246, 0.4) !important; } .dark-theme .content-article-prose h2 { color: #93c5fd !important; } .dark-theme .content-article-prose h2::before { background: #60a5fa !important; box-shadow: 0 0 10px rgba(96, 165, 250, 0.4) !important; } /* --- H3 & H4 --- */ .content-article-prose h3 { font-size: clamp(1.1rem, 1.8vw, 1.25rem) !important; font-weight: 900 !important; color: #2563eb !important; } .dark-theme .content-article-prose h3 { color: #60a5fa !important; } .content-article-prose h4 { font-size: 1.05rem !important; font-weight: 800 !important; color: hsl(var(--foreground)) !important; } /* --- Body Text --- */ .content-article-prose p { margin: 1.25rem 0 !important; font-weight: 500 !important; color: hsl(var(--foreground)); opacity: 0.9 !important; } .content-article-prose strong, .content-article-prose b { font-weight: 900 !important; color: hsl(var(--foreground)); opacity: 1 !important; } .content-article-prose em, .content-article-prose i { font-style: italic !important; color: hsl(var(--foreground)); font-weight: 600 !important; } /* --- Links --- */ .content-article-prose a { color: #3b82f6 !important; font-weight: 600 !important; text-decoration: none !important; border-bottom: 1px dashed rgba(59, 130, 246, 0.5) !important; padding-bottom: 1px !important; transition: all 0.2s ease !important; } .content-article-prose a:hover { color: #2563eb !important; border-bottom-style: solid !important; border-bottom-color: #2563eb !important; background: rgba(59, 130, 246, 0.05) !important; border-radius: 2px !important; } .dark-theme .content-article-prose a { color: #60a5fa !important; border-bottom-color: rgba(96, 165, 250, 0.5) !important; } .dark-theme .content-article-prose a:hover { color: #93c5fd !important; border-bottom-color: #93c5fd !important; background: rgba(96, 165, 250, 0.1) !important; } /* --- Lists --- */ .content-article-prose ul, .content-article-prose ol { margin: 1.5rem 0 !important; padding-right: 0 !important; list-style: none !important; } .content-article-prose ul > li, .content-article-prose ol > li { position: relative !important; padding-right: 1.75rem !important; margin: 0.5rem 0 !important; line-height: 1.85 !important; } .content-article-prose ul > li::before { content: "" !important; position: absolute !important; right: 0 !important; top: 0.65rem !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background-color: #3b82f6 !important; box-shadow: 0 0 8px rgba(59, 130, 246, 0.6) !important; } .dark-theme .content-article-prose ul > li::before { background-color: #60a5fa !important; box-shadow: 0 0 8px rgba(96, 165, 250, 0.6) !important; } .content-article-prose ol { counter-reset: prose-counter !important; } .content-article-prose ol > li { counter-increment: prose-counter !important; } .content-article-prose ol > li::before { content: counter(prose-counter) !important; position: absolute !important; right: 0 !important; top: 0 !important; font-weight: 800 !important; color: #3b82f6 !important; } .dark-theme .content-article-prose ol > li::before { color: #60a5fa !important; } /* --- Blockquote --- */ .content-article-prose blockquote { margin: 2rem 0 !important; padding: 1.5rem 2rem 1.5rem 1.5rem !important; border-right: 3px solid #3b82f6 !important; border-radius: 0.75rem 0 0 0.75rem !important; background: rgba(59, 130, 246, 0.04) !important; border: 1px solid rgba(59, 130, 246, 0.1) !important; border-right-width: 3px !important; } .dark-theme .content-article-prose blockquote { border-right-color: #60a5fa !important; background: rgba(96, 165, 250, 0.05) !important; border-color: rgba(96, 165, 250, 0.1) !important; border-right-width: 3px !important; } .content-article-prose blockquote p { font-size: 1.1rem !important; font-style: italic !important; color: hsl(var(--foreground)) !important; opacity: 0.85 !important; margin: 0 !important; } /* --- Inline Code --- */ .content-article-prose code { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important; font-size: 0.85em !important; padding: 0.2em 0.4em !important; background: rgba(0, 0, 0, 0.05) !important; border-radius: 0.25rem !important; color: #e11d48 !important; font-weight: 600 !important; } .dark-theme .content-article-prose code { background: rgba(255, 255, 255, 0.1) !important; color: #fda4af !important; } /* --- Tables --- */ .content-article-prose table { width: 100% !important; margin: 2rem 0 !important; border-collapse: separate !important; border-spacing: 0 !important; border-radius: 0.75rem !important; overflow: hidden !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; } .dark-theme .content-article-prose table { border-color: rgba(255, 255, 255, 0.1) !important; } .content-article-prose thead th { background: rgba(59, 130, 246, 0.05) !important; color: hsl(var(--foreground)) !important; font-weight: 700 !important; padding: 1rem !important; text-align: right !important; border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; } .dark-theme .content-article-prose thead th { background: rgba(96, 165, 250, 0.05) !important; border-bottom-color: rgba(255, 255, 255, 0.1) !important; } .content-article-prose tbody td { padding: 1rem !important; border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; color: hsl(var(--foreground)) !important; opacity: 0.9 !important; } .dark-theme .content-article-prose tbody td { border-bottom-color: rgba(255, 255, 255, 0.05) !important; } .content-article-prose tbody tr:last-child td { border-bottom: none !important; } /* --- HR Divider --- */ .content-article-prose hr { margin: 3rem 0 !important; border: none !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent) !important; } .dark-theme .content-article-prose hr { background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.3), transparent) !important; } /* Dynamic Pricing Updates (JS Targets) */ #priceDisplay { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 15px; direction: rtl; } #priceDisplay .price-current { font-size: 1.8rem; font-weight: 900; line-height: 1.2; display: flex; align-items: baseline; } #priceDisplay .price-current span:first-child { font-size: 1.9rem; color: #0ea5e9; } #priceDisplay .currency { font-size: 1.5rem; color: #0284c7; margin-right: 5px; font-weight: 800; } #priceDisplay .price-original { color: #64748b; text-decoration: line-through; opacity: 0.8; font-size: 1.1rem; } #priceDisplay .price-discount-badge { background: linear-gradient(135deg, #0ea5e9, #0284c7); border-radius: 20px; color: #fff; padding: 4px 10px; font-weight: 700; font-size: 0.9rem; } #priceDisplay .price-unavailable { color: #ef4444; font-weight: 700; font-size: 1.5rem; } html.dark-theme #priceDisplay .price-current span:first-child { color: #38bdf8; } html.dark-theme #priceDisplay .currency { color: #7dd3fc; } /* Global Micro-Animations */ @keyframes tabFadeIn { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes stepSlideIn { to { opacity: 1; transform: translateX(0); } } @keyframes laserSweep { 0%, 100% { top: 0%; } 50% { top: 80%; } } @keyframes orbPulse { 0%, 100% { box-shadow: 0 0 20px 4px rgba(34, 211, 238, 0.35); } 50% { box-shadow: 0 0 32px 8px rgba(34, 211, 238, 0.55); } } .tab-pane { display: none !important; } .tab-pane.active-tab { display: block !important; animation: tabFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .tab-animate-in { display: block !important; animation: tabFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .timeline-step { animation: stepSlideIn 0.5s ease-out forwards; } .laser-glow-anim { animation: laserSweep 4s ease-in-out infinite; } .pulse-orb-anim { animation: orbPulse 2.5s ease-in-out infinite; } /* Light theme: override glow animations to use visible blue/indigo instead of invisible cyan */ @keyframes orbPulseLight { 0%, 100% { box-shadow: 0 0 16px 3px rgba(59, 130, 246, 0.3); } 50% { box-shadow: 0 0 28px 6px rgba(99, 102, 241, 0.45); } } html:not(.dark-theme) .pulse-orb-anim { animation-name: orbPulseLight; box-shadow: 0 0 16px 3px rgba(59, 130, 246, 0.3) !important; } html:not(.dark-theme) .laser-glow-anim { background: linear-gradient(to bottom, rgba(99, 102, 241, 0.6), transparent) !important; filter: blur(3px); } /* ========================================================================== ProductCard Ã¢â‚¬â€ Reusable Component Styles Used in: _ProductCard.cshtml (both Blog & Product variants) ========================================================================== */ /* Card description Ã¢â‚¬â€ force child elements to respect the card's text size */ .tf-card-desc, .tf-card-desc * { font-size: 13.5px !important; line-height: 1.625 !important; margin: 0 !important; padding: 0 !important; } .tf-card-desc p, .tf-card-desc span, .tf-card-desc div, .tf-card-desc a { font-size: inherit !important; line-height: inherit !important; } /* Card title/description â€” fixed-height reservation for uniform card sizing */ .tf-card-title-fixed { min-height: 3rem; /* Reserve 2 lines at 18-19px, leading-tight */ } .tf-card-desc-fixed { min-height: 2.75rem; /* Reserve 2 lines at 13.5px, line-height 1.625 */ } @media (max-width: 639px) { .tf-card-title-fixed { min-height: 2rem; } .tf-card-desc-fixed { min-height: 0; } } /* ========================================================================== ShowItem / SinglePost Extracted Inline Styles ========================================================================== */ .tf-title-ultra { font-weight: 1000 !important; } /* Fix: prevent bg-clip-text gradient titles from clipping ascenders/descenders. Persian/Arabic script has dots (nuqta) above/below letters (پ، ت، ث، etc.) that get cut off when background-clip:text + tight line-height are combined. */ .bg-clip-text, [class*="bg-clip-text"], .text-gradient-hero, .text-gradient, .gradient-title, .text-gradient-primary, .text-gradient-neon, .role-neon-glow, .content-article-prose h1 { padding-top: 0.15em; padding-bottom: 0.1em; overflow: visible !important; -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 1.4 !important; } /* Extracted inline styles from ShowItem */ .tf-float-8s { animation: float 8s ease-in-out infinite; } .tf-bg-neon-gradient { background: var(--gradient-neon-btn); } /* Price Badges (Unavailable / Free) */ .unavailable-price-badge, .free-price-badge { display: flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border-radius: 1rem; font-weight: 900; font-size: 1rem; text-align: center; max-width: 100%; box-sizing: border-box; } .unavailable-price-badge { background: linear-gradient(135deg, rgba(244, 63, 94, 0.08), rgba(244, 63, 94, 0.15)); color: #f43f5e; border: 1.5px solid rgba(244, 63, 94, 0.2); } .free-price-badge { background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.15)); color: #10b981; border: 1.5px solid rgba(16, 185, 129, 0.2); } .price-badge, .price-display { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem 1.5rem; border-radius: 1rem; font-weight: 900; text-align: center; width: 100%; box-sizing: border-box; background: linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(59, 130, 246, 0.15)); color: #3b82f6; border: 1.5px solid rgba(59, 130, 246, 0.2); margin-bottom: 1rem; } .price-display.has-discount { background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(168, 85, 247, 0.15)); color: #a855f7; border: 1.5px solid rgba(168, 85, 247, 0.2); } .price-display .price-current { font-size: 1.25rem; font-weight: 900; } .price-display.has-discount .price-current { color: #9333ea; } .price-display .currency { font-size: 0.85rem; opacity: 0.8; } .unavailable-price-badge--lg, .free-price-badge--lg, .price-badge--lg { padding: 1rem 2rem; font-size: 1.15rem; border-radius: 1.25rem; } html.dark-theme .unavailable-price-badge { background: linear-gradient(135deg, rgba(244, 63, 94, 0.15), rgba(244, 63, 94, 0.25)); border-color: rgba(244, 63, 94, 0.3); color: #fda4af; /* rose-300 for better contrast */ } html.dark-theme .free-price-badge { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.25)); border-color: rgba(16, 185, 129, 0.3); color: #6ee7b7; /* emerald-300 for better contrast */ } html.dark-theme .price-badge, html.dark-theme .price-display { background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(59, 130, 246, 0.25)); border-color: rgba(59, 130, 246, 0.3); color: #7dd3fc; } html.dark-theme .price-display.has-discount { background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.25)); border-color: rgba(168, 85, 247, 0.3); color: #d8b4fe; } .attention { animation: attention-pulse 2s ease-in-out infinite; } @keyframes attention-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } .tf-anim-duration-4 { animation-duration: 4s !important; } @keyframes heartPop { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1.25); } } .tf-heart-pop { animation: heartPop 0.4s cubic-bezier(0.17, 0.89, 0.32, 1.49) !important; filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.8)); } /* ========================================================================== Heart Container (Like Button) Ã¢â‚¬â€ Global Used in: _ActionButtonsPartial, Tweet items, SinglePost, ShowItem ========================================================================== */ .heart-container { display: inline-flex; cursor: pointer; width: 16px; height: 16px; position: relative; transition: transform 0.2s ease; } .heart-container:hover { transform: scale(1.15); } .heart-container input.checkbox { display: none; } .heart-container .svg-container { width: 100%; height: 100%; position: relative; display: inline-flex; justify-content: center; align-items: center; } .heart-container .svg-outline { position: absolute; fill: #f87171; transition: all 0.2s ease; width: 100%; height: 100%; } .heart-container .svg-filled { position: absolute; fill: #ef4444; opacity: 0; transform: scale(0); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); width: 100%; height: 100%; } .heart-container:hover .svg-outline { fill: #f87171; } .heart-container input.checkbox:checked~.svg-container .svg-outline { opacity: 0; } @keyframes heart-pulse-glow { 0%, 100% { filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.35)); } 50% { filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.7)); } } .heart-container input.checkbox:checked~.svg-container .svg-filled { opacity: 1; transform: scale(1); animation: heartPop 0.45s cubic-bezier(0.17, 0.89, 0.32, 1.49) forwards, heart-pulse-glow 2s ease-in-out 0.45s infinite; } .heart-container[data-liked="1"] .svg-outline { opacity: 0; } .heart-container[data-liked="1"] .svg-filled { opacity: 1; transform: scale(1); animation: heartPop 0.45s cubic-bezier(0.17, 0.89, 0.32, 1.49) forwards, heart-pulse-glow 2s ease-in-out 0.45s infinite; } /* ========================================================================== Action Buttons (used in Tweets views: ShowTweet, _RenderReplies) ========================================================================== */ .action-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border-radius: 0.875rem; font-weight: 700; font-size: 0.875rem; cursor: pointer; border: 1px solid rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #334155; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; } .action-btn:hover { background: rgba(14, 165, 233, 0.08); border-color: rgba(14, 165, 233, 0.25); color: #0ea5e9; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(14, 165, 233, 0.15); } .dark-theme .action-btn { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.08); color: #e2e8f0; } .dark-theme .action-btn:hover { background: rgba(14, 165, 233, 0.1); border-color: rgba(14, 165, 233, 0.3); color: #38bdf8; } /* Tweet detail action bar: remove card-like borders from stat buttons */ .tweet-action-bar .action-btn { border: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0.375rem 0.5rem; border-radius: 9999px; gap: 0.25rem; box-shadow: none; } .tweet-action-bar .action-btn:hover { background: transparent; border: none; box-shadow: none; transform: none; } .dark-theme .tweet-action-bar .action-btn, .dark-theme .tweet-action-bar .action-btn:hover { background: transparent; border: none; box-shadow: none; } /* Unified Reply Button (used in both tweets and products/articles) */ .reply-btn-unified { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.875rem; border-radius: 0.625rem; font-size: 0.75rem; font-weight: 700; color: hsl(var(--primary)); background: transparent; border: 1px solid hsl(var(--primary) / 0.15); cursor: pointer; transition: all 0.25s ease; -webkit-tap-highlight-color: transparent; } .reply-btn-unified:hover { background: hsl(var(--primary) / 0.08); border-color: hsl(var(--primary) / 0.3); transform: translateY(-1px); box-shadow: 0 2px 8px hsl(var(--primary) / 0.12); } .reply-btn-unified .icon { font-size: 0.8125rem; transition: transform 0.2s ease; } .reply-btn-unified:hover .icon { transform: scale(1.1); } /* User Pill Tags (Likers list in tweets) */ .user-pill-tag { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 600; text-decoration: none; color: hsl(var(--foreground)); background: hsl(var(--glass) / 0.6); border: 1px solid hsl(var(--glass-border) / 0.15); backdrop-filter: blur(8px); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .user-pill-tag:hover { background: hsl(var(--primary) / 0.1); border-color: hsl(var(--primary) / 0.3); color: hsl(var(--primary)); transform: translateY(-2px); box-shadow: 0 4px 12px hsl(var(--primary) / 0.15); } .user-pill-tag .user-color-icon { color: var(--user-color, #444); } /* Tweet Submit / CTA Button */ .tf-cta-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; border-radius: 9999px; font-weight: 800; font-size: 0.9375rem; cursor: pointer; border: none; background: linear-gradient(135deg, #0ea5e9, #6366f1); color: #fff; box-shadow: 0 4px 20px rgba(14, 165, 233, 0.35); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; } .tf-cta-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 30px rgba(14, 165, 233, 0.4), 0 0 40px rgba(99, 102, 241, 0.2); } .tf-cta-btn:active { transform: scale(0.98); } /* ========================================================================== Modern Header Updates (Lovable Port) ========================================================================== */ /* header styling consolidated in input.css */ /* nav-link-hover, animated-underline, shimmer Ã¢â€ â€™ consolidated in input.css */ /* ========================================================================== Universal Status Components (Access Denied, Success, Info based on Lovable) ========================================================================== */ /* Status variables (--status-*) Ã¢â€ â€™ Moved to input.css */ .status-glass-card { background: hsl(var(--status-card-bg) / 0.65); border: 1px solid hsl(var(--status-card-border) / 0.8); backdrop-filter: blur(40px) saturate(1.4); -webkit-backdrop-filter: blur(40px) saturate(1.4); transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.15s ease-out; } .status-glass-card:hover { background: hsl(var(--status-card-bg) / 0.8); border-color: hsl(var(--status-txt-primary) / 0.25); } .status-glass-card-highlight { background: linear-gradient(135deg, hsl(var(--status-txt-primary) / 0.08) 0%, transparent 50%, hsl(var(--status-txt-primary) / 0.02) 100%); } .status-text-primary { color: hsl(var(--status-txt-primary)); } .status-text-muted { color: hsl(var(--status-txt-muted)); } .status-icon-box { background: hsl(var(--status-icon-bg)); } .glow-success { box-shadow: 0 0 40px hsl(var(--status-success) / 0.25), 0 0 80px hsl(var(--status-success) / 0.1); } .glow-error { box-shadow: 0 0 40px hsl(var(--status-error) / 0.25), 0 0 80px hsl(var(--status-error) / 0.1); } .glow-info { box-shadow: 0 0 40px hsl(var(--status-info) / 0.25), 0 0 80px hsl(var(--status-info) / 0.1); } .status-animate-float-up { animation: float-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes status-icon-pop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .status-animate-icon-pop { animation: status-icon-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards; opacity: 0; } @keyframes lock-shake { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(8deg); } } .status-animate-lock-shake { animation: lock-shake 0.6s ease-in-out 0.8s; } @keyframes status-fade-up-delay { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } } .status-animate-fade-up-1 { animation: status-fade-up-delay 0.6s ease-out 0.3s forwards; opacity: 0; } .status-animate-fade-up-2 { animation: status-fade-up-delay 0.6s ease-out 0.45s forwards; opacity: 0; } .status-animate-fade-up-3 { animation: status-fade-up-delay 0.6s ease-out 0.6s forwards; opacity: 0; } @keyframes rotate-slow { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.08); } 100% { transform: rotate(360deg) scale(1); } } .status-animate-orb { animation: rotate-slow 30s linear infinite; } /* ========================================================================== Billion-Dollar Micro-Animations (Lovable Port) ========================================================================== */ @keyframes float-in { 0% { opacity: 0; transform: translateY(-8px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes scale-in { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } @keyframes slide-in-right { 0% { opacity: 0; transform: translateX(100%); } 100% { opacity: 1; transform: translateX(0); } } /* Premium Form Validation State */ .pf-input-error { animation: pf-shake 0.5s cubic-bezier(.36, .07, .19, .97) both; border-color: rgba(239, 68, 68, 0.6) !important; background-color: rgba(239, 68, 68, 0.03) !important; box-shadow: 0 0 12px rgba(239, 68, 68, 0.2) !important; } @keyframes pf-shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-3px, 0, 0); } 40%, 60% { transform: translate3d(3px, 0, 0); } } /* Premium Gradient Focus Border for Form Inputs */ .tf-gradient-focus { transition: border-color 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease; border: 1px solid rgba(203, 213, 225, 1) !important; /* Slate 300 - clear and visible */ } html.dark-theme .tf-gradient-focus { border: 1px solid rgba(255, 255, 255, 0.16) !important; /* Clearly visible border in dark mode */ } .tf-gradient-focus:focus-within, .tf-gradient-focus:focus { border-color: transparent !important; background-image: linear-gradient(var(--card-bg, #fff), var(--card-bg, #fff)), linear-gradient(135deg, #0ea5e9, #a855f7, #6366f1) !important; background-origin: border-box !important; background-clip: padding-box, border-box !important; box-shadow: 0 0 20px rgba(99, 102, 241, 0.15) !important; } html.dark-theme .tf-gradient-focus:focus-within, html.dark-theme .tf-gradient-focus:focus { background-image: linear-gradient(#1e293b, #1e293b), linear-gradient(135deg, #0ea5e9, #a855f7, #6366f1) !important; } /* ========================================================================== SweetAlert2 Glassmorphism (Premium Modals) ========================================================================== */ .swal-glass-container { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(15, 18, 25, 0.45) !important; } .swal-glass-popup { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(0, 0, 0, 0.05) !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1) !important; border-radius: 1.5rem !important; padding: 1.5rem !important; color: #0f172a !important; width: auto !important; max-width: 24rem !important; /* 384px - Minimal Width */ } html.dark-theme .swal-glass-popup { background: rgba(20, 24, 30, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 255, 170, 0.05) !important; color: white !important; } .swal2-popup.swal-glass-popup .swal2-title { color: #0f172a !important; font-size: 1.15rem; font-weight: 700; margin-bottom: 0.25rem !important; } html.dark-theme .swal2-popup.swal-glass-popup .swal2-title { color: white !important; } .swal2-popup.swal-glass-popup .swal2-html-container { color: rgba(15, 23, 42, 0.7) !important; font-size: 0.95rem; margin: 0.5em 1em 0.3em !important; } html.dark-theme .swal2-popup.swal-glass-popup .swal2-html-container { color: rgba(255, 255, 255, 0.7) !important; } .swal2-popup.swal-glass-popup .swal2-actions { gap: 1rem; flex-wrap: wrap; justify-content: center; } .swal-glass-confirm { background: linear-gradient(135deg, hsl(199, 89%, 48%), hsl(201, 90%, 40%)) !important; color: #fff !important; border: none !important; border-radius: 0.75rem !important; padding: 0.6rem 1.5rem !important; font-size: 0.9rem !important; font-weight: 600 !important; box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3) !important; transition: all 0.3s ease !important; margin: 0.25rem !important; } .swal-glass-confirm:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4) !important; } .swal-glass-cancel { background: rgba(255, 255, 255, 1) !important; color: #0f172a !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; border-radius: 0.75rem !important; padding: 0.6rem 1.5rem !important; font-size: 0.9rem !important; font-weight: 600 !important; transition: all 0.3s ease !important; margin: 0.25rem !important; } html.dark-theme .swal-glass-cancel { background: rgba(255, 255, 255, 0.05) !important; color: white !important; border-color: rgba(255, 255, 255, 0.1) !important; } .swal-glass-cancel:hover { background: rgba(0, 0, 0, 0.05) !important; border-color: rgba(0, 0, 0, 0.2) !important; } html.dark-theme .swal-glass-cancel:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.2) !important; } .swal2-icon { width: 3.5rem !important; height: 3.5rem !important; margin: 1rem auto 0.75rem !important; } .swal2-icon.swal2-success { border-color: #0ea5e9 !important; color: #0ea5e9 !important; } .swal2-icon.swal2-success [class^=swal2-success-line] { display: block; background-color: #0ea5e9 !important; } .swal2-icon.swal2-success .swal2-success-fix, .swal2-icon.swal2-success [class^=swal2-success-circular-line] { display: none !important; } .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(14, 165, 233, 0.3) !important; } .swal2-icon.swal2-warning { border-color: rgba(245, 158, 11, 0.5) !important; color: #f59e0b !important; } /* Specific Custom Classes used in JS */ .swal-send.swal-glass-popup { padding: 1.25rem 1rem !important; } .swal-send-title { font-size: 1.1rem !important; } .swal-send-text { font-size: 0.85rem !important; } .swal-send-icon { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; transform: scale(0.85); } .swal-premium-toast { padding: 0.75rem 1rem !important; border-radius: 1rem !important; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important; max-width: 380px !important; } .swal-premium-toast .swal2-title { font-size: 0.95rem !important; font-weight: 600 !important; margin: 0 !important; } .swal-premium-toast .swal2-icon { width: 2rem !important; height: 2rem !important; margin: 0 0.5rem 0 0 !important; } .swal-slide-down { animation: swalSlideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .swal-slide-up { animation: swalSlideUp 0.3s ease-in forwards; } @keyframes swalSlideDown { from { opacity: 0; transform: translateY(-1rem); } to { opacity: 1; transform: translateY(0); } } @keyframes swalSlideUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-1rem); } } /* Lightbox Overlay */ #image-lightbox-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } html.dark-theme #image-lightbox-overlay { background: rgba(0, 0, 0, 0.85); } #image-lightbox-overlay.visible { opacity: 1; pointer-events: auto; } #image-lightbox-overlay .lightbox-frame { position: relative; max-width: 90vw; max-height: 90vh; border-radius: 1.5rem; padding: 0; background: transparent; border: none; box-shadow: none; transform: scale(0.95); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #image-lightbox-overlay.visible .lightbox-frame { transform: scale(1); } #image-lightbox-overlay img { max-width: 100%; max-height: calc(90vh - 1rem); border-radius: 1rem; display: block; object-fit: contain; border: 2px solid rgba(14, 165, 233, 0.8); box-shadow: 0 0 10px rgba(14, 165, 233, 0.4), 0 4px 20px rgba(0, 0, 0, 0.3); background-color: rgba(255, 255, 255, 0.02); } #image-lightbox-overlay .close-btn { position: absolute; top: -1.5rem; right: -1.5rem; width: 3rem; height: 3rem; background: linear-gradient(135deg, #ec4899, #f43f5e); color: white; border: none; border-radius: 50%; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; z-index: 2; } #image-lightbox-overlay .close-btn:hover { transform: scale(1.1) rotate(90deg); box-shadow: 0 6px 20px rgba(236, 72, 153, 0.55); } @media (max-width: 768px) { #image-lightbox-overlay .lightbox-frame { max-width: calc(100vw - 3rem); } #image-lightbox-overlay .close-btn { top: -1rem; right: -1rem; width: 2.25rem; height: 2.25rem; font-size: 1.25rem; } } /* Reply Form Transitions */ .reply-form-container { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.4s ease; } .reply-form-container.is-open { max-height: 500px; opacity: 1; } /* ========================================================================== Single Tweet View (Lovable Port) ========================================================================== */ /* action-like, action-reply variables Ã¢â€ â€™ Moved to input.css */ /* components consolidated in input.css */ /* Action Icon specialized colors (Hover states via group in HTML) */ .text-action-like { color: hsl(var(--action-like)) !important; } .bg-action-like-muted { background-color: hsl(var(--action-like) / 0.1) !important; } /* ========================================================================== Premium Glassmorphism Select Component (Unified) ========================================================================== */ /* The hidden original select */ select.tf-premium-select-hidden { display: none !important; } /* Base Wrapper */ .tf-custom-select { position: relative; width: auto; min-width: 140px; font-family: inherit; user-select: none; } .tf-custom-select.is-open { z-index: 1000 !important; } /* Trigger Button */ .tf-custom-select-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 1.25rem; font-size: 0.95rem; font-weight: 800; color: inherit; cursor: pointer; text-align: center; white-space: nowrap; /* Glassmorphism */ background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1.5px solid rgba(0, 0, 0, 0.08); border-radius: 100px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .dark-theme .tf-custom-select-trigger { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); } /* Hover & Focus state */ .tf-custom-select-trigger:hover, .tf-custom-select.is-open .tf-custom-select-trigger { border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12); background: rgba(255, 255, 255, 0.8); } .dark-theme .tf-custom-select-trigger:hover, .dark-theme .tf-custom-select.is-open .tf-custom-select-trigger { background: rgba(255, 255, 255, 0.08); } /* Chevron */ .tf-custom-select-trigger .tf-chevron { width: 1.25rem; height: 1.25rem; color: #7dd3fc; transition: transform 0.3s ease, color 0.3s ease; } .tf-custom-select.is-open .tf-custom-select-trigger .tf-chevron { transform: rotate(180deg); color: #38bdf8; } /* Center the label text inside trigger */ .tf-custom-select-trigger span { flex: 1; text-align: center; } /* Center alignment and disable interaction when there is only one option (no dropdown chevron) */ .tf-custom-select-trigger.no-options { justify-content: center !important; text-align: center !important; cursor: default !important; pointer-events: none !important; box-shadow: none !important; } .tf-custom-select-trigger.no-options span { text-align: center !important; flex: 1 !important; margin: 0 auto !important; } .tf-custom-select-trigger.no-options:hover { border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: none !important; background: rgba(255, 255, 255, 0.65) !important; } .dark-theme .tf-custom-select-trigger.no-options:hover { border-color: rgba(255, 255, 255, 0.1) !important; background: rgba(255, 255, 255, 0.05) !important; } /* Options Dropdown */ .tf-custom-select-options { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 9999; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 20px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.98); transform-origin: top center; transition: all 0.25s var(--ease-smooth); max-height: 350px; overflow-y: auto; } .tf-custom-select.is-open .tf-custom-select-options { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .dark-theme .tf-custom-select-options { background: #1e293b; border-color: rgba(255, 255, 255, 0.1); } /* Option Item */ .tf-custom-select-option { padding: 12px 14px; border-radius: 14px; font-weight: 800; font-size: 0.9rem; text-align: center; cursor: pointer; color: inherit; transition: all 0.2s ease; } .tf-custom-select-option:hover { background: rgba(14, 165, 233, 0.08); } .tf-custom-select-option.is-selected { color: #0ea5e9; background: rgba(14, 165, 233, 0.04); } /* Small variant for filter bars */ .tf-custom-select.tf-select-sm .tf-custom-select-trigger { min-height: 48px; border-radius: 14px; padding: 0 1rem; font-size: 0.8125rem; font-weight: 700; } .tf-custom-select.tf-select-sm .tf-custom-select-options { border-radius: 14px; } .tf-custom-select.tf-select-sm .tf-custom-select-option { padding: 8px 12px; border-radius: 10px; font-size: 0.8125rem; } /* ---- Filter Bar Layout ---- */ .tf-filter-bar { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; position: relative !important; z-index: 100 !important; } /* On mobile, shrink selects so 3 fit side-by-side */ @media (max-width: 640px) { .tf-filter-bar .tf-custom-select.tf-select-sm { min-width: 0; } .tf-filter-bar .tf-custom-select.tf-select-sm .tf-custom-select-trigger { padding: 0 0.75rem; gap: 0.25rem; } } /* Full-width selects for buy box / product purchase contexts */ .product-purchase-group .tf-custom-select, select.w-full+.tf-custom-select { width: 100%; } .product-purchase-group .tf-custom-select-trigger { padding: 0 1rem; } .product-purchase-group .tf-custom-select.tf-select-sm .tf-custom-select-trigger { min-height: 60px; font-size: 0.875rem; padding: 0 0.875rem; } @media (max-width: 640px) { .product-purchase-group .tf-custom-select { min-width: 0 !important; } .product-purchase-group .tf-custom-select-trigger { padding: 0 0.5rem !important; font-size: 0.8rem !important; min-height: 54px !important; } .product-purchase-group .tf-custom-select-trigger span { font-size: 0.8rem !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center !important; } .product-purchase-group .tf-custom-select-trigger .tf-chevron { width: 0.875rem !important; height: 0.875rem !important; } } /* GLOBAL BORDER FIX consolidated in input.css */ /* ========================================================================== NUCLEAR: Dark Mode Ã¢â‚¬â€ Background & Text Color Overrides Fixes specificity conflicts between Bootstrap, Tailwind, and custom CSS. Uses hardcoded rgba() values for maximum browser compatibility. ========================================================================== */ /* ---- 1) Page-level dark background ---- */ html.dark-theme, html.dark-theme body { background-color: #0f1420 !important; color: #e2e8f0 !important; } /* ---- 2) All white/light backgrounds Ã¢â€ â€™ dark glassmorphism ---- */ html.dark-theme .bg-white, html.dark-theme .bg-light, html.dark-theme .bg-body { background-color: rgba(17, 24, 39, 0.55) !important; } html.dark-theme .bg-slate-50, html.dark-theme .bg-gray-50 { background-color: rgba(30, 41, 59, 0.45) !important; } html.dark-theme .bg-slate-100, html.dark-theme .bg-gray-100 { background-color: rgba(30, 41, 59, 0.35) !important; } /* ---- 3) Form inputs dark background ---- */ html.dark-theme input[class*="bg-slate-50"], html.dark-theme textarea[class*="bg-slate-50"], html.dark-theme select[class*="bg-slate-50"], html.dark-theme input[class*="bg-white"], html.dark-theme textarea[class*="bg-white"], html.dark-theme select[class*="bg-white"] { background-color: rgba(30, 41, 59, 0.6) !important; color: #f1f5f9 !important; } /* ---- 4) Text color fixes ---- */ /* Dark text that has an explicit dark: variant in HTML */ html.dark-theme [class*="dark:text-white"] { color: #ffffff !important; } html.dark-theme [class*="dark:text-slate-200"] { color: #e2e8f0 !important; } html.dark-theme [class*="dark:text-slate-300"] { color: #cbd5e1 !important; } html.dark-theme [class*="dark:text-slate-400"] { color: #94a3b8 !important; } /* Fallback: dark text without an explicit dark: variant */ html.dark-theme .text-slate-900, html.dark-theme .text-slate-800, html.dark-theme .text-slate-700 { color: #f1f5f9 !important; } html.dark-theme .text-slate-600, html.dark-theme .text-slate-500 { color: #94a3b8 !important; } /* ---- 5) Placeholder text in dark mode ---- */ html.dark-theme input::placeholder, html.dark-theme textarea::placeholder { color: #64748b !important; opacity: 1 !important; } /* ---- 6) Labels and form field icons ---- */ html.dark-theme label { color: #cbd5e1 !important; } /* ---- 7) Shadow fix for cards in dark mode ---- */ html.dark-theme [class*="shadow-"] { --tw-shadow-color: rgba(0, 0, 0, 0.4); } /* ========================================================================== Modern Stats Component (ShowVisits) ========================================================================== */ .sv-section { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; padding: 5rem 1rem; overflow: hidden; } .sv-aurora { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .sv-orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.15; } .dark-theme .sv-orb { opacity: 0.3; filter: blur(120px); } .sv-orb--cyan { top: -6rem; right: -6rem; width: 480px; height: 480px; background-color: rgba(34, 211, 238, 0.3); /* #22d3ee */ animation: orb-float-1 12s ease-in-out infinite; } .sv-orb--violet { bottom: -8rem; left: -5rem; width: 420px; height: 420px; background-color: rgba(139, 92, 246, 0.3); /* #8b5cf6 */ animation: orb-float-2 15s ease-in-out infinite; } .sv-container { position: relative; width: 100%; max-width: 1152px; /* max-w-6xl */ margin: 0 auto; z-index: 10; } .sv-heading { text-align: center; margin-bottom: 3.5rem; } .sv-title { font-size: clamp(1.875rem, 4vw, 2.25rem); font-weight: 1000; color: var(--text-primary); margin-bottom: 0.75rem; } .sv-subtitle { font-size: 0.875rem; font-weight: 500; color: var(--text-muted); } .sv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 640px) { .sv-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } } @media (min-width: 1024px) { .sv-grid { grid-template-columns: repeat(5, 1fr); } } .sv-card { position: relative; padding: 1px; border-radius: 1rem; cursor: default; opacity: 0; transform: translateY(32px) scale(0.96); transition: transform 0.35s ease-out, opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1); } @media (max-width: 1023px) { .sv-card { opacity: 1; transform: none; } } .sv-card.sv-card--visible { opacity: 1; transform: translateY(0) scale(1); } .sv-card:hover { transform: translateY(-6px) scale(1.02); } .sv-card__glow { position: absolute; inset: -1px; border-radius: 1rem; opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 0; } .sv-card__border { position: absolute; inset: 0; border-radius: 1rem; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 50%, rgba(255, 255, 255, 0.05)); opacity: 1; transition: opacity 0.5s; z-index: 0; } .sv-card:hover .sv-card__border { opacity: 0; } .sv-card__body { position: relative; height: 100%; padding: 1.5rem 1rem; border-radius: 1rem; background-color: rgba(255, 255, 255, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(0, 0, 0, 0.05); border-top: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.4); transition: all 0.5s; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .dark-theme .sv-card__body { background-color: rgba(30, 41, 59, 0.4); border: 1px solid rgba(255, 255, 255, 0.05); border-top: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .sv-card:hover .sv-card__body { background-color: rgba(255, 255, 255, 0.8); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 24px 64px rgba(0, 0, 0, 0.05); } .dark-theme .sv-card:hover .sv-card__body { background-color: rgba(30, 41, 59, 0.6); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 24px 64px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .sv-card__number { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 1000; line-height: 1.2; color: transparent; -webkit-background-clip: text; background-clip: text; background-size: 200% 200%; animation: gradient-shift 4s ease infinite; font-family: inherit; margin-top: 0.25rem; } .sv-card__meta { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .sv-card__icon { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; } .sv-card__icon .icon { width: 1rem; height: 1rem; } .sv-card__label { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); margin: 0; } /* Pulse Animation */ .sv-pulse { position: relative; display: flex; width: 0.75rem; height: 0.75rem; } .sv-pulse__ping { position: absolute; display: inline-flex; height: 100%; width: 100%; border-radius: 50%; background-color: #22d3ee; opacity: 0.75; animation: sv-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; } .sv-pulse__dot { position: relative; display: inline-flex; border-radius: 50%; height: 0.75rem; width: 0.75rem; background-color: #22d3ee; } @keyframes sv-ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes orb-float-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.95); } } @keyframes orb-float-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-35px, 25px) scale(1.05); } 66% { transform: translate(25px, -15px) scale(1.1); } } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ========================================================================== MyOrders Ã¢â‚¬â€ Accordion Toggle (was inline