/* ===================================================================== Torrenting.com — 2026 redesign Single stylesheet, CSS-variable based light + dark themes. Loaded AFTER the legacy main.css so it overrides legacy chrome. Toggle theme by setting `data-theme="light"` or `data-theme="dark"` on . Defaults follow `prefers-color-scheme`. ===================================================================== */ /* ---------- Theme tokens ---------- */ :root { --tt-max-width: 1400px; --tt-radius: 10px; --tt-radius-sm: 6px; --tt-radius-lg: 16px; --tt-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04); --tt-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04); --tt-shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, 0.18), 0 8px 16px -8px rgba(15, 23, 42, 0.12); --tt-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --tt-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --tt-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); } /* Light theme (default) */ :root, :root[data-theme="light"] { --tt-bg: #f7f8fa; --tt-bg-elevated: #ffffff; --tt-bg-sunken: #eef0f4; --tt-bg-hover: #f1f3f7; --tt-bg-input: #ffffff; --tt-border: #e4e7ec; --tt-border-strong: #cdd2db; --tt-text: #0f172a; --tt-text-muted: #525d72; --tt-text-subtle: #8b94a8; --tt-link: #2563eb; --tt-link-hover: #1d4ed8; --tt-primary: #2563eb; --tt-primary-hover: #1d4ed8; --tt-primary-text: #ffffff; --tt-success: #16a34a; --tt-warning: #d97706; --tt-danger: #dc2626; --tt-accent: #7c3aed; --tt-header-bg: #ffffff; --tt-header-border: #e4e7ec; --tt-nav-bg: #ffffff; --tt-nav-link: #334155; --tt-nav-link-hover: #0f172a; --tt-nav-link-active: #2563eb; --tt-nav-link-active-bg: rgba(37, 99, 235, 0.10); --tt-sidebar-bg: #ffffff; --tt-sidebar-text: #0f172a; --tt-sidebar-border: #e4e7ec; --tt-card-bg: #ffffff; --tt-card-border: #e4e7ec; --tt-overlay: rgba(15, 23, 42, 0.45); --tt-ring: rgba(37, 99, 235, 0.25); color-scheme: light; } /* Dark theme */ :root[data-theme="dark"] { --tt-bg: #0b0f17; --tt-bg-elevated: #131826; --tt-bg-sunken: #080b12; --tt-bg-hover: #1a2030; --tt-bg-input: #0f1421; --tt-border: #232a3a; --tt-border-strong: #2f384c; --tt-text: #e5e9f0; --tt-text-muted: #98a2b3; --tt-text-subtle: #6b7588; --tt-link: #60a5fa; --tt-link-hover: #93c5fd; --tt-primary: #3b82f6; --tt-primary-hover: #60a5fa; --tt-primary-text: #ffffff; --tt-success: #22c55e; --tt-warning: #f59e0b; --tt-danger: #ef4444; --tt-accent: #a78bfa; --tt-header-bg: rgba(11, 15, 23, 0.85); --tt-header-border: #1f2638; --tt-nav-bg: #131826; --tt-nav-link: #c5cad8; --tt-nav-link-hover: #ffffff; --tt-nav-link-active: #60a5fa; --tt-nav-link-active-bg: rgba(96, 165, 250, 0.14); --tt-sidebar-bg: #131826; --tt-sidebar-text: #e5e9f0; --tt-sidebar-border: #232a3a; --tt-card-bg: #131826; --tt-card-border: #232a3a; --tt-overlay: rgba(0, 0, 0, 0.60); --tt-ring: rgba(96, 165, 250, 0.30); color-scheme: dark; } /* Follow system if user hasn't picked */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --tt-bg: #0b0f17; --tt-bg-elevated: #131826; --tt-bg-sunken: #080b12; --tt-bg-hover: #1a2030; --tt-bg-input: #0f1421; --tt-border: #232a3a; --tt-border-strong: #2f384c; --tt-text: #e5e9f0; --tt-text-muted: #98a2b3; --tt-text-subtle: #6b7588; --tt-link: #60a5fa; --tt-link-hover: #93c5fd; --tt-primary: #3b82f6; --tt-primary-hover: #60a5fa; --tt-primary-text: #ffffff; --tt-success: #22c55e; --tt-warning: #f59e0b; --tt-danger: #ef4444; --tt-accent: #a78bfa; --tt-header-bg: rgba(11, 15, 23, 0.85); --tt-header-border: #1f2638; --tt-nav-bg: #131826; --tt-nav-link: #c5cad8; --tt-nav-link-hover: #ffffff; --tt-nav-link-active: #60a5fa; --tt-nav-link-active-bg: rgba(96, 165, 250, 0.14); --tt-sidebar-bg: #131826; --tt-sidebar-text: #e5e9f0; --tt-sidebar-border: #232a3a; --tt-card-bg: #131826; --tt-card-border: #232a3a; --tt-overlay: rgba(0, 0, 0, 0.60); --tt-ring: rgba(96, 165, 250, 0.30); color-scheme: dark; } } /* ---------- Base reset (additive, doesn't fight legacy) ---------- */ html { scroll-behavior: smooth; } body { margin: 0; background: var(--tt-bg); color: var(--tt-text); font-family: var(--tt-font-sans); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Smooth theme transitions on color-bearing surfaces */ body, .tt-header, .tt-nav, .tt-card, .tt-sidebar, .tt-input, .tt-btn, a { transition: background-color var(--tt-transition), color var(--tt-transition), border-color var(--tt-transition); } a { color: var(--tt-link); text-decoration: none; } a:hover { color: var(--tt-link-hover); text-decoration: underline; } ::selection { background: var(--tt-primary); color: var(--tt-primary-text); } /* ---------- New header / topbar (two rows) ---------- */ .tt-header { position: sticky; top: 0; z-index: 100; background: var(--tt-header-bg); border-bottom: 1px solid var(--tt-header-border); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); } .tt-header-row { width: 100%; } .tt-header-row-top .tt-header-inner, .tt-header > .tt-header-inner { /* fallback for single-row pages (login/auth) */ display: flex; align-items: center; gap: 16px; padding: 10px 24px; min-height: 60px; } .tt-header-row-bottom { border-top: 1px solid var(--tt-header-border); background: var(--tt-bg-sunken); } .tt-header-row-bottom .tt-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 8px 24px; min-height: 40px; flex-wrap: wrap; } .tt-header-inner { max-width: var(--tt-max-width); margin: 0 auto; width: 100%; box-sizing: border-box; } .tt-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--tt-text); letter-spacing: -0.01em; text-decoration: none; } .tt-brand:hover { color: var(--tt-text); text-decoration: none; } .tt-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--tt-primary), var(--tt-accent)); color: #fff; font-weight: 800; font-size: 15px; } .tt-brand-name { display: inline-flex; align-items: baseline; gap: 4px; } .tt-brand-name span:last-child { color: var(--tt-text-muted); font-weight: 500; font-size: 13px; } .tt-nav { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; } .tt-nav a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; color: var(--tt-nav-link); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; line-height: 1; } .tt-nav a .fa { font-size: 12px; opacity: 0.7; } .tt-nav a:hover { background: var(--tt-bg-hover); color: var(--tt-nav-link-hover); text-decoration: none; } .tt-nav a:hover .fa { opacity: 1; } .tt-nav a.is-active { color: var(--tt-nav-link-active); background: var(--tt-nav-link-active-bg); border: 1px solid var(--tt-border); } .tt-nav a.is-active .fa { opacity: 1; } .tt-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--tt-danger); margin-left: 4px; } /* Donate button (prominent CTA pill in row 1) */ .tt-donate-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--tt-danger); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background-color var(--tt-transition), box-shadow var(--tt-transition); } .tt-donate-btn:hover { background: #b91c1c; color: #fff; text-decoration: none; box-shadow: 0 4px 12px -2px rgba(220, 38, 38, 0.4); } .tt-donate-btn .fa { font-size: 12px; } /* Search box in row 1 */ .tt-search { position: relative; flex: 1; max-width: 360px; min-width: 160px; } .tt-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tt-text-subtle); font-size: 14px; pointer-events: none; } .tt-search input[type="search"] { width: 100%; padding: 9px 14px 9px 38px; font: inherit; font-size: 14px; color: var(--tt-text); background: var(--tt-bg-input); border: 1px solid var(--tt-border-strong); border-radius: 999px; outline: none; box-sizing: border-box; transition: border-color var(--tt-transition), box-shadow var(--tt-transition); } .tt-search input[type="search"]::placeholder { color: var(--tt-text-subtle); } .tt-search input[type="search"]:focus { border-color: var(--tt-primary); box-shadow: 0 0 0 3px var(--tt-ring); } .tt-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } /* Actions cluster on right (icons + user) */ .tt-header-actions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; } /* ---------- Row 2: stats + quick links ---------- */ .tt-stats-row { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; } .tt-stat { display: inline-flex; align-items: center; gap: 6px; color: var(--tt-text-muted); text-decoration: none; white-space: nowrap; font-weight: 500; } a.tt-stat:hover { color: var(--tt-text); text-decoration: none; } .tt-stat strong { color: var(--tt-text); font-weight: 700; } .tt-stat .fa { font-size: 13px; } .tt-stat-icon-up { color: var(--tt-success); } .tt-stat-icon-down { color: var(--tt-danger); } .tt-stat-icon-bonus{ color: #eab308; } .tt-stat-icon-balance { color: var(--tt-link); } .tt-stat-sep { width: 1px; height: 16px; background: var(--tt-border); } .tt-quick-links { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } .tt-quick-links a { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--tt-radius-sm); color: var(--tt-text-muted); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; } .tt-quick-links a:hover { background: var(--tt-bg-hover); color: var(--tt-text); text-decoration: none; } .tt-quick-links a .fa { font-size: 11px; opacity: 0.7; } .tt-quick-links a:hover .fa { opacity: 1; } .tt-quick-cta { color: var(--tt-primary) !important; background: var(--tt-nav-link-active-bg); font-weight: 600 !important; } .tt-quick-cta:hover { background: var(--tt-primary) !important; color: var(--tt-primary-text) !important; } .tt-quick-cta .fa { opacity: 1 !important; } /* Icon button (e.g. messages bell) */ .tt-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--tt-radius-sm); border: 0; background: transparent; color: var(--tt-text-muted); font-size: 16px; text-decoration: none; cursor: pointer; } .tt-icon-btn:hover { background: var(--tt-bg-hover); color: var(--tt-text); text-decoration: none; } .tt-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--tt-danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--tt-header-bg); box-sizing: content-box; } .tt-pill { display: inline-flex; align-items: center; padding: 1px 8px; margin-left: auto; font-size: 11px; font-weight: 600; line-height: 1.6; border-radius: 999px; background: var(--tt-bg-sunken); color: var(--tt-text-muted); } .tt-pill-warning { background: rgba(217, 119, 6, 0.15); color: var(--tt-warning); } /* User menu (avatar + dropdown) */ .tt-user-menu { position: relative; } .tt-user-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid var(--tt-border); background: var(--tt-bg-elevated); cursor: pointer; color: var(--tt-text); font: inherit; font-size: 13px; font-weight: 600; line-height: 1; user-select: none; } .tt-user-trigger:hover { background: var(--tt-bg-hover); border-color: var(--tt-border-strong); } .tt-user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--tt-bg-sunken); } .tt-user-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tt-user-chevron { width: 14px; height: 14px; color: var(--tt-text-muted); transition: transform var(--tt-transition); } .tt-user-menu.is-open .tt-user-chevron { transform: rotate(180deg); } .tt-user-dropdown { position: absolute; right: 0; top: calc(100% + 8px); width: 300px; max-height: calc(100vh - 80px); overflow-y: auto; background: var(--tt-card-bg); border: 1px solid var(--tt-card-border); border-radius: var(--tt-radius); box-shadow: var(--tt-shadow-lg); padding: 6px; z-index: 200; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--tt-transition), transform var(--tt-transition); } .tt-user-menu.is-open .tt-user-dropdown { opacity: 1; transform: translateY(0); pointer-events: auto; } .tt-user-dropdown-head { padding: 4px; } .tt-user-dropdown-profile { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--tt-radius-sm); text-decoration: none; color: var(--tt-text); } .tt-user-dropdown-profile:hover { background: var(--tt-bg-hover); color: var(--tt-text); text-decoration: none; } .tt-user-avatar-lg { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--tt-bg-sunken); } .tt-user-dropdown-name { font-size: 14px; font-weight: 700; color: var(--tt-text); } .tt-user-dropdown-sub { font-size: 12px; color: var(--tt-text-muted); margin-top: 2px; } .tt-user-dropdown-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin: 6px 4px 4px; padding: 10px 8px; background: var(--tt-bg-sunken); border-radius: var(--tt-radius-sm); } .tt-user-dropdown-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--tt-text-muted); text-align: center; } .tt-user-dropdown-stats strong { font-size: 13px; font-weight: 700; color: var(--tt-text); } .tt-user-dropdown-section { padding: 6px 0; border-top: 1px solid var(--tt-border); } .tt-user-dropdown-section:first-of-type, .tt-user-dropdown-stats + .tt-user-dropdown-section { border-top: 0; } .tt-user-dropdown-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tt-text-subtle); padding: 6px 12px; } .tt-user-dropdown a[role="menuitem"] { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 0 2px; border-radius: var(--tt-radius-sm); color: var(--tt-text); font-size: 13px; font-weight: 500; text-decoration: none; line-height: 1.4; } .tt-user-dropdown a[role="menuitem"]:hover { background: var(--tt-bg-hover); color: var(--tt-text); text-decoration: none; } .tt-user-dropdown a[role="menuitem"] .fa { width: 16px; color: var(--tt-text-muted); font-size: 13px; text-align: center; } .tt-user-dropdown a[role="menuitem"]:hover .fa { color: var(--tt-text); } .tt-user-dropdown-logout { color: var(--tt-danger) !important; } .tt-user-dropdown-logout .fa { color: var(--tt-danger) !important; } .tt-user-dropdown-logout:hover { background: rgba(220, 38, 38, 0.10) !important; } /* Theme toggle (uses the same .tt-icon-btn shape; just controls sun/moon swap) */ .tt-icon-btn svg { width: 18px; height: 18px; display: inline-block; } .tt-icon-btn .tt-icon-sun { display: none; } :root[data-theme="dark"] .tt-icon-btn .tt-icon-sun { display: inline-block; } :root[data-theme="dark"] .tt-icon-btn .tt-icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .tt-icon-btn .tt-icon-sun { display: inline-block; } :root:not([data-theme]) .tt-icon-btn .tt-icon-moon { display: none; } } /* ---------- Layout container ---------- */ .tt-container { max-width: var(--tt-max-width); margin: 0 auto; padding: 24px; } /* ---------- Card / panel ---------- */ .tt-card { background: var(--tt-card-bg); border: 1px solid var(--tt-card-border); border-radius: var(--tt-radius); box-shadow: var(--tt-shadow-sm); padding: 24px; } /* ---------- Forms ---------- */ .tt-input, .tt-form input[type="text"], .tt-form input[type="email"], .tt-form input[type="password"], .tt-form input[type="number"], .tt-form input[type="url"], .tt-form input[type="search"], .tt-form textarea, .tt-form select { display: block; width: 100%; padding: 11px 14px; font: inherit; font-size: 14px; line-height: 1.4; color: var(--tt-text); background: var(--tt-bg-input); border: 1px solid var(--tt-border-strong); border-radius: var(--tt-radius-sm); outline: none; box-sizing: border-box; transition: border-color var(--tt-transition), box-shadow var(--tt-transition), background-color var(--tt-transition); } .tt-input::placeholder, .tt-form input::placeholder, .tt-form textarea::placeholder { color: var(--tt-text-subtle); } .tt-input:focus, .tt-form input:focus, .tt-form textarea:focus, .tt-form select:focus { border-color: var(--tt-primary); box-shadow: 0 0 0 3px var(--tt-ring); } .tt-label { display: block; font-size: 13px; font-weight: 600; color: var(--tt-text); margin-bottom: 6px; } .tt-hint { font-size: 12px; color: var(--tt-text-muted); margin-top: 6px; line-height: 1.5; } /* ---------- Buttons ---------- */ .tt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1; border-radius: var(--tt-radius-sm); border: 1px solid transparent; cursor: pointer; user-select: none; text-decoration: none; white-space: nowrap; transition: background-color var(--tt-transition), border-color var(--tt-transition), color var(--tt-transition), box-shadow var(--tt-transition); } .tt-btn-primary { background: var(--tt-primary); color: var(--tt-primary-text); } .tt-btn-primary:hover { background: var(--tt-primary-hover); color: var(--tt-primary-text); text-decoration: none; box-shadow: 0 0 0 3px var(--tt-ring); } .tt-btn-secondary { background: var(--tt-bg-elevated); color: var(--tt-text); border-color: var(--tt-border-strong); } .tt-btn-secondary:hover { background: var(--tt-bg-hover); color: var(--tt-text); text-decoration: none; } .tt-btn-ghost { background: transparent; color: var(--tt-text-muted); } .tt-btn-ghost:hover { background: var(--tt-bg-hover); color: var(--tt-text); text-decoration: none; } .tt-btn-block { width: 100%; } .tt-btn-lg { padding: 13px 22px; font-size: 15px; } /* ---------- Auth (login/register/recover) ---------- */ .tt-auth-page { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(1100px 600px at 80% -10%, rgba(124, 58, 237, 0.10), transparent 60%), radial-gradient(900px 500px at 0% 100%, rgba(37, 99, 235, 0.10), transparent 60%), var(--tt-bg); } :root[data-theme="dark"] .tt-auth-page, @media (prefers-color-scheme: dark) { :root:not([data-theme]) .tt-auth-page { background: radial-gradient(1100px 600px at 80% -10%, rgba(167, 139, 250, 0.14), transparent 60%), radial-gradient(900px 500px at 0% 100%, rgba(59, 130, 246, 0.12), transparent 60%), var(--tt-bg); } } .tt-auth-page main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 20px; } .tt-auth-card { width: 100%; max-width: 440px; background: var(--tt-card-bg); border: 1px solid var(--tt-card-border); border-radius: var(--tt-radius-lg); box-shadow: var(--tt-shadow-lg); padding: 36px 32px 32px; } .tt-auth-head { text-align: center; margin-bottom: 28px; } .tt-auth-mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--tt-primary), var(--tt-accent)); color: #fff; font-weight: 800; font-size: 22px; margin-bottom: 14px; box-shadow: 0 8px 24px -8px var(--tt-primary); } .tt-auth-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; color: var(--tt-text); } .tt-auth-sub { color: var(--tt-text-muted); margin: 0; font-size: 14px; } .tt-tabs { display: flex; gap: 4px; padding: 4px; background: var(--tt-bg-sunken); border-radius: var(--tt-radius-sm); margin-bottom: 24px; list-style: none; } .tt-tabs li { flex: 1; margin: 0; padding: 0; } .tt-tabs a { display: block; text-align: center; padding: 8px 10px; font-size: 13px; font-weight: 600; color: var(--tt-text-muted); border-radius: 4px; text-decoration: none; cursor: pointer; } .tt-tabs a:hover { color: var(--tt-text); text-decoration: none; } .tt-tabs a.is-active { background: var(--tt-card-bg); color: var(--tt-text); box-shadow: var(--tt-shadow-sm); } .tt-tab-panel { display: none; } .tt-tab-panel.is-active { display: block; } .tt-field-group { display: flex; flex-direction: column; gap: 14px; } .tt-link-row { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: 13px; color: var(--tt-text-muted); } .tt-link-row a { font-weight: 500; } .tt-divider { display: flex; align-items: center; gap: 12px; color: var(--tt-text-subtle); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; margin: 18px 0; } .tt-divider::before, .tt-divider::after { content: ""; flex: 1; height: 1px; background: var(--tt-border); } .tt-auth-footer { text-align: center; color: var(--tt-text-muted); font-size: 13px; margin-top: 20px; } /* Alerts */ .tt-alert { padding: 12px 14px; border-radius: var(--tt-radius-sm); font-size: 13px; line-height: 1.5; margin-bottom: 16px; border: 1px solid transparent; } .tt-alert-info { background: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.25); color: var(--tt-primary); } .tt-alert-success { background: rgba(22, 163, 74, 0.08); border-color: rgba(22, 163, 74, 0.25); color: var(--tt-success); } .tt-alert-warning { background: rgba(217, 119, 6, 0.10); border-color: rgba(217, 119, 6, 0.30); color: var(--tt-warning); } .tt-alert-danger { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.25); color: var(--tt-danger); } /* Footer */ .tt-footer { border-top: 1px solid var(--tt-border); background: var(--tt-bg-elevated); color: var(--tt-text-muted); padding: 20px 24px; margin-top: 48px; font-size: 13px; } .tt-footer-inner { max-width: var(--tt-max-width); margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } /* ---------- Legacy bridges — header-only layout (no sidebar) ---------- */ /* Hide all legacy chrome that we've replaced with the new top header. */ #navBarSpace, #headerBar, #userInfoCell, #latestMov, #comOn { display: none !important; } #pageWrapper { max-width: var(--tt-max-width) !important; min-width: 0 !important; /* override legacy min-width:1400px */ margin: 0 auto !important; padding: 24px !important; width: auto !important; background: transparent !important; height: auto !important; box-sizing: border-box; } #pageContent { display: block !important; width: 100% !important; max-width: 100% !important; background: transparent !important; padding: 0 !important; margin: 0 !important; border: 0 !important; position: static !important; min-height: 0 !important; } #pageContentInnerWrap { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } #mainContent { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; /* kill legacy margin: 0 0 0 200px (sidebar space) */ background: var(--tt-card-bg) !important; border: 1px solid var(--tt-card-border) !important; border-radius: var(--tt-radius) !important; padding: 24px !important; box-shadow: var(--tt-shadow-sm) !important; box-sizing: border-box; } #mainContentWrapper { width: 100% !important; /* override legacy width: 1000px !important */ max-width: 100% !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; overflow-y: visible !important; } .warning-msg { display: block; background: rgba(217, 119, 6, 0.10); border: 1px solid rgba(217, 119, 6, 0.30); color: var(--tt-warning); padding: 12px 16px; border-radius: var(--tt-radius-sm); margin: 12px auto; max-width: var(--tt-max-width); } /* Typography defaults inside content */ #mainContent h1, #mainContent h2, #mainContent h3, #mainContent h4, #mainContent h5 { color: var(--tt-text); margin-top: 0; } #mainContent a { color: var(--tt-link); } #mainContent table { border-collapse: collapse; } #mainContent table td, #mainContent table th { border-color: var(--tt-border); } /* ===================================================================== LEGACY CLASS OVERRIDES Brings every old PHP page (donate, settings, mybonus, faqs, staff, tags, statistic, etc.) up to the new design language without per-file rewrites. Selectors below target the original class names. ===================================================================== */ /* Buttons */ #mainContent .btn, #mainContent input.btn, #mainContent input[type="submit"], #mainContent input[type="button"], #mainContent button.btn, #mainContent a.btn, #mainContent .forumActionButton, #mainContent .BTs { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px !important; font: inherit !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; border-radius: var(--tt-radius-sm) !important; border: 1px solid var(--tt-border-strong) !important; background: var(--tt-bg-elevated) !important; color: var(--tt-text) !important; cursor: pointer; text-decoration: none !important; white-space: nowrap; height: auto !important; transition: background-color var(--tt-transition), border-color var(--tt-transition); } #mainContent .btn:hover, #mainContent input.btn:hover, #mainContent input[type="submit"]:hover, #mainContent input[type="button"]:hover, #mainContent button.btn:hover, #mainContent a.btn:hover, #mainContent .forumActionButton:hover, #mainContent .BTs:hover { background: var(--tt-bg-hover) !important; border-color: var(--tt-primary) !important; color: var(--tt-text) !important; text-decoration: none !important; } #mainContent input[type="submit"] { background: var(--tt-primary) !important; border-color: var(--tt-primary) !important; color: var(--tt-primary-text) !important; } #mainContent input[type="submit"]:hover { background: var(--tt-primary-hover) !important; border-color: var(--tt-primary-hover) !important; color: var(--tt-primary-text) !important; } /* Form inputs */ #mainContent input[type="text"], #mainContent input[type="email"], #mainContent input[type="password"], #mainContent input[type="number"], #mainContent input[type="url"], #mainContent input[type="search"], #mainContent input[type="tel"], #mainContent input[type="date"], #mainContent input[type="time"], #mainContent .i0, #mainContent textarea, #mainContent select { font: inherit !important; font-size: 13px !important; padding: 8px 12px !important; color: var(--tt-text) !important; background: var(--tt-bg-input) !important; border: 1px solid var(--tt-border-strong) !important; border-radius: var(--tt-radius-sm) !important; outline: none; box-sizing: border-box; max-width: 100%; transition: border-color var(--tt-transition), box-shadow var(--tt-transition); } #mainContent input[type="text"]:focus, #mainContent input[type="email"]:focus, #mainContent input[type="password"]:focus, #mainContent input[type="number"]:focus, #mainContent input[type="search"]:focus, #mainContent .i0:focus, #mainContent textarea:focus, #mainContent select:focus { border-color: var(--tt-primary) !important; box-shadow: 0 0 0 3px var(--tt-ring); } #mainContent textarea { font-family: var(--tt-font-mono); line-height: 1.5; resize: vertical; } #mainContent input[type="checkbox"], #mainContent input[type="radio"] { accent-color: var(--tt-primary); } #mainContent input.fw { width: 100%; } /* Legacy tables (t0, t1, genericTable, mainForumsTable, subforumTable, threadContainer, staffTable) */ #mainContent table.t0, #mainContent table.t1, #mainContent table.genericTable, #mainContent table.fw, #mainContent #staffTable, #mainContent #mainForumsTable, #mainContent #subforumTable, #mainContent #torrentsTable:not(.tt-table) { width: 100%; background: var(--tt-card-bg); border: 1px solid var(--tt-card-border); border-radius: var(--tt-radius); overflow: hidden; border-collapse: separate; border-spacing: 0; font-size: 13px; margin: 12px 0; } #mainContent table.t0 td, #mainContent table.t1 td, #mainContent table.genericTable td, #mainContent table.fw td, #mainContent #staffTable td, #mainContent #mainForumsTable td, #mainContent #subforumTable td { padding: 10px 12px; border-bottom: 1px solid var(--tt-border); vertical-align: middle; } #mainContent table.t0 th, #mainContent table.t1 th, #mainContent table.genericTable th, #mainContent table.fw th, #mainContent #staffTable th, #mainContent table.t0 .colhead, #mainContent table.t1 .colhead, #mainContent table.genericTable .colhead { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tt-text-muted) !important; padding: 10px 12px; background: var(--tt-bg-sunken); border-bottom: 1px solid var(--tt-border); text-align: left; vertical-align: middle; } /* genericTable's TR with id="top10Header" is sometimes used as the header */ #mainContent table.genericTable tr#top10Header td { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tt-text-muted) !important; background: var(--tt-bg-sunken); border-bottom: 1px solid var(--tt-border); padding: 10px 12px; } #mainContent table.genericTable tr#top10Header td font { color: inherit !important; font-family: inherit !important; } #mainContent table.t0 tbody tr:hover td, #mainContent table.t1 tbody tr:hover td, #mainContent table.genericTable tbody tr:hover td:not(.embedded) { background: var(--tt-bg-hover); } #mainContent table tr:last-child td { border-bottom: 0; } /* Embedded cells (used in staff table) keep minimal styling */ #mainContent table .embedded { background: transparent !important; border: 0 !important; padding: 6px 10px !important; } #mainContent table .embedded font { color: var(--tt-text) !important; font-family: inherit !important; } #mainContent table .embedded hr { border-color: var(--tt-border) !important; } /* Class -1 (bot) etc — legacy text-align helpers */ #mainContent .ac, #mainContent td.ac, #mainContent th.ac { text-align: center; } #mainContent .al, #mainContent td.al, #mainContent th.al { text-align: left; } #mainContent .ar, #mainContent td.ar, #mainContent th.ar { text-align: right; } #mainContent .vat, #mainContent td.vat { vertical-align: top; } #mainContent .vam, #mainContent td.vam { vertical-align: middle; } #mainContent .nobr { white-space: nowrap; } #mainContent .b0 { border: 0 !important; } /* Headings used by legacy pages */ #mainContent .h4Div, #mainContent .labelH4, #mainContent .subforumTitleH4, #mainContent .threadTitleH4 { font-size: 18px; font-weight: 700; color: var(--tt-text) !important; background: none !important; border: 0 !important; margin: 18px 0 12px !important; padding: 0 0 10px !important; border-bottom: 1px solid var(--tt-border) !important; display: block; } #mainContent .h4Div a, #mainContent .labelH4 a { color: var(--tt-text); } #mainContent .bt { font-size: 20px; font-weight: 700; margin: 0 0 14px; } /* Center wrappers — break the fixed widths from old pages */ #mainContent div[style*="width:850px"], #mainContent div[style*="width:750px"], #mainContent div[style*="width:900px"], #mainContent div[style*="width:1000px"], #mainContent div[style*="width: 850px"], #mainContent div[style*="width: 750px"], #mainContent div[style*="width: 900px"], #mainContent div[style*="width: 1000px"] { width: 100% !important; max-width: 1000px !important; margin: 0 auto !important; padding: 0 !important; } /* genWrapper used by various templates */ #mainContent .genWrapper { background: transparent; padding: 0; } /*
tags — keep them centered but trim margins */ #mainContent center { display: block; text-align: center; } #mainContent center > table { margin-left: auto; margin-right: auto; } /* tags — strip colors that conflict with theme */ #mainContent font[color="white"] { color: inherit !important; } #mainContent font[color="#FFFFFF"] { color: inherit !important; } #mainContent font[color="#ffffff"] { color: inherit !important; } #mainContent font[face] { font-family: inherit !important; } /* Legacy color hints */ #mainContent .c_bad, #mainContent .colorBad { color: var(--tt-danger); font-weight: 600; } #mainContent .c_good, #mainContent .colorGood { color: var(--tt-success); font-weight: 600; } #mainContent .c0 { background: var(--tt-bg-sunken) !important; } #mainContent .c3 { color: var(--tt-text-muted); font-size: 12px; } /* Forum / post legacy markup (when /f routes still serve via old PHP) */ #mainContent .forumNameTR td, #mainContent .forumTitleTD { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tt-text-muted); background: var(--tt-bg-sunken); padding: 10px 12px; } #mainContent .forumImage { width: 56px; text-align: center; } #mainContent .forumImage img { max-width: 28px; max-height: 28px; opacity: 0.85; } #mainContent .forumNameTD a, #mainContent .forumLatestLink { color: var(--tt-text); font-weight: 600; } #mainContent .forumInfoSpan { color: var(--tt-text-muted); font-size: 12px; } #mainContent .forumLatestTD { color: var(--tt-text-muted); font-size: 12px; } #mainContent .forumNameTR { background: transparent; } #mainContent .forumTableTR:hover td { background: var(--tt-bg-hover); } /* Post containers (used by topic.php, posts in some PHP pages) */ #mainContent .postContainer { background: var(--tt-card-bg); border: 1px solid var(--tt-card-border); border-radius: var(--tt-radius); overflow: hidden; margin: 12px 0; } #mainContent .postUserInfo { background: var(--tt-bg-sunken); padding: 16px; text-align: center; border-right: 1px solid var(--tt-border); } #mainContent .postContents { padding: 16px 18px; line-height: 1.6; } #mainContent .postFooter { background: var(--tt-bg-sunken); padding: 8px 16px; font-size: 12px; color: var(--tt-text-muted); border-top: 1px solid var(--tt-border); } /* Forum action button bar */ #mainContent #forumActionsDiv { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; padding: 12px; background: var(--tt-bg-sunken); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); align-items: center; } /* Donation-page specific (donate.php & donate_v2.php) — both files hardcode a lot of yellow / black inline styles. Constrain max width and tone down. */ #mainContent #donate, #mainContent #donateBox, #mainContent .donateBox, #mainContent .donate-container { max-width: 900px; margin: 0 auto; } /* Login page tabs — older /login.php pattern (we already use a fresh login but make sure any other tab.css remnants don't conflict) */ #mainContent .flat-form { width: 100% !important; max-width: 480px; margin: 0 auto; } #mainContent .tabs { display: flex; gap: 4px; padding: 4px; background: var(--tt-bg-sunken); border-radius: var(--tt-radius-sm); list-style: none; } #mainContent .tabs li { flex: 1; margin: 0; } #mainContent .tabs a { display: block; text-align: center; padding: 8px; border-radius: 4px; font-weight: 600; color: var(--tt-text-muted); text-decoration: none; } #mainContent .tabs a.active, #mainContent .tabs a.tabLabel.active { background: var(--tt-card-bg); color: var(--tt-text); } /* Generic inline images in content */ #mainContent img { max-width: 100%; height: auto; } #mainContent img[src*="/online.gif"], #mainContent img[src*="/offline.gif"] { width: 8px; height: 8px; max-width: 8px; max-height: 8px; vertical-align: middle; border-radius: 50%; image-rendering: auto; } /* Force online dot to green; offline to gray (since we can't change the gif palette) */ #mainContent img[src*="/online.gif"] { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.30); background: var(--tt-success); } #mainContent img[src*="/offline.gif"] { box-shadow: 0 0 0 4px rgba(107, 117, 136, 0.20); background: var(--tt-text-subtle); } /* ===================================================================== PAGE COMPONENTS — shared across /t, /f, /movies, /tv, /t/new, /rules, etc. ===================================================================== */ /* Page header: title bar with breadcrumbs/actions */ .tt-page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--tt-border); } .tt-page-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--tt-text); display: inline-flex; align-items: center; gap: 10px; } .tt-page-title .fa { color: var(--tt-text-muted); font-size: 18px; } .tt-page-sub { color: var(--tt-text-muted); font-size: 13px; margin: 4px 0 0; } .tt-page-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tt-breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tt-text-muted); margin-bottom: 6px; } .tt-breadcrumb a { color: var(--tt-text-muted); } .tt-breadcrumb a:hover { color: var(--tt-link); } .tt-breadcrumb-sep { opacity: 0.5; } /* Toolbar (search + filters + actions on one row) */ .tt-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px; background: var(--tt-bg-sunken); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); } .tt-toolbar > * { margin: 0; } .tt-toolbar-grow { flex: 1; min-width: 200px; } /* Filter chips */ .tt-chips { display: flex; flex-wrap: wrap; gap: 6px; } .tt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 13px; font-weight: 500; color: var(--tt-text-muted); background: var(--tt-bg-elevated); border: 1px solid var(--tt-border); border-radius: 999px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: all var(--tt-transition); } .tt-chip:hover { background: var(--tt-bg-hover); border-color: var(--tt-border-strong); color: var(--tt-text); text-decoration: none; } .tt-chip.is-active { background: var(--tt-nav-link-active-bg); border-color: var(--tt-primary); color: var(--tt-primary); } .tt-chip .fa { font-size: 11px; opacity: 0.8; } /* Filter sidebar (used on /t for category tree) */ .tt-with-sidebar { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; } .tt-sidebar { position: sticky; top: 120px; background: var(--tt-card-bg); border: 1px solid var(--tt-card-border); border-radius: var(--tt-radius); padding: 14px; } .tt-sidebar-section + .tt-sidebar-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--tt-border); } .tt-sidebar-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tt-text-subtle); margin-bottom: 8px; } .tt-sidebar-list { list-style: none; margin: 0; padding: 0; } .tt-sidebar-list li { margin: 0; padding: 0; } .tt-sidebar-list a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--tt-radius-sm); font-size: 13px; color: var(--tt-text); text-decoration: none; line-height: 1.4; } .tt-sidebar-list a:hover { background: var(--tt-bg-hover); text-decoration: none; } .tt-sidebar-list a.is-active { background: var(--tt-nav-link-active-bg); color: var(--tt-primary); font-weight: 600; } .tt-sidebar-list .tt-side-cat-icon { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; } .tt-sidebar-list .tt-side-count { margin-left: auto; font-size: 11px; color: var(--tt-text-subtle); font-weight: 500; } .tt-sidebar-list label { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: var(--tt-radius-sm); font-size: 13px; color: var(--tt-text); cursor: pointer; line-height: 1.4; } .tt-sidebar-list label:hover { background: var(--tt-bg-hover); } .tt-sidebar-list label input[type="checkbox"] { margin: 0; accent-color: var(--tt-primary); } .tt-sidebar-cat-label { font-weight: 700; color: var(--tt-text); margin-top: 6px; margin-bottom: 4px; font-size: 12px; padding: 0 10px; } .tt-filter-toggle { display: none; } /* Tables */ .tt-table, #torrentsTable.tt-table, table#torrentsTable.tt-table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; background: var(--tt-card-bg) !important; border: 1px solid var(--tt-card-border) !important; border-radius: var(--tt-radius) !important; overflow: hidden !important; font-size: 13px !important; color: var(--tt-text) !important; /* legacy forces color: black */ margin: 12px 0 !important; } /* Kill legacy striping / hover that conflict with theme tokens */ #torrentsTable.tt-table tbody tr, #torrentsTable.tt-table tbody tr:nth-child(even) { background-color: transparent !important; } #torrentsTable.tt-table tbody tr:hover td, .torrentsTableTR:hover { background-color: var(--tt-bg-hover) !important; } #torrentsTable.tt-table a { color: var(--tt-link); } /* Table layout — fixed widths on every column except Name so Name gets the remainder */ #torrentsTable.tt-table { table-layout: fixed !important; width: 100% !important; } /* Name cell: no explicit width (gets remainder), but content must clip */ #torrentsTable.tt-table thead th:nth-child(3), #torrentsTable.tt-table tbody td:nth-child(3) { width: auto !important; overflow: hidden !important; } /* The Name contains a column (title row + meta row). Each row truncates. */ #torrentsTable.tt-table .tt-torrent-name { display: block !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; } #torrentsTable.tt-table .tt-torrent-name-row { display: flex !important; align-items: center; gap: 8px; min-width: 0 !important; max-width: 100% !important; flex-wrap: nowrap !important; overflow: hidden !important; } #torrentsTable.tt-table .tt-torrent-title { color: var(--tt-text) !important; font-weight: 600 !important; font-size: 14px !important; flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #torrentsTable.tt-table .tt-torrent-title:hover { color: var(--tt-link) !important; } #torrentsTable.tt-table .tt-torrent-name-row .tt-tag { flex: 0 0 auto !important; } #torrentsTable.tt-table .tt-torrent-meta, #torrentsTable.tt-table .tt-torrent-meta a { color: var(--tt-text-muted) !important; font-size: 12px !important; font-weight: 400 !important; } #torrentsTable.tt-table .tt-torrent-meta { display: block !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #torrentsTable.tt-table th, #torrentsTableHdr, #torrentsTableHdr th { text-align: left !important; vertical-align: middle !important; background: var(--tt-bg-sunken) !important; color: var(--tt-text-muted) !important; font-family: inherit !important; font-weight: 700 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; padding: 10px 12px !important; height: auto !important; border-bottom: 1px solid var(--tt-border) !important; } #torrentsTable.tt-table th.tt-th-c { text-align: center !important; } #torrentsTable.tt-table th.tt-th-r { text-align: right !important; } #torrentsTable.tt-table th a { color: var(--tt-text-muted) !important; } #torrentsTable.tt-table th a:hover { color: var(--tt-text) !important; } #torrentsTable.tt-table td { font-family: inherit !important; font-size: 13px !important; padding: 12px !important; border-bottom: 1px solid var(--tt-border) !important; vertical-align: middle !important; color: var(--tt-text) !important; } #torrentsTable.tt-table tbody tr:last-child td { border-bottom: 0 !important; } #torrentsTable.tt-table .tt-num, #torrentsTable.tt-table .tt-num a { color: inherit !important; font-weight: 600 !important; } #torrentsTable.tt-table .tt-num-up, #torrentsTable.tt-table .tt-num-up a { color: var(--tt-success) !important; } #torrentsTable.tt-table .tt-num-down, #torrentsTable.tt-table .tt-num-down a { color: var(--tt-danger) !important; } #torrentsTable.tt-table .tt-num-muted, #torrentsTable.tt-table .tt-num-muted a { color: var(--tt-text-muted) !important; } #torrentsTable.tt-table td.tt-td-c { text-align: center !important; } #torrentsTable.tt-table td.tt-td-r { text-align: right !important; } #torrentsTable.tt-table td.tt-table-cat { width: 90px !important; text-align: center !important; padding: 4px !important; vertical-align: middle !important; } #torrentsTable.tt-table .tt-cat-badge { display: inline-block !important; vertical-align: middle; background: transparent !important; border: 0 !important; line-height: 0; } #torrentsTable.tt-table .tt-cat-badge img { width: 75px !important; height: auto !important; max-width: 75px !important; max-height: 75px !important; object-fit: contain; display: block; } #torrentsTable.tt-table .tt-act-dl { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--tt-radius-sm); background: var(--tt-success) !important; border: 1px solid var(--tt-success) !important; color: #fff !important; } #torrentsTable.tt-table .tt-act-dl:hover { background: #15803d !important; border-color: #15803d !important; } #torrentsTable.tt-table .tt-tag-new { background: rgba(234, 179, 8, 0.18) !important; color: #b45309 !important; } :root[data-theme="dark"] #torrentsTable.tt-table .tt-tag-new { color: #fbbf24 !important; } #torrentsTable.tt-table .tt-tag-free { background: rgba(34, 197, 94, 0.18) !important; color: #166534 !important; } :root[data-theme="dark"] #torrentsTable.tt-table .tt-tag-free { color: #4ade80 !important; } .tt-table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tt-text-muted); padding: 10px 12px; background: var(--tt-bg-sunken); border-bottom: 1px solid var(--tt-border); white-space: nowrap; } .tt-table th a { color: var(--tt-text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .tt-table th a:hover { color: var(--tt-text); text-decoration: none; } .tt-table th .fa { font-size: 12px; } .tt-table th.tt-th-c, .tt-table td.tt-td-c { text-align: center; } .tt-table th.tt-th-r, .tt-table td.tt-td-r { text-align: right; } .tt-table td { padding: 12px; border-bottom: 1px solid var(--tt-border); vertical-align: middle; color: var(--tt-text); } .tt-table tbody tr:last-child td { border-bottom: 0; } .tt-table tbody tr:hover td { background: var(--tt-bg-hover); } .tt-table-compact td { padding: 8px 10px; } .tt-table-cat { width: 90px; text-align: center; padding: 4px; vertical-align: middle; } .tt-cat-badge { display: inline-block; vertical-align: middle; background: transparent; border: 0; text-decoration: none; line-height: 0; } .tt-cat-badge img { width: 75px; height: auto; max-width: 75px; max-height: 75px; object-fit: contain; display: block; } .tt-cat-badge:hover img { opacity: 0.85; } .tt-torrent-name { display: block; min-width: 0; max-width: 100%; overflow: hidden; } .tt-torrent-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; max-width: 100%; overflow: hidden; margin-bottom: 3px; } .tt-torrent-title { font-size: 14px; font-weight: 600; color: var(--tt-text); text-decoration: none; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tt-torrent-title:hover { color: var(--tt-link); text-decoration: none; } .tt-torrent-name-row .tt-tag { flex: 0 0 auto; } .tt-torrent-meta { display: block; font-size: 12px; color: var(--tt-text-muted); min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tt-torrent-meta a { color: var(--tt-text-muted); } .tt-torrent-meta a:hover { color: var(--tt-link); } .tt-tag { display: inline-flex; align-items: center; padding: 1px 7px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 999px; white-space: nowrap; } .tt-tag-new { background: #fef3c7; color: #92400e; } .tt-tag-free { background: #dcfce7; color: #166534; } .tt-tag-hot { background: #fee2e2; color: #991b1b; } .tt-tag-imdb { background: #f5d76e; color: #2c1d00; } :root[data-theme="dark"] .tt-tag-new { background: rgba(234, 179, 8, 0.18); color: #fbbf24; } :root[data-theme="dark"] .tt-tag-free { background: rgba(34, 197, 94, 0.18); color: #4ade80; } :root[data-theme="dark"] .tt-tag-hot { background: rgba(239, 68, 68, 0.18); color: #fca5a5; } :root[data-theme="dark"] .tt-tag-imdb { background: rgba(245, 215, 110, 0.20); color: #fcd34d; } /* Action icon button in table rows */ .tt-act { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--tt-radius-sm); border: 1px solid var(--tt-border); background: var(--tt-bg-elevated); color: var(--tt-text-muted); text-decoration: none; transition: all var(--tt-transition); } .tt-act:hover { background: var(--tt-bg-hover); color: var(--tt-text); border-color: var(--tt-border-strong); text-decoration: none; } .tt-act-dl { background: var(--tt-success); border-color: var(--tt-success); color: #fff; } .tt-act-dl:hover { background: #15803d; border-color: #15803d; color: #fff; } .tt-act .fa { font-size: 14px; } /* Numeric stat cell (seeders / leechers / size / files) */ .tt-num { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .tt-num-up { color: var(--tt-success); } .tt-num-down { color: var(--tt-danger); } .tt-num-muted { color: var(--tt-text-muted); font-weight: 500; } /* Empty state */ .tt-empty { text-align: center; padding: 60px 24px; color: var(--tt-text-muted); } .tt-empty h2 { margin: 0 0 8px; font-size: 18px; color: var(--tt-text); } .tt-empty .fa { font-size: 36px; opacity: 0.25; margin-bottom: 12px; } /* Pagination */ .tt-pagination { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 20px 0; flex-wrap: wrap; } .tt-pagination a, .tt-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--tt-radius-sm); border: 1px solid var(--tt-border); background: var(--tt-bg-elevated); color: var(--tt-text); font-size: 13px; font-weight: 500; text-decoration: none; line-height: 1; } .tt-pagination a:hover { background: var(--tt-bg-hover); border-color: var(--tt-border-strong); text-decoration: none; } .tt-pagination .is-current { background: var(--tt-primary); border-color: var(--tt-primary); color: var(--tt-primary-text); } .tt-pagination .is-disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; } .tt-pagination .fa { font-size: 11px; } .tt-pagination-info { text-align: center; font-size: 12px; color: var(--tt-text-muted); margin-top: 4px; } /* Mini panel cards (Recommended / Top Torrents on /t) */ .tt-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; margin-bottom: 20px; } .tt-mini-card { background: var(--tt-card-bg); border: 1px solid var(--tt-card-border); border-radius: var(--tt-radius); overflow: hidden; } .tt-mini-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; background: var(--tt-bg-sunken); border-bottom: 1px solid var(--tt-border); font-size: 14px; font-weight: 700; color: var(--tt-text); } .tt-mini-card-head-left { display: inline-flex; align-items: center; gap: 10px; } .tt-mini-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--tt-radius-sm); background: var(--tt-bg-elevated); border: 1px solid var(--tt-border); font-size: 14px; } .tt-collapse-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: 0; border-radius: 4px; color: var(--tt-text-muted); cursor: pointer; transition: background-color var(--tt-transition), transform var(--tt-transition); } .tt-collapse-btn:hover { background: var(--tt-bg-hover); color: var(--tt-text); } .tt-collapse-btn .fa { font-size: 13px; } .is-collapsed > .tt-mini-card-body, .is-collapsed > .tt-cats-body { display: none; } .is-collapsed .tt-collapse-btn .fa { transform: rotate(180deg); } .tt-mini-list { list-style: none; margin: 0; padding: 0; } .tt-mini-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr) 32px auto auto; gap: 5px; align-items: center; padding: 0px 10px; border-bottom: 1px solid var(--tt-border); font-size: 13px; } .tt-mini-list li:last-child { border-bottom: 0; } .tt-mini-list li:hover { background: var(--tt-bg-hover); } .tt-mini-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--tt-text-subtle); font-size: 12px; } .tt-mini-icon a { color: var(--tt-text-subtle); } .tt-mini-icon a:hover { color: var(--tt-link); } .tt-mini-title-wrap { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; } .tt-mini-title { color: var(--tt-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .tt-mini-title:hover { color: var(--tt-link); } .tt-mini-dl { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: var(--tt-success); background: rgba(34, 197, 94, 0.10); border: 1px solid rgba(34, 197, 94, 0.25); text-decoration: none; } .tt-mini-dl:hover { background: var(--tt-success); color: #fff; border-color: var(--tt-success); } .tt-mini-list .tt-num { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; min-width: 50px; justify-content: flex-end; } /* Categories & Filters card (full-width on /t) */ .tt-cats-card { background: var(--tt-card-bg); border: 1px solid var(--tt-card-border); border-radius: var(--tt-radius); margin-bottom: 20px; overflow: hidden; } .tt-cats-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; background: var(--tt-bg-sunken); border-bottom: 1px solid var(--tt-border); font-size: 14px; font-weight: 700; color: var(--tt-text); } .tt-cats-body { padding: 20px; } .tt-cats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 18px 14px; } .tt-cat-col { min-width: 0; overflow: hidden; } .tt-cat-col-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tt-text-muted); padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--tt-border); cursor: pointer; user-select: none; } .tt-cat-col-head input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: var(--tt-primary); flex-shrink: 0; } .tt-cat-col-head .fa { color: var(--tt-text-muted); font-size: 13px; } .tt-cat-col-head a { color: inherit; } .tt-cat-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tt-text); cursor: pointer; line-height: 1.5; min-width: 0; overflow: hidden; } .tt-cat-item:hover { color: var(--tt-link); } .tt-cat-item input[type="checkbox"] { margin: 0; accent-color: var(--tt-primary); width: 14px; height: 14px; flex-shrink: 0; } .tt-cat-item a { color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .tt-cat-item .fa { font-size: 11px; color: var(--tt-text-subtle); width: 13px; text-align: center; } .tt-cat-item:hover .fa { color: var(--tt-link); } .tt-cat-subhead { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tt-text-muted); padding: 12px 0 6px; margin-top: 8px; border-top: 1px solid var(--tt-border); } .tt-cat-subhead .fa { color: #eab308; font-size: 11px; } /* Poster grid (movies/tv) */ .tt-poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } .tt-poster-card { background: var(--tt-card-bg); border: 1px solid var(--tt-card-border); border-radius: var(--tt-radius); overflow: hidden; transition: transform var(--tt-transition), box-shadow var(--tt-transition), border-color var(--tt-transition); } .tt-poster-card:hover { transform: translateY(-2px); border-color: var(--tt-primary); box-shadow: var(--tt-shadow-md); } .tt-poster-img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--tt-bg-sunken); } .tt-poster-body { padding: 10px 12px; } .tt-poster-title { font-size: 13px; font-weight: 600; color: var(--tt-text); text-decoration: none; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tt-poster-title:hover { color: var(--tt-link); text-decoration: none; } .tt-poster-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--tt-text-muted); } .tt-poster-rating { display: inline-flex; align-items: center; gap: 3px; color: #f59e0b; font-weight: 600; } .tt-poster-genres { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; color: var(--tt-text-subtle); margin-top: 4px; } /* Forum index */ .tt-forum-list { display: flex; flex-direction: column; gap: 20px; } .tt-forum-group { background: var(--tt-card-bg); border: 1px solid var(--tt-card-border); border-radius: var(--tt-radius); overflow: hidden; } .tt-forum-group-head { padding: 12px 16px; background: var(--tt-bg-sunken); border-bottom: 1px solid var(--tt-border); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tt-text-muted); } .tt-forum-row { display: grid; grid-template-columns: 56px 1fr 1.2fr; gap: 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--tt-border); } .tt-forum-row:last-child { border-bottom: 0; } .tt-forum-row:hover { background: var(--tt-bg-hover); } .tt-forum-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--tt-radius-sm); background: var(--tt-bg-sunken); border: 1px solid var(--tt-border); } .tt-forum-icon img { max-width: 28px; max-height: 28px; } .tt-forum-info-title { font-size: 15px; font-weight: 600; color: var(--tt-text); text-decoration: none; display: block; } .tt-forum-info-title:hover { color: var(--tt-link); text-decoration: none; } .tt-forum-info-meta { font-size: 12px; color: var(--tt-text-muted); margin-top: 3px; } .tt-forum-latest { font-size: 13px; color: var(--tt-text-muted); text-align: left; } .tt-forum-latest a { color: var(--tt-text); } .tt-forum-latest a:hover { color: var(--tt-link); } .tt-forum-latest-time { font-size: 11px; color: var(--tt-text-subtle); margin-top: 3px; } /* Topic list (forum.tpl) */ .tt-topic-list { background: var(--tt-card-bg); border: 1px solid var(--tt-card-border); border-radius: var(--tt-radius); overflow: hidden; } .tt-topic-row { display: grid; grid-template-columns: 56px 1fr 1.2fr; gap: 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--tt-border); } .tt-topic-row:last-child { border-bottom: 0; } .tt-topic-row:hover { background: var(--tt-bg-hover); } .tt-topic-pin { display: inline-flex; align-items: center; padding: 1px 7px; font-size: 10px; font-weight: 700; text-transform: uppercase; border-radius: 4px; background: var(--tt-nav-link-active-bg); color: var(--tt-primary); margin-right: 6px; vertical-align: middle; } /* Topic page (single thread / posts) */ .tt-thread { display: flex; flex-direction: column; gap: 14px; } .tt-post { background: var(--tt-card-bg); border: 1px solid var(--tt-card-border); border-radius: var(--tt-radius); overflow: hidden; } .tt-post-body { display: grid; grid-template-columns: 180px 1fr; } .tt-post-author { padding: 18px 16px; text-align: center; background: var(--tt-bg-sunken); border-right: 1px solid var(--tt-border); } .tt-post-author img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; border: 2px solid var(--tt-border); } .tt-post-author-name { font-weight: 700; color: var(--tt-text); font-size: 14px; } .tt-post-author-name a { color: var(--tt-text); } .tt-post-author-class { font-size: 11px; color: var(--tt-text-muted); margin-top: 4px; } .tt-post-content { padding: 18px 20px; min-width: 0; line-height: 1.6; color: var(--tt-text); word-wrap: break-word; } .tt-post-content p { margin: 0 0 1em; } .tt-post-content p:last-child { margin-bottom: 0; } .tt-post-content img { max-width: 100%; height: auto; } .tt-post-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--tt-bg-sunken); border-top: 1px solid var(--tt-border); font-size: 12px; color: var(--tt-text-muted); flex-wrap: wrap; gap: 8px; } .tt-post-actions { display: inline-flex; align-items: center; gap: 4px; } .tt-post-action { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; font-size: 12px; color: var(--tt-text-muted); text-decoration: none; border-radius: 4px; } .tt-post-action:hover { background: var(--tt-bg-hover); color: var(--tt-text); text-decoration: none; } .tt-post-action.is-danger:hover { color: var(--tt-danger); background: rgba(220, 38, 38, 0.08); } /* Form card (upload, rules edit, etc) */ .tt-form-card { background: var(--tt-card-bg); border: 1px solid var(--tt-card-border); border-radius: var(--tt-radius); padding: 24px; max-width: 800px; margin: 0 auto; } .tt-form-grid { display: grid; grid-template-columns: 200px 1fr; gap: 16px 20px; align-items: start; } .tt-form-row { display: contents; } .tt-form-row > .tt-label { margin-top: 11px; margin-bottom: 0; } .tt-form-row > div, .tt-form-row > .tt-form-control { min-width: 0; } .tt-form-divider { grid-column: 1 / -1; height: 1px; background: var(--tt-border); margin: 4px 0; } .tt-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--tt-border); margin-top: 4px; } .tt-form-help { font-size: 12px; color: var(--tt-text-muted); margin-top: 4px; line-height: 1.5; } .tt-form-readonly { font-family: var(--tt-font-mono); font-size: 12px; padding: 8px 10px; background: var(--tt-bg-sunken); border: 1px solid var(--tt-border); border-radius: var(--tt-radius-sm); word-break: break-all; color: var(--tt-text-muted); } .tt-checkbox-row { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tt-text); cursor: pointer; } .tt-checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--tt-primary); margin: 0; } /* File input */ .tt-file-zone { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--tt-bg-sunken); border: 2px dashed var(--tt-border-strong); border-radius: var(--tt-radius); transition: border-color var(--tt-transition); } .tt-file-zone:hover { border-color: var(--tt-primary); } .tt-file-zone input[type="file"] { flex: 1; font: inherit; font-size: 13px; color: var(--tt-text); } /* Long-form content (rules, faqs) */ .tt-prose { max-width: 900px; margin: 0 auto; color: var(--tt-text); line-height: 1.7; font-size: 15px; } .tt-prose h1, .tt-prose h2, .tt-prose h3, .tt-prose h4 { color: var(--tt-text); margin-top: 1.8em; margin-bottom: 0.6em; line-height: 1.3; } .tt-prose h1 { font-size: 26px; } .tt-prose h2 { font-size: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--tt-border); } .tt-prose h3 { font-size: 17px; } .tt-prose p { margin: 0 0 1em; } .tt-prose a { color: var(--tt-link); } .tt-prose ul, .tt-prose ol { padding-left: 24px; margin: 0 0 1em; } .tt-prose li { margin-bottom: 0.5em; } .tt-prose blockquote { margin: 1em 0; padding: 12px 16px; border-left: 4px solid var(--tt-primary); background: var(--tt-bg-sunken); color: var(--tt-text-muted); border-radius: 0 var(--tt-radius-sm) var(--tt-radius-sm) 0; } .tt-prose code { font-family: var(--tt-font-mono); font-size: 0.9em; background: var(--tt-bg-sunken); padding: 2px 6px; border-radius: 4px; } .tt-prose hr { border: 0; height: 1px; background: var(--tt-border); margin: 2em 0; } /* ---------- Mobile ---------- */ @media (max-width: 1280px) { .tt-search { max-width: 220px; } .tt-nav a span, .tt-nav a { font-size: 13px; } } @media (max-width: 1100px) { .tt-search { display: none; } } @media (max-width: 1024px) { .tt-header-row-top .tt-header-inner { padding: 8px 14px; gap: 12px; flex-wrap: wrap; } .tt-nav { gap: 2px; order: 3; width: 100%; justify-content: center; overflow-x: auto; } .tt-nav a { padding: 6px 10px; font-size: 13px; } .tt-donate-btn { order: 2; } .tt-user-name { display: none; } .tt-header-row-bottom .tt-header-inner { padding: 6px 14px; flex-direction: column; align-items: flex-start; gap: 6px; } .tt-stats-row { gap: 10px; } .tt-quick-links { width: 100%; justify-content: flex-start; } /* Page components mobile */ .tt-with-sidebar { grid-template-columns: 1fr; } .tt-sidebar { position: static; } .tt-filter-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--tt-radius-sm); border: 1px solid var(--tt-border); background: var(--tt-bg-elevated); color: var(--tt-text); font-size: 13px; font-weight: 600; cursor: pointer; } .tt-sidebar.is-collapsed { display: none; } .tt-form-grid { grid-template-columns: 1fr; gap: 12px; } .tt-form-row > .tt-label { margin-top: 0; } .tt-post-body { grid-template-columns: 1fr; } .tt-post-author { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--tt-border); } .tt-post-author img { width: 44px; height: 44px; margin-bottom: 0; } .tt-forum-row, .tt-topic-row { grid-template-columns: 40px 1fr; } .tt-forum-latest { display: none; } .tt-mini-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .tt-poster-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .tt-page-title { font-size: 18px; } /* Hide low-priority columns on /t */ .tt-table .tt-col-comments, .tt-table .tt-col-files { display: none; } /* Tighter mini-list rows */ .tt-mini-list li { grid-template-columns: 20px minmax(0, 1fr) 28px auto auto; gap: 5px; padding: 0px 8px; } .tt-mini-list .tt-num { min-width: 36px; font-size: 11px; } /* Tighter cats grid */ .tt-cats-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px 10px; } .tt-cats-body { padding: 14px; } } @media (max-width: 640px) { .tt-brand-name span:last-child { display: none; } .tt-auth-card { padding: 24px 20px; } .tt-container { padding: 16px; } .tt-user-dropdown { width: calc(100vw - 24px); right: -12px; } .tt-stat-sep { display: none; } .tt-toolbar { padding: 10px; } .tt-form-card { padding: 16px; } #mainContent { padding: 14px !important; } .tt-table th, .tt-table td { padding: 8px; font-size: 12px; } .tt-table .tt-col-size { display: none; } .tt-table-cat { width: 70px; padding: 2px; } .tt-cat-badge img { width: 60px; max-width: 60px; max-height: 60px; } .tt-act { width: 30px; height: 30px; } .tt-pagination a, .tt-pagination span { min-width: 32px; height: 32px; padding: 0 8px; font-size: 12px; } } /* ---------- Print ---------- */ @media print { .tt-header, .tt-footer { display: none !important; } #mainContent { box-shadow: none !important; border: 0 !important; } } .tt-auth-logo { display:block; width:78px; height:78px; margin:0 auto 14px; } /* ═══ Login hero logo — IPT-style animated P2P globe ═══ */ .logo-icon { display:block; width:140px; height:140px; position:relative; margin:0 auto 10px; filter:drop-shadow(0 10px 30px rgba(96,165,250,0.4)); } .logo-icon svg { width:100%; height:100%; } .logo-icon .logo-glow { position:absolute; inset:-20%; background:radial-gradient(circle, rgba(96,165,250,0.3) 0%, transparent 70%); animation:pulse-glow 3s ease-in-out infinite; pointer-events:none; } @keyframes pulse-glow { 0%,100%{opacity:.5;transform:scale(1);} 50%{opacity:.8;transform:scale(1.1);} } @keyframes lp-spin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} } @keyframes lp-pulse { 0%,100%{opacity:.3;} 50%{opacity:1;} } @keyframes lp-breathe { 0%,100%{transform:scale(1);} 50%{transform:scale(1.04);} } @keyframes lp-strike { 0%{opacity:0;} 3%{opacity:1;} 5%{opacity:.3;} 8%{opacity:1;} 10%{opacity:.5;} 13%{opacity:1;} 30%{opacity:.6;} 50%{opacity:0;} 100%{opacity:0;} } @keyframes lp-pkt-in { to{opacity:1;} } .logo-icon .lp-mesh { animation:lp-spin 30s linear infinite; transform-origin:60px 60px; } .logo-icon .lp-peer { animation:lp-pulse 2.5s ease-in-out infinite; } .logo-icon .lp-pkt { opacity:0; animation:lp-pkt-in 0.01s 0.6s both; } .logo-icon .lp-core { animation:lp-breathe 4s ease-in-out infinite; transform-origin:60px 60px; } .logo-icon .lp-globe-grid { stroke:rgba(96,165,250,0.15); stroke-width:0.6; } .logo-icon .lp-bolt { opacity:0; } .logo-icon .lp-bolt-a { animation:lp-strike 2.4s ease-out 0.0s infinite; } .logo-icon .lp-bolt-b { animation:lp-strike 3.1s ease-out 0.8s infinite; } .logo-icon .lp-bolt-c { animation:lp-strike 2.7s ease-out 1.5s infinite; } .logo-icon .lp-bolt-d { animation:lp-strike 3.5s ease-out 0.3s infinite; } .logo-icon .lp-bolt-e { animation:lp-strike 2.9s ease-out 2.0s infinite; } .logo-icon .lp-bolt-f { animation:lp-strike 3.3s ease-out 1.2s infinite; }