| | |
| | *, *::before, *::after { |
| | margin: 0; |
| | padding: 0; |
| | box-sizing: border-box; |
| | } |
| |
|
| | :root { |
| | |
| | --primary: #0F766E; |
| | --primary-dark: #0D5D57; |
| | --primary-light: #14B8A6; |
| | --secondary: #34D399; |
| | --background: #F8FAFC; |
| | --surface: #FFFFFF; |
| | --surface-alt: #F1F5F9; |
| | --text-primary: #1E293B; |
| | --text-secondary: #475569; |
| | --text-muted: #94A3B8; |
| | --border: #E2E8F0; |
| | --success: #22C55E; |
| | --warning: #F59E0B; |
| | --error: #EF4444; |
| | |
| | |
| | --font-en: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
| | --font-ar: 'Almarai', 'Tajawal', sans-serif; |
| | |
| | |
| | --space-xs: 0.25rem; |
| | --space-sm: 0.5rem; |
| | --space-md: 1rem; |
| | --space-lg: 1.5rem; |
| | --space-xl: 2rem; |
| | --space-2xl: 3rem; |
| | --space-3xl: 4rem; |
| | |
| | |
| | --radius-sm: 0.375rem; |
| | --radius-md: 0.5rem; |
| | --radius-lg: 0.75rem; |
| | --radius-xl: 1rem; |
| | --radius-full: 9999px; |
| | |
| | |
| | --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); |
| | --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| | --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| | --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| | |
| | |
| | --transition-fast: 150ms ease; |
| | --transition-base: 250ms ease; |
| | --transition-slow: 350ms ease; |
| | } |
| |
|
| | html { |
| | scroll-behavior: smooth; |
| | } |
| |
|
| | body { |
| | font-family: var(--font-ar); |
| | background-color: var(--background); |
| | color: var(--text-primary); |
| | line-height: 1.6; |
| | overflow-x: hidden; |
| | } |
| |
|
| | [dir="rtl"] body { |
| | font-family: var(--font-ar); |
| | } |
| |
|
| | [dir="ltr"] body { |
| | font-family: var(--font-en); |
| | } |
| |
|
| | |
| | .container { |
| | width: 100%; |
| | max-width: 1280px; |
| | margin: 0 auto; |
| | padding: 0 var(--space-lg); |
| | } |
| |
|
| | |
| | .btn { |
| | display: inline-flex; |
| | align-items: center; |
| | justify-content: center; |
| | gap: var(--space-sm); |
| | padding: 0.75rem 1.5rem; |
| | font-size: 0.95rem; |
| | font-weight: 600; |
| | border-radius: var(--radius-md); |
| | border: none; |
| | cursor: pointer; |
| | transition: all var(--transition-base); |
| | text-decoration: none; |
| | white-space: nowrap; |
| | } |
| |
|
| | .btn-primary { |
| | background-color: var(--primary); |
| | color: white; |
| | } |
| |
|
| | .btn-primary:hover { |
| | background-color: var(--primary-dark); |
| | transform: translateY(-2px); |
| | box-shadow: var(--shadow-md); |
| | } |
| |
|
| | .btn-secondary { |
| | background-color: var(--surface); |
| | color: var(--primary); |
| | border: 2px solid var(--primary); |
| | } |
| |
|
| | .btn-secondary:hover { |
| | background-color: var(--primary); |
| | color: white; |
| | } |
| |
|
| | .btn-lg { |
| | padding: 1rem 2rem; |
| | font-size: 1.05rem; |
| | } |
| |
|
| | .btn-full { |
| | width: 100%; |
| | } |
| |
|
| | |
| | .header { |
| | position: fixed; |
| | top: 0; |
| | left: 0; |
| | right: 0; |
| | background-color: rgba(255, 255, 255, 0.95); |
| | backdrop-filter: blur(10px); |
| | border-bottom: 1px solid var(--border); |
| | z-index: 1000; |
| | } |
| |
|
| | .nav { |
| | display: flex; |
| | align-items: center; |
| | justify-content: space-between; |
| | height: 72px; |
| | } |
| |
|
| | .logo { |
| | display: flex; |
| | align-items: center; |
| | gap: var(--space-sm); |
| | text-decoration: none; |
| | color: var(--primary); |
| | font-weight: 800; |
| | font-size: 1.5rem; |
| | } |
| |
|
| | .logo-icon { |
| | width: 40px; |
| | height: 40px; |
| | } |
| |
|
| | .nav-links { |
| | display: flex; |
| | list-style: none; |
| | gap: var(--space-xl); |
| | } |
| |
|
| | .nav-links a { |
| | text-decoration: none; |
| | color: var(--text-secondary); |
| | font-weight: 500; |
| | transition: color var(--transition-fast); |
| | } |
| |
|
| | .nav-links a:hover { |
| | color: var(--primary); |
| | } |
| |
|
| | .nav-actions { |
| | display: flex; |
| | align-items: center; |
| | gap: var(--space-md); |
| | } |
| |
|
| | .lang-switch { |
| | display: flex; |
| | align-items: center; |
| | gap: var(--space-sm); |
| | padding: 0.5rem 1rem; |
| | background-color: var(--surface-alt); |
| | border: 1px solid var(--border); |
| | border-radius: var(--radius-full); |
| | cursor: pointer; |
| | font-family: inherit; |
| | font-size: 0.9rem; |
| | color: var(--text-secondary); |
| | transition: all var(--transition-fast); |
| | } |
| |
|
| | .lang-switch:hover { |
| | background-color: var(--surface); |
| | border-color: var(--primary); |
| | color: var(--primary); |
| | } |
| |
|
| | .lang-icon { |
| | width: 18px; |
| | height: 18px; |
| | } |
| |
|
| | .mobile-menu { |
| | display: none; |
| | flex-direction: column; |
| | gap: 5px; |
| | background: none; |
| | border: none; |
| | cursor: pointer; |
| | padding: 5px; |
| | } |
| |
|
| | .mobile-menu span { |
| | display: block; |
| | width: 25px; |
| | height: 2px; |
| | background-color: var(--text-primary); |
| | transition: all var(--transition-base); |
| | } |
| |
|
| | |
| | .hero { |
| | padding: 140px 0 80px; |
| | min-height: 100vh; |
| | display: flex; |
| | align-items: center; |
| | } |
| |
|
| | .hero .container { |
| | display: grid; |
| | grid-template-columns: 1fr 1fr; |
| | gap: var(--space-3xl); |
| | align-items: center; |
| | } |
| |
|
| | .hero-badge { |
| | display: inline-flex; |
| | align-items: center; |
| | gap: var(--space-sm); |
| | padding: 0.5rem 1rem; |
| | background-color: rgba(15, 118, 110, 0.1); |
| | color: var(--primary); |
| | border-radius: var(--radius-full); |
| | font-size: 0.9rem; |
| | font-weight: 600; |
| | margin-bottom: var(--space-lg); |
| | } |
| |
|
| | .hero-title { |
| | font-size: 3.5rem; |
| | font-weight: 800; |
| | line-height: 1.2; |
| | margin-bottom: var(--space-lg); |
| | color: var(--text-primary); |
| | } |
| |
|
| | .hero-desc { |
| | font-size: 1.2rem; |
| | color: var(--text-secondary); |
| | margin-bottom: var(--space-xl); |
| | line-height: 1.8; |
| | } |
| |
|
| | |
| | .dns-box { |
| | background-color: var(--surface); |
| | border: 2px solid var(--border); |
| | border-radius: var(--radius-lg); |
| | padding: var(--space-lg); |
| | margin-bottom: var(--space-xl); |
| | transition: all var(--transition-base); |
| | } |
| |
|
| | .dns-box:hover { |
| | border-color: var(--primary); |
| | box-shadow: var(--shadow-lg); |
| | } |
| |
|
| | .dns-header { |
| | display: flex; |
| | align-items: center; |
| | gap: var(--space-sm); |
| | margin-bottom: var(--space-md); |
| | font-weight: 600; |
| | color: var(--text-primary); |
| | } |
| |
|
| | .dns-icon { |
| | width: 24px; |
| | height: 24px; |
| | color: var(--primary); |
| | } |
| |
|
| | .dns-addresses { |
| | display: flex; |
| | flex-direction: column; |
| | gap: var(--space-sm); |
| | } |
| |
|
| | .dns-item { |
| | display: flex; |
| | align-items: center; |
| | gap: var(--space-md); |
| | padding: var(--space-md); |
| | background-color: var(--surface-alt); |
| | border-radius: var(--radius-md); |
| | cursor: pointer; |
| | transition: all var(--transition-fast); |
| | } |
| |
|
| | .dns-item:hover { |
| | background-color: rgba(15, 118, 110, 0.1); |
| | } |
| |
|
| | .dns-label { |
| | padding: 0.25rem 0.75rem; |
| | background-color: var(--primary); |
| | color: white; |
| | border-radius: var(--radius-sm); |
| | font-size: 0.75rem; |
| | font-weight: 700; |
| | } |
| |
|
| | .dns-value { |
| | flex: 1; |
| | font-family: 'Courier New', monospace; |
| | font-size: 1rem; |
| | font-weight: 600; |
| | color: var(--text-primary); |
| | } |
| |
|
| | .copy-btn { |
| | padding: 0.5rem 1rem; |
| | background-color: var(--surface); |
| | border: 1px solid var(--border); |
| | border-radius: var(--radius-sm); |
| | font-size: 0.85rem; |
| | font-weight: 500; |
| | color: var(--primary); |
| | cursor: pointer; |
| | transition: all var(--transition-fast); |
| | } |
| |
|
| | .copy-btn:hover { |
| | background-color: var(--primary); |
| | color: white; |
| | border-color: var(--primary); |
| | } |
| |
|
| | .hero-actions { |
| | display: flex; |
| | gap: var(--space-md); |
| | margin-bottom: var(--space-xl); |
| | } |
| |
|
| | .hero-features { |
| | display: flex; |
| | gap: var(--space-md); |
| | flex-wrap: wrap; |
| | } |
| |
|
| | .feature-pill { |
| | display: inline-flex; |
| | align-items: center; |
| | gap: var(--space-sm); |
| | padding: 0.5rem 1rem; |
| | background-color: var(--surface); |
| | border: 1px solid var(--border); |
| | border-radius: var(--radius-full); |
| | font-size: 0.9rem; |
| | color: var(--text-secondary); |
| | } |
| |
|
| | .feature-pill svg { |
| | width: 18px; |
| | height: 18px; |
| | color: var(--primary); |
| | } |
| |
|
| | |
| | .hero-visual { |
| | display: flex; |
| | justify-content: center; |
| | } |
| |
|
| | .visual-card { |
| | width: 100%; |
| | max-width: 420px; |
| | background-color: var(--surface); |
| | border-radius: var(--radius-xl); |
| | box-shadow: var(--shadow-xl); |
| | overflow: hidden; |
| | } |
| |
|
| | .visual-header { |
| | padding: var(--space-md); |
| | background-color: var(--surface-alt); |
| | border-bottom: 1px solid var(--border); |
| | } |
| |
|
| | .visual-dots { |
| | display: flex; |
| | gap: 6px; |
| | } |
| |
|
| | .visual-dots span { |
| | width: 12px; |
| | height: 12px; |
| | border-radius: 50%; |
| | background-color: var(--border); |
| | } |
| |
|
| | .visual-dots span:first-child { |
| | background-color: #EF4444; |
| | } |
| |
|
| | .visual-dots span:nth-child(2) { |
| | background-color: #F59E0B; |
| | } |
| |
|
| | .visual-dots span:nth-child(3) { |
| | background-color: #22C55E; |
| | } |
| |
|
| | .visual-content { |
| | padding: var(--space-lg); |
| | } |
| |
|
| | .blocked-item, .allowed-item { |
| | display: flex; |
| | align-items: center; |
| | gap: var(--space-md); |
| | padding: var(--space-md); |
| | border-radius: var(--radius-md); |
| | margin-bottom: var(--space-sm); |
| | } |
| |
|
| | .blocked-item { |
| | background-color: rgba(239, 68, 68, 0.1); |
| | } |
| |
|
| | .allowed-item { |
| | background-color: rgba(34, 197, 94, 0.1); |
| | } |
| |
|
| | .blocked-item svg, .allowed-item svg { |
| | width: 20px; |
| | height: 20px; |
| | flex-shrink: 0; |
| | } |
| |
|
| | .blocked-item span, .allowed-item span { |
| | font-size: 0.9rem; |
| | font-weight: 500; |
| | } |
| |
|
| | .blocked-badge { |
| | margin-right: auto; |
| | padding: 0.25rem 0.75rem; |
| | background-color: var(--error); |
| | color: white; |
| | border-radius: var(--radius-sm); |
| | font-size: 0.75rem; |
| | font-weight: 600; |
| | } |
| |
|
| | .allowed-badge { |
| | margin-right: auto; |
| | padding: 0.25rem 0.75rem; |
| | background-color: var(--success); |
| | color: white; |
| | border-radius: var(--radius-sm); |
| | font-size: 0.75rem; |
| | font-weight: 600; |
| | } |
| |
|
| | |
| | .stats-section { |
| | padding: var(--space-3xl) 0; |
| | background-color: var(--surface); |
| | } |
| |
|
| | .stats-grid { |
| | display: grid; |
| | grid-template-columns: repeat(4, 1fr); |
| | gap: var(--space-xl); |
| | } |
| |
|
| | .stat-card { |
| | text-align: center; |
| | padding: var(--space-xl); |
| | background-color: var(--background); |
| | border-radius: var(--radius-lg); |
| | transition: all var(--transition-base); |
| | } |
| |
|
| | .stat-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: var(--shadow-lg); |
| | } |
| |
|
| | .stat-icon { |
| | width: 56px; |
| | height: 56px; |
| | margin: 0 auto var(--space-md); |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | background-color: rgba(15, 118, 110, 0.1); |
| | border-radius: var(--radius-lg); |
| | color: var(--primary); |
| | } |
| |
|
| | .stat-icon svg { |
| | width: 28px; |
| | height: 28px; |
| | } |
| |
|
| | .stat-number { |
| | font-size: 2.5rem; |
| | font-weight: 800; |
| | color: var(--primary); |
| | margin-bottom: var(--space-xs); |
| | } |
| |
|
| | .stat-label { |
| | font-size: 0.95rem; |
| | color: var(--text-secondary); |
| | } |
| |
|
| | |
| | .section-header { |
| | text-align: center; |
| | margin-bottom: var(--space-3xl); |
| | } |
| |
|
| | .section-badge { |
| | display: inline-block; |
| | padding: 0.5rem 1rem; |
| | background-color: rgba(15, 118, 110, 0.1); |
| | color: var(--primary); |
| | border-radius: var(--radius-full); |
| | font-size: 0.9rem; |
| | font-weight: 600; |
| | margin-bottom: var(--space-md); |
| | } |
| |
|
| | .section-title { |
| | font-size: 2.5rem; |
| | font-weight: 800; |
| | color: var(--text-primary); |
| | margin-bottom: var(--space-md); |
| | } |
| |
|
| | .section-desc { |
| | font-size: 1.1rem; |
| | color: var(--text-secondary); |
| | max-width: 600px; |
| | margin: 0 auto; |
| | } |
| |
|
| | |
| | .services-section { |
| | padding: var(--space-3xl) 0; |
| | } |
| |
|
| | .services-grid { |
| | display: grid; |
| | grid-template-columns: repeat(3, 1fr); |
| | gap: var(--space-xl); |
| | } |
| |
|
| | .service-card { |
| | background-color: var(--surface); |
| | padding: var(--space-xl); |
| | border-radius: var(--radius-lg); |
| | border: 1px solid var(--border); |
| | transition: all var(--transition-base); |
| | } |
| |
|
| | .service-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: var(--shadow-lg); |
| | border-color: var(--primary); |
| | } |
| |
|
| | .service-icon { |
| | width: 64px; |
| | height: 64px; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | background-color: rgba(15, 118, 110, 0.1); |
| | border-radius: var(--radius-lg); |
| | color: var(--primary); |
| | margin-bottom: var(--space-lg); |
| | } |
| |
|
| | .service-icon svg { |
| | width: 32px; |
| | height: 32px; |
| | } |
| |
|
| | .service-title { |
| | font-size: 1.25rem; |
| | font-weight: 700; |
| | color: var(--text-primary); |
| | margin-bottom: var(--space-md); |
| | } |
| |
|
| | .service-desc { |
| | color: var(--text-secondary); |
| | line-height: 1.7; |
| | } |
| |
|
| | |
| | .config-section { |
| | padding: var(--space-3xl) 0; |
| | background-color: var(--surface-alt); |
| | } |
| |
|
| | .config-tabs { |
| | display: flex; |
| | justify-content: center; |
| | gap: var(--space-sm); |
| | margin-bottom: var(--space-2xl); |
| | flex-wrap: wrap; |
| | } |
| |
|
| | .config-tab { |
| | display: flex; |
| | align-items: center; |
| | gap: var(--space-sm); |
| | padding: 0.75rem 1.25rem; |
| | background-color: var(--surface); |
| | border: 2px solid var(--border); |
| | border-radius: var(--radius-md); |
| | font-family: inherit; |
| | font-size: 0.95rem; |
| | font-weight: 500; |
| | color: var(--text-secondary); |
| | cursor: pointer; |
| | transition: all var(--transition-fast); |
| | } |
| |
|
| | .config-tab:hover { |
| | border-color: var(--primary); |
| | color: var(--primary); |
| | } |
| |
|
| | .config-tab.active { |
| | background-color: var(--primary); |
| | border-color: var(--primary); |
| | color: white; |
| | } |
| |
|
| | .config-tab svg { |
| | width: 20px; |
| | height: 20px; |
| | } |
| |
|
| | .config-content { |
| | max-width: 800px; |
| | margin: 0 auto; |
| | } |
| |
|
| | .config-panel { |
| | display: none; |
| | background-color: var(--surface); |
| | padding: var(--space-xl); |
| | border-radius: var(--radius-lg); |
| | box-shadow: var(--shadow-md); |
| | } |
| |
|
| | .config-panel.active { |
| | display: block; |
| | animation: fadeIn 0.3s ease; |
| | } |
| |
|
| | @keyframes fadeIn { |
| | from { |
| | opacity: 0; |
| | transform: translateY(10px); |
| | } |
| | to { |
| | opacity: 1; |
| | transform: translateY(0); |
| | } |
| | } |
| |
|
| | .config-steps { |
| | display: flex; |
| | flex-direction: column; |
| | gap: var(--space-lg); |
| | } |
| |
|
| | .config-step { |
| | display: flex; |
| | gap: var(--space-lg); |
| | padding-bottom: var(--space-lg); |
| | border-bottom: 1px solid var(--border); |
| | } |
| |
|
| | .config-step:last-child { |
| | padding-bottom: 0; |
| | border-bottom: none; |
| | } |
| |
|
| | .step-number { |
| | width: 40px; |
| | height: 40px; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | background-color: var(--primary); |
| | color: white; |
| | border-radius: var(--radius-full); |
| | font-weight: 700; |
| | flex-shrink: 0; |
| | } |
| |
|
| | .step-content h4 { |
| | font-size: 1.1rem; |
| | font-weight: 700; |
| | color: var(--text-primary); |
| | margin-bottom: var(--space-sm); |
| | } |
| |
|
| | .step-content p { |
| | color: var(--text-secondary); |
| | line-height: 1.7; |
| | } |
| |
|
| | .step-content code { |
| | display: inline-block; |
| | padding: 0.25rem 0.5rem; |
| | background-color: var(--surface-alt); |
| | border-radius: var(--radius-sm); |
| | font-family: 'Courier New', monospace; |
| | font-size: 0.9rem; |
| | color: var(--primary); |
| | } |
| |
|
| | |
| | .stats-detail-section { |
| | padding: var(--space-3xl) 0; |
| | } |
| |
|
| | .stats-dashboard { |
| | display: grid; |
| | grid-template-columns: 2fr 1fr; |
| | grid-template-rows: auto auto; |
| | gap: var(--space-xl); |
| | } |
| |
|
| | .dashboard-card { |
| | background-color: var(--surface); |
| | border-radius: var(--radius-lg); |
| | box-shadow: var(--shadow-md); |
| | overflow: hidden; |
| | } |
| |
|
| | .dashboard-card.main-card { |
| | grid-row: span 2; |
| | } |
| |
|
| | .card-header { |
| | display: flex; |
| | align-items: center; |
| | justify-content: space-between; |
| | padding: var(--space-lg); |
| | border-bottom: 1px solid var(--border); |
| | } |
| |
|
| | .card-header h3 { |
| | font-size: 1.1rem; |
| | font-weight: 700; |
| | color: var(--text-primary); |
| | } |
| |
|
| | .live-badge { |
| | display: flex; |
| | align-items: center; |
| | gap: var(--space-sm); |
| | padding: 0.35rem 0.75rem; |
| | background-color: rgba(34, 197, 94, 0.1); |
| | color: var(--success); |
| | border-radius: var(--radius-full); |
| | font-size: 0.85rem; |
| | font-weight: 500; |
| | } |
| |
|
| | .live-dot { |
| | width: 8px; |
| | height: 8px; |
| | background-color: var(--success); |
| | border-radius: 50%; |
| | animation: pulse 2s infinite; |
| | } |
| |
|
| | @keyframes pulse { |
| | 0%, 100% { |
| | opacity: 1; |
| | } |
| | 50% { |
| | opacity: 0.5; |
| | } |
| | } |
| |
|
| | .card-body { |
| | padding: var(--space-lg); |
| | } |
| |
|
| | |
| | .chart-container { |
| | padding: var(--space-md) 0; |
| | } |
| |
|
| | .bar-chart { |
| | display: flex; |
| | align-items: flex-end; |
| | justify-content: space-between; |
| | height: 200px; |
| | padding-bottom: 30px; |
| | border-bottom: 2px solid var(--border); |
| | } |
| |
|
| | .bar-group { |
| | display: flex; |
| | flex-direction: column; |
| | align-items: center; |
| | flex: 1; |
| | } |
| |
|
| | .bar-wrapper { |
| | display: flex; |
| | gap: 4px; |
| | align-items: flex-end; |
| | height: 180px; |
| | } |
| |
|
| | .bar { |
| | width: 20px; |
| | border-radius: var(--radius-sm) var(--radius-sm) 0 0; |
| | transition: height var(--transition-base); |
| | } |
| |
|
| | .bar.ads { |
| | background-color: var(--primary); |
| | } |
| |
|
| | .bar.trackers { |
| | background-color: var(--secondary); |
| | } |
| |
|
| | .bar.malware { |
| | background-color: #F59E0B; |
| | } |
| |
|
| | .bar-label { |
| | margin-top: var(--space-sm); |
| | font-size: 0.8rem; |
| | color: var(--text-secondary); |
| | } |
| |
|
| | .chart-legend { |
| | display: flex; |
| | justify-content: center; |
| | gap: var(--space-xl); |
| | margin-top: var(--space-lg); |
| | } |
| |
|
| | .legend-item { |
| | display: flex; |
| | align-items: center; |
| | gap: var(--space-sm); |
| | font-size: 0.9rem; |
| | color: var(--text-secondary); |
| | } |
| |
|
| | .legend-color { |
| | width: 16px; |
| | height: 16px; |
| | border-radius: var(--radius-sm); |
| | } |
| |
|
| | .legend-color.ads { |
| | background-color: var(--primary); |
| | } |
| |
|
| | .legend-color.trackers { |
| | background-color: var(--secondary); |
| | } |
| |
|
| | .legend-color.malware { |
| | background-color: #F59E0B; |
| | } |
| |
|
| | |
| | .blocked-list { |
| | list-style: none; |
| | } |
| |
|
| | .blocked-list li { |
| | display: flex; |
| | justify-content: space-between; |
| | align-items: center; |
| | padding: var(--space-md) 0; |
| | border-bottom: 1px solid var(--border); |
| | } |
| |
|
| | .blocked-list li:last-child { |
| | border-bottom: none; |
| | } |
| |
|
| | .blocked-list .domain { |
| | font-family: 'Courier New', monospace; |
| | font-size: 0.9rem; |
| | color: var(--text-primary); |
| | } |
| |
|
| | .blocked-list .count { |
| | font-weight: 700; |
| | color: var(--primary); |
| | } |
| |
|
| | |
| | .server-list { |
| | display: flex; |
| | flex-direction: column; |
| | gap: var(--space-md); |
| | } |
| |
|
| | .server-item { |
| | display: flex; |
| | align-items: center; |
| | gap: var(--space-md); |
| | padding: var(--space-md); |
| | background-color: var(--surface-alt); |
| | border-radius: var(--radius-md); |
| | } |
| |
|
| | .server-item.online { |
| | border-right: 3px solid var(--success); |
| | } |
| |
|
| | .status-dot { |
| | width: 10px; |
| | height: 10px; |
| | background-color: var(--success); |
| | border-radius: 50%; |
| | } |
| |
|
| | .server-status { |
| | display: flex; |
| | align-items: center; |
| | gap: var(--space-sm); |
| | font-size: 0.85rem; |
| | color: var(--success); |
| | margin-right: auto; |
| | } |
| |
|
| | .server-latency { |
| | font-weight: 600; |
| | color: var(--text-secondary); |
| | } |
| |
|
| | |
| | .faq-section { |
| | padding: var(--space-3xl) 0; |
| | background-color: var(--surface-alt); |
| | } |
| |
|
| | .faq-list { |
| | max-width: 800px; |
| | margin: 0 auto; |
| | } |
| |
|
| | .faq-item { |
| | margin-bottom: var(--space-md); |
| | background-color: var(--surface); |
| | border-radius: var(--radius-lg); |
| | overflow: hidden; |
| | border: 1px solid var(--border); |
| | } |
| |
|
| | .faq-question { |
| | width: 100%; |
| | display: flex; |
| | align-items: center; |
| | justify-content: space-between; |
| | padding: var(--space-lg); |
| | background: none; |
| | border: none; |
| | font-family: inherit; |
| | font-size: 1.05rem; |
| | font-weight: 600; |
| | color: var(--text-primary); |
| | cursor: pointer; |
| | text-align: right; |
| | } |
| |
|
| | [dir="ltr"] .faq-question { |
| | text-align: left; |
| | } |
| |
|
| | .faq-question:hover { |
| | background-color: var(--surface-alt); |
| | } |
| |
|
| | .faq-icon { |
| | width: 24px; |
| | height: 24px; |
| | color: var(--text-secondary); |
| | transition: transform var(--transition-base); |
| | } |
| |
|
| | .faq-item.active .faq-icon { |
| | transform: rotate(180deg); |
| | } |
| |
|
| | .faq-answer { |
| | max-height: 0; |
| | overflow: hidden; |
| | transition: max-height var(--transition-base); |
| | } |
| |
|
| | .faq-item.active .faq-answer { |
| | max-height: 300px; |
| | } |
| |
|
| | .faq-answer p { |
| | padding: 0 var(--space-lg) var(--space-lg); |
| | color: var(--text-secondary); |
| | line-height: 1.8; |
| | } |
| |
|
| | |
| | .contact-section { |
| | padding: var(--space-3xl) 0; |
| | } |
| |
|
| | .contact-wrapper { |
| | display: grid; |
| | grid-template-columns: 1fr 1fr; |
| | gap: var(--space-3xl); |
| | align-items: start; |
| | } |
| |
|
| | .contact-info .section-badge { |
| | margin-bottom: var(--space-md); |
| | } |
| |
|
| | .contact-info .section-title { |
| | text-align: right; |
| | } |
| |
|
| | .contact-info .section-desc { |
| | text-align: right; |
| | margin: 0 0 var(--space-xl) 0; |
| | } |
| |
|
| | .contact-methods { |
| | display: flex; |
| | flex-direction: column; |
| | gap: var(--space-lg); |
| | } |
| |
|
| | .contact-method { |
| | display: flex; |
| | align-items: center; |
| | gap: var(--space-md); |
| | } |
| |
|
| | .method-icon { |
| | width: 48px; |
| | height: 48px; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | background-color: rgba(15, 118, 110, 0.1); |
| | border-radius: var(--radius-md); |
| | color: var(--primary); |
| | } |
| |
|
| | .method-icon svg { |
| | width: 24px; |
| | height: 24px; |
| | } |
| |
|
| | .method-text h4 { |
| | font-size: 0.95rem; |
| | font-weight: 600; |
| | color: var(--text-primary); |
| | margin-bottom: 0.25rem; |
| | } |
| |
|
| | .method-text p { |
| | color: var(--text-secondary); |
| | font-family: 'Courier New', monospace; |
| | } |
| |
|
| | .contact-form { |
| | background-color: var(--surface); |
| | padding: var(--space-xl); |
| | border-radius: var(--radius-lg); |
| | box-shadow: var(--shadow-lg); |
| | } |
| |
|
| | .form-group { |
| | margin-bottom: var(--space-lg); |
| | } |
| |
|
| | .form-group label { |
| | display: block; |
| | font-weight: 600; |
| | color: var(--text-primary); |
| | margin-bottom: var(--space-sm); |
| | } |
| |
|
| | .form-group input, |
| | .form-group select, |
| | .form-group textarea { |
| | width: 100%; |
| | padding: 0.875rem 1rem; |
| | border: 2px solid var(--border); |
| | border-radius: var(--radius-md); |
| | font-family: inherit; |
| | font-size: 1rem; |
| | color: var(--text-primary); |
| | background-color: var(--surface); |
| | transition: all var(--transition-fast); |
| | } |
| |
|
| | .form-group input:focus, |
| | .form-group select:focus, |
| | .form-group textarea:focus { |
| | outline: none; |
| | border-color: var(--primary); |
| | box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1); |
| | } |
| |
|
| | .form-group textarea { |
| | resize: vertical; |
| | min-height: 120px; |
| | } |
| |
|
| | |
| | .footer { |
| | background-color: var(--text-primary); |
| | color: white; |
| | padding: var(--space-3xl) 0 var(--space-xl); |
| | } |
| |
|
| | .footer-grid { |
| | display: grid; |
| | grid-template-columns: 2fr 1fr 1fr 1fr; |
| | gap: var(--space-2xl); |
| | margin-bottom: var(--space-2xl); |
| | } |
| |
|
| | .footer-brand .logo { |
| | color: white; |
| | margin-bottom: var(--space-md); |
| | } |
| |
|
| | .footer-brand p { |
| | color: var(--text-muted); |
| | line-height: 1.7; |
| | } |
| |
|
| | .footer-links h4 { |
| | font-size: 1.1rem; |
| | font-weight: 700; |
| | margin-bottom: var(--space-lg); |
| | } |
| |
|
| | .footer-links ul { |
| | list-style: none; |
| | } |
| |
|
| | .footer-links li { |
| | margin-bottom: var(--space-md); |
| | } |
| |
|
| | .footer-links a { |
| | color: var(--text-muted); |
| | text-decoration: none; |
| | transition: color var(--transition-fast); |
| | } |
| |
|
| | .footer-links a:hover { |
| | color: white; |
| | } |
| |
|
| | .footer-bottom { |
| | padding-top: var(--space-xl); |
| | border-top: 1px solid rgba(255, 255, 255, 0.1); |
| | text-align: center; |
| | color: var(--text-muted); |
| | } |
| |
|
| | |
| | .toast { |
| | position: fixed; |
| | bottom: var(--space-xl); |
| | left: 50%; |
| | transform: translateX(-50%) translateY(100px); |
| | display: flex; |
| | align-items: center; |
| | gap: var(--space-md); |
| | padding: var(--space-md) var(--space-xl); |
| | background-color: var(--text-primary); |
| | color: white; |
| | border-radius: var(--radius-lg); |
| | box-shadow: var(--shadow-xl); |
| | opacity: 0; |
| | transition: all var(--transition-base); |
| | z-index: 2000; |
| | } |
| |
|
| | .toast.show { |
| | transform: translateX(-50%) translateY(0); |
| | opacity: 1; |
| | } |
| |
|
| | .toast-icon { |
| | width: 24px; |
| | height: 24px; |
| | color: var(--success); |
| | } |
| |
|
| | |
| | @media (max-width: 1024px) { |
| | .hero .container { |
| | grid-template-columns: 1fr; |
| | text-align: center; |
| | } |
| |
|
| | .hero-actions { |
| | justify-content: center; |
| | } |
| |
|
| | .hero-features { |
| | justify-content: center; |
| | } |
| |
|
| | .hero-visual { |
| | order: -1; |
| | } |
| |
|
| | .visual-card { |
| | max-width: 360px; |
| | } |
| |
|
| | .stats-grid { |
| | grid-template-columns: repeat(2, 1fr); |
| | } |
| |
|
| | .services-grid { |
| | grid-template-columns: repeat(2, 1fr); |
| | } |
| |
|
| | .stats-dashboard { |
| | grid-template-columns: 1fr; |
| | } |
| |
|
| | .dashboard-card.main-card { |
| | grid-row: auto; |
| | } |
| |
|
| | .contact-wrapper { |
| | grid-template-columns: 1fr; |
| | } |
| |
|
| | .footer-grid { |
| | grid-template-columns: repeat(2, 1fr); |
| | } |
| | } |
| |
|
| | @media (max-width: 768px) { |
| | .nav-links, |
| | .nav-actions { |
| | display: none; |
| | } |
| |
|
| | .mobile-menu { |
| | display: flex; |
| | } |
| |
|
| | .hero { |
| | padding: 120px 0 60px; |
| | } |
| |
|
| | .hero-title { |
| | font-size: 2.5rem; |
| | } |
| |
|
| | .hero-desc { |
| | font-size: 1.1rem; |
| | } |
| |
|
| | .dns-addresses { |
| | gap: var(--space-sm); |
| | } |
| |
|
| | .hero-actions { |
| | flex-direction: column; |
| | } |
| |
|
| | .hero-features { |
| | flex-direction: column; |
| | align-items: center; |
| | } |
| |
|
| | .stats-grid { |
| | grid-template-columns: 1fr; |
| | } |
| |
|
| | .services-grid { |
| | grid-template-columns: 1fr; |
| | } |
| |
|
| | .section-title { |
| | font-size: 2rem; |
| | } |
| |
|
| | .config-tabs { |
| | gap: var(--space-xs); |
| | } |
| |
|
| | .config-tab { |
| | padding: 0.5rem 0.75rem; |
| | font-size: 0.85rem; |
| | } |
| |
|
| | .config-tab span { |
| | display: none; |
| | } |
| |
|
| | .config-step { |
| | flex-direction: column; |
| | gap: var(--space-md); |
| | } |
| |
|
| | .bar-chart { |
| | height: 150px; |
| | } |
| |
|
| | .bar-wrapper { |
| | height: 130px; |
| | } |
| |
|
| | .bar { |
| | width: 14px; |
| | } |
| |
|
| | .footer-grid { |
| | grid-template-columns: 1fr; |
| | text-align: center; |
| | } |
| |
|
| | .footer-brand { |
| | margin-bottom: var(--space-lg); |
| | } |
| | } |
| |
|
| | @media (max-width: 480px) { |
| | .container { |
| | padding: 0 var(--space-md); |
| | } |
| |
|
| | .hero-title { |
| | font-size: 2rem; |
| | } |
| |
|
| | .btn-lg { |
| | padding: 0.875rem 1.5rem; |
| | font-size: 1rem; |
| | } |
| |
|
| | .dns-box { |
| | padding: var(--space-md); |
| | } |
| |
|
| | .dns-item { |
| | padding: var(--space-sm); |
| | } |
| |
|
| | .dns-value { |
| | font-size: 0.9rem; |
| | } |
| |
|
| | .stat-number { |
| | font-size: 2rem; |
| | } |
| |
|
| | .card-header { |
| | flex-direction: column; |
| | gap: var(--space-sm); |
| | align-items: flex-start; |
| | } |
| | } |
| |
|
