/* ========================================================================== 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 */ } /* Card Structure */ .channel-card { transition: all 0.3s ease; border: 1px solid #33363a; /* Set base border instead of transparent for visibility */ } .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(31, 34, 39, 0.9) !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: #1f2227; 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: #1f2227; 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: #1f2227; 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: #1f2227; 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: #1f2227; 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: #1f2227; 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: #1f2227; 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: #1f2227; 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: #151719; } /* Hero Background - Website gets an Indigo tint */ .channel-website .channel-hero-bg { background-color: #151719; background-image: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.08), transparent 40%); /* Indigo tint */ } /* Card Styling */ .channel-website .channel-card { background-color: #1f2227; border-color: #33363a; } .channel-website .channel-card:hover { background-color: #2d3748; border-color: #6366F1; /* Indigo hover border */ box-shadow: 0 10px 30px -5px rgba(99, 102, 241, 0.15); /* Slight indigo glow */ } /* Icon Colors (Website Page Specific) */ .channel-website .text-indigo-custom { color: #818CF8 !important; } .channel-website .text-cyan-custom { color: #22D3EE !important; } .channel-website .text-emerald-custom { color: #34D399 !important; } .channel-website .text-violet-custom { color: #A78BFA !important; } /* ==== ICON COLOR OVERRIDE ==== */ main .material-symbols-outlined { color: #ffffff !important; } main .material-symbols-outlined.text-orange-custom, main .material-symbols-outlined.text-violet-custom, main .material-symbols-outlined.text-rose-custom, main .material-symbols-outlined.text-emerald-custom, main .material-symbols-outlined.text-indigo-custom, main .material-symbols-outlined.text-cyan-custom, main .material-symbols-outlined.text-blue-400, main .material-symbols-outlined.text-pink-400, main .material-symbols-outlined.text-red-400, main .material-symbols-outlined.text-green-400 { color: #ffffff !important; } /* ==== CHANNELS CIRCULAR ICON BORDERS - WHITE ==== */ /* Circular checkmark / icon containers */ main .rounded-full[class*="border-green-500"], main .rounded-full[class*="border-blue-500"], main .rounded-full[class*="border-red-500"] { border-color: rgba(255, 255, 255, 0.3) !important; } /* Channel icon box borders */ main .channel-icon-box { border-color: rgba(255, 255, 255, 0.2) !important; background-color: rgba(255, 255, 255, 0.05) !important; }