/** * Global Common Stylesheet & Design System Tokens * Module: common * Strictly compliant with repository guidelines (all comments in English) */ :root { --tblr-font-sans-serif: 'InterVariable', 'Inter', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; } body { font-feature-settings: "cv03", "cv04", "cv11"; } /* Defensive guard against horizontal page overflow: without this, any single element on a page that's even slightly wider than the viewport (a carousel, a wide table, an unconstrained image, etc.) makes the whole wider than the screen, which throws off every margin:auto-centered container on the page and shows up as an uneven blank gutter on one side on mobile. */ html, body { max-width: 100vw; overflow-x: hidden; } /* High-end Visual Aesthetics */ /* Premium Fixed Frosted Glass Navbar (Tabler Official 64px Spec) */ .navbar-tabler-official { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1030 !important; height: 64px !important; min-height: 64px !important; padding: 0 !important; background: rgba(255, 255, 255, 0.88) !important; backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border-bottom: 1px solid rgba(98, 105, 118, 0.16) !important; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02); transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } [data-bs-theme="dark"] .navbar-tabler-official { background: rgba(24, 36, 51, 0.88) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3); } /* Mobile menu panel: the 64px navbar height is fixed, so the expanded collapse must be detached into its own positioned panel with an opaque background instead of relying on the (height-locked) navbar background. */ @media (max-width: 991.98px) { /* Bootstrap's collapse JS briefly applies .collapsing (in normal document flow, animating height 0 -> scrollHeight) before swapping to .show. That transitional in-flow state pushes the page content down and then snaps back once .show's absolute positioning applies below - this is the "jump". Give .collapsing the exact same overlay treatment as .show so the panel is already detached from the flow at every stage, and disable Bootstrap's own height animation on it so there is nothing left to animate. */ .navbar-tabler-official .navbar-collapse.show, .navbar-tabler-official .navbar-collapse.collapsing { position: absolute; top: 64px; left: 0; right: 0; max-height: calc(100vh - 64px); overflow-y: auto; background: var(--tblr-bg-surface); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(98, 105, 118, 0.16); transition: none !important; } /* The markup hardcodes Bootstrap's h-100 on the collapse/nav/nav-item chain for the desktop 64px bar. Once the panel above is absolutely positioned, that h-100 resolves against the fixed 64px navbar instead of the content, squashing the whole menu to 64px tall. Force natural content height here. */ .navbar-tabler-official .navbar-collapse.show, .navbar-tabler-official .navbar-collapse.collapsing, .navbar-tabler-official .navbar-collapse.show .navbar-nav, .navbar-tabler-official .navbar-collapse.collapsing .navbar-nav, .navbar-tabler-official .navbar-collapse.show .nav-item, .navbar-tabler-official .navbar-collapse.collapsing .nav-item { height: auto !important; } } /* Page body top offset to match 64px navbar height */ body, body.body-marketing { padding-top: 64px !important; } /* Animated Underline Keyframes */ @keyframes tablerNavUnderlineIn { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } /* Full-Height Tabler Nav Links (64px) */ .tabler-nav-link { display: inline-flex !important; align-items: center !important; height: 64px !important; font-size: 0.875rem !important; font-weight: 500 !important; color: var(--tblr-body-color) !important; padding: 0 0.9rem !important; position: relative; text-decoration: none !important; background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; transition: color 0.15s ease-in-out; } .tabler-nav-link:hover, .tabler-nav-link:focus, .show > .tabler-nav-link { color: var(--tblr-primary) !important; background: transparent !important; box-shadow: none !important; outline: none !important; } .tabler-nav-link.active { color: var(--tblr-primary) !important; font-weight: 600 !important; } /* Active State Underline (Directly on the 64px bottom border) */ .tabler-nav-link.active::after { content: ""; position: absolute; bottom: 0px; left: 0.9rem; right: 0.9rem; height: 2px; background: var(--tblr-primary); border-radius: 2px 2px 0 0; transform-origin: center; animation: tablerNavUnderlineIn 0.55s cubic-bezier(0.25, 1, 0.5, 1) forwards; } /* Hover Preview Underline on non-active items */ .tabler-nav-link:not(.active)::after { content: ""; position: absolute; bottom: 0px; left: 0.9rem; right: 0.9rem; height: 2px; background: rgba(var(--tblr-primary-rgb), 0.35); border-radius: 2px 2px 0 0; transform: scaleX(0); transform-origin: center; transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1); } .tabler-nav-link:not(.active):hover::after { transform: scaleX(1); } /* Subtle chevron animation for dropdowns */ .nav-link-chevron { transition: transform 0.2s ease; margin-left: 0.35rem; } .show > .tabler-nav-link .nav-link-chevron { transform: rotate(180deg); } /* Colorized Theme Switcher & Utility Icons */ .icon-theme-dark { color: #4f46e5 !important; /* Deep Starry Indigo Moon */ transition: transform 0.25s ease, color 0.2s ease; } .nav-link:hover .icon-theme-dark { color: #3730a3 !important; transform: rotate(-15deg); } .icon-theme-light { color: #f59f00 !important; /* Warm Amber Sun */ transition: transform 0.3s ease, color 0.2s ease; } .nav-link:hover .icon-theme-light { color: #fab005 !important; transform: rotate(45deg); } .icon-nav-lang { color: var(--tblr-secondary); transition: color 0.2s ease, transform 0.2s ease; } .nav-link:hover .icon-nav-lang, .show > .nav-link .icon-nav-lang { color: var(--tblr-primary) !important; transform: scale(1.1); } .hero-glow-bg { position: relative; background: radial-gradient(circle at 50% 0%, rgba(32, 107, 196, 0.12) 0%, rgba(32, 107, 196, 0.02) 60%, transparent 100%); border-bottom: 1px solid rgba(var(--tblr-border-color-rgb), 0.7); } [data-bs-theme="dark"] .hero-glow-bg { background: radial-gradient(circle at 50% 0%, rgba(66, 153, 225, 0.15) 0%, rgba(15, 23, 42, 0.05) 70%, transparent 100%); } .glass-card { background: rgba(var(--tblr-bg-surface-rgb), 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(var(--tblr-border-color-rgb), 0.8); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08); transition: all 0.25s ease-in-out; } .glass-card:hover { box-shadow: 0 15px 35px -10px rgba(32, 107, 196, 0.15); } .email-display-box { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; background-color: var(--tblr-bg-surface-secondary); border: 2px dashed rgba(var(--tblr-primary-rgb), 0.4); transition: all 0.2s ease; } .email-display-box:hover { border-color: var(--tblr-primary); } /* Pulse animation for real-time inbox status */ .live-pulse { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #2fb344; box-shadow: 0 0 0 rgba(47, 179, 68, 0.4); animation: pulseAnimation 2s infinite; } @keyframes pulseAnimation { 0% { box-shadow: 0 0 0 0 rgba(47, 179, 68, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(47, 179, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 179, 68, 0); } } /* Harmonious Ad Container */ .ad-card-wrapper { border: 1px solid rgba(var(--tblr-border-color-rgb), 0.6); background: var(--tblr-bg-surface-tertiary); border-radius: var(--tblr-border-radius); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ad-card-badge { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 4px; color: var(--tblr-muted); background: rgba(var(--tblr-bg-surface-rgb), 0.7); border: 1px solid rgba(var(--tblr-border-color-rgb), 0.5); } /* Custom Scrollbar for email details & dropdowns */ .custom-email-body { max-height: 480px; overflow-y: auto; } /* Global & Dropdown Modern Sleek Scrollbar */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(var(--tblr-body-color-rgb), 0.18); border-radius: 9999px; transition: background 0.2s ease; } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--tblr-body-color-rgb), 0.38); } * { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.35) transparent; } .lang-dropdown-menu { max-height: 340px; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: thin; } .lang-dropdown-menu::-webkit-scrollbar { width: 4px; } .lang-dropdown-menu::-webkit-scrollbar-thumb { background: rgba(var(--tblr-primary-rgb), 0.3); border-radius: 10px; } /* Action Tool Icon Buttons */ .btn-action-tool { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--tblr-border-radius); border: 1px solid transparent; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); background: transparent; } .btn-action-tool:hover { transform: translateY(-2px); } /* Spinning loading state for SVG icons inside buttons (temp-mail's refresh/ change-email buttons already reference this class name, but the project never defined it; added here so both sides can share it) */ @keyframes rotateAnimSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotate-anim { animation: rotateAnimSpin 0.8s linear infinite; } .btn-tool-success { color: #2fb344; } .btn-tool-success:hover { background: rgba(47, 179, 68, 0.12); color: #2fb344; border-color: rgba(47, 179, 68, 0.3); } .btn-tool-warning { color: #f59f00; } .btn-tool-warning:hover { background: rgba(245, 159, 0, 0.14); color: #f59f00; border-color: rgba(245, 159, 0, 0.3); } .btn-tool-indigo { color: #4263eb; } .btn-tool-indigo:hover { background: rgba(66, 99, 235, 0.12); color: #4263eb; border-color: rgba(66, 99, 235, 0.3); } .btn-switch-indigo { background: rgba(66, 99, 235, 0.08) !important; color: #4263eb !important; border: 1px solid rgba(66, 99, 235, 0.28) !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .btn-switch-indigo:hover { background: rgba(66, 99, 235, 0.18) !important; color: #3b5bdb !important; border-color: rgba(66, 99, 235, 0.45) !important; transform: translateY(-1px); } .btn-switch-green { background: rgba(0, 209, 132, 0.08) !important; color: #00a76a !important; border: 1px solid rgba(0, 209, 132, 0.28) !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .btn-switch-green:hover { background: rgba(0, 209, 132, 0.18) !important; color: #00a76a !important; border-color: rgba(0, 209, 132, 0.45) !important; transform: translateY(-1px); } .btn-tool-secondary { color: #626976; } .btn-tool-secondary:hover { background: rgba(98, 105, 118, 0.12); color: var(--tblr-body-color); border-color: rgba(98, 105, 118, 0.3); } .btn-tool-danger { color: #d63939; } .btn-tool-danger:hover { background: rgba(214, 57, 57, 0.12); color: #d63939; border-color: rgba(214, 57, 57, 0.3); } /* Table Row Action Buttons (Clean Ghost Style with Tinted Hover) */ .btn-table-action { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--tblr-border-radius); border: 1px solid transparent; background: transparent; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } .btn-table-action:hover { transform: translateY(-1px); } .btn-table-view { color: #4263eb; } .btn-table-view:hover { background: rgba(66, 99, 235, 0.12); color: #3b5bdb; border-color: rgba(66, 99, 235, 0.28); } .btn-table-delete { color: #d63939; } .btn-table-delete:hover { background: rgba(214, 57, 57, 0.12); color: #c92a2a; border-color: rgba(214, 57, 57, 0.28); } /* Page Header Breadcrumb Actions (PC standard size, Mobile compact single-line) */ .btn-layout-chat, .btn-layout-telegram { height: 38px; display: inline-flex; align-items: center; font-size: 0.875rem; } @media (max-width: 575.98px) { .btn-layout-chat, .btn-layout-telegram { height: 30px; font-size: 0.78rem; padding: 0 8px !important; } } /* Breadcrumb Item & Separator Spacing Protection */ .breadcrumb-item { display: inline-flex; align-items: center; flex-shrink: 0; } .breadcrumb-item:last-child { flex-shrink: 1; min-width: 0; } .breadcrumb-item + .breadcrumb-item::before { padding-left: 7px !important; padding-right: 7px !important; flex-shrink: 0; display: inline-block; } .badge-language { width: 20px; height: 15px; display: inline-block; vertical-align: middle; margin-right: 6px; background-size: cover; border-radius: 2px; box-shadow: 0 0 1px rgba(0,0,0,0.3); } /* Workflow Step Cards */ .step-card { position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid rgba(var(--tblr-border-color-rgb), 0.75); } .step-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.1); } .step-number-badge { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; border-radius: 50%; } /* Comparison Matrix Table */ .compare-table-card { border: 1px solid rgba(var(--tblr-border-color-rgb), 0.8); overflow: hidden; } .compare-table { width: 100%; font-size: 0.86rem; } .compare-table th { font-weight: 700; font-size: 0.84rem; letter-spacing: -0.01em; padding-top: 0.7rem !important; padding-bottom: 0.7rem !important; } .compare-table td { padding-top: 0.7rem !important; padding-bottom: 0.7rem !important; white-space: normal; line-height: 1.45; } .compare-highlight-column { background: rgba(var(--tblr-primary-rgb), 0.04); border-left: 2px solid var(--tblr-primary) !important; border-right: 2px solid var(--tblr-primary) !important; } /* Footer Link Hover Effect */ .hover-link:hover { color: var(--tblr-primary) !important; transform: translateX(2px); transition: all 0.2s ease; } /* Logo Auto Theme Switch (Light / Night Mode PNG/SVG) */ .navbar-brand-autodark { filter: none !important; } [data-bs-theme="dark"] .navbar-brand-autodark, .theme-dark .navbar-brand-autodark { filter: none !important; } .logo-theme-dark { display: none !important; } .logo-theme-light { display: inline-block !important; } [data-bs-theme="dark"] .logo-theme-light, .theme-dark .logo-theme-light { display: none !important; } [data-bs-theme="dark"] .logo-theme-dark, .theme-dark .logo-theme-dark { display: inline-block !important; } /* Height Utilities */ .hei-40 { height: 40px !important; width: auto !important; } .hei-300 { height: 300px !important; width: auto !important; max-width: 100% !important; } /* Inbox Loading Overlay & Smooth Blur */ .inbox-loading-overlay { z-index: 10; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); transition: all 0.25s ease-in-out; } [data-bs-theme="dark"] .inbox-loading-overlay { background: rgba(27, 36, 49, 0.65); } /* Custom Refined Scrollbar */ .custom-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, 0.3) transparent; } .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.25); border-radius: 4px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.45); } [data-bs-theme="dark"] .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); } [data-bs-theme="dark"] .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); } /* Fixed height inbox container */ .inbox-body-fixed { height: 480px !important; min-height: 480px !important; max-height: 480px !important; overflow-y: auto !important; } /* Status Bar Standard Classes */ .status-bar-wrapper { line-height: 1 !important; } .status-bar-item { height: 20px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; } .badge-status-online { height: 20px !important; padding: 0 7px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 11px !important; line-height: 1 !important; } /* Social Media Brand Icons */ .btn-social-item { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; } .btn-social-item:hover { transform: translateY(-2px); } /* Twitter / X */ .btn-social-twitter { background: rgba(15, 20, 25, 0.06); color: #0f1419; border: 1px solid rgba(15, 20, 25, 0.1); } .btn-social-twitter:hover { background: #000000; color: #ffffff; border-color: #000000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } /* GitHub */ .btn-social-github { background: rgba(36, 41, 47, 0.06); color: #24292f; border: 1px solid rgba(36, 41, 47, 0.1); } .btn-social-github:hover { background: #24292f; color: #ffffff; border-color: #24292f; box-shadow: 0 4px 12px rgba(36, 41, 47, 0.3); } /* Telegram */ .btn-social-telegram { background: rgba(34, 158, 217, 0.1); color: #229ed9; border: 1px solid rgba(34, 158, 217, 0.2); } .btn-social-telegram:hover { background: #229ed9; color: #ffffff; border-color: #229ed9; box-shadow: 0 4px 12px rgba(34, 158, 217, 0.35); } /* Discord */ .btn-social-discord { background: rgba(88, 101, 242, 0.1); color: #5865f2; border: 1px solid rgba(88, 101, 242, 0.2); } .btn-social-discord:hover { background: #5865f2; color: #ffffff; border-color: #5865f2; box-shadow: 0 4px 12px rgba(88, 101, 242, 0.35); } /* Dark mode compatibility */ [data-bs-theme="dark"] .btn-social-twitter { background: rgba(255, 255, 255, 0.08); color: #f7f9f9; border-color: rgba(255, 255, 255, 0.15); } [data-bs-theme="dark"] .btn-social-github { background: rgba(255, 255, 255, 0.08); color: #e6edf3; border-color: rgba(255, 255, 255, 0.15); }