/* ============================================================ platform-colors.css — Brand colors for every SMM platform Imported by main.css or included in ============================================================ */ /* Platform brand color tokens */ :root { --clr-instagram: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); --clr-youtube: #FF0000; --clr-tiktok: linear-gradient(135deg,#010101,#69C9D0); --clr-twitter: #000000; --clr-facebook: #1877F2; --clr-spotify: #1DB954; --clr-telegram: #2AABEE; --clr-linkedin: #0A66C2; --clr-soundcloud:#F26F23; --clr-pinterest: #E60023; --clr-snapchat: #FFFC00; --clr-discord: #5865F2; --clr-reddit: #FF4500; --clr-twitch: #9146FF; --clr-vk: #0077FF; --clr-threads: #000000; --clr-google: #4285F4; --clr-apple: #555555; --clr-traffic: #06b6d4; --clr-reviews: #f59e0b; --clr-kick: #53FC18; --clr-other: #6c63ff; } /* ── Platform-colored category tab buttons ── */ /* When a tab is active, it glows with the platform brand color */ .tab-btn[data-slug="instagram"].active { background:linear-gradient(135deg,#f09433 0%,#bc1888 100%);color:#fff;box-shadow:0 3px 16px #bc188844; } .tab-btn[data-slug="youtube"].active { background:#FF0000;color:#fff;box-shadow:0 3px 16px #FF000044; } .tab-btn[data-slug="tiktok"].active { background:linear-gradient(135deg,#010101,#69C9D0);color:#fff;box-shadow:0 3px 16px #69C9D044; } .tab-btn[data-slug="twitter"].active { background:#000;color:#fff;box-shadow:0 3px 16px #00000044; } .tab-btn[data-slug="facebook"].active { background:#1877F2;color:#fff;box-shadow:0 3px 16px #1877F244; } .tab-btn[data-slug="spotify"].active { background:#1DB954;color:#fff;box-shadow:0 3px 16px #1DB95444; } .tab-btn[data-slug="telegram"].active { background:#2AABEE;color:#fff;box-shadow:0 3px 16px #2AABEE44; } .tab-btn[data-slug="linkedin"].active { background:#0A66C2;color:#fff;box-shadow:0 3px 16px #0A66C244; } .tab-btn[data-slug="soundcloud"].active { background:#F26F23;color:#fff;box-shadow:0 3px 16px #F26F2344; } .tab-btn[data-slug="pinterest"].active { background:#E60023;color:#fff;box-shadow:0 3px 16px #E6002344; } .tab-btn[data-slug="snapchat"].active { background:#FFFC00;color:#000;box-shadow:0 3px 16px #FFFC0044; } .tab-btn[data-slug="discord"].active { background:#5865F2;color:#fff;box-shadow:0 3px 16px #5865F244; } .tab-btn[data-slug="reddit"].active { background:#FF4500;color:#fff;box-shadow:0 3px 16px #FF450044; } .tab-btn[data-slug="twitch"].active { background:#9146FF;color:#fff;box-shadow:0 3px 16px #9146FF44; } .tab-btn[data-slug="vk"].active { background:#0077FF;color:#fff;box-shadow:0 3px 16px #0077FF44; } .tab-btn[data-slug="threads"].active { background:#000;color:#fff;box-shadow:0 3px 16px #00000044; } .tab-btn[data-slug="google"].active { background:#4285F4;color:#fff;box-shadow:0 3px 16px #4285F444; } .tab-btn[data-slug="apple"].active { background:#555;color:#fff;box-shadow:0 3px 16px #55555544; } .tab-btn[data-slug="traffic"].active { background:#06b6d4;color:#fff;box-shadow:0 3px 16px #06b6d444; } .tab-btn[data-slug="reviews"].active { background:#f59e0b;color:#fff;box-shadow:0 3px 16px #f59e0b44; } .tab-btn[data-slug="kick"].active { background:#53FC18;color:#000;box-shadow:0 3px 16px #53FC1844; } /* ── Platform icon colors (for non-active tabs and card headers) ── */ .platform-icon-instagram { color:#E1306C; } .platform-icon-youtube { color:#FF0000; } .platform-icon-tiktok { color:#69C9D0; } .platform-icon-twitter { color:#000000; } .platform-icon-facebook { color:#1877F2; } .platform-icon-spotify { color:#1DB954; } .platform-icon-telegram { color:#2AABEE; } .platform-icon-linkedin { color:#0A66C2; } .platform-icon-soundcloud { color:#F26F23; } .platform-icon-pinterest { color:#E60023; } .platform-icon-snapchat { color:#FFFC00; filter:drop-shadow(0 0 2px #ccc); } .platform-icon-discord { color:#5865F2; } .platform-icon-reddit { color:#FF4500; } .platform-icon-twitch { color:#9146FF; } .platform-icon-vk { color:#0077FF; } .platform-icon-threads { color:#e0e0e0; } .platform-icon-google { color:#4285F4; } .platform-icon-apple { color:#aaaaaa; } .platform-icon-traffic { color:#06b6d4; } .platform-icon-reviews { color:#f59e0b; } .platform-icon-kick { color:#53FC18; } /* ── Platform shortcut cards on dashboard ── */ .platform-shortcut { display:flex;align-items:center;gap:10px;padding:14px 16px; background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2); transition:.15s;text-decoration:none;color:var(--text);position:relative;overflow:hidden; } .platform-shortcut::before { content:'';position:absolute;top:0;left:0;right:0;height:3px; background:var(--platform-clr,var(--accent)); } .platform-shortcut:hover { border-color:var(--platform-clr,var(--accent));transform:translateY(-2px); } .platform-shortcut .ps-icon { width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center; font-size:20px;flex-shrink:0;background:color-mix(in srgb,var(--platform-clr,var(--accent)) 15%,transparent); color:var(--platform-clr,var(--accent)); } .platform-shortcut h4 { font-size:13.5px;font-weight:600;margin-bottom:2px; } .platform-shortcut span { font-size:11px;color:var(--text3); } /* Platform-specific shortcut card accents */ .ps-instagram { --platform-clr:#E1306C; } .ps-youtube { --platform-clr:#FF0000; } .ps-tiktok { --platform-clr:#69C9D0; } .ps-twitter { --platform-clr:#1d9bf0; } .ps-facebook { --platform-clr:#1877F2; } .ps-spotify { --platform-clr:#1DB954; } .ps-telegram { --platform-clr:#2AABEE; } .ps-linkedin { --platform-clr:#0A66C2; } .ps-soundcloud { --platform-clr:#F26F23; } .ps-pinterest { --platform-clr:#E60023; } .ps-snapchat { --platform-clr:#F7CA00; } .ps-discord { --platform-clr:#5865F2; } .ps-reddit { --platform-clr:#FF4500; } .ps-twitch { --platform-clr:#9146FF; } .ps-vk { --platform-clr:#0077FF; } .ps-threads { --platform-clr:#aaaaaa; } .ps-google { --platform-clr:#4285F4; } .ps-apple { --platform-clr:#aaaaaa; } .ps-traffic { --platform-clr:#06b6d4; } .ps-reviews { --platform-clr:#f59e0b; } .ps-kick { --platform-clr:#53FC18; } /* ── Service card platform header stripe ── */ .svc-card .svc-platform-stripe { height:3px;margin:-18px -18px 14px; background:var(--platform-clr,var(--accent));border-radius:var(--r2) var(--r2) 0 0; } /* ── Tabs container: allow wrapping for many platforms ── */ .tabs { flex-wrap:wrap; width:100%; } .tab-btn { white-space:nowrap; } /* ── Admin category badge ── */ .cat-badge { display:inline-flex;align-items:center;gap:5px; padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600; background:color-mix(in srgb,var(--platform-clr,var(--accent)) 15%,transparent); color:var(--platform-clr,var(--accent)); } /* ── SVG platform icon sizing ── */ .platform-svg-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } .tab-btn .platform-svg-icon { margin-right: 5px; } .ps-icon .platform-svg-icon { width: 22px; height: 22px; } .platform-chip .platform-svg-icon { width: 14px; height: 14px; }