diff --git a/dist/css/styles.css b/dist/css/styles.css index b0b833a..97d8694 100644 --- a/dist/css/styles.css +++ b/dist/css/styles.css @@ -1,618 +1,1801 @@ -/* ============================================================================= - Debrid Services Comparison - Improved Complete CSS - - Unified card-first design for About, Speed Test, FAQ - - Accessible header/navigation, hero, buttons - - Tables, comparisons, search, referral, status, resources, notes - - Age verification modal, loading states, footer, utilities - ========================================================================== */ -/* Root variables and theme */ -:root{ - color-scheme: light dark; + :root { + /* Color System */ + --primary: #6366f1; + --primary-hover: #4f46e5; + --primary-light: #a5b4fc; + --primary-dark: #3730a3; + --accent: #8b5cf6; + --success: #10b981; + --warning: #f59e0b; + --error: #ef4444; + --info: #2c6ace; + + /* Grayscale */ + --gray-50: #f8fafc; + --gray-100: #f1f5f9; + --gray-200: #e2e8f0; + --gray-300: #cbd5e1; + --gray-400: #94a3b8; + --gray-500: #64748b; + --gray-600: #475569; + --gray-700: #334155; + --gray-800: #1e293b; + --gray-900: #0f172a; + + /* Semantic Colors */ + --text-primary: var(--gray-900); + --text-secondary: var(--gray-600); + --text-tertiary: var(--gray-500); + --text-muted: var(--gray-400); + --bg-primary: #fff; + --bg-secondary: var(--gray-50); + --bg-tertiary: var(--gray-100); + --bg-elevated: #fff; + --border-primary: var(--gray-200); + --border-secondary: var(--gray-300); + --border-focus: var(--primary); + + /* Layout */ + --container-max: 1400px; + --header-height: 5rem; + --content-max: 1200px; + + /* Spacing */ + --space-xs: 0.25rem; + --space-sm: 0.5rem; + --space-md: 0.75rem; + --space-lg: 1rem; + --space-xl: 1.25rem; + --space-2xl: 1.5rem; + --space-3xl: 2rem; + --space-4xl: 2.5rem; + --space-5xl: 3rem; + --space-6xl: 4rem; + --space-7xl: 5rem; + --space-8xl: 6rem; + + /* Typography */ + --text-xs: 0.75rem; + --text-sm: 0.875rem; + --text-base: 1rem; + --text-lg: 1.125rem; + --text-xl: 1.25rem; + --text-2xl: 1.5rem; + --text-3xl: 1.875rem; + --text-4xl: 2.25rem; + --text-5xl: 3rem; + --text-6xl: 3.75rem; + + --font-light: 300; + --font-normal: 400; + --font-medium: 500; + --font-semibold: 600; + --font-bold: 700; + --font-extrabold: 800; + + /* Effects */ + --radius-sm: 0.25rem; + --radius-md: 0.5rem; + --radius-lg: 0.75rem; + --radius-xl: 1rem; + --radius-2xl: 1.5rem; + --radius-full: 9999px; + + --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --shadow-focus: 0 0 0 3px rgb(99 102 241 / 0.15); + + --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); + --transition-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1); + --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1); + } - /* Brand + feedback */ - --primary:#6366f1; - --primary-hover:#4f46e5; - --primary-light:#a5b4fc; - --primary-dark:#3730a3; - --success:#10b981; - --warning:#f59e0b; - --error:#ef4444; - --info:#3b82f6; + [data-theme="dark"] { + --text-primary: var(--gray-50); + --text-secondary: var(--gray-300); + --text-tertiary: var(--gray-400); + --text-muted: var(--gray-500); + --bg-primary: var(--gray-900); + --bg-secondary: var(--gray-800); + --bg-tertiary: var(--gray-700); + --bg-elevated: var(--gray-800); + --border-primary: var(--gray-700); + --border-secondary: var(--gray-600); + --primary: #818cf8; + --primary-hover: #a5b4fc; + --primary-light: #c7d2fe; + --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4); + --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4); + --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4); + --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4); + --shadow-focus: 0 0 0 3px rgb(129 140 248 / 0.2); + } - /* Grays */ - --gray-50:#f8fafc; - --gray-100:#f1f5f9; - --gray-200:#e2e8f0; - --gray-300:#cbd5e1; - --gray-400:#94a3b8; - --gray-500:#64748b; - --gray-600:#475569; - --gray-700:#334155; - --gray-800:#1e293b; - --gray-900:#0f172a; + /* Reset & Base Styles */ + *, *::before, *::after { + box-sizing: border-box; + } - /* Text and background */ - --text-primary:var(--gray-900); - --text-secondary:var(--gray-600); - --text-tertiary:var(--gray-500); - --text-muted:var(--gray-400); - --bg-primary:#fff; - --bg-secondary:var(--gray-50); - --bg-tertiary:var(--gray-100); - --bg-elevated:#fff; + html { + scroll-behavior: smooth; + font-size: 16px; + line-height: 1.6; + -webkit-text-size-adjust: 100%; + } - /* Borders and focus */ - --border-primary:var(--gray-200); - --border-secondary:var(--gray-300); - --border-focus:var(--primary); + body { + font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + font-feature-settings: 'cv01', 'cv03', 'cv04', 'cv11'; + background: var(--bg-primary); + color: var(--text-primary); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + min-height: 100vh; + margin: 0; + overflow-x: hidden; + } - /* Radius */ - --radius-md:.375rem; - --radius-lg:.5rem; - --radius-xl:.75rem; - --radius-2xl:1rem; - --radius-full:9999px; + img, svg, video, canvas { + max-width: 100%; + height: auto; + } - /* Shadows */ - --shadow-sm:0 1px 3px 0 rgb(0 0 0 / .1),0 1px 2px -1px rgb(0 0 0 / .1); - --shadow-md:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1); - --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1); - --shadow-focus:0 0 0 3px rgb(99 102 241 / .15); + a { + color: var(--primary); + text-decoration: none; + transition: color var(--transition-fast); + } - /* Typography */ - --text-xs:.75rem; - --text-sm:.875rem; - --text-base:1rem; - --text-lg:1.125rem; - --text-xl:1.25rem; - --text-2xl:1.5rem; - --text-3xl:1.875rem; - --text-4xl:2.25rem; - --text-5xl:3rem; - --text-6xl:3.75rem; - --font-normal:400; - --font-medium:500; - --font-semibold:600; - --font-bold:700; - --font-extrabold:800; + a:hover { + color: var(--primary-hover); + } - /* Spacing */ - --space-px:1px; - --space-0-5:.125rem; - --space-1:.25rem; - --space-1-5:.375rem; - --space-2:.5rem; - --space-2-5:.625rem; - --space-3:.75rem; - --space-3-5:.875rem; - --space-4:1rem; - --space-5:1.25rem; - --space-6:1.5rem; - --space-7:1.75rem; - --space-8:2rem; - --space-9:2.25rem; - --space-10:2.5rem; - --space-11:2.75rem; - --space-12:3rem; - --space-14:3.5rem; - --space-16:4rem; - --space-20:5rem; - --space-24:6rem; + :focus { + outline: 2px solid var(--border-focus); + outline-offset: 2px; + } - /* Layout */ - --container-max-width:1280px; - --header-height:4.5rem; + :focus:not(:focus-visible) { + outline: none; + } - /* Z-index */ - --z-sticky:1020; - --z-docked:10; -} -[data-theme="dark"]{ - --text-primary:var(--gray-50); - --text-secondary:var(--gray-300); - --text-tertiary:var(--gray-400); - --text-muted:var(--gray-500); + /* Layout */ + .page-wrapper { + min-height: 100vh; + display: flex; + flex-direction: column; + } - --bg-primary:var(--gray-900); - --bg-secondary:var(--gray-800); - --bg-tertiary:var(--gray-700); - --bg-elevated:var(--gray-800); + .container { + max-width: var(--container-max); + margin: 0 auto; + padding: 0 var(--space-2xl); + width: 100%; + } - --border-primary:var(--gray-700); - --border-secondary:var(--gray-600); - --border-focus:var(--primary-light); + .content-container { + max-width: var(--content-max); + margin: 0 auto; + } - --primary:#818cf8; - --primary-hover:#a5b4fc; - --primary-light:#c7d2fe; - --primary-dark:#6366f1; + /* Skip Link */ + .skip-link { + position: absolute; + left: -9999px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; + } - --shadow-sm:0 1px 3px 0 rgb(0 0 0 / .4),0 1px 2px -1px rgb(0 0 0 / .4); - --shadow-md:0 4px 6px -1px rgb(0 0 0 / .4),0 2px 4px -2px rgb(0 0 0 / .4); - --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .4),0 4px 6px -4px rgb(0 0 0 / .4); - --shadow-focus:0 0 0 3px rgb(129 140 248 / .2); + .skip-link:focus { + position: fixed; + left: var(--space-lg); + top: var(--space-lg); + width: auto; + height: auto; + padding: var(--space-sm) var(--space-md); + background: var(--bg-primary); + color: var(--text-primary); + border: 2px solid var(--border-focus); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-md); + z-index: 9999; + } + + /* Header */ + .site-header { + position: sticky; + top: 0; + z-index: 100; + background: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(16px) saturate(180%); + border-bottom: 1px solid var(--border-primary); + height: var(--header-height); + transition: all var(--transition-normal); + } + + [data-theme="dark"] .site-header { + background: rgba(15, 23, 42, 0.85); + } + + .header-content { + display: flex; + align-items: center; + justify-content: space-between; + height: var(--header-height); + gap: var(--space-4xl); + } + + .site-title { + display: flex; + align-items: center; + gap: var(--space-md); + font-size: var(--text-xl); + font-weight: var(--font-bold); + color: var(--text-primary); + text-decoration: none; + transition: all var(--transition-normal); + padding: var(--space-sm) var(--space-lg); + border-radius: var(--radius-lg); + } + + .site-title:hover { + color: var(--primary); + background: var(--bg-secondary); + transform: translateY(-1px); + } + + .logo-icon { + width: 28px; + height: 28px; + color: var(--primary); + transition: transform var(--transition-normal); + } + + .site-title:hover .logo-icon { + transform: rotate(-5deg) scale(1.1); + } + + .header-nav { + display: flex; + align-items: center; + gap: var(--space-xs); + } + + .nav-link { + position: relative; + display: inline-flex; + align-items: center; + padding: var(--space-md) var(--space-xl); + font-size: var(--text-sm); + font-weight: var(--font-medium); + color: var(--text-secondary); + border-radius: var(--radius-lg); + transition: all var(--transition-fast); + white-space: nowrap; + } + + .nav-link::before { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 2px; + background: var(--primary); + border-radius: var(--radius-full); + transition: all var(--transition-fast); + transform: translateX(-50%); + } + + .nav-link:hover { + color: var(--primary); + background: var(--bg-secondary); + } + + .nav-link:hover::before { + width: 80%; + } + + .dark-mode-toggle { + display: flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + border: 2px solid var(--border-primary); + border-radius: var(--radius-full); + background: var(--bg-primary); + color: var(--text-primary); + cursor: pointer; + transition: all var(--transition-fast); + } + + .dark-mode-toggle:hover { + background: var(--bg-secondary); + border-color: var(--primary); + transform: scale(1.05); + } + + .sun-icon, .moon-icon { + width: 20px; + height: 20px; + transition: all var(--transition-fast); + } + + .moon-icon { + display: none; + } + + [data-theme="dark"] .sun-icon { + display: none; + } + + [data-theme="dark"] .moon-icon { + display: block; + } + + /* Hero Section */ + .hero-section { + position: relative; + padding: var(--space-8xl) 0 var(--space-7xl); + background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); + overflow: hidden; + } + + .hero-section::before { + content: ''; + position: absolute; + inset: 0; + background: + radial-gradient(circle at 30% 20%, rgb(99 102 241 / 0.08) 0%, transparent 50%), + radial-gradient(circle at 70% 80%, rgb(139 92 246 / 0.05) 0%, transparent 50%); + pointer-events: none; + } + + [data-theme="dark"] .hero-section::before { + background: + radial-gradient(circle at 30% 20%, rgb(129 140 248 / 0.12) 0%, transparent 50%), + radial-gradient(circle at 70% 80%, rgb(196 181 253 / 0.08) 0%, transparent 50%); + } + + .hero-content { + text-align: center; + max-width: 900px; + margin: 0 auto; + position: relative; + animation: fadeInUp 0.8s ease-out; + } + + @keyframes fadeInUp { + from { opacity: 0; transform: translateY(30px); } + to { opacity: 1; transform: translateY(0); } + } + + .hero-title { + font-size: clamp(var(--text-3xl), 8vw, var(--text-6xl)); + font-weight: var(--font-extrabold); + line-height: 1.1; + margin: 0 0 var(--space-2xl); + color: var(--text-primary); + letter-spacing: -0.02em; + } + + .gradient-text { + background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + [data-theme="dark"] .gradient-text { + background: linear-gradient(135deg, var(--primary-light) 0%, #c4b5fd 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + .hero-description { + font-size: clamp(var(--text-lg), 4vw, var(--text-xl)); + color: var(--text-secondary); + margin: 0 0 var(--space-5xl); + max-width: 700px; + margin-left: auto; + margin-right: auto; + line-height: 1.6; + } + + .hero-actions { + display: flex; + gap: var(--space-lg); + justify-content: center; + margin-bottom: var(--space-6xl); + flex-wrap: wrap; + } + + .hero-stats { + display: flex; + gap: var(--space-5xl); + justify-content: center; + flex-wrap: wrap; + } + + .stat-item { + text-align: center; + position: relative; + } + + .stat-item:not(:last-child)::after { + content: ''; + position: absolute; + right: calc(-1 * var(--space-2xl)); + top: 50%; + transform: translateY(-50%); + width: 1px; + height: 50px; + background: var(--border-primary); + } + + .stat-number { + display: block; + font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl)); + font-weight: var(--font-extrabold); + margin-bottom: var(--space-sm); + background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + .stat-label { + font-size: var(--text-sm); + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.1em; + font-weight: var(--font-medium); + } + + /* Buttons */ + .btn { + display: inline-flex; + align-items: center; + gap: var(--space-sm); + padding: var(--space-lg) var(--space-3xl); + border: 2px solid transparent; + border-radius: var(--radius-xl); + font-size: var(--text-base); + font-weight: var(--font-semibold); + text-decoration: none; + cursor: pointer; + position: relative; + overflow: hidden; + min-width: 160px; + justify-content: center; + transition: all var(--transition-fast); + } + + .btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.5s; + } + + .btn:hover::before { + left: 100%; + } + + .btn-primary { + background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); + color: white; + box-shadow: var(--shadow-md); + } + + .btn-primary:hover { + background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%); + transform: translateY(-2px); + box-shadow: var(--shadow-lg); + } + + .btn-secondary { + background: transparent; + color: var(--text-primary); + border: 2px solid var(--border-primary); + } + + .btn-secondary:hover { + border-color: var(--primary); + color: var(--primary); + background: var(--bg-secondary); + transform: translateY(-2px); + box-shadow: var(--shadow-md); + } + + /* Sections */ + .section { + padding: var(--space-8xl) 0; + position: relative; + } + + .section:nth-child(even) { + background: var(--bg-secondary); + } + + .section-header { + text-align: center; + margin-bottom: var(--space-6xl); + } + + .section-title { + font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl)); + font-weight: var(--font-extrabold); + margin: 0 0 var(--space-2xl); + color: var(--text-primary); + letter-spacing: -0.02em; + } + + .section-description { + font-size: clamp(var(--text-base), 3vw, var(--text-xl)); + color: var(--text-secondary); + margin: 0; + max-width: 800px; + margin-inline: auto; + line-height: 1.7; + } + + /* Features Grid - Improved */ + .features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: var(--space-lg); + } + + .benefit-card { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: var(--space-2xl); + background: var(--bg-elevated); + border: 1px solid var(--border-primary); + border-radius: var(--radius-lg); + transition: all var(--transition-normal); + min-height: 160px; + justify-content: center; + } + + .benefit-card:hover { + border-color: var(--primary); + transform: translateY(-2px); + box-shadow: var(--shadow-md); + } + + .benefit-card .icon-badge { + width: 40px; + height: 40px; + color: var(--primary); + margin-bottom: var(--space-lg); + transition: transform var(--transition-normal); + } + + .benefit-card:hover .icon-badge { + transform: scale(1.05); + } + + .benefit-card h3 { + margin: 0 0 var(--space-sm); + font-size: var(--text-base); + font-weight: var(--font-semibold); + color: var(--text-primary); + } + + .benefit-card p { + margin: 0; + color: var(--text-secondary); + font-size: var(--text-xs); + line-height: 1.4; + } + + /* Meta Chips */ + .meta-chips { + display: flex; + gap: var(--space-sm); + justify-content: center; + margin-top: var(--space-xl); + flex-wrap: wrap; + } + + .chip { + display: inline-flex; + align-items: center; + gap: var(--space-xs); + padding: var(--space-sm) var(--space-lg); + border-radius: var(--radius-full); + background: var(--bg-secondary); + color: var(--text-secondary); + border: 1px solid var(--border-primary); + font-size: var(--text-xs); + font-weight: var(--font-medium); + text-transform: uppercase; + letter-spacing: 0.05em; + } + + /* Alert Components */ + .alert { + display: flex; + align-items: flex-start; + gap: var(--space-md); + padding: var(--space-xl); + border-radius: var(--radius-xl); + margin: var(--space-xl) 0; + border: 1px solid var(--border-primary); + } + + .alert-info { + background: rgba(59, 130, 246, 0.08); + border-color: rgba(59, 130, 246, 0.2); + color: var(--info); + } + + .alert-warning { + background: rgba(245, 158, 11, 0.08); + border-color: rgba(245, 158, 11, 0.2); + color: var(--warning); + } + + .alert-icon { + flex-shrink: 0; + width: 20px; + height: 20px; + margin-top: 2px; + } + + /* Speed Test Section - Improved with Project Support Styles */ + .speed-section { + background: var(--bg-secondary); + border-radius: var(--radius-2xl); + border: 1px solid var(--border-primary); + padding: var(--space-4xl); + margin: var(--space-3xl) 0; + } + + .speed-header { + text-align: center; + margin-bottom: var(--space-3xl); + } + + .speed-header h3 { + margin: 0 0 var(--space-md); + font-size: var(--text-2xl); + font-weight: var(--font-bold); + color: var(--text-primary); + } + + .speed-header p { + margin: 0; + color: var(--text-secondary); + max-width: 600px; + margin-inline: auto; + } + + .speed-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: var(--space-lg); + } + + .speed-card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--space-sm); + padding: var(--space-xl); + background: var(--bg-primary); + border: 1px solid var(--border-primary); + border-radius: var(--radius-lg); + text-decoration: none; + transition: all var(--transition-normal); + min-height: 120px; + } + + .speed-card:hover { + border-color: var(--primary); + transform: translateY(-2px); + box-shadow: var(--shadow-md); + } + + .speed-card .service-name { + font-weight: var(--font-semibold); + color: var(--text-primary); + font-size: var(--text-base); + } + + .speed-card .speed-test-label { + font-size: var(--text-sm); + color: var(--text-secondary); + } + + /* Real-World Test - Improved */ + .real-world-test { + background: var(--bg-elevated); + border-radius: var(--radius-2xl); + border: 1px solid var(--border-primary); + padding: var(--space-4xl); + margin: var(--space-3xl) 0; + box-shadow: var(--shadow-sm); + } + + .real-world-header { + text-align: center; + margin-bottom: var(--space-3xl); + } + + .real-world-header h3 { + margin: 0 0 var(--space-md); + font-size: var(--text-2xl); + font-weight: var(--font-bold); + color: var(--text-primary); + } + + .stepper { + counter-reset: step; + list-style: none; + padding: 0; + margin: 0; + display: grid; + gap: var(--space-xl); + } + + .stepper li { + display: flex; + align-items: flex-start; + gap: var(--space-lg); + padding: var(--space-xl); + background: var(--bg-secondary); + border-radius: var(--radius-lg); + border: 1px solid var(--border-primary); + transition: all var(--transition-normal); + } + + .stepper li:hover { + border-color: var(--primary); + transform: translateX(4px); + } + + .stepper li::before { + counter-increment: step; + content: counter(step); + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: var(--radius-full); + background: var(--primary); + color: white; + font-size: var(--text-sm); + font-weight: var(--font-bold); + flex-shrink: 0; + } + + .step-content { + flex: 1; + } + + .step-content strong { + display: block; + color: var(--text-primary); + font-weight: var(--font-semibold); + margin-bottom: var(--space-xs); + } + + .step-description { + color: var(--text-secondary); + font-size: var(--text-sm); + line-height: 1.5; + } + + /* Accordion - Improved */ + .accordion { + border: 1px solid var(--border-primary); + border-radius: var(--radius-xl); + background: var(--bg-elevated); + margin: var(--space-lg) 0; + overflow: hidden; + transition: all var(--transition-normal); + } + + .accordion:hover { + border-color: var(--primary); + box-shadow: var(--shadow-sm); + } + + .accordion > summary { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-md); + padding: var(--space-xl); + font-weight: var(--font-semibold); + cursor: pointer; + list-style: none; + background: var(--bg-primary); + transition: all var(--transition-fast); + } + + .accordion > summary::-webkit-details-marker { + display: none; + } + + .accordion > summary:hover { + background: var(--bg-secondary); + } + + .accordion[open] > summary { + background: var(--bg-secondary); + border-bottom: 1px solid var(--border-primary); + } + + .chevron { + width: 20px; + height: 20px; + color: var(--text-tertiary); + transition: transform var(--transition-normal); + } + + .accordion[open] .chevron { + transform: rotate(180deg); + } + + .accordion-content { + padding: var(--space-xl); + color: var(--text-secondary); + line-height: 1.6; + } + + + + /* Important Notes - Minimal Design */ + .important-notes-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: var(--space-xl); + } + + .note-card { + display: flex; + gap: var(--space-lg); + padding: var(--space-2xl); + background: var(--bg-elevated); + border: 1px solid var(--border-primary); + border-radius: var(--radius-lg); + transition: all var(--transition-normal); + } + + .note-card:hover { + border-color: var(--primary); + transform: translateY(-2px); + box-shadow: var(--shadow-md); + } + + .note-icon { + width: 24px; + height: 24px; + color: var(--primary); + flex-shrink: 0; + margin-top: 2px; + } + + .note-content h3 { + margin: 0 0 var(--space-sm); + font-size: var(--text-lg); + font-weight: var(--font-semibold); + color: var(--text-primary); + } + + .note-content p { + margin: 0; + color: var(--text-secondary); + font-size: var(--text-sm); + line-height: 1.5; + } + + /* Resources Section - Better Layout */ + .resources-categories { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); + gap: var(--space-5xl); + } + + .resource-category { + background: var(--bg-elevated); + border-radius: var(--radius-2xl); + padding: var(--space-4xl); + border: 1px solid var(--border-primary); + box-shadow: var(--shadow-sm); + } + + .resource-category h3 { + margin: 0 0 var(--space-2xl); + font-size: var(--text-2xl); + font-weight: var(--font-bold); + color: var(--primary); + display: flex; + align-items: center; + gap: var(--space-md); + } + + .resource-category-icon { + width: 28px; + height: 28px; + } + + .resource-list { + display: grid; + gap: var(--space-lg); + } + + .resource-item { + display: block; + padding: var(--space-xl); + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: var(--radius-lg); + text-decoration: none; + transition: all var(--transition-normal); + } + + .resource-item:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); + border-color: var(--primary); + background: var(--bg-primary); + } + + .resource-item strong { + display: block; + color: var(--text-primary); + font-weight: var(--font-semibold); + margin-bottom: var(--space-sm); + font-size: var(--text-base); + } + + .resource-item span { + color: var(--text-secondary); + font-size: var(--text-sm); + line-height: 1.5; + } + + /* Data Tables */ + .data-table-container { + background: var(--bg-elevated); + border-radius: var(--radius-2xl); + box-shadow: var(--shadow-lg); + border: 1px solid var(--border-primary); + margin: var(--space-3xl) 0; + overflow: hidden; + } + + .table-wrapper { + overflow-x: auto; + border-radius: var(--radius-2xl); + } + + table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-sm); + min-width: 600px; + } + + th, td { + padding: var(--space-lg) var(--space-xl); + text-align: left; + border-bottom: 1px solid var(--border-primary); + } + + th { + background: var(--primary); + color: white; + font-weight: var(--font-semibold); + text-transform: uppercase; + letter-spacing: 0.05em; + font-size: var(--text-xs); + position: sticky; + top: 0; + z-index: 10; + } + + tr:hover { + background: var(--bg-secondary); + } +.pricing-table .service-name{ + color: inherit; } -/* Base and resets */ -*,::before,::after{box-sizing:border-box} -html{scroll-behavior:smooth;font-size:16px;line-height:1.6;-webkit-text-size-adjust:100%} -body{ - font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; - font-feature-settings:'cv01','cv03','cv04','cv11'; - background-color:var(--bg-primary); - color:var(--text-primary); - -webkit-font-smoothing:antialiased; - -moz-osx-font-smoothing:grayscale; - text-rendering:optimizeLegibility; - min-height:100vh; margin:0; overflow-x:hidden; -} -img,svg,video,canvas{max-width:100%;height:auto} -a{color:var(--primary);text-decoration:none;transition:color .2s cubic-bezier(.4,0,.2,1)} -a:hover{color:var(--primary-hover);text-decoration:none} +#file-hosts-table tr:nth-child(even), +.enhanced-table tr:nth-child(even), +.pricing-table tr:nth-child(even) { + background-color: var(--bg-tertiary); -/* Focus styles */ -:focus{outline:2px solid var(--border-focus);outline-offset:2px} -:focus:not(:focus-visible){outline:none} -:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px} - -/* Layout wrappers */ -.page-wrapper{min-height:100vh;display:flex;flex-direction:column;position:relative} -.container{max-width:var(--container-max-width);margin:0 auto;padding:0 var(--space-6);width:100%} -.main-content{flex:1;position:relative} - -/* Skip link */ -.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} -.skip-link:focus{position:fixed;left:var(--space-4);top:var(--space-4);width:auto;height:auto;padding:var(--space-2) var(--space-3);background:var(--bg-primary);color:var(--text-primary);border:2px solid var(--border-focus);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:9999} - -/* Header and navigation */ -.site-header{ - position:sticky;top:0;z-index:var(--z-sticky); - background:rgb(255 255 255 / .8); - -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%); - border-bottom:1px solid var(--border-primary); - height:var(--header-height); - transition:background-color .2s,border-color .2s,backdrop-filter .3s,box-shadow .2s; } -@supports not ((backdrop-filter: blur(1px))){.site-header{background:rgb(255 255 255 / .95)}} -[data-theme="dark"] .site-header{background:rgb(15 23 42 / .8)} -.header-content{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);gap:var(--space-8)} -.site-title{ - display:flex;align-items:center;gap:var(--space-2); - font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary); - text-decoration:none;position:relative;transition:color .2s,transform .2s,text-shadow .2s; +#file-hosts-table th:first-child, +#file-hosts-table td:first-child { + position: sticky; + left: 0; + z-index: 2; + box-shadow: 2px 0 6px -4px rgba(0,0,0,0.06); } -.site-title:hover{color:var(--primary);transform:translateY(-1px)} -.site-title:focus-visible{border-radius:var(--radius-md);box-shadow:var(--shadow-focus)} -.logo-icon{font-size:var(--text-2xl);filter:drop-shadow(0 2px 4px rgb(99 102 241 / .2));transition:transform .2s,filter .2s} -.site-title:hover .logo-icon{transform:rotate(-5deg) scale(1.1)} - -.header-nav{display:flex;align-items:center;gap:var(--space-6)} -.nav-link{ - position:relative;display:inline-flex;align-items:center;padding:var(--space-2) var(--space-3); - font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);border-radius:var(--radius-lg);white-space:nowrap; - transition:color .2s,background-color .2s,transform .2s,box-shadow .2s,border-color .2s; -} -.nav-link::before{ - content:'';position:absolute;bottom:-2px;left:50%;width:0;height:2px;background:var(--primary); - border-radius:var(--radius-full);transition:width .2s,left .2s;transform:translateX(-50%); -} -.nav-link:hover{color:var(--primary);background:var(--bg-secondary);transform:translateY(-1px)} -.nav-link:hover::before{width:70%} -.nav-link:focus-visible{box-shadow:var(--shadow-focus)} -.nav-link[aria-current="page"]{color:var(--primary)} -.nav-link[aria-current="page"]::before{width:70%} - -/* Dark mode toggle */ -.dark-mode-toggle{ - display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:2px solid var(--border-primary); - border-radius:var(--radius-full);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;position:relative;overflow:hidden; - transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s,color .2s; touch-action:manipulation; -} -.dark-mode-toggle:hover{background:var(--bg-secondary);border-color:var(--primary);transform:scale(1.05);box-shadow:var(--shadow-md)} -.dark-mode-toggle:focus-visible{box-shadow:var(--shadow-focus)} -.sun-icon,.moon-icon{position:absolute;transition:opacity .2s,transform .2s} -.moon-icon{display:none;transform:rotate(180deg)} -[data-theme="dark"] .sun-icon{display:none} -[data-theme="dark"] .moon-icon{display:block;transform:rotate(0deg)} - -/* Hero section */ -.hero-section{ - position:relative;padding:var(--space-24) 0 var(--space-20); - background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%); - overflow:hidden; -} -.hero-section::before{ - content:'';position:absolute;inset:0; - background:radial-gradient(circle at 30% 20%,rgb(99 102 241 / .1) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgb(99 102 241 / .05) 0%,transparent 50%); - pointer-events:none; -} -[data-theme="dark"] .hero-section{background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%)} -[data-theme="dark"] .hero-section::before{ - background:radial-gradient(circle at 30% 20%,rgb(129 140 248 / .15) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgb(129 140 248 / .08) 0%,transparent 50%) -} -.hero-content{text-align:center;max-width:900px;margin:0 auto;position:relative;animation:fadeInUp .8s ease-out} -@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}} -.hero-title{font-size:clamp(var(--text-3xl),8vw,var(--text-6xl));font-weight:var(--font-extrabold);line-height:1.1;margin:0 0 var(--space-6);color:var(--text-primary);letter-spacing:-.02em} -.gradient-text{background:linear-gradient(135deg,var(--primary) 0%,#8b5cf6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} -[data-theme="dark"] .gradient-text{background:linear-gradient(135deg,var(--primary-light) 0%,#c4b5fd 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} -.hero-description{font-size:clamp(var(--text-lg),4vw,var(--text-xl));color:var(--text-secondary);margin:0 0 var(--space-10);max-width:650px;margin-left:auto;margin-right:auto;line-height:1.6} -.hero-actions{display:flex;gap:var(--space-4);justify-content:center;margin-bottom:var(--space-16);flex-wrap:wrap} -.hero-stats{display:flex;gap:var(--space-12);justify-content:center;flex-wrap:wrap} -.stat-item{text-align:center;position:relative} -.stat-item:not(:last-child)::after{content:'';position:absolute;right:calc(-1 * var(--space-6));top:50%;transform:translateY(-50%);width:1px;height:40px;background:var(--border-primary)} -.stat-number{display:block;font-size:clamp(var(--text-2xl),6vw,var(--text-4xl));font-weight:var(--font-extrabold);color:var(--primary);margin-bottom:var(--space-1);background:linear-gradient(135deg,var(--primary) 0%,#8b5cf6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} -.stat-label{font-size:var(--text-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;font-weight:var(--font-medium)} - -/* Buttons */ -.btn{ - display:inline-flex;align-items:center;gap:var(--space-2); - padding:var(--space-4) var(--space-8);border:2px solid transparent;border-radius:var(--radius-xl); - font-size:var(--text-base);font-weight:var(--font-semibold);text-decoration:none;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;text-align:center;min-width:140px;justify-content:center; - transition:color .2s,background-color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s; - touch-action:manipulation; -} -.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .2),transparent);transition:left .5s} -.btn:hover::before{left:100%} -.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;box-shadow:var(--shadow-md)} -.btn-primary:hover{background:linear-gradient(135deg,var(--primary-hover) 0%,var(--primary) 100%);transform:translateY(-2px);box-shadow:var(--shadow-lg)} -.btn-primary:focus-visible{box-shadow:var(--shadow-focus),var(--shadow-lg)} -.btn-secondary{background:transparent;color:var(--text-primary);border:2px solid var(--border-primary)} -.btn-secondary:hover{border-color:var(--primary);color:var(--primary);background:var(--bg-secondary);transform:translateY(-2px);box-shadow:var(--shadow-md)} -.btn-secondary:focus-visible{box-shadow:var(--shadow-focus)} -input,select,textarea,button{accent-color:var(--primary)} - -/* Section framework */ -.section{padding:var(--space-24) 0;position:relative;content-visibility:auto;contain-intrinsic-size:1px 800px} -.section:nth-child(even){background:var(--bg-secondary)} -.section-header{text-align:center;margin-bottom:var(--space-16)} -.section-title{font-size:clamp(var(--text-3xl),6vw,var(--text-5xl));font-weight:var(--font-extrabold);margin:0 0 var(--space-6);color:var(--text-primary);letter-spacing:-.02em} -.section-description{font-size:clamp(var(--text-base),3vw,var(--text-xl));color:var(--text-secondary);margin:0;max-width:700px;margin-inline:auto;line-height:1.7} -.subsection{margin:var(--space-12) 0} -.subsection-title{margin:0 0 var(--space-4);font-size:var(--text-xl);font-weight:var(--font-bold)} - -/* Quick navigation cards */ -.quick-nav{padding:var(--space-20) 0;background:var(--bg-primary);position:relative;content-visibility:auto;contain-intrinsic-size:1px 600px} -.quick-nav-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-8)} -.quick-nav-card{ - display:block;padding:var(--space-8);background:var(--bg-elevated);border:2px solid var(--border-primary);border-radius:var(--radius-2xl); - text-decoration:none;position:relative;overflow:hidden;box-shadow:var(--shadow-sm); - -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); - transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s; - content-visibility:auto;contain:content; -} -.quick-nav-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--primary) 0%,transparent 100%);opacity:0;transition:opacity .2s;z-index:0} -.quick-nav-card:hover::before{opacity:.08} -.quick-nav-card:hover{border-color:var(--primary);transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-lg)} -.quick-nav-card:focus-visible{box-shadow:var(--shadow-focus),var(--shadow-lg)} -.quick-nav-card>*{position:relative;z-index:1} -.quick-nav-icon{font-size:var(--text-4xl);margin-bottom:var(--space-4);display:block;filter:drop-shadow(0 2px 4px rgb(0 0 0 / .1));transition:transform .2s,filter .2s} -.quick-nav-card:hover .quick-nav-icon{transform:scale(1.1) rotate(-5deg)} -.quick-nav-card h3{margin:0 0 var(--space-3);font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary)} -.quick-nav-card p{margin:0;color:var(--text-secondary);font-size:var(--text-base);line-height:1.6} - -/* Unified status cards (also used for speed tiles) */ -.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6)} -.status-card{ - display:block;padding:var(--space-6);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-xl); - text-decoration:none;transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s;content-visibility:auto;contain:content; -} -.status-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-lg)} -.status-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)} -.service-status-indicator{width:12px;height:12px;border-radius:var(--radius-full);background:var(--success);box-shadow:0 0 0 2px rgb(16 185 129 / .2)} -.status-card .status-indicator.online,.service-status-indicator.online{background:var(--success);box-shadow:0 0 0 2px rgb(16 185 129 / .2)} -.status-card p{margin:0;color:var(--text-secondary);font-size:var(--text-sm)} -.speed-grid .status-card{display:flex;flex-direction:column;gap:.25rem;align-items:flex-start} -.speed-card .service-name{font-weight:var(--font-semibold);color:var(--text-primary)} -.speed-card .speed-test-label{font-size:var(--text-sm);color:var(--text-secondary)} - -/* Chips and meta */ -.meta-chips{display:flex;gap:.5rem;justify-content:center;margin-top:var(--space-4);flex-wrap:wrap} -.chip{ - display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border-radius:999px; - background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-primary); - font-size:.75rem;font-weight:var(--font-medium) -} -.chip-info{color:var(--primary);background:rgb(99 102 241 / .10);border-color:rgb(99 102 241 / .25)} - -/* Stepper (ordered guidance) */ -.stepper{counter-reset:step;list-style:none;padding-left:0;margin:var(--space-6) 0} -.stepper li{position:relative;padding-left:2.25rem;margin-bottom:.75rem} -.stepper li::before{ - counter-increment:step;content:counter(step);position:absolute;left:0;top:.1rem;width:1.5rem;height:1.5rem; - display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--primary);color:#fff;font-size:.8rem;font-weight:700 +#file-hosts-table td:first-child { + background-color: var(--bg-primary); } -/* Accordion (used in FAQ and Speed) */ -.accordion{border:1px solid var(--border-primary);border-radius:var(--radius-xl);background:var(--bg-primary);margin:var(--space-4) 0;overflow:hidden} -.accordion>summary{ - display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:var(--space-4); - font-weight:var(--font-semibold);cursor:pointer;list-style:none +.filter-results{ + text-align: center; + padding: 0.1em; + font-size: var(--text-sm); + color: var(--text-secondary); + font-family: 'Courier New', Courier, monospace; } -.accordion>summary::-webkit-details-marker{display:none} -.accordion[open]>summary{background:var(--bg-secondary)} -.accordion .chevron{transition:transform .2s} -.accordion[open] .chevron{transform:rotate(180deg)} -.accordion-content{padding:0 var(--space-4) var(--space-4);color:var(--text-secondary)} -.bullet-list{padding:var(--space-4) var(--space-6);margin:0} -.bullet-list li{margin:.25rem 0} -.accordion>summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:.5rem} -.accordion>summary:hover{background:var(--bg-secondary)} + /* Search */ + .search-section { + margin-bottom: var(--space-4xl); + } -/* Alerts */ -.alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);margin:var(--space-4) 0;border:1px solid var(--border-primary)} -.alert-info{background:rgb(59 130 246 / .1);border-color:rgb(59 130 246 / .2);color:var(--info)} -.alert-warning{background:rgb(245 158 11 / .1);border-color:rgb(245 158 11 / .2);color:var(--warning)} -.alert-icon{flex-shrink:0;margin-top:2px} + .search-container { + position: relative; + max-width: 500px; + margin: 0 auto; + } -/* Tables (data + pricing) */ -.data-table-container{ - background:var(--bg-elevated);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-primary); - margin:var(--space-8) 0;position:relative;overflow:hidden;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px) -} -.table-wrapper{overflow-x:auto;overflow-y:visible;border-radius:var(--radius-2xl);-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--primary) var(--bg-secondary)} -.table-wrapper::-webkit-scrollbar{height:10px} -.table-wrapper::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:var(--radius-md)} -.table-wrapper::-webkit-scrollbar-thumb{background:var(--primary);border-radius:var(--radius-md);border:2px solid var(--bg-secondary)} -.table-wrapper::-webkit-scrollbar-thumb:hover{background:var(--primary-hover)} + .search-icon { + position: absolute; + left: var(--space-lg); + top: 50%; + transform: translateY(-50%); + color: var(--text-tertiary); + width: 20px; + height: 20px; + } -table{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:600px} -th,td{padding:var(--space-4) var(--space-6);text-align:left;border-bottom:1px solid var(--border-primary);white-space:nowrap} -th{ - background:var(--primary);color:#fff;font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.05em;font-size:var(--text-xs); - position:sticky;top:0;z-index:var(--z-sticky) -} -th:first-child{position:sticky;left:0;z-index:calc(var(--z-sticky) + 1);background:var(--primary);background-clip:padding-box} -tr:hover{background:var(--bg-secondary)} -td{transition:background-color .15s,color .15s} -td:first-child{ - font-weight:var(--font-medium);position:sticky;left:0;background:var(--bg-primary);z-index:1;background-clip:padding-box; - box-shadow:inset -1px 0 0 var(--border-primary) -} -tr:hover td:first-child{background:var(--bg-secondary)} + .search-input { + width: 100%; + padding: var(--space-lg) var(--space-5xl) var(--space-lg) var(--space-5xl); + border: 2px solid var(--border-primary); + border-radius: var(--radius-full); + font-size: var(--text-base); + background: var(--bg-primary); + color: var(--text-primary); + outline: none; + transition: all var(--transition-fast); + } -.status-cell{text-align:center!important} -.status-indicator{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-full);transition:background-color .15s,color .15s,transform .15s} -.status-indicator.supported{background:rgb(14 236 162 / .1);color:var(--success)} -.status-indicator.not-supported{background:rgb(211 29 29 / .1);color:var(--error)} -.status-indicator svg{width:16px;height:16px} + .search-input:focus { + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); + } -/* Pricing table highlight support */ -.pricing-table th.highlighted, -.pricing-table td.highlighted{background:var(--bg-secondary)} + .clear-icon { + position: absolute; + right: var(--space-lg); + top: 50%; + transform: translateY(-50%); + background: none; + border: none; + color: var(--text-tertiary); + cursor: pointer; + padding: var(--space-sm); + border-radius: var(--radius-md); + opacity: 0; + visibility: hidden; + transition: all var(--transition-fast); + width: 20px; + height: 20px; + } -/* Search */ -.search-section{margin-bottom:var(--space-8)} -.search-container.enhanced{position:relative;max-width:500px;margin:0 auto} -.search-icon{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);color:var(--text-tertiary);z-index:1} -.search-input{ - width:100%;padding:var(--space-4) var(--space-12) var(--space-4) var(--space-12); - border:2px solid var(--border-primary);border-radius:var(--radius-full);font-size:var(--text-base);background:var(--bg-primary);color:var(--text-primary);outline:none; - transition:border-color .15s,box-shadow .15s,color .15s,background-color .15s; -} -.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgb(99 102 241 / .1)} -.clear-icon{ - position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%); - background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:var(--space-1); - border-radius:var(--radius-md);opacity:0;visibility:hidden;transition:opacity .15s,color .15s,background-color .15s,transform .15s; -} -.search-input:not(:placeholder-shown) + .clear-icon,.search-input:focus + .clear-icon{opacity:1;visibility:visible} -.clear-icon:hover{background:var(--bg-secondary);color:var(--text-primary)} -.search-results{text-align:center;padding:var(--space-2) 0;color:var(--text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-4)} + .search-input:not(:placeholder-shown) + .clear-icon { + opacity: 1; + visibility: visible; + } -/* Compare UI */ -.compare-controls{display:flex;align-items:end;gap:var(--space-6);margin-bottom:var(--space-12);flex-wrap:wrap} -.compare-select-group{flex:1;min-width:200px} -.compare-select-group label{display:block;margin-bottom:var(--space-2);font-weight:var(--font-medium);color:var(--text-primary)} -.select-wrapper{position:relative} -.select-wrapper::after{ - content:'';position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%); - width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--text-tertiary);pointer-events:none; -} -select{ - width:100%;padding:var(--space-3) var(--space-8) var(--space-3) var(--space-4);border:2px solid var(--border-primary);border-radius:var(--radius-lg); - background:var(--bg-primary);color:var(--text-primary);font-size:var(--text-base);cursor:pointer;appearance:none; - transition:border-color .15s,box-shadow .15s,color .15s,background-color .15s; -} -select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgb(99 102 241 / .1)} -.compare-vs{flex-shrink:0;font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--primary);background:var(--bg-secondary);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);border:2px solid var(--border-primary);margin-bottom:var(--space-2)} + .clear-icon:hover { + background: var(--bg-secondary); + color: var(--text-primary); + } -#compare-table-container{position:relative;background:var(--bg-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-primary);margin-top:var(--space-6);display:none} -.comparison-visible{display:block!important;animation:slideIn .3s ease-out} -.comparison-hiding{animation:slideOut .3s ease-in} -@keyframes slideIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}} -@keyframes slideOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}} + /* Status Cards */ + .status-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: var(--space-xl); + } -.comparison-header{padding:var(--space-6);border-bottom:1px solid var(--border-primary);background:var(--bg-secondary);border-radius:var(--radius-xl) var(--radius-xl) 0 0} -.comparison-header h3{margin:0 0 var(--space-4);font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--text-primary);text-align:center} -.comparison-stats{display:flex;gap:var(--space-6);justify-content:center;margin-bottom:var(--space-6);flex-wrap:wrap} -.comparison-stats .stat{text-align:center;background:var(--bg-primary);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--border-primary);min-width:100px} -.stat-label{display:block;font-size:var(--text-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-1)} -.stat-value{display:block;font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--primary)} -.comparison-actions{display:flex;justify-content:center;gap:var(--space-3)} + .status-card { + display: flex; + flex-direction: column; + padding: var(--space-2xl); + background: var(--bg-primary); + border: 1px solid var(--border-primary); + border-radius: var(--radius-xl); + text-decoration: none; + transition: all var(--transition-normal); + min-height: 120px; + } -.comparison-filters{padding:var(--space-4) var(--space-6);background:var(--bg-tertiary);border-bottom:1px solid var(--border-primary);display:flex;gap:var(--space-6);justify-content:center;flex-wrap:wrap} -.filter-option{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary)} -.filter-option input[type="radio"]{margin:0} -.filter-results{text-align:center;padding:var(--space-2) 0;color:var(--text-secondary);font-size:var(--text-sm);background:var(--bg-secondary);border-bottom:1px solid var(--border-primary)} + .status-card:hover { + border-color: var(--primary); + transform: translateY(-2px); + box-shadow: var(--shadow-lg); + } -.comparison-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:700px} -.comparison-table th,.comparison-table td{padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--border-primary);text-align:center} -.comparison-table th:first-child,.comparison-table td:first-child{text-align:left;font-weight:var(--font-medium)} -.comparison-table th{background:var(--primary);color:#fff;font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.05em;font-size:var(--text-xs);position:sticky;top:0;z-index:var(--z-sticky)} -.provider-header{position:relative} -.comparison-row.both-supported{background:rgb(16 185 129 / .05)} -.comparison-row.provider1-only{background:rgb(59 130 246 / .05)} -.comparison-row.provider2-only{background:rgb(168 85 247 / .05)} -.comparison-row.neither-supported{background:rgb(239 68 68 / .05)} -.status-badge{display:inline-block;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:.05em} -.status-badge.both-supported{background:rgb(16 185 129 / .1);color:var(--success)} -.status-badge.provider1-only{background:rgb(59 130 246 / .1);color:var(--info)} -.status-badge.provider2-only{background:rgb(168 85 247 / .1);color:#8b5cf6} -.status-badge.neither-supported{background:rgb(239 68 68 / .1);color:var(--error)} + .status-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-md); + } -#close-compare{ - background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-lg); - padding:var(--space-2) var(--space-4);display:flex;align-items:center;gap:var(--space-2); - cursor:pointer;font-size:var(--text-sm);color:var(--text-primary);font-weight:var(--font-medium); - transition:color .15s,background-color .15s,border-color .15s,transform .15s,box-shadow .15s; -} -#close-compare:hover{background:var(--error);color:#fff;border-color:var(--error);transform:translateY(-1px)} + .service-name { + font-weight: var(--font-semibold); + color: var(--text-primary); + + } -.empty-state{text-align:center;padding:var(--space-16)} -.empty-state-icon{font-size:var(--text-5xl);margin-bottom:var(--space-4)} -.empty-state h3{margin:0 0 var(--space-2);font-size:var(--text-xl);color:var(--text-primary)} -.empty-state p{margin:0;color:var(--text-secondary)} + .service-status-indicator { + width: 12px; + height: 12px; + border-radius: var(--radius-full); + background: var(--success); + box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); + } -.warning-state{text-align:center;padding:var(--space-12);background:rgb(245 158 11 / .05);border-radius:var(--radius-lg);border:1px solid rgb(245 158 11 / .2)} -.warning-icon{font-size:var(--text-4xl);margin-bottom:var(--space-3)} -.warning-state h3{margin:0 0 var(--space-2);color:var(--warning)} -.warning-state p{margin:0;color:var(--text-secondary)} + .status-card p { + margin: 0; + color: var(--text-secondary); + font-size: var(--text-sm); + line-height: 1.5; + } -/* Referral section */ -.referral-section{margin-block:var(--space-16);padding:var(--space-8);background:var(--bg-secondary);border-radius:var(--radius-xl);border:1px solid var(--border-primary);text-align:center;content-visibility:auto;contain-intrinsic-size:1px 400px} -.referral-header h3{margin:0 0 var(--space-2);color:var(--text-primary);font-size:var(--text-2xl);font-weight:var(--font-bold)} -.referral-header p{margin:0 auto var(--space-6);color:var(--text-secondary);max-width:800px} -.referral-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4);justify-items:center} -.referral-card{ - display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2); - padding:var(--space-4) var(--space-3);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-lg); - text-decoration:none;width:100%;max-width:200px;box-shadow:var(--shadow-sm); - transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s,color .2s; -} -.referral-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)} -.referral-card .service-name{font-weight:var(--font-semibold);color:var(--text-primary);font-size:var(--text-base)} -.referral-badge{font-size:var(--text-xs);color:var(--primary);background:rgb(99 102 241 / .1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);font-weight:var(--font-medium)} + /* Referral Section */ + .referral-section { + margin: var(--space-6xl) 0; + padding: var(--space-4xl); + background: var(--bg-secondary); + border-radius: var(--radius-2xl); + border: 1px solid var(--border-primary); + text-align: center; + } -/* Important notes */ -.important-notes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-6)} -.note-card{background:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-6)} -.note-icon{font-size:var(--text-2xl);margin-bottom:var(--space-3)} -.note-card h3{margin-bottom:var(--space-3);color:var(--text-primary)} -.note-card p{margin:0;color:var(--text-secondary)} + .referral-header h3 { + margin: 0 0 var(--space-md); + color: var(--text-primary); + font-size: var(--text-2xl); + font-weight: var(--font-bold); + } -/* Resources */ -.resources-categories{display:grid;gap:var(--space-12)} -.resource-category h3{margin-bottom:var(--space-6);color:var(--primary)} -.resource-list{display:grid;gap:var(--space-4)} -.resource-item{ - display:block;padding:var(--space-4);background:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-lg); - text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s; -} -.resource-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary)} -.resource-item strong{display:block;color:var(--text-primary);margin-bottom:var(--space-1)} -.resource-item span{color:var(--text-secondary);font-size:var(--text-sm)} + .referral-header p { + margin: 0 auto var(--space-2xl); + color: var(--text-secondary); + max-width: 600px; + } -/* Age verification modal */ -.age-verification-overlay{ - position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(5px) -} -.age-verification-modal{background:var(--bg-primary);border-radius:var(--radius-xl);padding:var(--space-8);max-width:500px;margin:var(--space-4);box-shadow:var(--shadow-lg);border:1px solid var(--border-primary)} -.age-verification-content{text-align:center} -.age-verification-content h3{color:var(--error);margin-bottom:var(--space-4)} -.age-verification-content p{margin-bottom:var(--space-4);color:var(--text-secondary)} -.age-verification-actions{display:flex;gap:var(--space-4);justify-content:center;margin-top:var(--space-6)} -@media (width <=768px){.age-verification-actions{flex-direction:column}} + .referral-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: var(--space-lg); + justify-items: center; + } -/* Loading states */ -.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12);color:var(--text-secondary)} -.loading-spinner{width:32px;height:32px;border:3px solid var(--border-primary);border-top:3px solid var(--primary);border-radius:var(--radius-full);animation:spin 1s linear infinite;margin-bottom:var(--space-4)} -@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} + .referral-card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--space-sm); + padding: var(--space-xl); + background: var(--bg-primary); + border: 1px solid var(--border-primary); + border-radius: var(--radius-lg); + text-decoration: none; + width: 100%; + max-width: 200px; + transition: all var(--transition-normal); + min-height: 100px; + } -.loading-overlay{position:absolute;inset:0;background:rgb(255 255 255 / .9);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:1050;opacity:0;visibility:hidden;transition:opacity .2s} -[data-theme="dark"] .loading-overlay{background:rgb(15 23 42 / .9)} -.loading-overlay--visible{opacity:1;visibility:visible} -.loading-overlay--hiding{opacity:0} -.loading-content{text-align:center;color:var(--text-primary)} -.spinner-ring{width:40px;height:40px;border:4px solid var(--border-primary);border-top:4px solid var(--primary);border-radius:var(--radius-full);animation:spin 1s linear infinite;margin:0 auto var(--space-3)} -.loading-text{margin:0;font-size:var(--text-sm);color:var(--text-secondary)} + .referral-card:hover { + border-color: var(--primary); + transform: translateY(-2px); + box-shadow: var(--shadow-md); + } -/* Footer */ -.site-footer{background:var(--bg-secondary);border-top:1px solid var(--border-primary);padding:var(--space-16) 0 var(--space-8);margin-top:auto;content-visibility:auto;contain-intrinsic-size:1px 500px} -.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-8);margin-bottom:var(--space-8)} -.footer-section h4{margin:0 0 var(--space-4);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary)} -.footer-section p{margin:0;color:var(--text-secondary)} -.footer-section ul{list-style:none;padding:0;margin:0} -.footer-section li{margin-bottom:var(--space-2)} -.footer-section a{color:var(--text-secondary);text-decoration:none;transition:color .15s} -.footer-section a:hover{color:var(--primary)} -.footer-bottom{text-align:center;padding-top:var(--space-8);border-top:1px solid var(--border-primary)} -.footer-bottom p{margin:0;color:var(--text-tertiary);font-size:var(--text-sm)} -.footer-bottom a{color:var(--primary);text-decoration:none} + .referral-card .service-name { + font-weight: var(--font-semibold); + color: var(--text-primary); + font-size: var(--text-base); + } -/* Back to top button */ -.back-to-top{ - position:fixed;bottom:var(--space-6);right:var(--space-6);width:48px;height:48px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-full);cursor:pointer; - display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg); - transition:background-color .2s,transform .2s,box-shadow .2s,opacity .2s,visibility 0s linear .2s; - opacity:0;visibility:hidden;transform:translateY(20px);z-index:var(--z-docked); -} -.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s} -.back-to-top:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)} + .referral-badge, .speed-test-label { + font-size: var(--text-xs); + color: var(--primary); + background: rgba(99, 102, 241, 0.1); + padding: var(--space-xs) var(--space-sm); + border-radius: var(--radius-md); + font-weight: var(--font-medium); + text-transform: uppercase; + letter-spacing: 0.05em; + } -/* Responsive */ -@media (width <=1024px){ - .container{padding:0 var(--space-4)} -} -@media (width <= 768px){ - .header-nav{display:none} - .hero-title{font-size:var(--text-3xl)} - .hero-description{font-size:var(--text-lg)} - .hero-actions{flex-direction:column;align-items:center} - .hero-stats{gap:var(--space-6)} + /* Compare Section */ + .compare-controls { + display: flex; + align-items: end; + gap: var(--space-2xl); + margin-bottom: var(--space-4xl); + flex-wrap: wrap; + } - .quick-nav-grid{grid-template-columns:1fr} - .footer-content{grid-template-columns:1fr;text-align:center} + .compare-select-group { + flex: 1; + min-width: 250px; + } - .data-table-container{margin:var(--space-2) calc(-1 * var(--space-4));border-radius:0;border-left:none;border-right:none} - .table-wrapper{border-radius:0} - table{font-size:var(--text-xs);min-width:500px} - th,td{padding:var(--space-2) var(--space-3)} - th:first-child,td:first-child{min-width:120px;max-width:150px;white-space:normal;word-break:break-word} + .compare-select-group label { + display: block; + margin-bottom: var(--space-sm); + font-weight: var(--font-medium); + color: var(--text-primary); + } - .comparison-header{padding:var(--space-4)} - .comparison-header h3{font-size:var(--text-lg)} - .comparison-stats{flex-direction:column;gap:var(--space-3)} - .comparison-stats .stat{margin:0 auto;max-width:200px} - .comparison-filters{flex-direction:column;align-items:center;gap:var(--space-3)} - .comparison-table{min-width:500px} - .comparison-table th,.comparison-table td{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)} -} -@media (width <= 640px){ - .btn{width:100%;max-width:280px;padding:var(--space-4) var(--space-6)} -} -@media (width <= 480px){ - .section{padding:var(--space-12) 0} - .stat-item:not(:last-child)::after{display:none} - .comparison-stats{gap:var(--space-2)} - .comparison-stats .stat{min-width:60px;padding:var(--space-1) var(--space-2)} - .stat-value{font-size:var(--text-lg)} - .stat-label{font-size:10px} - table{min-width:400px} - th:first-child,td:first-child{min-width:100px;max-width:120px} -} + .select-wrapper { + position: relative; + } -/* Motion and contrast preferences */ -@media (prefers-reduced-motion:reduce){ - *,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} - html{scroll-behavior:auto} -} -@media (prefers-contrast:high){ - :root{--border-primary:#000;--text-secondary:#000} - [data-theme="dark"]{--border-primary:#fff;--text-secondary:#fff} -} + select { + width: 100%; + padding: var(--space-md) var(--space-4xl) var(--space-md) var(--space-lg); + border: 2px solid var(--border-primary); + border-radius: var(--radius-lg); + background: var(--bg-primary); + color: var(--text-primary); + font-size: var(--text-base); + cursor: pointer; + appearance: none; + transition: all var(--transition-fast); + } -/* Pointer coarse: disable hover transforms for touch */ -@media (pointer:coarse){ - .nav-link:hover,.btn:hover,.quick-nav-card:hover,.status-card:hover{transform:none;box-shadow:none} -} + select:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); + } -/* Print */ -@media print{ - .site-header,.hero-section,.quick-nav,.referral-section,.site-footer,.back-to-top,.dark-mode-toggle,.comparison-filters,.comparison-actions,#close-compare{display:none!important} - .section{page-break-inside:avoid} - .data-table-container{box-shadow:none;border:1px solid #000} - .table-wrapper{overflow:visible} - table{min-width:auto} - th,td{border:1px solid #000} -} \ No newline at end of file + .select-wrapper::after { + content: ''; + position: absolute; + right: var(--space-lg); + top: 50%; + transform: translateY(-50%); + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid var(--text-tertiary); + pointer-events: none; + } + + .compare-vs { + flex-shrink: 0; + font-size: var(--text-lg); + font-weight: var(--font-bold); + color: var(--primary); + background: var(--bg-secondary); + padding: var(--space-md) var(--space-xl); + border-radius: var(--radius-lg); + border: 2px solid var(--border-primary); + margin-bottom: var(--space-sm); + } + + /* Empty States */ + .empty-state { + text-align: center; + padding: var(--space-6xl); + } + + .empty-state-icon { + width: 64px; + height: 64px; + color: var(--text-tertiary); + margin: 0 auto var(--space-xl); + } + + .empty-state h3 { + margin: 0 0 var(--space-md); + font-size: var(--text-xl); + color: var(--text-primary); + font-weight: var(--font-semibold); + } + + .empty-state p { + margin: 0; + color: var(--text-secondary); + } + + /* Loading States */ + .loading-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: var(--space-5xl); + color: var(--text-secondary); + } + + .loading-spinner { + width: 32px; + height: 32px; + border: 3px solid var(--border-primary); + border-top: 3px solid var(--primary); + border-radius: var(--radius-full); + animation: spin 1s linear infinite; + margin-bottom: var(--space-lg); + } + + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + + /* Age Verification */ + .age-verification-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.8); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + backdrop-filter: blur(8px); + } + + .age-verification-modal { + background: var(--bg-primary); + border-radius: var(--radius-2xl); + padding: var(--space-4xl); + max-width: 500px; + margin: var(--space-lg); + box-shadow: var(--shadow-xl); + border: 1px solid var(--border-primary); + } + + .age-verification-content { + text-align: center; + } + + .age-verification-content h3 { + color: var(--error); + margin-bottom: var(--space-xl); + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-md); + } + + .age-verification-actions { + display: flex; + gap: var(--space-lg); + justify-content: center; + margin-top: var(--space-2xl); + } + + /* Footer */ + .site-footer { + background: var(--bg-secondary); + border-top: 1px solid var(--border-primary); + padding: var(--space-6xl) 0 var(--space-3xl); + margin-top: auto; + } + + .footer-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: var(--space-4xl); + margin-bottom: var(--space-4xl); + } + + .footer-section h4 { + margin: 0 0 var(--space-xl); + font-size: var(--text-lg); + font-weight: var(--font-semibold); + color: var(--text-primary); + } + + .footer-section p { + margin: 0; + color: var(--text-secondary); + line-height: 1.6; + } + + .footer-section ul { + list-style: none; + padding: 0; + margin: 0; + } + + .footer-section li { + margin-bottom: var(--space-sm); + } + + .footer-section a { + color: var(--text-secondary); + transition: color var(--transition-fast); + } + + .footer-section a:hover { + color: var(--primary); + } + + .footer-bottom { + text-align: center; + padding-top: var(--space-3xl); + border-top: 1px solid var(--border-primary); + } + + .footer-bottom p { + margin: 0; + color: var(--text-tertiary); + font-size: var(--text-sm); + } + + .footer-bottom a { + color: var(--primary); + } + + /* Back to Top */ + .back-to-top { + position: fixed; + bottom: var(--space-2xl); + right: var(--space-2xl); + width: 48px; + height: 48px; + background: var(--primary); + color: white; + border: none; + border-radius: var(--radius-full); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + box-shadow: var(--shadow-lg); + transition: all var(--transition-normal); + opacity: 0; + visibility: hidden; + transform: translateY(20px); + z-index: 50; + } + + .back-to-top.visible { + opacity: 1; + visibility: visible; + transform: translateY(0); + } + + .back-to-top:hover { + background: var(--primary-hover); + transform: translateY(-2px); + box-shadow: var(--shadow-xl); + } + + /* Comparison Styles */ + .comparison-header { + display: flex; + flex-direction: column; + gap: var(--space-lg); + padding: var(--space-2xl); + background: var(--bg-elevated); + border: 1px solid var(--border-primary); + border-radius: var(--radius-lg); + margin-bottom: var(--space-2xl); + } + + .comparison-header h3 { + margin: 0; + font-size: var(--text-xl); + font-weight: var(--font-semibold); + color: var(--text-primary); + text-align: center; + } + + .comparison-stats { + display: flex; + justify-content: center; + gap: var(--space-2xl); + flex-wrap: wrap; + } + + .comparison-stats .stat { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + min-width: 80px; + } + + .comparison-stats .stat-label { + font-size: var(--text-xs); + color: var(--text-secondary); + margin-bottom: var(--space-xs); + text-transform: uppercase; + letter-spacing: 0.05em; + font-weight: var(--font-medium); + } + + .comparison-stats .stat-value { + font-size: var(--text-lg); + font-weight: var(--font-bold); + color: var(--primary); + } + + .comparison-actions { + display: flex; + justify-content: center; + gap: var(--space-md); + } + + .comparison-actions .btn { + padding: var(--space-sm) var(--space-lg); + font-size: var(--text-sm); + min-width: auto; + } + + .comparison-filters { + display: flex; + justify-content: center; + gap: var(--space-lg); + padding: var(--space-lg); + background: var(--bg-secondary); + border-radius: var(--radius-md); + margin-bottom: var(--space-2xl); + flex-wrap: wrap; + } + + .comparison-filters .filter-option { + display: flex; + align-items: center; + gap: var(--space-sm); + cursor: pointer; + font-size: var(--text-sm); + font-weight: var(--font-medium); + color: var(--text-secondary); + transition: color var(--transition-fast); + } + + .comparison-filters .filter-option:hover { + color: var(--text-primary); + } + + .comparison-filters input[type="radio"] { + width: 16px; + height: 16px; + margin: 0; + cursor: pointer; + } + + .comparison-filters input[type="radio"]:checked + span { + color: var(--primary); + font-weight: var(--font-semibold); + } + + .comparison-table { + width: 100%; + border-collapse: collapse; + margin-top: var(--space-lg); + } + + .comparison-table th, + .comparison-table td { + padding: var(--space-md); + text-align: center; + border-bottom: 1px solid var(--border-primary); + } + + .comparison-table th { + background: var(--bg-secondary); + font-weight: var(--font-semibold); + color: var(--text-primary); + } + + .comparison-table .provider-header { + font-size: var(--text-lg); + font-weight: var(--font-bold); + } + + .comparison-row:hover { + background: var(--bg-secondary); + } + + .comparison-hiding { + opacity: 0; + transform: scale(0.95); + transition: all var(--transition-normal); + } + + /* Responsive Design */ + @media (max-width: 1024px) { + .container { + padding: 0 var(--space-xl); + } + .resources-categories { + grid-template-columns: 1fr; + } + } + + @media (max-width: 768px) { + .header-nav { + display: none; + } + + .hero-actions { + flex-direction: column; + align-items: center; + } + + .hero-stats { + gap: var(--space-2xl); + } + + .features-grid { + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: var(--space-md); + } + + .benefit-card { + padding: var(--space-lg); + min-height: 140px; + } + + .benefit-card .icon-badge { + width: 32px; + height: 32px; + margin-bottom: var(--space-md); + } + + .benefit-card h3 { + font-size: var(--text-sm); + } + + .comparison-header { + padding: var(--space-lg); + gap: var(--space-md); + } + + .comparison-stats { + gap: var(--space-lg); + } + + .comparison-filters { + flex-direction: column; + gap: var(--space-md); + align-items: center; + } + + .compare-controls { + flex-direction: column; + gap: var(--space-xl); + } + + .compare-select-group { + min-width: 100%; + } + + .important-notes-grid { + grid-template-columns: 1fr; + } + + .age-verification-actions { + flex-direction: column; + } + + .stepper li { + flex-direction: column; + text-align: center; + gap: var(--space-md); + } + } + + @media (max-width: 480px) { + .container { + padding: 0 var(--space-lg); + } + + .section { + padding: var(--space-5xl) 0; + } + + .features-grid { + grid-template-columns: 1fr; + gap: var(--space-lg); + } + + .benefit-card { + padding: var(--space-xl); + min-height: auto; + } + + .comparison-header h3 { + font-size: var(--text-lg); + } + + .comparison-stats { + flex-direction: column; + gap: var(--space-md); + } + + .comparison-filters { + gap: var(--space-sm); + } + + .stat-item:not(:last-child)::after { + display: none; + } + } + + /* Print Styles */ + @media print { + .site-header, .hero-section, .referral-section, + .site-footer, .back-to-top, .dark-mode-toggle { + display: none !important; + } + + .section { + page-break-inside: avoid; + } + } + + /* Accessibility */ + @media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + html { + scroll-behavior: auto; + } + } + + @media (prefers-contrast: high) { + :root { + --border-primary: #000; + --text-secondary: #000; + } + + [data-theme="dark"] { + --border-primary: #fff; + --text-secondary: #fff; + } + } + + /* Touch Device Optimizations */ + @media (pointer: coarse) { + .nav-link:hover, .btn:hover, + .status-card:hover, .benefit-card:hover { + transform: none; + } + } + \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index 6aa9e91..8cb8061 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,1019 +1,940 @@ - - - Debrid Services Comparison - Compare Pricing & Hosts - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + Debrid Services Comparison - Compare Pricing & Hosts + + + + + + + + + + + + - - - -
- - -
- -
-
-
-

- Compare Premium Debrid Services -

-

- A community-driven, up-to-date comparison of premium debrid services: pricing, host support, refund policies, and performance. -

- -
-
- 8 - Services -
-
- 300+ - File Hosts -
-
-
-
-
- - -
-
-
-

What are Debrid Services?

-

- Debrid services (a.k.a. premium link generators) act as a high‑speed intermediary: they fetch the file from a host, then serve you a fast, ad‑free direct link. -

- -
- Premium link generator - Ad‑free - Multi‑host - Torrent‑to‑link -
-
- -
-
-
-

Maximum Speeds

-

Bypass host throttling with direct links

-
- -
-
🔗
-

Multi‑Host Access

-

One subscription supports hundreds of hosts

-
- -
-
🌐
-

Streaming Ready

-

Instant playback on supported hosts

-
- -
-
💾
-

Torrent‑to‑Link

-

Add magnet/torrent and get a direct URL

-
- -
-
🛡️
-

Ad‑Free

-

No popups, countdowns, or captchas

-
- -
-
🌍
-

Global Network

-

Optimized routing from high‑bandwidth regions

-
-
- - -
-
- - -
- -
- - -
-
-
-

Pricing Comparison

-

Compare subscription plans across all major debrid services

-
- -
-
-
- -

Loading pricing data...

-
-
- -
- -
- - -
-
-
-

Speed Test

-

Actual speeds vary by location, time of day, host performance, and load. Test before committing to a long plan.

-
- -
-

Official Speed Tools

- - - -
- -
-

Real‑World Test (Recommended)

-
    -
  1. Pick a common test file (e.g., Linux ISO) available on multiple hosts.
  2. -
  3. Use the same network/device for consistency.
  4. -
  5. Clear cache or use private browsing between runs.
  6. -
  7. Run 3 tests per service and average the result.
  8. -
  9. Test peak and off‑peak to see variability.
  10. -
- -
- - Factors That Affect Speed - - -
    -
  • Distance to provider servers
  • -
  • Time of day and congestion
  • -
  • Original host performance (e.g., Rapidgator vs. Katfile)
  • -
  • ISP routing or throttling
  • -
  • Local network (Wi‑Fi vs. Ethernet)
  • -
- -
-
-
-
- - -
-
-
-

Supported File Hosts

-

Browse and search through 300+ supported file hosting services

-
- -
- -
- -
-
- -

Loading file hosts...

-
-
-
-
- - -
-
-
-

Compare Services

-

Select two services to see a detailed side-by-side comparison

-
- -
-
- -
- -
-
- -
- -
- -
-
-
- -
-
- -

Ready to Compare

-

Select two services above to see a detailed comparison

-
-
-
-
- - -
-
-
-

Adult Content Hosts

-

- Support for adult content varies significantly across debrid services. Some platforms actively support major adult file hosts, while others exclude them entirely due to policy or legal considerations. -

-
- - -
-
-
-

⚠️ Adult Content Warning

-

This section contains information about adult content hosting services.

-

You must be 18 years or older to view this content.

-
- - +
+ +
+
+
+

+ Compare Premium Debrid Services +

+

+ A community-driven, up-to-date comparison of premium debrid services: pricing, host support, refund policies, and performance. +

+ +
+
+ 8 + Services +
+
+ 300+ + File Hosts +
+
+
-
-
-
- - - -
-
- - -
- -
- - -
-
-
-

Frequently Asked Questions

-

Straight answers to common debrid questions

-
- -
-
-

General

- -
- - What is a debrid service? - - -
- They fetch files to their servers and give you fast, direct links with no ads or host limits. -
-
- -
- - Are debrid services legal? - - -
- The services are legal; you’re responsible for what you download. -
-
- -
- - Can I use multiple services? - - -
- Yes — power users combine providers for broader coverage and redundancy. -
-
-
-

Technical

+ +
+
+
+
+

What are Debrid Services?

+

+ Debrid services (a.k.a. premium link generators) act as a high‑speed intermediary: they fetch the file from a host, then serve you a fast, ad‑free direct link. +

+
+ Premium link generator + Ad‑free + Multi‑host + Torrent‑to‑link +
+
-
- - Why do speeds vary? - - -
- Distance, congestion, host performance, ISP routing, and local setup. -
-
+
+
+ + + +

Maximum Speeds

+

Bypass host throttling with direct links

+
+
+ + + + +

Multi‑Host Access

+

One subscription supports hundreds of hosts

+
+
+ + + + +

Streaming Ready

+

Instant playback on supported hosts

+
+
+ + + + + + +

Torrent‑to‑Link

+

Add magnet/torrent and get a direct URL

+
+
+ + + + +

Ad‑Free

+

No popups, countdowns, or captchas

+
+
-
- - Do services support torrents? - - -
- Most offer torrent‑to‑direct‑download (cloud first, then direct link). + +
- - -
- - Are there download limits? - - -
- Many market “unlimited,” but fair‑use or soft caps can apply. -
-
-
-

Accounts & Billing

+ +
+
+
+
+

Pricing Comparison

+

Compare subscription plans across all major debrid services

+
-
- - Can I share my account? - - -
- Usually prohibited. Services may enforce IP/session limits. -
-
+
+
+
+ +

Loading pricing data...

+
+
+ + +
-
- - Payment methods? - - -
- Cards and PayPal are common; some support crypto (check each site). +
+
+

Support This Project

+

Consider using our referral links - it helps maintain this project at no extra cost to you!

+
+ +
+
-
-
-

Security & Privacy

+ +
+
+
+
+

Speed Test

+

+ Actual speeds vary by location, time of day, host performance, and load. Test before committing to a long plan. +

+
-
- - Do services log downloads? - - -
- Policies vary; many keep minimal technical logs. Check privacy pages. -
-
+
+
+

Official Speed Tools

+

Test download speeds directly from service providers

+
+ + + +
-
- - Can my ISP see content? - - -
- Over HTTPS they see connections/volume, not filenames. VPN adds privacy. +
+
+

Real‑World Test (Recommended)

+
+
    +
  1. +
    + Pick a common test file +
    (e.g., Linux ISO) available on multiple hosts.
    +
    +
  2. +
  3. +
    + Use the same network/device +
    for consistency.
    +
    +
  4. +
  5. +
    + Clear cache or use private browsing +
    between runs.
    +
    +
  6. +
  7. +
    + Run 3 tests per service +
    and average the result.
    +
    +
  8. +
  9. +
    + Test peak and off‑peak +
    to see variability.
    +
    +
  10. +
+ +
+ + Factors That Affect Speed + + + + +
+
    +
  • Distance to provider servers
  • +
  • Time of day and congestion
  • +
  • Original host performance (e.g., Rapidgator vs. Katfile)
  • +
  • ISP routing or throttling
  • +
  • Local network (Wi‑Fi vs. Ethernet)
  • +
+ +
+
+
+
-
-
-
-
- -
-
-
-

Important Notes

-

- This project aims to provide accurate and up-to-date information, but the debrid service landscape is dynamic. Please keep the following in mind: -

-
+ +
+
+
+
+

Supported File Hosts

+

Browse and search through 300+ supported file hosting services

+
-
-
-
👉
-

Services change frequently

-

Pricing, host support, refund policies, and features may be updated without notice. Always verify details on the official service websites before purchasing.

-
- -
-
👉
-

Final cost may vary

-

Displayed prices are subject to exchange rates, regional taxes, or payment processing fees. Your actual charge may differ slightly.

-
- -
-
👉
-

Data accuracy

-

While we strive for completeness, this comparison reflects community reports and public information. We do not guarantee uptime, speed, download success, or feature availability.

-
- -
-
👉
-

No affiliation

-

This project is independent and not affiliated with AllDebrid, Real-Debrid, Premiumize, TorBox, LinkSnappy, Debrid-Link, Mega-Debrid, Deepbrid, or any other listed service.

-
- -
-
👉
-

Use at your own discretion

-

Choosing a debrid service involves personal judgment. Test short-term plans first and review terms carefully.

-
- -
-
👉
-

Legal responsibility

-

Debrid services are tools. You are responsible for complying with copyright laws and terms of use when accessing content.

-
-
+
+ +
- -
-
- - -
-
-
-

Useful Resources and Community

-

Enhance your debrid experience with these trusted tools, guides, and communities

-
- -
- - -
-

👥 Community and Support

-
-
- Reddit - Active discussions on r/Debrid, r/Piracy and service-specific threads +
+
+
+

Loading file hosts...

+
+
+
-
- Discord - Many services offer official Discord servers for real-time support and status updates -
-
- GitHub Issues - Report inaccuracies or suggest improvements here — this project thrives on community input! -
-
-
-
+
-
+ + +
+
+
+
+

Adult Content Hosts

+

+ Support for adult content varies significantly across debrid services. Some platforms actively support major adult file hosts, while others exclude them entirely due to policy or legal considerations. +

+
+ +
+
+
+

+ + + + + + Adult Content Warning +

+

This section contains information about adult content hosting services.

+

You must be 18 years or older to view this content.

+
+ + +
+
+
+
+ + +
+
+
+ + +
+ +
+ + + +
+
+
+
+

Important Notes

+

+ This project aims to provide accurate and up-to-date information, but the debrid service landscape is dynamic. +

+
+ +
+
+ + + +
+

Services change frequently

+

Pricing, host support, refund policies, and features may be updated without notice. Always verify details on the official service websites before purchasing.

+
+
+
+ + + +
+

Final cost may vary

+

Displayed prices are subject to exchange rates, regional taxes, or payment processing fees. Your actual charge may differ slightly.

+
+
+
+ + + + + + +
+

Data accuracy

+

While we strive for completeness, this comparison reflects community reports and public information. We do not guarantee uptime, speed, download success, or feature availability.

+
+
+
+ + + + + +
+

No affiliation

+

This project is independent and not affiliated with any listed service.

+
+
+
+ + + + + +
+

Use at your own discretion

+

Choosing a debrid service involves personal judgment. Test short-term plans first and review terms carefully.

+
+
+
+ + + + +
+

Legal responsibility

+

Debrid services are tools. You are responsible for complying with copyright laws and terms of use when accessing content.

+
+
+
+ + +
+
+
+ + +
+
+
+
+

Useful Resources and Community

+

Enhance your debrid experience with these trusted tools, guides, and communities

+
+ +
+ + +
+

+ + + + + + Community and Support +

+
+
+ Reddit + Active discussions on r/Debrid, r/Piracy and service-specific threads +
+
+ Discord + Many services offer official Discord servers for real-time support and status updates +
+
+ GitHub Issues + Report inaccuracies or suggest improvements here — this project thrives on community input! +
+
+
+
+ + +
+
+
+
+ + + + + +
- - - - - - - - - - - - - + + + \ No newline at end of file diff --git a/dist/js/app.js b/dist/js/app.js index 1581625..80f889d 100644 --- a/dist/js/app.js +++ b/dist/js/app.js @@ -313,7 +313,9 @@ class TableManager { this.elements.container.insertBefore(indicator, this.elements.container.firstChild); } indicator.textContent = `Showing ${resultCount} of ${totalCount} services`; - indicator.style.display = 'block'; + indicator.style.display = 'block'; + indicator.style.textAlign = 'center'; + indicator.style.padding = '0.5em 0'; } else if (indicator) { indicator.style.display = 'none'; } @@ -755,7 +757,7 @@ function setupURLComparison() { } function setupScrollAnimations() { - const animatedElements = document.querySelectorAll('.section, .quick-nav-card, .status-card, .referral-card'); + const animatedElements = document.querySelectorAll('.section, .status-card, .referral-card'); if (animatedElements.length) Utils.animateOnScroll(animatedElements); }