/* ========================================================================== CHANNEL PAGES CSS ARCHITECTURE ========================================================================== */ /* How to use: 1. Shared structural styles are defined first under generic classes (.channel-card, etc.). 2. Theme-specific overrides are defined under scope classes (body.channel-facebook, body.channel-instagram). 3. To add a new channel: a. Create channel-name.html b. Add class="channel-name" to the tag c. Add a new section below for .channel-name to customize colors/bg. */ /* ========================================= 1. SHARED BASE STYLES (Applies to all) ========================================= */ body { background-color: #151719; /* Fallback */ } body[class*="channel-"] { background-color: #111827 !important; } body[class*="channel-"] #bg-container, body[class*="channel-"] .channel-hero-bg { background-color: transparent !important; } /* Card Structure */ .channel-card { transition: all 0.3s ease; border: 1px solid transparent; /* Prepare for border color */ } .channel-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); } .channel-icon-box { background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); } .channel-hero-desc { margin-bottom: 60px !important; } .text-glow { text-shadow: 0 0 20px rgba(59, 130, 246, 0.3); } /* Scroll To Top Button Shared */ .scroll-top-btn-custom { background-color: rgba(45, 55, 72, 0.92) !important; border-color: #2d3034 !important; } /* ========================================= 2. FACEBOOK THEME [channel-facebook] ========================================= */ .channel-facebook { background-color: #151719; /* Dark Gray 900 */ } /* Hero Background */ .channel-facebook .channel-hero-bg { background-color: #151719; background-image: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.08), transparent 40%); /* Blue tint */ } /* Card Styling */ .channel-facebook .channel-card { background-color: #2d3748; border-color: #33363a; } .channel-facebook .channel-card:hover { background-color: #2d3748; border-color: #3b82f6; /* Facebook Blue */ } /* Icon Colors (Facebook Page Specific) */ .channel-facebook .text-orange-custom { color: #FB923C !important; } .channel-facebook .text-violet-custom { color: #A78BFA !important; } .channel-facebook .text-rose-custom { color: #F43F5E !important; } .channel-facebook .text-emerald-custom { color: #34D399 !important; } /* ========================================= 3. INSTAGRAM THEME [channel-instagram] ========================================= */ .channel-instagram { background-color: #151719; /* Dark Gray 900 */ } /* Hero Background - Instagram gets a slight pink/purple tint */ .channel-instagram .channel-hero-bg { background-color: #151719; background-image: radial-gradient(circle at 50% 0%, rgba(236, 72, 153, 0.08), transparent 40%); /* Pink tint */ } /* Card Styling - Identical structure, but separated for future customization */ .channel-instagram .channel-card { background-color: #2d3748; border-color: #33363a; } .channel-instagram .channel-card:hover { background-color: #2d3748; border-color: #ec4899; /* Pink hover border for Instagram! */ } /* Icon Colors (Instagram Page Specific - Can be different if desired) */ .channel-instagram .text-orange-custom { color: #FB923C !important; } .channel-instagram .text-violet-custom { color: #A78BFA !important; } .channel-instagram .text-rose-custom { color: #F43F5E !important; } .channel-instagram .text-emerald-custom { color: #34D399 !important; } /* ========================================= 4. TIKTOK THEME [channel-tiktok] ========================================= */ .channel-tiktok { background-color: #151719; /* Dark Gray 900 */ } /* Hero Background - TikTok gets a Cyan tint (to match the blue/cyan shift of their logo) */ .channel-tiktok .channel-hero-bg { background-color: #151719; background-image: radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.08), transparent 40%); /* Cyan tint */ } /* Card Styling */ .channel-tiktok .channel-card { background-color: #2d3748; border-color: #33363a; } .channel-tiktok .channel-card:hover { border: 1px solid transparent; background: linear-gradient(#2d3748, #2d3748) padding-box, linear-gradient(to right, #2cf4ef, #ffffff, #fe335a) border-box; box-shadow: 0 10px 30px -5px rgba(44, 244, 239, 0.15); } /* Icon Colors (TikTok Page Specific) */ .channel-tiktok .text-orange-custom { color: #FB923C !important; } .channel-tiktok .text-violet-custom { color: #A78BFA !important; } .channel-tiktok .text-rose-custom { color: #F43F5E !important; } .channel-tiktok .text-emerald-custom { color: #34D399 !important; } /* ========================================= 5. TELEGRAM THEME [channel-telegram] ========================================= */ .channel-telegram { background-color: #151719; /* Dark Gray 900 */ } /* Hero Background - Telegram gets a Sky Blue tint */ .channel-telegram .channel-hero-bg { background-color: #151719; background-image: radial-gradient(circle at 50% 0%, rgba(34, 158, 217, 0.08), transparent 40%); /* Telegram Blue tint */ } /* Card Styling */ .channel-telegram .channel-card { background-color: #2d3748; border-color: #33363a; } .channel-telegram .channel-card:hover { background-color: #2d3748; border-color: #229ED9; /* Telegram Blue hover border */ box-shadow: 0 10px 30px -5px rgba(34, 158, 217, 0.15); /* Slight blue glow */ } /* Icon Colors (Telegram Page Specific) */ .channel-telegram .text-orange-custom { color: #FB923C !important; } .channel-telegram .text-violet-custom { color: #A78BFA !important; } .channel-telegram .text-rose-custom { color: #F43F5E !important; } .channel-telegram .text-emerald-custom { color: #34D399 !important; } /* ========================================= 6. WHATSAPP THEME [channel-whatsapp] ========================================= */ .channel-whatsapp { background-color: #151719; } /* Hero Background - WhatsApp gets a Vibrant Green tint */ .channel-whatsapp .channel-hero-bg { background-color: #151719; background-image: radial-gradient(circle at 50% 0%, rgba(37, 211, 102, 0.08), transparent 40%); /* WhatsApp Green tint */ } /* Card Styling */ .channel-whatsapp .channel-card { background-color: #2d3748; border-color: #33363a; } .channel-whatsapp .channel-card:hover { background-color: #2d3748; border-color: #25D366; /* WhatsApp Green hover border */ box-shadow: 0 10px 30px -5px rgba(37, 211, 102, 0.15); /* Slight green glow */ } /* Icon Colors (WhatsApp Page Specific) */ .channel-whatsapp .text-orange-custom { color: #FB923C !important; } .channel-whatsapp .text-violet-custom { color: #A78BFA !important; } .channel-whatsapp .text-rose-custom { color: #F43F5E !important; } .channel-whatsapp .text-emerald-custom { color: #34D399 !important; } /* ========================================= 7. ZALO THEME [channel-zalo] ========================================= */ .channel-zalo { background-color: #151719; } /* Hero Background - Zalo gets a Vibrant Blue tint */ .channel-zalo .channel-hero-bg { background-color: #151719; background-image: radial-gradient(circle at 50% 0%, rgba(0, 104, 255, 0.08), transparent 40%); /* Zalo Blue tint */ } /* Card Styling */ .channel-zalo .channel-card { background-color: #2d3748; border-color: #33363a; } .channel-zalo .channel-card:hover { background-color: #2d3748; border-color: #0068FF; /* Zalo Blue hover border */ box-shadow: 0 10px 30px -5px rgba(0, 104, 255, 0.15); /* Slight blue glow */ } /* Icon Colors (Zalo Page Specific) */ .channel-zalo .text-orange-custom { color: #FB923C !important; } .channel-zalo .text-violet-custom { color: #A78BFA !important; } .channel-zalo .text-rose-custom { color: #F43F5E !important; } .channel-zalo .text-emerald-custom { color: #34D399 !important; } /* ========================================= 8. MESSENGER THEME [channel-messenger] ========================================= */ .channel-messenger { background-color: #151719; } /* Hero Background - Messenger gets a Blue/Purple gradient tint */ .channel-messenger .channel-hero-bg { background-color: #151719; background-image: radial-gradient(circle at 50% 0%, rgba(0, 132, 255, 0.1), transparent 40%); /* Messenger Blue tint */ } /* Card Styling */ .channel-messenger .channel-card { background-color: #2d3748; border-color: #33363a; } .channel-messenger .channel-card:hover { background-color: #2d3748; border-color: #0084FF; /* Messenger Blue hover border */ box-shadow: 0 10px 30px -5px rgba(0, 132, 255, 0.2); /* Slight blue glow */ } /* Icon Colors (Messenger Page Specific) */ .channel-messenger .text-orange-custom { color: #FB923C !important; } .channel-messenger .text-violet-custom { color: #A78BFA !important; } .channel-messenger .text-rose-custom { color: #F43F5E !important; } .channel-messenger .text-emerald-custom { color: #34D399 !important; } /* ========================================= 9. EMAIL THEME [channel-email] ========================================= */ .channel-email { background-color: #151719; } /* Hero Background - Email gets an Amber/Gold tint */ .channel-email .channel-hero-bg { background-color: #151719; background-image: radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.08), transparent 40%); /* Amber tint */ } /* Card Styling */ .channel-email .channel-card { background-color: #2d3748; border-color: #33363a; } .channel-email .channel-card:hover { background-color: #2d3748; border-color: #F59E0B; /* Amber hover border */ box-shadow: 0 10px 30px -5px rgba(245, 158, 11, 0.15); /* Slight amber glow */ } /* Icon Colors (Email Page Specific) */ .channel-email .text-orange-custom { color: #FB923C !important; } .channel-email .text-violet-custom { color: #A78BFA !important; } .channel-email .text-rose-custom { color: #F43F5E !important; } .channel-email .text-emerald-custom { color: #34D399 !important; } /* ========================================= 10. WEBSITE THEME [channel-website] ========================================= */ .channel-website { background-color: #07111f; } .channel-website .channel-hero-bg { background: radial-gradient(circle at 12% 18%, rgba(22, 163, 74, 0.14), transparent 28%), radial-gradient(circle at 84% 8%, rgba(56, 189, 248, 0.12), transparent 32%), linear-gradient(180deg, #081322 0%, #07111f 58%, #091321 100%); } .channel-website .channel-card { background: linear-gradient(180deg, rgba(18, 29, 49, 0.94) 0%, rgba(12, 22, 38, 0.98) 100%); border-color: rgba(148, 163, 184, 0.18); box-shadow: 0 24px 50px -28px rgba(2, 8, 23, 0.85); } .channel-website .channel-card:hover { background: linear-gradient(180deg, rgba(22, 36, 59, 0.96) 0%, rgba(13, 26, 44, 0.99) 100%); border-color: rgba(74, 222, 128, 0.42); box-shadow: 0 20px 45px -24px rgba(22, 163, 74, 0.22); } .channel-website .text-indigo-custom { color: #93c5fd !important; } .channel-website .text-cyan-custom { color: #67e8f9 !important; } .channel-website .text-emerald-custom { color: #6ee7b7 !important; } .channel-website .text-violet-custom { color: #c4b5fd !important; } .channel-website .channel-icon-box { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(15, 23, 42, 0.16) 100%); border-color: rgba(255, 255, 255, 0.08); } .channel-website .ChatConnectX-badge { background: rgba(15, 23, 42, 0.58); border: 1px solid rgba(148, 163, 184, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); } .channel-website .ChatConnectX-stage { position: absolute; inset: 8% 6% auto auto; width: 78%; height: 78%; border-radius: 999px; background: radial-gradient(circle, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0.04) 42%, transparent 72%); filter: blur(12px); pointer-events: none; } .channel-website .ChatConnectX-console { background: linear-gradient(180deg, rgba(10, 18, 32, 0.96) 0%, rgba(7, 17, 31, 0.98) 100%); border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: 0 32px 70px -36px rgba(2, 6, 23, 0.92), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .channel-website .ChatConnectX-console::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 30%), radial-gradient(circle at bottom left, rgba(34, 197, 94, 0.12), transparent 34%); pointer-events: none; } .channel-website .ChatConnectX-flow-card, .channel-website .ChatConnectX-kpi, .channel-website .ChatConnectX-mini-stat { position: relative; z-index: 1; border: 1px solid rgba(148, 163, 184, 0.12); background: rgba(15, 23, 42, 0.6); border-radius: 24px; } .channel-website .ChatConnectX-flow-card { padding: 1rem; } .channel-website .ChatConnectX-kpi, .channel-website .ChatConnectX-mini-stat { padding: 1rem 1.1rem; } .channel-website .ChatConnectX-tag { display: inline-flex; align-items: center; padding: 0.45rem 0.75rem; border-radius: 999px; background: rgba(148, 163, 184, 0.1); border: 1px solid rgba(148, 163, 184, 0.14); color: #dbeafe; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; } .channel-website .ChatConnectX-proof { min-height: 100%; } .channel-website .ChatConnectX-usecase-card { min-height: 100%; } .channel-website .ChatConnectX-step { position: relative; overflow: hidden; } .channel-website .ChatConnectX-step::after { content: ""; position: absolute; inset: auto -10% -35% auto; width: 14rem; height: 14rem; border-radius: 999px; background: radial-gradient(circle, rgba(34, 197, 94, 0.16), transparent 70%); pointer-events: none; } .channel-website .ChatConnectX-step-number { display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; margin-bottom: 1.5rem; border-radius: 1.5rem; background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(56, 189, 248, 0.18)); border: 1px solid rgba(74, 222, 128, 0.24); color: #f8fafc; font-size: 1.125rem; font-weight: 800; letter-spacing: 0.08em; } .channel-website .ChatConnectX-band { background: linear-gradient(135deg, #67e8a5 0%, #34d399 48%, #22c55e 100%); box-shadow: 0 32px 80px -40px rgba(34, 197, 94, 0.65); } @media (max-width: 1023px) { .channel-website .ChatConnectX-stage { inset: 0; width: 100%; height: 100%; } }