/* ===================================================================== MAINFOLLOW — Custom theme stylesheet Loaded AFTER bootstrap.css. Bootstrap is only used as a light reset here and there — all layout, components and theming below are self-contained and do not depend on Bootstrap utility classes. Brand: blue / white, direct social-media API provider. Supports dark (default) and light color themes via [data-theme]. ===================================================================== */ /* --------------------------------------------------------------------- 1. FONTS --------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* --------------------------------------------------------------------- 2. DESIGN TOKENS (CSS variables) — dark mode default, light override --------------------------------------------------------------------- */ :root{ /* Softer dark palette — a warm-ish charcoal navy instead of near-black, lower text contrast so long sessions in dark mode feel calmer. */ --mf-bg: #10151f; --mf-bg-2: #141a27; --mf-surface: #171e2d; --mf-surface-2: #1c2334; --mf-border: rgba(255,255,255,.07); --mf-border-strong: rgba(255,255,255,.12); --mf-text-1: #e9edf5; --mf-text-2: rgba(233,237,245,.64); --mf-text-3: rgba(233,237,245,.40); --mf-brand-50: #eef4ff; --mf-brand-100: #dce9ff; --mf-brand-200: #b8d4ff; --mf-brand-300: #8ab6ff; --mf-brand-400: #5b93ff; --mf-brand-500: #2e6bff; --mf-brand-600: #1750e6; --mf-brand-700: #0f3db8; --mf-brand-800: #0b2e8a; --mf-brand-900: #081f5c; --mf-brand: var(--mf-brand-500); --mf-brand-soft: rgba(46,107,255,.14); --mf-brand-strong: var(--mf-brand-400); --mf-signal: #22c56e; --mf-shadow-ambient: rgba(6,10,20,.38); --mf-noise-opacity: .018; --mf-font-display: 'Space Grotesk', sans-serif; --mf-font-sans: 'Inter', sans-serif; --mf-font-mono: 'JetBrains Mono', monospace; } html[data-theme="light"]{ --mf-bg: #f6f8fc; --mf-bg-2: #eef2f9; --mf-surface: #ffffff; --mf-surface-2: #ffffff; --mf-border: rgba(11,18,32,.08); --mf-border-strong: rgba(11,18,32,.14); --mf-text-1: #0b1220; --mf-text-2: rgba(11,18,32,.64); --mf-text-3: rgba(11,18,32,.4); --mf-brand: var(--mf-brand-600); --mf-brand-soft: rgba(23,80,230,.08); --mf-brand-strong: var(--mf-brand-600); --mf-shadow-ambient: rgba(20,35,70,.10); --mf-noise-opacity: .035; } /* --------------------------------------------------------------------- 3. BASE / RESET --------------------------------------------------------------------- */ *{ box-sizing: border-box; } html{ background: var(--mf-bg); scrollbar-color: var(--mf-border-strong) transparent; } body{ background: var(--mf-bg); color: var(--mf-text-1); font-family: var(--mf-font-sans); -webkit-font-smoothing: antialiased; margin: 0; overflow-x: hidden; transition: background-color .35s ease, color .35s ease; /* IMPORTANT: without this, body's own opaque background paints ON TOP OF the fixed, negative z-index background animation (.mf-hero-canvas / .mf-bg-tg-corner / .mf-bg-aurora / .mf-bg-noise) — a classic CSS stacking-order gotcha: a non-positioned paints its background as an in-flow box *after* its own negative-z-index descendants are painted, so it silently covers them. isolation:isolate forces body to form its own stacking context, so those layers correctly sit above body's background again, exactly where they belong. */ isolation: isolate; } h1, h2, h3, h4, h5, h6{ font-family: var(--mf-font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0; color: var(--mf-text-1); } p{ margin: 0; line-height: 1.7; color: var(--mf-text-2); } a{ text-decoration: none; color: inherit; } button{ font-family: inherit; cursor: pointer; border: none; background: none; } code, .mf-mono{ font-family: var(--mf-font-mono); } img, svg{ display: block; max-width: 100%; } ::selection{ background: var(--mf-brand-soft); color: var(--mf-brand-strong); } .mf-container{ max-width: 1240px; margin: 0 auto; padding: 0 24px; } @media (max-width: 640px){ .mf-container{ padding: 0 16px; } } /* --------------------------------------------------------------------- 4. BACKGROUND LAYERS (aurora glow + noise + dot grid) --------------------------------------------------------------------- */ .mf-bg-aurora{ position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(60% 45% at 12% -8%, rgba(46,107,255,.20), transparent 60%), radial-gradient(50% 40% at 100% 0%, rgba(91,147,255,.14), transparent 60%), radial-gradient(70% 50% at 50% 110%, rgba(46,107,255,.10), transparent 60%); transition: opacity .35s ease; } html[data-theme="light"] .mf-bg-aurora{ background: radial-gradient(60% 45% at 12% -8%, rgba(46,107,255,.10), transparent 60%), radial-gradient(50% 40% at 100% 0%, rgba(91,147,255,.08), transparent 60%), radial-gradient(70% 50% at 50% 110%, rgba(46,107,255,.06), transparent 60%); } .mf-bg-noise{ position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--mf-noise-opacity); width: 100%; height: 100%; } /* ---------- Homepage full-screen hero canvas (Telegram paper-plane field) ---------- Created empty here, painted by initHeroPaperPlanes() in script.js — only ever present on signin.twig (the homepage). Sits behind everything, full viewport, fixed so it stays put while the marketing page scrolls. */ .mf-hero-canvas{ position: fixed; inset: 0; z-index: -1; pointer-events: none; } /* ---------- Internal-page corner mark (every screen except the homepage) ---------- A soft brand-colored glow plus a translucent Telegram "send" glyph anchored to the bottom-left corner, fading toward the centre of the viewport — the calmer, static counterpart to the homepage's animated canvas. Purely decorative. */ .mf-bg-tg-corner{ position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .mf-bg-tg-corner::before{ content: ''; position: absolute; left: -18%; bottom: -22%; width: min(70vw, 900px); height: min(70vw, 900px); border-radius: 50%; background: radial-gradient(circle, var(--mf-brand-500) 0%, transparent 68%); opacity: .16; } .mf-bg-tg-corner::after{ content: ''; position: absolute; left: 3%; bottom: 6%; width: 220px; height: 220px; background-color: var(--mf-brand-500); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M2 13.2 21.6 3.4c.9-.45 1.8.3 1.4 1.25L17.8 21.3c-.35.85-1.5.95-2 .2l-4.3-6.4-4.9 2.55.35-4.9L20.1 6.2 6.9 11.7l-4.9 1.5Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M2 13.2 21.6 3.4c.9-.45 1.8.3 1.4 1.25L17.8 21.3c-.35.85-1.5.95-2 .2l-4.3-6.4-4.9 2.55.35-4.9L20.1 6.2 6.9 11.7l-4.9 1.5Z'/%3E%3C/svg%3E") center/contain no-repeat; opacity: .17; animation: mfCornerPulse 7s ease-in-out infinite; } html[data-theme="dark"] .mf-bg-tg-corner::before{ background: radial-gradient(circle, #ffffff 0%, transparent 68%); opacity: .10; } html[data-theme="dark"] .mf-bg-tg-corner::after{ background-color: #ffffff; opacity: .14; } @keyframes mfCornerPulse{ 0%,100%{ opacity: .14; transform: scale(1); } 50%{ opacity: .22; transform: scale(1.045); } } @media (prefers-reduced-motion: reduce){ .mf-bg-tg-corner::after{ animation: none; } } @media (max-width: 640px){ .mf-bg-tg-corner::before{ width: 80vw; height: 80vw; } .mf-bg-tg-corner::after{ width: 150px; height: 150px; } } /* Small twinkling sparkles drifting near the corner mark — the calmer, CSS-only cousin of the homepage canvas's star layer. Each one fades in, floats upward a little, fades out, then the animation loops and it "relocates" via the differing keyframe offsets below. Kept to a handful and very low peak opacity so it reads as ambience, not distraction. */ .mf-bg-star{ position: absolute; width: 6px; height: 6px; background: var(--mf-brand-500); clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%); opacity: 0; animation: mfStarTwinkle 7s ease-in-out infinite; } html[data-theme="dark"] .mf-bg-star{ background: #ffffff; } .mf-bg-star--1{ left: 20%; bottom: 42%; animation-delay: 0s; } .mf-bg-star--2{ left: 36%; bottom: 16%; width: 4px; height: 4px; animation-delay: 2.1s; animation-duration: 8.5s; } .mf-bg-star--3{ left: 8%; bottom: 60%; width: 8px; height: 8px; animation-delay: 4.2s; animation-duration: 9.5s; } @keyframes mfStarTwinkle{ 0%, 100%{ opacity: 0; transform: translateY(0) scale(.6); } 35%{ opacity: .5; transform: translateY(-16px) scale(1); } 70%{ opacity: .12; transform: translateY(-30px) scale(.85); } } @media (prefers-reduced-motion: reduce){ .mf-bg-star{ animation: none; opacity: .12; } } .mf-bg-dotgrid{ position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, black 40%, transparent 100%); mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, black 40%, transparent 100%); } html[data-theme="light"] .mf-bg-dotgrid{ background-image: radial-gradient(rgba(11,18,32,.12) 1px, transparent 1px); } /* --------------------------------------------------------------------- 5. SURFACES / SHADOWS --------------------------------------------------------------------- */ .mf-surface{ background: var(--mf-surface); border: 1px solid var(--mf-border); box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 12px 32px var(--mf-shadow-ambient); border-radius: 20px; } .mf-surface-floating{ background: color-mix(in srgb, var(--mf-surface) 88%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--mf-border-strong); } /* --------------------------------------------------------------------- 6. STATUS / UPTIME PULSE DOT --------------------------------------------------------------------- */ .mf-status-dot{ width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--mf-signal); box-shadow: 0 0 0 0 rgba(34,197,110,.55); animation: mfStatusPulse 2.2s cubic-bezier(0.4,0,0.6,1) infinite; } @keyframes mfStatusPulse{ 0%{ box-shadow: 0 0 0 0 rgba(34,197,110,.55); } 70%{ box-shadow: 0 0 0 6px rgba(34,197,110,0); } 100%{ box-shadow: 0 0 0 0 rgba(34,197,110,0); } } .mf-status-dot--red{ background: #ff5a5a; box-shadow: 0 0 0 0 rgba(255,90,90,.55); animation: mfStatusPulseRed 1.6s cubic-bezier(0.4,0,0.6,1) infinite; } @keyframes mfStatusPulseRed{ 0%{ box-shadow: 0 0 0 0 rgba(255,90,90,.55); } 70%{ box-shadow: 0 0 0 6px rgba(255,90,90,0); } 100%{ box-shadow: 0 0 0 0 rgba(255,90,90,0); } } /* --------------------------------------------------------------------- 7. TOP STATUS BAR --------------------------------------------------------------------- */ .mf-topbar{ position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 36px; transition: opacity .3s ease; } .mf-topbar__inner{ max-width: 1240px; margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--mf-text-3); } .mf-topbar__left{ display: flex; align-items: center; gap: 8px; } .mf-topbar__left b{ color: var(--mf-text-2); font-weight: 500; } .mf-topbar__right{ display: flex; align-items: center; gap: 16px; } .mf-topbar__right a{ color: var(--mf-text-3); transition: color .2s ease, transform .2s ease; display: inline-flex; align-items: center; gap: 6px; } .mf-topbar__right a:hover{ color: var(--mf-text-1); transform: translateY(-1px); } .mf-topbar__right a svg{ flex-shrink: 0; } .mf-topbar__right a span{ display: none; } @media (min-width: 1180px){ .mf-topbar__right a span{ display: inline; } } @media (max-width: 767px){ .mf-topbar{ display: none; } } /* --------------------------------------------------------------------- 8. MAIN HEADER / NAVBAR --------------------------------------------------------------------- */ .mf-header{ position: fixed; top: 36px; left: 0; right: 0; z-index: 49; padding: 12px 24px 0; } @media (max-width: 767px){ .mf-header{ top: 0; } } .mf-header__bar{ max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-radius: 18px; } .mf-logo{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Text-only wordmark — theme has no image/GIF logo; the brand name comes straight from PerfectPanel > Settings > Site Name (site['name']). */ .mf-logo__word{ font-family: var(--mf-font-display); font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--mf-text-1); } .mf-logo__word em{ font-style: normal; color: var(--mf-brand-500); } @media (max-width: 480px){ .mf-logo__word{ font-size: 18px; } } .mf-nav{ display: none; align-items: center; gap: 18px; font-size: 13.5px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%); margin-inline-start: 32px; /* breathing room so the first link never hugs the logo */ } .mf-nav::-webkit-scrollbar{ display: none; } @media (min-width: 1024px){ .mf-nav{ display: flex; } } .mf-nav__link{ color: var(--mf-text-2); font-weight: 500; position: relative; flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: color .2s ease; } .mf-nav__link:hover{ color: var(--mf-text-1); } .mf-nav__link::after{ content: ''; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--mf-brand); border-radius: 2px; transition: right .28s cubic-bezier(0.34, 1.56, 0.64, 1); } .mf-nav__link:hover::after{ right: 0; } .mf-header__actions{ display: none; align-items: center; gap: 8px; flex-shrink: 0; } @media (min-width: 1024px){ .mf-header__actions{ display: flex; } } /* Account avatar dropdown (replaces a row of separate pill buttons) */ .mf-dropdown-account .dropdown-toggle{ display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px !important; } .mf-account-avatar{ width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: var(--mf-brand-soft); color: var(--mf-brand-500); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; font-family: var(--mf-font-display); } .mf-dropdown-account .mf-nav__link, .mf-dropdown-account .mf-account-name{ max-width: 110px; overflow: hidden; text-overflow: ellipsis; } .mf-dropdown__item--danger:hover{ background: rgba(255,97,97,.12); color: #ff6161; } .mf-menu-btn{ display: flex; padding: 8px; color: var(--mf-text-1); } @media (min-width: 1024px){ .mf-menu-btn{ display: none; } } .mf-utilbtn{ width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--mf-surface-2); border: 1px solid var(--mf-border); color: var(--mf-text-2); transition: transform .25s cubic-bezier(0.34,1.56,0.64,1), background .2s ease, border-color .2s ease, color .2s ease; } .mf-utilbtn:hover{ background: var(--mf-brand-soft); color: var(--mf-text-1); border-color: var(--mf-border-strong); } .mf-utilbtn:active{ transform: translateY(1px) scale(.97); } .mf-utilbtn:focus-visible{ outline: 2px solid var(--mf-brand); outline-offset: 2px; } .mf-theme-icon--moon{ display: none; } html[data-theme="light"] .mf-theme-icon--sun{ display: none; } html[data-theme="light"] .mf-theme-icon--moon{ display: block; } /* --------------------------------------------------------------------- 9. DROPDOWN (Platforms menu) --------------------------------------------------------------------- */ .mf-dropdown{ position: relative; } .mf-dropdown__caret{ transition: transform .25s cubic-bezier(0.34,1.56,0.64,1); } .mf-dropdown.open .mf-dropdown__caret, .mf-dropdown.is-open .mf-dropdown__caret, .mf-dropdown:hover .mf-dropdown__caret{ transform: rotate(180deg); } /* NOTE: real toggling (show/hide) of .dropdown-menu is driven by Bootstrap 3's dropdown.js, which adds/removes the ".open" class on the ".dropdown" wrapper and relies on bootstrap.css's ".open .dropdown-menu{ display:block }" rule. The rules below only add animation/visual polish on top of that — they must NOT set display:none, or the menu will never be able to open. */ .mf-dropdown__menu.dropdown-menu{ position: absolute; top: calc(100% + 10px); left: 0; transform: translateY(-6px); min-width: 220px; background: var(--mf-surface); border: 1px solid var(--mf-border); border-radius: 16px; box-shadow: 0 8px 28px var(--mf-shadow-ambient); opacity: 0; transition: opacity .18s ease, transform .22s cubic-bezier(0.34,1.56,0.64,1); padding: 8px; z-index: 60; float: none; } .mf-dropdown.open .mf-dropdown__menu.dropdown-menu, .mf-dropdown.is-open .mf-dropdown__menu.dropdown-menu{ opacity: 1; transform: translateY(0); } /* Header "Platforms"-style hover menus that are NOT bound to Bootstrap JS (no literal .dropdown-menu class) keep the pure-CSS hover/is-open behaviour. */ .mf-dropdown__menu:not(.dropdown-menu){ position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, -6px); min-width: 240px; background: var(--mf-surface); border: 1px solid var(--mf-border); border-radius: 16px; box-shadow: 0 8px 28px var(--mf-shadow-ambient); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .2s ease, transform .25s cubic-bezier(0.34,1.56,0.64,1), visibility .2s ease; padding: 8px; z-index: 60; } .mf-dropdown:hover .mf-dropdown__menu:not(.dropdown-menu), .mf-dropdown.is-open .mf-dropdown__menu:not(.dropdown-menu){ opacity: 1; pointer-events: auto; visibility: visible; transform: translate(-50%, 0); } .mf-dropdown__menu--scroll{ max-height: 320px; overflow-y: auto; } .mf-dropdown__item{ display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--mf-text-2); font-size: 14px; font-weight: 500; transition: background .18s ease, color .18s ease; } .mf-dropdown__item:hover{ background: var(--mf-brand-soft); color: var(--mf-text-1); } .mf-dropdown__item.active, .mf-dropdown li.active .mf-dropdown__item{ background: var(--mf-brand-soft); color: var(--mf-brand-strong); } .mf-dropdown__divider{ height: 1px; background: var(--mf-border); margin: 6px 4px; } .mf-dropdown__item--highlight{ color: var(--mf-brand-500); font-weight: 600; } /* --------------------------------------------------------------------- 10. MOBILE MENU --------------------------------------------------------------------- */ .mf-mobile-menu{ display: none; max-width: 1240px; margin: 8px auto 0; border-radius: 18px; padding: 16px 20px; flex-direction: column; gap: 2px; font-size: 14px; } .mf-mobile-menu.is-open{ display: flex; } .mf-mobile-menu a{ padding: 10px 4px; font-weight: 500; color: var(--mf-text-1); } .mf-mobile-menu a.mf-mobile-sub{ padding-left: 20px; font-weight: 400; color: var(--mf-text-2); font-size: 13px; } .mf-mobile-menu__divider{ height: 1px; background: var(--mf-border); margin: 10px 0; } @media (min-width: 1024px){ .mf-mobile-menu{ display: none !important; } } /* --------------------------------------------------------------------- 11. BUTTONS --------------------------------------------------------------------- */ .mf-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 12px; font-size: 14px; font-weight: 700; white-space: nowrap; transition: transform .25s cubic-bezier(0.34,1.56,0.64,1), box-shadow .25s ease, filter .2s ease, background .2s ease, border-color .2s ease; } .mf-btn--sm{ padding: 9px 16px; font-size: 13px; } .mf-btn--block{ width: 100%; } .mf-btn--primary{ background: linear-gradient(180deg, #4079ff, #1e5aff); color: #ffffff; box-shadow: 0 2px 4px rgba(23,80,230,.10), 0 10px 24px rgba(23,80,230,.30); } .mf-btn--primary:hover{ transform: translateY(-2px); filter: brightness(1.06); } .mf-btn--primary:active{ transform: translateY(0); } .mf-btn--primary:focus-visible{ outline: 2px solid var(--mf-brand-strong); outline-offset: 3px; } .mf-btn--ghost{ background: transparent; border: 1px solid var(--mf-border-strong); color: var(--mf-text-1); } .mf-btn--ghost:hover{ background: var(--mf-brand-soft); border-color: var(--mf-brand); transform: translateY(-2px); } .mf-btn--ghost:active{ transform: translateY(0); } .mf-btn--ghost:focus-visible{ outline: 2px solid var(--mf-brand); outline-offset: 3px; } /* "View description" button — brand-blue gradient in both themes so it always reads as a clear call-to-action, not just a quiet ghost link. */ .mf-btn--view{ background: linear-gradient(135deg, var(--mf-brand-400), var(--mf-brand-600)); border-color: transparent; color: #fff; box-shadow: 0 2px 4px rgba(23,80,230,.12), 0 8px 18px rgba(23,80,230,.24); } .mf-btn--view:hover{ filter: brightness(1.08); border-color: transparent; background: linear-gradient(135deg, var(--mf-brand-400), var(--mf-brand-600)); } /* --------------------------------------------------------------------- 12. FOOTER --------------------------------------------------------------------- */ .mf-footer{ padding: 100px 24px 32px; border-top: 1px solid var(--mf-border); margin-top: 40px; } .mf-footer__grid{ max-width: 1240px; margin: 0 auto 56px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px; } @media (max-width: 1023px){ .mf-footer__grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px){ .mf-footer__grid{ grid-template-columns: 1fr; } } .mf-footer__brand{ grid-column: span 2; } @media (max-width: 1023px){ .mf-footer__brand{ grid-column: span 2; } } @media (max-width: 640px){ .mf-footer__brand{ grid-column: span 1; } } .mf-footer__desc{ margin-top: 16px; font-size: 14px; max-width: 340px; } .mf-footer__status{ display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 13px; color: var(--mf-text-2); } .mf-footer__status a{ color: var(--mf-brand-500); font-weight: 600; } .mf-footer__status a:hover{ text-decoration: underline; } .mf-footer__social{ display: flex; align-items: center; gap: 10px; margin-top: 22px; } .mf-footer__social a{ width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--mf-text-2); transition: border-color .2s ease, color .2s ease; } .mf-footer__social a:hover{ border-color: var(--mf-brand-500); color: var(--mf-brand-500); } .mf-footer__heading{ font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mf-text-3); margin-bottom: 16px; } .mf-footer__links{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .mf-footer__links a{ font-size: 14px; color: var(--mf-text-2); transition: color .2s ease; } .mf-footer__links a:hover{ color: var(--mf-text-1); } .mf-footer__bottom{ max-width: 1240px; margin: 0 auto; padding-top: 28px; border-top: 1px solid var(--mf-border); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .mf-footer__copy{ font-size: 12px; color: var(--mf-text-3); } .mf-footer__badges{ display: flex; align-items: center; gap: 8px; } .mf-footer__badges span{ font-size: 11px; color: var(--mf-text-3); padding: 5px 10px; border-radius: 8px; border: 1px solid var(--mf-border); } /* --------------------------------------------------------------------- 13. GENERIC PAGE-LEVEL HELPERS (used across inner pages) --------------------------------------------------------------------- */ .mf-badge{ display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--mf-brand-soft); border: 1px solid rgba(46,107,255,.28); color: var(--mf-brand-500); } .mf-section{ padding: 88px 24px; } @media (max-width: 640px){ .mf-section{ padding: 56px 20px; } } .mf-section--hero{ padding-top: 172px; padding-bottom: 72px; } @media (max-width: 767px){ .mf-section--hero{ padding-top: 150px; padding-bottom: 48px; } } .mf-reveal{ opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1); } .mf-reveal.is-visible{ opacity: 1; transform: translateY(0); } .mf-input{ width: 100%; background: var(--mf-surface-2); border: 1px solid var(--mf-border-strong); border-radius: 12px; padding: 12px 16px; font-size: 14px; color: var(--mf-text-1); transition: border-color .2s ease, box-shadow .2s ease; } .mf-input::placeholder{ color: var(--mf-text-3); } .mf-input:focus{ outline: none; border-color: var(--mf-brand); box-shadow: 0 0 0 3px var(--mf-brand-soft); } .mf-card{ background: var(--mf-surface); border: 1px solid var(--mf-border); border-radius: 20px; box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 12px 32px var(--mf-shadow-ambient); } /* ---------- Text color / misc utilities ---------- */ .mf-text-1{ color: var(--mf-text-1); } .mf-text-2{ color: var(--mf-text-2); } .mf-text-3{ color: var(--mf-text-3); } .mf-text-mono{ font-family: var(--mf-font-mono); } .mf-text-right{ text-align: right; } .mf-section-tight{ padding: 32px 24px 64px; max-width: 1240px; margin: 0 auto; } .mf-eyebrow{ display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mf-brand-strong); margin-bottom: 12px; } /* ---------- Live service activity grid (top of services page) ---------- */ .mf-svcgrid{ padding: 22px 24px; margin-bottom: 22px; } .mf-svcgrid__head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .mf-svcgrid__head h3{ font-size: 15px; font-weight: 700; color: var(--mf-text-1); margin: 0; } .mf-svcgrid__sub{ font-size: 12px; color: var(--mf-text-3); margin-top: 3px; display: block; } .mf-svcgrid__search{ position: relative; min-width: 220px; } .mf-svcgrid__search svg{ position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--mf-text-3); } .mf-svcgrid__search .mf-input{ padding-left: 36px; font-size: 13px; padding-top: 9px; padding-bottom: 9px; } .mf-svcgrid__marquee{ overflow: hidden; border-radius: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .mf-svcgrid__track{ display: flex; gap: 10px; width: max-content; animation: mfMarquee 90s linear infinite; } .mf-svcgrid__marquee:hover .mf-svcgrid__track{ animation-play-state: paused; } .mf-svcgrid__track.is-paused{ animation-play-state: paused; } .mf-svcbox{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex-shrink: 0; width: 132px; padding: 12px 13px; border-radius: 13px; text-align: left; background: var(--mf-surface-2); border: 1px solid var(--mf-border); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .mf-svcbox:hover{ border-color: var(--mf-brand); transform: translateY(-2px); } .mf-svcbox.is-flash{ border-color: var(--mf-brand); box-shadow: 0 0 0 3px var(--mf-brand-soft); animation: mfSvcFlash 1.8s ease-in-out 2; } @keyframes mfSvcFlash{ 0%,100%{ box-shadow: 0 0 0 3px var(--mf-brand-soft); } 50%{ box-shadow: 0 0 0 6px var(--mf-brand-soft); } } .mf-svcbox__id{ font-family: var(--mf-font-mono); font-size: 10.5px; color: var(--mf-brand-strong); font-weight: 700; } .mf-svcbox__name{ font-size: 12px; font-weight: 600; color: var(--mf-text-1); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 32px; } .mf-svcbox__chart{ width: 100%; height: 22px; margin-top: 2px; } /* ---------- Service snapshot panel (opens when a box is clicked / found) ---------- */ .mf-svc-detail{ display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; padding: 18px 20px; border-radius: 14px; margin-bottom: 16px; background: var(--mf-brand-soft); border: 1px solid rgba(46,107,255,.24); animation: mfSvcDetailIn .3s cubic-bezier(0.34,1.56,0.64,1) both; } @keyframes mfSvcDetailIn{ 0%{ opacity: 0; transform: translateY(-6px); } 100%{ opacity: 1; transform: translateY(0); } } .mf-svc-detail__close{ position: absolute; top: 12px; right: 14px; color: var(--mf-text-3); padding: 4px; } .mf-svc-detail__close:hover{ color: var(--mf-text-1); } .mf-svc-detail{ position: relative; } .mf-svc-detail__title{ font-family: var(--mf-font-display); font-size: 17px; font-weight: 800; color: var(--mf-text-1); margin-bottom: 4px; } .mf-svc-detail__id{ font-family: var(--mf-font-mono); font-size: 12px; color: var(--mf-brand-strong); font-weight: 700; margin-bottom: 10px; display: block; } .mf-svc-detail__desc{ font-size: 13px; color: var(--mf-text-2); line-height: 1.6; max-width: 420px; } .mf-svc-detail__stats{ display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; } .mf-svc-detail__stat{ min-width: 70px; } .mf-svc-detail__stat-label{ font-size: 10.5px; color: var(--mf-text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .mf-svc-detail__stat-value{ font-family: var(--mf-font-display); font-size: 16px; font-weight: 800; color: var(--mf-text-1); margin-top: 3px; } .mf-svc-detail__cta{ align-self: center; } .mf-svc-detail__empty{ font-size: 13px; color: var(--mf-text-3); } /* ---------- Services table: account-qty / speed-status / actions columns ---------- */ .mf-account-qty{ font-family: var(--mf-font-mono); color: var(--mf-text-2); font-size: 13px; } .mf-speed-dot-cell{ display: flex; align-items: center; justify-content: center; } .mf-icon-badges{ display: flex; align-items: center; gap: 6px; justify-content: center; } .mf-icon-badge{ width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: default; } .mf-icon-badge--refill{ background: rgba(46,107,255,.12); color: var(--mf-brand-500); } .mf-icon-badge--cancel{ background: rgba(255,90,90,.12); color: #ff5a5a; } /* Icon-only action chips (Actions column) — filled in by JS once the live provider API response comes back; only rendered when actually available. No text label, just a small round icon "button" — title/aria-label carry the meaning. Not an actual click action, so cursor stays default, but it still gets a light hover/focus lift for a proper premium button feel. */ .mf-featbadge{ display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 50%; border: 1px solid; margin: 2px; cursor: default; transition: transform .18s cubic-bezier(0.34,1.56,0.64,1), box-shadow .18s ease, filter .18s ease; } .mf-featbadge svg{ flex-shrink: 0; } .mf-featbadge:hover{ transform: translateY(-1px) scale(1.06); filter: brightness(1.08); } .mf-featbadge:focus-visible{ outline: 2px solid var(--mf-brand); outline-offset: 2px; } .mf-featbadge:active{ transform: translateY(0) scale(1); } .mf-featbadge--refill{ background: rgba(34,197,110,.12); color: #22c56e; border-color: rgba(34,197,110,.28); box-shadow: 0 1px 2px rgba(34,197,110,.06), 0 4px 10px rgba(34,197,110,.10); } .mf-featbadge--cancel{ background: rgba(255,90,90,.12); color: #ff5a5a; border-color: rgba(255,90,90,.28); box-shadow: 0 1px 2px rgba(255,90,90,.06), 0 4px 10px rgba(255,90,90,.10); } /* ---------- Toolbar (filters + search bar above a table) ---------- */ .mf-toolbar{ display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .mf-toolbar__left{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mf-toolbar__right{ margin-left: auto; } .mf-search{ min-width: 240px; } .mf-input-group__btn{ position: absolute; right: 4px; top: 4px; bottom: 4px; width: 38px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: transparent; color: var(--mf-text-3); transition: background .18s ease, color .18s ease; } .mf-input-group__btn:hover{ background: var(--mf-brand-soft); color: var(--mf-brand-strong); } .mf-btn--xs{ padding: 6px 12px; font-size: 12px; border-radius: 9px; } .mf-balance-badge{ font-family: var(--mf-font-mono); font-weight: 700; font-size: 13px; background: var(--mf-brand-soft); color: var(--mf-brand-strong); padding: 5px 10px; border-radius: 8px; margin-right: 4px; } /* ---------- Services table extras ---------- */ .mf-category-icon{ width: 16px; height: 16px; object-fit: cover; border-radius: 4px; vertical-align: middle; } .mf-tooltip-icon{ color: var(--mf-text-3); margin-left: 4px; cursor: help; } .mf-table__category-row td{ background: var(--mf-surface-2); font-size: 12.5px; letter-spacing: .02em; padding: 9px 16px; } .mf-price{ color: var(--mf-brand-strong); font-weight: 700; font-family: var(--mf-font-mono); font-size: 13px; } .mf-favorite{ cursor: pointer; color: var(--mf-text-3); transition: color .18s ease, transform .18s ease; } .mf-favorite:hover{ color: #f0bf14; transform: scale(1.15); } .mf-favorite.favorite-active{ color: #f0bf14; } .mf-cms-block{ padding: 32px; line-height: 1.75; color: var(--mf-text-2); } .mf-cms-block h2, .mf-cms-block h3{ color: var(--mf-text-1); margin-top: 0; } @media (max-width: 1023px){ .mf-topbar{ display: none; } .mf-header{ top: 0; } } /* ===================================================================== 14. INNER-PAGE COMPONENT LIBRARY (auth cards, forms, tables, tabs, pills, timeline, code blocks, etc.) ===================================================================== */ /* ---------- Page header (used on every inner page) ---------- */ .mf-pagehead{ padding: 152px 24px 40px; } @media (max-width: 767px){ .mf-pagehead{ padding-top: 128px; } } .mf-pagehead__inner{ max-width: 1240px; margin: 0 auto; } .mf-pagehead__crumb{ font-size: 13px; color: var(--mf-text-3); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; } .mf-pagehead__crumb a{ color: var(--mf-text-3); transition: color .2s ease; } .mf-pagehead__crumb a:hover{ color: var(--mf-brand-500); } .mf-pagehead h1{ font-size: 34px; } .mf-pagehead p{ margin-top: 16px; width: 100%; box-sizing: border-box; font-size: 14.5px; line-height: 1.65; padding: 14px 18px; border-radius: 14px; background: var(--mf-brand-soft); border: 1px solid rgba(46,107,255,.24); color: var(--mf-text-1); } .mf-pagehead__row{ display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .mf-pagehead__row > div:first-child{ flex: 1 1 100%; min-width: 0; } /* ---------- Auth (signin / signup / reset / 2fa) ---------- */ .mf-auth-wrap{ min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center; padding: 150px 24px 80px; position: relative; } .mf-auth-card{ width: 100%; max-width: 440px; padding: 40px; } .mf-auth-card__head{ text-align: center; margin-bottom: 28px; } .mf-auth-card__head h1{ font-size: 24px; margin-bottom: 8px; } .mf-auth-card__head p{ font-size: 14px; } .mf-auth-divider{ display: flex; align-items: center; gap: 12px; margin: 22px 0; font-size: 12px; color: var(--mf-text-3); } .mf-auth-divider::before, .mf-auth-divider::after{ content: ''; flex: 1; height: 1px; background: var(--mf-border); } .mf-auth-foot{ text-align: center; font-size: 14px; color: var(--mf-text-2); margin-top: 22px; } .mf-auth-foot a{ color: var(--mf-brand-500); font-weight: 600; } .mf-auth-foot a:hover{ text-decoration: underline; } .mf-otp-row{ display: flex; gap: 10px; justify-content: center; margin: 8px 0 24px; } .mf-otp-box{ width: 52px; height: 60px; text-align: center; font-size: 22px; font-weight: 700; border-radius: 12px; font-family: var(--mf-font-mono); } /* ---------- Forms ---------- */ .mf-form-group{ margin-bottom: 18px; } .mf-label{ display: block; font-size: 13px; font-weight: 600; color: var(--mf-text-1); margin-bottom: 7px; } .mf-label--optional{ font-weight: 400; color: var(--mf-text-3); } .mf-help{ font-size: 12.5px; color: var(--mf-text-3); margin-top: 6px; } .mf-error{ font-size: 12.5px; color: #ff6161; margin-top: 6px; } textarea.mf-input{ resize: vertical; min-height: 110px; font-family: var(--mf-font-mono); font-size: 13px; } select.mf-input{ appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%238994AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .mf-input-group{ position: relative; } .mf-input-group .mf-input{ padding-right: 46px; } .mf-input-group__icon{ position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--mf-text-3); } .mf-checkbox-row{ display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--mf-text-2); } .mf-checkbox-row input{ width: 16px; height: 16px; accent-color: var(--mf-brand-500); } .mf-form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px){ .mf-form-row{ grid-template-columns: 1fr; } } .mf-copy-field{ display: flex; align-items: center; gap: 8px; } .mf-copy-field .mf-input{ font-family: var(--mf-font-mono); font-size: 13px; } .mf-radio-card{ display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--mf-border-strong); cursor: pointer; transition: border-color .2s ease, background .2s ease; } .mf-radio-card:hover{ border-color: var(--mf-brand); } .mf-radio-card.is-selected{ border-color: var(--mf-brand); background: var(--mf-brand-soft); } .mf-radio-card input{ accent-color: var(--mf-brand-500); width: 16px; height: 16px; } /* ---------- Payment method cards (addfunds) ---------- */ .mf-pay-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (max-width: 480px){ .mf-pay-grid{ grid-template-columns: 1fr; } } .mf-pay-card{ display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--mf-border-strong); cursor: pointer; position: relative; transition: border-color .2s ease, background .2s ease, transform .2s ease; } .mf-pay-card:hover{ border-color: var(--mf-brand); transform: translateY(-1px); } .mf-pay-card input{ position: absolute; opacity: 0; pointer-events: none; } .mf-pay-card__icon{ width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--mf-surface-2); color: var(--mf-text-2); transition: background .2s ease, color .2s ease; } .mf-pay-card__name{ font-size: 13.5px; font-weight: 600; color: var(--mf-text-1); flex: 1; } .mf-pay-card__check{ width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--mf-border-strong); display: flex; align-items: center; justify-content: center; color: transparent; flex-shrink: 0; transition: border-color .2s ease, background .2s ease, color .2s ease; } .mf-pay-card.is-selected, .mf-pay-card:has(input:checked){ border-color: var(--mf-brand); background: var(--mf-brand-soft); } .mf-pay-card.is-selected .mf-pay-card__icon, .mf-pay-card:has(input:checked) .mf-pay-card__icon{ background: var(--mf-brand-500); color: #fff; } .mf-pay-card.is-selected .mf-pay-card__check, .mf-pay-card:has(input:checked) .mf-pay-card__check{ background: var(--mf-brand-500); border-color: var(--mf-brand-500); color: #fff; } /* ---------- Layout: two-column dashboard grid ---------- */ .mf-layout-2col{ display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; } @media (max-width: 900px){ .mf-layout-2col{ grid-template-columns: 1fr; } } .mf-p24{ padding: 24px; } .mf-p32{ padding: 32px; } /* ---------- Mini stat chip marquee (dashboard, above the stat grid) ---------- */ .mf-minichip-marquee{ overflow: hidden; margin-bottom: 20px; border-radius: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .mf-minichip-track{ display: flex; gap: 12px; width: max-content; animation: mfMarquee 34s linear infinite; } .mf-minichip-marquee:hover .mf-minichip-track{ animation-play-state: paused; } @keyframes mfMarquee{ 0%{ transform: translateX(0); } 100%{ transform: translateX(-50%); } } .mf-minichip{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 10px 14px; border-radius: 14px; min-width: 190px; background: var(--mf-surface); border: 1px solid var(--mf-border); box-shadow: 0 2px 4px rgba(0,0,0,.03), 0 8px 20px var(--mf-shadow-ambient); } .mf-minichip__dot{ width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .mf-minichip__body{ min-width: 0; } .mf-minichip__label{ font-size: 10.5px; font-weight: 600; color: var(--mf-text-3); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } .mf-minichip__value{ font-family: var(--mf-font-display); font-size: 14px; font-weight: 700; color: var(--mf-text-1); margin-top: 1px; } .mf-minichip__chart{ width: 56px; height: 26px; margin-left: auto; flex-shrink: 0; } /* ---------- Stat cards ---------- */ .mf-stat-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; } @media (max-width: 900px){ .mf-stat-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px){ .mf-stat-grid{ grid-template-columns: 1fr; } } .mf-stat-card{ padding: 20px; } .mf-stat-card__label{ font-size: 12.5px; color: var(--mf-text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .mf-stat-card__value{ font-family: var(--mf-font-display); font-size: 26px; font-weight: 700; margin-top: 8px; color: var(--mf-text-1); } .mf-stat-card__delta{ font-size: 12.5px; margin-top: 6px; font-weight: 600; } .mf-stat-card__delta--up{ color: #22c56e; } .mf-stat-card__delta--down{ color: #ff6161; } /* ---------- Filter bar ---------- */ .mf-filterbar{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; } .mf-filterbar .mf-input, .mf-filterbar select.mf-input{ width: auto; min-width: 160px; } .mf-search{ position: relative; flex: 1; min-width: 200px; } .mf-search svg{ position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--mf-text-3); } .mf-search .mf-input{ padding-left: 38px; width: 100%; } /* ---------- Tables ---------- */ .mf-table-wrap{ overflow-x: auto; } .mf-table{ width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; } .mf-table th{ text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--mf-text-3); padding: 12px 16px; border-bottom: 1px solid var(--mf-border); white-space: nowrap; } .mf-table td{ padding: 14px 16px; border-bottom: 1px solid var(--mf-border); color: var(--mf-text-2); vertical-align: middle; } .mf-table tr:last-child td{ border-bottom: none; } .mf-table tr:hover td{ background: var(--mf-brand-soft); } .mf-table td.mf-td-strong{ color: var(--mf-text-1); font-weight: 600; } .mf-table .mf-mono{ font-size: 12.5px; } /* ---------- Status pills ---------- */ .mf-pill{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } .mf-pill::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .mf-pill--completed{ background: rgba(34,197,110,.12); color: #22c56e; } .mf-pill--processing{ background: rgba(46,107,255,.12); color: var(--mf-brand-400); } .mf-pill--pending{ background: rgba(245,171,15,.12); color: #f5ab0f; } .mf-pill--partial{ background: rgba(139,116,255,.12); color: #8b74ff; } .mf-pill--canceled{ background: rgba(255,97,97,.12); color: #ff6161; } .mf-pill--refunded{ background: rgba(139,148,172,.14); color: var(--mf-text-2); } /* ---------- Pagination ---------- */ .mf-pagination{ display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 24px; } .mf-pagination a, .mf-pagination span{ width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--mf-text-2); border: 1px solid var(--mf-border); transition: border-color .2s ease, color .2s ease, background .2s ease; } .mf-pagination a:hover{ border-color: var(--mf-brand); color: var(--mf-text-1); } .mf-pagination .is-active{ background: var(--mf-brand); border-color: var(--mf-brand); color: #fff; } /* ---------- Empty state ---------- */ .mf-empty{ text-align: center; padding: 64px 24px; } .mf-empty svg{ margin: 0 auto 16px; color: var(--mf-text-3); } .mf-empty h3{ font-size: 17px; margin-bottom: 6px; } .mf-empty p{ font-size: 14px; max-width: 340px; margin: 0 auto; } /* ---------- Alerts / banners ---------- */ .mf-alert{ display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; font-size: 13.5px; border: 1px solid; margin-bottom: 20px; } .mf-alert svg{ flex-shrink: 0; margin-top: 1px; } .mf-alert--info{ background: var(--mf-brand-soft); border-color: rgba(46,107,255,.28); color: var(--mf-text-1); } .mf-alert--success{ background: rgba(34,197,110,.08); border-color: rgba(34,197,110,.28); color: var(--mf-text-1); } .mf-alert--warning{ background: rgba(245,171,15,.08); border-color: rgba(245,171,15,.28); color: var(--mf-text-1); } .mf-alert--danger{ background: rgba(255,97,97,.08); border-color: rgba(255,97,97,.28); color: var(--mf-text-1); } /* ---------- Tabs ---------- */ .mf-tabs{ display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--mf-border); margin-bottom: 24px; overflow-x: auto; } .mf-tab{ padding: 12px 4px; font-size: 14px; font-weight: 600; color: var(--mf-text-3); position: relative; white-space: nowrap; margin-right: 22px; transition: color .2s ease; } .mf-tab:hover{ color: var(--mf-text-1); } .mf-tab.is-active{ color: var(--mf-text-1); } .mf-tab.is-active::after{ content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--mf-brand); border-radius: 2px; } /* ---------- Sidebar nav (account settings) ---------- */ .mf-sidenav{ display: flex; flex-direction: column; gap: 3px; } .mf-sidenav a{ display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--mf-text-2); transition: background .2s ease, color .2s ease; } .mf-sidenav a:hover{ background: var(--mf-brand-soft); color: var(--mf-text-1); } .mf-sidenav a.is-active{ background: var(--mf-brand-soft); color: var(--mf-brand-500); } /* ---------- Timeline (ticket thread / order history) ---------- */ .mf-timeline{ display: flex; flex-direction: column; gap: 0; } .mf-timeline__item{ display: flex; gap: 14px; padding-bottom: 24px; position: relative; } .mf-timeline__item::before{ content: ''; position: absolute; left: 5px; top: 22px; bottom: 0; width: 1px; background: var(--mf-border); } .mf-timeline__item:last-child::before{ display: none; } .mf-timeline__dot{ width: 11px; height: 11px; border-radius: 50%; background: var(--mf-brand); margin-top: 4px; flex-shrink: 0; box-shadow: 0 0 0 3px var(--mf-brand-soft); } .mf-timeline__dot--muted{ background: var(--mf-text-3); box-shadow: 0 0 0 3px var(--mf-border); } .mf-timeline__body{ flex: 1; } .mf-timeline__head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .mf-timeline__title{ font-size: 14px; font-weight: 600; color: var(--mf-text-1); } .mf-timeline__time{ font-size: 12px; color: var(--mf-text-3); white-space: nowrap; } .mf-timeline__text{ font-size: 13.5px; } /* ---------- Chat / ticket message bubbles ---------- */ .mf-msg{ display: flex; gap: 12px; margin-bottom: 20px; } .mf-msg--staff{ flex-direction: row-reverse; } .mf-avatar{ width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(180deg, #4079ff, #1e5aff); flex-shrink: 0; } .mf-avatar--muted{ background: var(--mf-surface-2); color: var(--mf-text-2); border: 1px solid var(--mf-border); } .mf-msg__bubble{ max-width: 72%; padding: 14px 16px; border-radius: 16px; font-size: 13.5px; } .mf-msg--customer .mf-msg__bubble{ background: var(--mf-surface); border: 1px solid var(--mf-border); border-top-left-radius: 4px; } .mf-msg--staff .mf-msg__bubble{ background: var(--mf-brand-soft); border: 1px solid rgba(46,107,255,.24); border-top-right-radius: 4px; } .mf-msg__meta{ font-size: 11.5px; color: var(--mf-text-3); margin-bottom: 6px; font-weight: 600; } /* ---------- Progress bar (drip-feed / subscriptions) ---------- */ .mf-progress{ height: 6px; border-radius: 999px; background: var(--mf-border); overflow: hidden; } .mf-progress__fill{ height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4079ff, #1e5aff); } /* ---------- Code block (API docs) ---------- */ .mf-code{ background: #0a0e1a; border: 1px solid var(--mf-border-strong); border-radius: 16px; padding: 18px 20px; font-family: var(--mf-font-mono); font-size: 12.8px; line-height: 1.65; color: #d7e2ff; overflow-x: auto; white-space: pre; } html[data-theme="light"] .mf-code{ background: #0b1220; color: #dbe6ff; } .mf-code .tok-key{ color: #8ab6ff; } .mf-code .tok-str{ color: #7ee7a8; } .mf-code .tok-com{ color: #5c6884; } .mf-code-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .mf-code-head span{ font-size: 12px; color: var(--mf-text-3); font-weight: 600; } .mf-endpoint{ display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .mf-method{ font-family: var(--mf-font-mono); font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 7px; } .mf-method--post{ background: rgba(46,107,255,.14); color: var(--mf-brand-400); } .mf-method--get{ background: rgba(34,197,110,.14); color: #22c56e; } .mf-param-table th, .mf-param-table td{ font-size: 13px; } .mf-param-table code{ font-size: 12px; background: var(--mf-surface-2); padding: 2px 6px; border-radius: 6px; } /* ---------- FAQ accordion ---------- */ .mf-faq{ border-radius: 18px; padding: 4px 22px; margin-bottom: 12px; } .mf-faq summary{ list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--mf-text-1); } .mf-faq summary::-webkit-details-marker{ display: none; } .mf-faq__icon{ flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--mf-border-strong); display: flex; align-items: center; justify-content: center; transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), background .2s ease, border-color .2s ease, color .2s ease; } .mf-faq[open] .mf-faq__icon{ transform: rotate(45deg); background: var(--mf-brand-soft); border-color: var(--mf-brand); color: var(--mf-brand); } .mf-faq__body{ padding-bottom: 20px; font-size: 14.5px; } /* ---------- Blog ---------- */ .mf-blog-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 900px){ .mf-blog-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px){ .mf-blog-grid{ grid-template-columns: 1fr; } } .mf-blog-card{ overflow: hidden; } .mf-blog-card__thumb{ height: 160px; background: linear-gradient(135deg, var(--mf-brand-800), var(--mf-brand-600)); display: flex; align-items: center; justify-content: center; } .mf-blog-card__body{ padding: 20px; } .mf-blog-card__cat{ font-size: 11.5px; font-weight: 700; color: var(--mf-brand-500); text-transform: uppercase; letter-spacing: .04em; } .mf-blog-card__title{ font-size: 16px; margin: 8px 0; } .mf-blog-card__meta{ font-size: 12.5px; color: var(--mf-text-3); } .mf-prose{ font-size: 15.5px; line-height: 1.85; color: var(--mf-text-2); max-width: 720px; } .mf-prose h2{ font-size: 22px; margin: 32px 0 14px; color: var(--mf-text-1); } .mf-prose h3{ font-size: 18px; margin: 24px 0 10px; color: var(--mf-text-1); } .mf-prose p{ margin-bottom: 16px; } .mf-prose ul{ margin: 0 0 16px; padding-left: 20px; } .mf-prose li{ margin-bottom: 8px; } /* ---------- Notification list ---------- */ .mf-notif{ display: flex; gap: 14px; padding: 16px; border-radius: 14px; transition: background .2s ease; } .mf-notif:hover{ background: var(--mf-brand-soft); } .mf-notif--unread{ background: var(--mf-brand-soft); } .mf-notif__icon{ width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--mf-surface-2); border: 1px solid var(--mf-border); color: var(--mf-brand-500); } .mf-notif__title{ font-size: 14px; font-weight: 600; color: var(--mf-text-1); } .mf-notif__text{ font-size: 13px; margin-top: 2px; } .mf-notif__time{ font-size: 11.5px; color: var(--mf-text-3); margin-top: 4px; } /* ---------- Misc helpers ---------- */ .mf-flex-between{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .mf-mt8{ margin-top: 8px; } .mf-mt16{ margin-top: 16px; } .mf-mt24{ margin-top: 24px; } .mf-mt32{ margin-top: 32px; } .mf-mb8{ margin-bottom: 8px; } .mf-mb16{ margin-bottom: 16px; } .mf-mb24{ margin-bottom: 24px; } .mf-text-sm{ font-size: 13px; } .mf-text-xs{ font-size: 12px; } .mf-text-muted{ color: var(--mf-text-3); } .mf-w-full{ width: 100%; } .mf-divider{ height: 1px; background: var(--mf-border); margin: 20px 0; } /* --------------------------------------------------------------------- 15. MODALS (Bootstrap 3 .modal JS drives show/hide via .in + display; these rules only restyle the visual chrome, they must not touch display/opacity toggling logic itself) --------------------------------------------------------------------- */ .modal-content{ background: var(--mf-surface); border: 1px solid var(--mf-border); border-radius: 20px; box-shadow: 0 8px 28px var(--mf-shadow-ambient); color: var(--mf-text-1); } .modal-header{ border-bottom: 1px solid var(--mf-border); padding: 20px 24px; } .modal-header .modal-title{ font-family: var(--mf-font-display); font-size: 18px; font-weight: 700; color: var(--mf-text-1); } .modal-header .close{ color: var(--mf-text-2); opacity: .8; text-shadow: none; } .modal-header .close:hover{ color: var(--mf-text-1); opacity: 1; } .modal-body{ padding: 24px; } .modal-footer{ border-top: 1px solid var(--mf-border); padding: 16px 24px; } .modal-backdrop{ background: #05070d; } .modal-backdrop.in{ opacity: .72; } /* --------------------------------------------------------------------- 16. TICKET FILE UPLOADER (core JS enhances this container; the theme only needs to render an inert, correctly-styled placeholder) --------------------------------------------------------------------- */ .tickets-uploader{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 11px; cursor: pointer; border: 1px dashed var(--mf-border-strong); color: var(--mf-text-2); font-size: 13px; font-weight: 600; transition: border-color .2s ease, color .2s ease, background .2s ease; } .tickets-uploader:hover{ border-color: var(--mf-brand); color: var(--mf-text-1); background: var(--mf-brand-soft); } .tickets-uploader::before{ content: '📎'; font-size: 14px; } /* --------------------------------------------------------------------- 17. NOTIFICATION MATRIX TABLE (senders x notification types) --------------------------------------------------------------------- */ .mf-notif-matrix th, .mf-notif-matrix td{ text-align: center; } .mf-notif-matrix th:first-child, .mf-notif-matrix td:first-child{ text-align: left; } .mf-notif-matrix input[type="checkbox"]{ width: 17px; height: 17px; accent-color: var(--mf-brand-500); cursor: pointer; } /* --------------------------------------------------------------------- 18. MISC: currency/lang select in forms, disabled buttons, xs buttons --------------------------------------------------------------------- */ .mf-btn.disabled, .mf-btn:disabled{ opacity: .5; cursor: not-allowed; pointer-events: none; } .mf-well{ background: var(--mf-surface); border: 1px solid var(--mf-border); border-radius: 20px; padding: 28px; margin-bottom: 20px; } @media (max-width: 640px){ .mf-well{ padding: 20px; } } /* ===================================================================== 19b. PROMO PANEL — side panel for tickets / addfunds pages ===================================================================== */ .mf-promo-panel{ position: relative; padding: 30px 26px; overflow: hidden; background: radial-gradient(circle at 15% 0%, var(--mf-brand-soft) 0%, transparent 55%), var(--mf-surface); } .mf-promo-panel__badge{ display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--mf-brand-soft); color: var(--mf-brand-strong); margin-bottom: 16px; } .mf-promo-panel__title{ font-family: var(--mf-font-display); font-size: 21px; font-weight: 800; letter-spacing: -0.01em; color: var(--mf-text-1); margin: 0 0 10px; } .mf-promo-panel__text{ font-size: 13.5px; line-height: 1.7; color: var(--mf-text-2); margin: 0 0 24px; } .mf-promo-panel .mf-timeline{ margin-bottom: 24px; } .mf-promo-panel__stat-row{ display: flex; gap: 14px; margin-top: 4px; } .mf-promo-panel__stat{ flex: 1; padding: 14px; border-radius: 14px; background: var(--mf-surface-2); border: 1px solid var(--mf-border); text-align: center; } .mf-promo-panel__stat-value{ font-family: var(--mf-font-display); font-size: 20px; font-weight: 800; color: var(--mf-brand-400); } .mf-promo-panel__stat-label{ font-size: 11px; color: var(--mf-text-3); font-weight: 600; margin-top: 3px; text-transform: uppercase; letter-spacing: .03em; } .mf-promo-panel__discount{ display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 16px; margin-bottom: 20px; background: linear-gradient(135deg, var(--mf-brand-700), var(--mf-brand-600)); box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 16px 32px rgba(23,80,230,.28); } .mf-promo-panel__discount-value{ font-family: var(--mf-font-display); font-size: 30px; font-weight: 800; color: #fff; line-height: 1; } .mf-promo-panel__discount-text{ font-size: 12.5px; color: rgba(255,255,255,.85); font-weight: 600; line-height: 1.5; } /* ===================================================================== 19. HOMEPAGE — hero, platform strip, features, process, live stats, CTA ===================================================================== */ /* ---------- Hero ---------- */ .mf-hero__grid{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } @media (max-width: 980px){ .mf-hero__grid{ grid-template-columns: 1fr; gap: 40px; } } .mf-hero__badge{ display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--mf-surface-2); border: 1px solid var(--mf-border-strong); color: var(--mf-text-2); margin-bottom: 22px; } .mf-hero__badge .mf-status-dot{ margin: 0; } .mf-hero__title{ font-family: var(--mf-font-display); font-size: 54px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; color: var(--mf-text-1); margin: 0 0 22px; } .mf-hero__title em{ font-style: normal; color: var(--mf-brand-500); } @media (max-width: 980px){ .mf-hero__title{ font-size: 38px; } } @media (max-width: 480px){ .mf-hero__title{ font-size: 30px; } } .mf-hero__lead{ font-size: 17px; line-height: 1.7; color: var(--mf-text-2); max-width: 540px; margin-bottom: 32px; } .mf-hero__actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; } .mf-hero__stats{ display: flex; gap: 32px; flex-wrap: wrap; } .mf-hero__stat{ min-width: 92px; } .mf-hero__stat-value{ font-family: var(--mf-font-display); font-size: 26px; font-weight: 800; color: var(--mf-text-1); } .mf-hero__stat-label{ font-size: 12.5px; color: var(--mf-text-3); font-weight: 600; margin-top: 4px; } /* Hero visual: fake "software" console panel */ .mf-hero__panel{ position: relative; border-radius: 22px; padding: 22px; background: linear-gradient(180deg, var(--mf-surface) 0%, var(--mf-surface-2) 100%); border: 1px solid var(--mf-border-strong); box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 24px 64px var(--mf-shadow-ambient); } .mf-hero__panel-dots{ display: flex; gap: 7px; margin-bottom: 16px; } .mf-hero__panel-dots span{ width: 10px; height: 10px; border-radius: 50%; background: var(--mf-border-strong); } .mf-hero__panel-row{ display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; border-radius: 12px; background: var(--mf-surface-2); border: 1px solid var(--mf-border); margin-bottom: 10px; font-size: 13px; } .mf-hero__panel-row:last-child{ margin-bottom: 0; } .mf-hero__panel-service{ display: flex; align-items: center; gap: 10px; color: var(--mf-text-1); font-weight: 600; } .mf-hero__panel-dot{ width: 7px; height: 7px; border-radius: 50%; background: #22c56e; box-shadow: 0 0 0 3px rgba(34,197,110,.18); flex-shrink: 0; } .mf-hero__panel-dot--busy{ background: var(--mf-brand-500); box-shadow: 0 0 0 3px var(--mf-brand-soft); } .mf-hero__panel-meta{ color: var(--mf-text-3); font-size: 12px; font-family: var(--mf-font-mono); } .mf-hero__panel-bar{ height: 5px; border-radius: 4px; background: var(--mf-border); overflow: hidden; margin-top: 14px; } .mf-hero__panel-bar span{ display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--mf-brand-400), var(--mf-brand-600)); animation: mfPanelBar 3.2s ease-in-out infinite; } @keyframes mfPanelBar{ 0%{ width: 8%; } 45%{ width: 78%; } 70%{ width: 62%; } 100%{ width: 96%; } } .mf-hero__panel-float{ position: absolute; right: -18px; bottom: -22px; padding: 14px 18px; border-radius: 16px; background: var(--mf-surface); border: 1px solid var(--mf-border-strong); box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 16px 40px var(--mf-shadow-ambient); display: flex; align-items: center; gap: 12px; animation: mfFloatUp 5s ease-in-out infinite; } @keyframes mfFloatUp{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } } .mf-hero__panel-float-icon{ width: 34px; height: 34px; border-radius: 10px; background: var(--mf-brand-soft); color: var(--mf-brand-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } @media (max-width: 640px){ .mf-hero__panel-float{ right: 6px; bottom: -20px; padding: 10px 14px; } } /* ---------- Hero login card (right column) ---------- */ .mf-hero__login-wrap{ position: relative; } .mf-hero__login-wrap::before{ content: ''; position: absolute; inset: -40px; z-index: -1; border-radius: 40px; background: radial-gradient(circle at 70% 20%, rgba(46,107,255,.16), transparent 60%); filter: blur(8px); } .mf-hero__login-wrap .mf-auth-card{ margin: 0 auto; max-width: 400px; animation: mfLoginPopIn .8s cubic-bezier(0.34, 1.56, 0.64, 1) .15s both; } @keyframes mfLoginPopIn{ 0%{ opacity: 0; transform: translateY(22px) scale(.96); } 100%{ opacity: 1; transform: translateY(0) scale(1); } } .mf-hero__login-foot{ text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--mf-text-3); } .mf-hero__login-foot a{ color: var(--mf-brand-400); font-weight: 600; } /* ---------- Info grid (4 boxes under hero: identity / platforms / telegram) ---------- */ .mf-info-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 980px){ .mf-info-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .mf-info-grid{ grid-template-columns: 1fr; } } .mf-info-card{ padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), border-color .25s ease; } .mf-info-card__icon{ width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--mf-brand-soft); color: var(--mf-brand-500); } .mf-info-card__title{ font-size: 14.5px; font-weight: 700; color: var(--mf-text-1); } .mf-info-card__text{ font-size: 13px; line-height: 1.6; color: var(--mf-text-2); margin: 0; } .mf-info-card__platforms{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .mf-info-card__platforms span{ font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--mf-surface-2); color: var(--mf-text-2); border: 1px solid var(--mf-border); } /* Dedicated "Completed Orders" info card — a real, live figure (totals['ordersAll'], server-rendered fresh on every load) styled as a big headline number rather than a small pill, so it reads as the card's whole point rather than a footnote. */ .mf-info-card--orders .mf-info-card__icon{ background: rgba(34,197,110,.14); color: var(--mf-signal); } .mf-info-card__orders-big{ font-family: var(--mf-font-display); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--mf-text-1); margin: 2px 0 6px; } a.mf-info-card--link{ text-decoration: none; cursor: pointer; } a.mf-info-card--link:hover{ transform: translateY(-4px); border-color: var(--mf-brand-500); box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 16px 40px var(--mf-shadow-ambient), 0 0 0 1px rgba(46,107,255,.12); } a.mf-info-card--link .mf-info-card__icon{ background: linear-gradient(135deg, var(--mf-brand-500), var(--mf-brand-700)); color: #fff; } .mf-info-card__cta{ margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--mf-brand-400); } .mf-info-card__cta svg{ transition: transform .25s cubic-bezier(0.34,1.56,0.64,1); } a.mf-info-card--link:hover .mf-info-card__cta svg{ transform: translateX(3px); } /* ---------- Platform strip (trust bar) ---------- */ .mf-platform-strip{ display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; padding: 28px 0; border-top: 1px solid var(--mf-border); border-bottom: 1px solid var(--mf-border); } .mf-platform-chip{ display: flex; align-items: center; gap: 9px; color: var(--mf-text-3); font-weight: 700; font-size: 14px; transition: color .2s ease, transform .2s ease; } .mf-platform-chip:hover{ color: var(--mf-text-1); transform: translateY(-2px); } .mf-platform-chip svg{ width: 20px; height: 20px; flex-shrink: 0; } /* ---------- Section head (centered) ---------- */ .mf-section-head{ max-width: 620px; margin: 0 auto 48px; text-align: center; } .mf-section-head h2{ font-family: var(--mf-font-display); font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--mf-text-1); margin: 0 0 14px; } .mf-section-head p{ font-size: 15.5px; line-height: 1.7; color: var(--mf-text-2); margin: 0; } @media (max-width: 640px){ .mf-section-head h2{ font-size: 26px; } } /* ---------- Feature grid ---------- */ .mf-feature-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px){ .mf-feature-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px){ .mf-feature-grid{ grid-template-columns: 1fr; } } .mf-feature-card{ padding: 26px; transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), border-color .25s ease; } .mf-feature-card:hover{ transform: translateY(-4px); border-color: var(--mf-border-strong); } .mf-feature-card__icon{ width: 42px; height: 42px; border-radius: 12px; margin-bottom: 18px; background: var(--mf-brand-soft); color: var(--mf-brand-500); display: flex; align-items: center; justify-content: center; } .mf-feature-card__title{ font-size: 16.5px; font-weight: 700; color: var(--mf-text-1); margin: 0 0 8px; } .mf-feature-card__text{ font-size: 14px; line-height: 1.65; color: var(--mf-text-2); margin: 0; } /* ---------- Live stat strip (producer identity) ---------- */ .mf-livebar{ display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 10px 18px; border-radius: 999px; margin: 0 auto 48px; width: fit-content; background: var(--mf-surface-2); border: 1px solid var(--mf-border-strong); font-size: 12.5px; color: var(--mf-text-2); } /* ---------- Process / how it works ---------- */ .mf-process{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: mfstep; } @media (max-width: 900px){ .mf-process{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .mf-process{ grid-template-columns: 1fr; } } .mf-process__step{ position: relative; padding: 26px 22px; } .mf-process__num{ font-family: var(--mf-font-display); font-size: 13px; font-weight: 800; color: var(--mf-brand-500); background: var(--mf-brand-soft); width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .mf-process__title{ font-size: 15.5px; font-weight: 700; color: var(--mf-text-1); margin: 0 0 6px; } .mf-process__text{ font-size: 13.5px; line-height: 1.6; color: var(--mf-text-2); margin: 0; } /* ---------- Service pillar grid (SEO cards — Telegram service categories) ---------- Each tile is a real, crawlable with an

+ one-line description, so this grid also doubles as the homepage's SEO-boxed content for the 7 Telegram service families (Post Reaction, Post Share, Bot Start, Story Views, Members, Premium Members, Country Target Members). / .mf-platform-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; } @media (max-width: 560px){ .mf-platform-grid{ grid-template-columns: repeat(2, 1fr); } } .mf-platform-tile{ display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 26px 16px; border-radius: 16px; background: var(--mf-surface); border: 1px solid var(--mf-border); transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), border-color .25s ease, background .25s ease; } .mf-platform-tile:hover{ transform: translateY(-4px); border-color: var(--mf-brand-500); background: var(--mf-surface-2); } .mf-platform-tileicon{ width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .mf-platform-tilename{ font-size: 13.5px; font-weight: 700; color: var(--mf-text-1); margin: 0; } .mf-platform-tilecount{ font-size: 11.5px; color: var(--mf-text-3); font-family: var(--mf-font-mono); } .mf-platform-tiledesc{ font-size: 12px; line-height: 1.55; color: var(--mf-text-2); margin: 0; } / ---------- CTA band ---------- / .mf-cta-band{ position: relative; border-radius: 28px; padding: 64px 48px; text-align: center; overflow: hidden; background: radial-gradient(circle at 30% 20%, var(--mf-brand-700) 0%, transparent 55%), radial-gradient(circle at 80% 90%, var(--mf-brand-600) 0%, transparent 50%), var(--mf-bg-2); border: 1px solid var(--mf-border-strong); } .mf-cta-band h2{ font-family: var(--mf-font-display); font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 0 0 14px; position: relative; z-index: 1; } .mf-cta-band p{ font-size: 15.5px; color: rgba(255,255,255,.75); max-width: 480px; margin: 0 auto 30px; position: relative; z-index: 1; } .mf-cta-band .mf-hero__actions{ justify-content: center; margin-bottom: 0; position: relative; z-index: 1; } @media (max-width: 640px){ .mf-cta-band{ padding: 44px 24px; } .mf-cta-band h2{ font-size: 24px; } } / ===================================================================== 20. PERFECTPANEL CORE / LEGACY COMPATIBILITY CLASSES ----------------------------------------------------------------- These are NOT mainfollow's own design system (that's all mf- prefixed above). They are structural classes that PerfectPanel's core platform and/or admin-authored rich text (service descriptions, ticket bodies, CMS pages, custom_header/custom_footer) may render directly, taken from the original theme's bootstrap.css (everything appended AFTER the vanilla Bootstrap 3.3.7 library, incl. the RTL block). A few hardcoded light-mode colors were swapped for mf- theme variables so they don't break in dark mode; everything else is left as-is for maximum compatibility with PerfectPanel core behavior. ===================================================================== / / Stripe / .StripeElement { box-sizing: border-box; height: 40px; padding: 10px 12px; border: 1px solid transparent; border-radius: 4px; background-color: var(--mf-surface-2); box-shadow: 0 1px 3px 0 rgba(0,0,0,.12); -webkit-transition: box-shadow 150ms ease; transition: box-shadow 150ms ease; } .StripeElement--focus { box-shadow: 0 1px 3px 0 #cfd7df; } .StripeElement--invalid { border-color: #fa755a; } .StripeElement--webkit-autofill { background-color: #fefde5 !important; } .navbar-brand { float: left; padding: 0 15px; font-size: 18px; line-height: 48px; height: 50px; } .navbar-brand img { display: inline-block; max-width: 100%; max-height: 51px; margin-top: -1px; vertical-align: middle; } .navbar-collapsed-before .navbar-header { width: 100%; } .navbar-collapsed-before .navbar-toggle { display: block; } .navbar-collapsed-before .navbar-nav { width: 100%; } .navbar-collapsed-before .navbar-nav li { width: 100%; } .navbar-collapsed-before .navbar-nav li a { padding-top: 10px; padding-bottom: 10px; } .navbar-collapsed-before .navbar-right { width: 100%; float: left !important; } .mass-alert { margin-bottom: 20px; } .mass-alert .alert { margin-bottom: 0px; -webkit-border-radius: 0px; border-radius: 0px; } .mass-alert .alert:first-child { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .mass-alert .alert:last-child { -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .dropdown-max-height{ max-height: 300px; overflow-y: auto; } .titcket-title{ font-size: 18px; padding-bottom: 10px; border-bottom: 1px solid #ddd; margin-bottom: 10px; } .ticket-message-right{ } .ticket-message-right .ticket-message{ background: var(--mf-surface-2); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 15px; } .ticket-message-left{ } .ticket-message-left .ticket-message{ background: var(--mf-surface-2); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 15px; } .ticket-message-block{ margin-bottom: 15px; } .ticket-message{ word-break: break-word; } .ticket-message p, .ticket-message blockquote, .ticket-message li{ white-space: pre-wrap; } .ticket-message blockquote{ font-size: 14px; border-left: 3px solid var(--mf-brand-500); padding: 2px 8px; margin-bottom: 12px; } .ticket-message hr { border-top: 1px solid var(--mf-border-strong); } body { padding-bottom: 50px; } .nowrap { white-space: nowrap; } .width-40 { width: 40% !important; word-break: break-all; min-width: 250px; } .width-service-name{ min-width: 200px; } .service-description table{ width: auto!important; } .service-description { word-break: break-word; } .service-descriptionth { width: 40% !important; word-break: break-all; } .description { border-bottom: 2px solid var(--mf-border-strong); } .terms { margin-top: 0px; margin-bottom: 20px; } .api h1, h2, h3, pre { margin-top: 0px; margin-bottom: 20px; } .api h4, h5, h6, form { margin-top: 0px; margin-bottom: 10px; } .link { word-break: break-all; min-width: 200px; } .search { width: 250px; } .nav-pills { margin-bottom: 10px; } .pagination { margin: 0px; } .well-float { float: left; width: 100%; } .pull-right-middle { line-height: 40px; } .modal-body-scroller { max-height: 500px; overflow: auto; -webkit-border-radius: 6px; border-radius: 6px; } .navbar-toggle{ margin-right: 15px; } .border-solid{ border: 1px solid #ddd; } .border-rounded{ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; overflow-wrap: break-word; word-wrap: break-word; background: var(--mf-surface-2); } .form-grouppassword{ position: relative; } .forgot-password{ position: absolute; right: 11px; bottom: 7px; } .confirm-email { margin-top: 30px; } .confirm-email__description { margin-bottom: 24px; } .navbar-icon { margin: 0px 3px; } / RTL / .rtl-navbar { direction: rtl; } .rtl-navbar .navbar-header { float: right; } .rtl-navbar .navbar-right { float: left !important; margin-right: -15px; } .rtl-navbar .navbar-nav { float: right; padding-right: 5px; margin-right: 15px; } .rtl-navbar .navbar-nav li { float: right; } .rtl-navbar .navbar-toggle { float: left; } .rtl-navbar .navbar-brand { float: right; padding-right: 15px; } .rtl-form { direction: rtl; } .rtl-form input { direction: rtl; text-align: right; } .rtl-form .checkbox label { padding-right: 20px; padding-left: 0px; } .rtl-form .checkbox input[type="checkbox"] { right: 0; } .rtl-form .forgot-password{ right: auto; left: 11px; } .rtl-form .close { float: left; right: 0; top: 0px; } .rtl-form .pull-right { float: left !important; padding-right: 0px; } .rtl-form .pull-right-padding { padding-left: 5px; float: left !important; } .rtl-content { direction: rtl; } .rtl-table { direction: rtl; } .rtl-table th { text-align: right; } .rtl-table td { text-align: right; } .rtl-h { direction: rtl; text-align: right; } .rtl-btn { float: right; } .rtl-content { direction: rtl; } .rtl-content h1, .rtl-content h2, .rtl-content h3, .rtl-content h4, .rtl-content h5, .rtl-content h6 { text-align: right; } .rtl-content ul, .rtl-content ol { padding-right: 15px; } .rtl-ul { text-align: right; direction: rtl; padding-right: 15px; } .rtl-alert { text-align: right; direction: rtl; } .rtl-alert .close { float: left; right: 0; top: 0px; } .rtl-pagination { float: right; } .rtl-pagination li { float: right; } .rtl-pagination li:last-child a { unicode-bidi: bidi-override; direction: rtl; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; } .rtl-pagination li:first-child a { unicode-bidi: bidi-override; direction: rtl; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 0px; border-top-left-radius: 0px; } .rtl-nav { float: right; direction: rtl; width: 100%; padding-right: 0px; } .rtl-nav li { float: right; } .rtl-nav .pull-right { float: left !important; } .rtl-nav .pull-right .input-group input { -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; -webkit-border-top-left-radius: 0px; border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; } .rtl-nav .pull-right .input-group .btn { -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; } .rtl-search{ direction: rtl; } .rtl-search .input-group input { -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; -webkit-border-top-left-radius: 0px; border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; } .rtl-search .input-group .btn { -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; } .rtl-modal { direction: rtl; } .rtl-modal .close { float: left; } .rtl-modal .modal-footer { text-align: left; } / Media */ @media(min-width: 991px) { .service-name { max-width: 320px; word-break: break-word; } .text-md-right { text-align: right; } } @media (max-width: 991px) { .well-float { width: auto; min-width: 100%; } } @media (max-width: 768px) { .rtl-navbar .navbar-nav { float: right !important; width: 100%; margin-right: 0px; } .rtl-navbar .navbar-nav li { width: 100%; } .rtl-navbar .navbar-header { float: none; margin-right: 0px; } .rtl-navbar .navbar-brand { float: right; padding-right: 15px; } .navbar-collapsed-before .navbar-header { width: auto; } } .order-actions{ width: 92px; } @media(max-width: 1200px){ .order-actions{ width: auto; } .order-actions .btn{ margin-bottom: 2px; } }