/* ЁЯФе THE ONLY DARK MODE TRIGGER (No HTML/Body Confusion) ЁЯФе */
.dark-mode {
background-color: #0f172a !important;
color: #f8fafc !important;
}
/* =========================================================
GLOBAL COMPONENTS (USED ON ALL PAGES: HOME, CATEGORY, TOOLS)
(Breadcrumbs, FAQs, SEO Box, Feature Boxes, Adsense)
========================================================= */
/* 1. BREADCRUMBS (For Category & Tool Pages) */
.breadcrumbs { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: #64748b; margin-bottom: 20px; margin-top: -15px; }
.tool-header-page .breadcrumbs { margin-top: -40px; } /* Tool page specific adjustment */
.breadcrumbs a { color: #8b5cf6; text-decoration: none !important; transition: 0.2s; }
.breadcrumbs a:hover { color: #f97316; }
.breadcrumbs .separator { margin: 0 8px; font-size: 10px; opacity: 0.5; }
.breadcrumbs .current { color: #1e293b; font-weight: 600; }
body.dark-mode .breadcrumbs .current { color: #f8fafc !important; }
/* 2. FAQ SECTION (For All Pages) */
.features-heading { text-align: center; margin-top: 50px; color: #1e293b; font-size: 2rem; margin-bottom: 30px; font-weight: 700; transition: 0.5s; }
.faq-container { max-width: 900px; margin: 0 auto 50px; background: #ffffff; border-radius: 15px; border: 1px solid #e2e8f0; transition: 0.5s; }
.faq-item { border-bottom: 1px solid #e2e8f0; }
.faq-item:last-child { border-bottom: none; }
.faq-question { padding: 20px; font-weight: 600; font-size: 15px; color: #1e293b; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: 0.3s; }
.faq-question:hover { color: #8b5cf6; }
.faq-answer { padding: 0 20px 20px; color: #64748b; font-size: 14px; line-height: 1.6; display: none; transition: 0.5s; }
.faq-item.active .faq-answer { display: block; }
.faq-item.active .faq-question i { transform: rotate(45deg); color: #ef4444; }
body.dark-mode .features-heading { color: #f8fafc !important; }
body.dark-mode .faq-container, body.dark-mode .faq-item { background-color: #1e293b !important; border-radius: 15px; border-color: #334155 !important; }
body.dark-mode .faq-question { color: #f8fafc !important; }
body.dark-mode .faq-answer { color: #94a3b8 !important; }
/* 3. SEO TEXT BOX (Merged both .seo-text-box and .cat-seo-box) */
.seo-text-box, .cat-seo-box { margin-top: 50px; padding: 35px; background: #f1f5f9; border-radius: 15px; border: 1px dashed #cbd5e1; text-align: justify; transition: 0.5s; }
.seo-text-box h2, .seo-text-box h3, .cat-seo-box h2, .cat-seo-box h3 { font-size: 20px; color: #1e293b; margin-bottom: 15px; text-align: center; transition: 0.5s; }
.seo-text-box p, .cat-seo-box p { font-size: 13px; color: #475569; line-height: 1.8; margin-bottom: 15px; transition: 0.5s; }
body.dark-mode .seo-text-box, body.dark-mode .cat-seo-box { background-color: #1e293b !important; border-color: #475569 !important; }
body.dark-mode .seo-text-box h2, body.dark-mode .seo-text-box h3, body.dark-mode .cat-seo-box h2, body.dark-mode .cat-seo-box h3 { color: #f8fafc !important; }
body.dark-mode .seo-text-box p, body.dark-mode .cat-seo-box p { color: #cbd5e1 !important; }
/* ========================================================= */
/* CENTERED SECTION HEADER (For Category & Tool Pages) */
/* ========================================================= */
.section-header-center {
width: 100%;
text-align: center;
margin-top: 40px;
margin-bottom: 30px;
}
.section-header-center h2 {
font-size: 28px;
font-weight: 800;
color: #1e293b;
margin: 0 auto;
}
/* Dark Mode Support */
body.dark-mode .section-header-center h2 {
color: #f8fafc !important;
}
/* 4. FEATURE BOXES ("Why Use Our Tools") */
.feature-box { background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e2e8f0; text-align: center; transition: 0.3s; }
.feature-box:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.05); transform: translateY(-5px); border-color: #8b5cf6; }
.feature-box i { font-size: 40px; margin-bottom: 15px; color: #3b82f6;}
.feature-box h4 { color: #1e293b; font-size: 1.2rem; margin-top: 0; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: 0.5s; }
.feature-box p { color: #64748b; font-size: 14px; margin: 0; line-height: 1.6; }
body.dark-mode .feature-box { background-color: #1e293b !important; border-color: #334155 !important; }
body.dark-mode .feature-box h4 { color: #f8fafc !important; }
body.dark-mode .feature-box p { color: #94a3b8 !important; }
/* Feature Grid Layouts (Index uses 3-col, Tools use Auto-fit) */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-bottom: 50px; }
@media (max-width: 1024px) { .features-grid { grid-template-columns: repeat(1, 1fr); } }
/* =========================================================
MISSING DARK MODE FOR ADSENSE PLACEHOLDERS
========================================================= */
.global-ad-container { text-align: center; margin: 30px auto; max-width: 1200px; padding: 0 20px; }
.global-ad-label { font-size: 10px; color: #94a3b8; display: block; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }
.global-ad-placeholder { background: #f1f5f9; border: 2px dashed #cbd5e1; border-radius: 10px; height: 90px; display: flex; align-items: center; justify-content: center; color: #64748b; font-weight: 600; font-size: 14px; transition: 0.5s; }
.global-ad-placeholder.bottom-ad { height: 120px; }
/* Dark Mode For Ads */
html.dark-mode .global-ad-placeholder, body.dark-mode .global-ad-placeholder { background-color: #1e293b !important; border-color: #475569 !important; color: #cbd5e1 !important; }
html.dark-mode .global-ad-label, body.dark-mode .global-ad-label { color: #64748b !important; }
/* =========================================================
GLOBAL TOOL CARDS & GRID (For Home, Category & Related Tools)
========================================================= */
/* 1. The Grid Layout */
.tools-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 15px;
margin-bottom: 60px;
}
/* 2. Tool Card Design */
.tool-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: 0.3s;
box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}
.tool-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,0.08);
border-color: #cbd5e1;
}
/* 3. Card Inner Elements */
.tool-main-link {
display: flex;
flex-direction: column;
flex-grow: 1;
text-decoration: none !important;
}
.card-icon-wrapper {
width: 45px;
height: 45px;
border-radius: 50px;
background: #f8fafc;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
transition: 0.3s;
}
.tool-card:hover .card-icon-wrapper {
background: #f1f5f9;
transform: scale(1.1);
}
.card-icon-wrapper img {
width: 25px;
height: 25px;
object-fit: contain;
}
.card-content h3 {
color: #1e293b;
font-size: 14px;
font-weight: 700;
margin: 0 0 5px 0;
transition: 0.5s;
}
.card-content p {
color: #64748b;
font-size: 11px;
margin: 0 0 15px 0;
line-height: 1.4;
transition: 0.5s;
}
/* 4. Open & How-To Buttons */
.card-actions {
display: flex;
gap: 8px;
margin-top: auto;
align-items: center;
}
.open-btn {
flex: 1;
background: #8b5cf6;
color: #ffffff !important;
font-size: 11.5px;
font-weight: 600;
padding: 7px 10px;
border-radius: 6px;
text-align: center;
transition: 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
text-decoration: none !important; /* ЁЯФе рдпреЗ рд▓рд╛рдЗрди рдЕрдВрдбрд░рд▓рд╛рдЗрди рдХреЛ рд╣рдореЗрд╢рд╛ рдХреЗ рд▓рд┐рдП рд╣рдЯрд╛ рджреЗрдЧреА */
}
.open-btn:hover {
background: #7c3aed;
box-shadow: 0 4px 10px rgba(139,92,246,0.3);
}
.how-to-btn {
background: #f1f5f9;
color: #475569 !important;
font-size: 14px;
width: 30px;
height: 30px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: 0.2s;
flex-shrink: 0;
text-decoration: none !important; /* ЁЯФе рдпрд╣рд╛рдБ рднреА рд▓рд╛рдЗрди рд╣рдЯрд╛ рджреА рдЧрдИ рд╣реИ */
}
.how-to-btn:hover {
background: #e0e7ff;
color: #4f46e5 !important;
}
/* 5. Mobile Responsiveness For Grid & Cards */
@media (max-width: 1024px) {
.tools-grid { grid-template-columns: repeat(3, 1fr); gap: 15px; }
}
@media (max-width: 600px) {
.tools-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.card-icon-wrapper { width: 35px; height: 35px; margin-bottom: 8px; }
.card-icon-wrapper img { width: 18px; height: 18px; }
.card-content h3 { font-size: 12px; margin-bottom: 4px; line-height: 1.2; }
.card-content p { display: block; font-size: 9px; line-height: 1.3; margin-bottom: 10px; color: #64748b; }
.open-btn { font-size: 10px; padding: 6px 6px; gap: 4px; }
.how-to-btn { width: 26px; height: 26px; font-size: 12px; }
}
/* ЁЯУ▒ рдмрд╣реБрдд рдЫреЛрдЯреЗ рдлреЛрди рдХреЗ рд▓рд┐рдП (380px рд╕реЗ рдиреАрдЪреЗ) */
@media (max-width: 380px) {
.tools-grid {
/* ЁЯФе 2 рдХреЙрд▓рдо рдХреА рдЬрдЧрд╣ 1 рдХреЙрд▓рдо рдХрд░ рджрд┐рдпрд╛ рддрд╛рдХрд┐ рдЯреЗрдХреНрд╕реНрдЯ рд╕рд╛рдл рджрд┐рдЦреЗ */
grid-template-columns: 1fr !important;
gap: 15px;
}
.tool-card {
padding: 18px; /* рдбрдмреНрдмреЗ рдХреЗ рдЕрдВрджрд░ рдереЛрдбрд╝реА рдЬрдЧрд╣ рдмрдврд╝рд╛рдИ */
}
.card-icon-wrapper {
width: 40px;
height: 40px;
margin-bottom: 10px;
}
.card-icon-wrapper img {
width: 20px;
height: 20px;
}
.card-content h3 {
font-size: 14px; /* рдирд╛рдо рдХреЛ рдереЛрдбрд╝рд╛ рдмрдбрд╝рд╛ рд░рдЦрд╛ рддрд╛рдХрд┐ рдЖрд╕рд╛рдиреА рд╕реЗ рдкрдврд╝рд╛ рдЬрд╛ рд╕рдХреЗ */
margin-bottom: 6px;
}
.card-content p {
font-size: 11px; /* рдбрд┐рд╕реНрдХреНрд░рд┐рдкреНрд╢рди рдХреЛ рд╕рд╛рдлрд╝ рдХрд┐рдпрд╛ */
line-height: 1.4;
}
.open-btn {
font-size: 12px;
padding: 10px 10px;
}
.how-to-btn {
width: 35px;
height: 35px;
}
}
/* 6. Dark Mode For Tool Cards & Buttons */
body.dark-mode .tool-card { background: #1e293b; border-color: #334155; }
body.dark-mode .tool-card:hover { border-color: #475569; }
body.dark-mode .card-icon-wrapper { background: #0f172a; }
body.dark-mode .tool-card:hover .card-icon-wrapper { background: #334155; }
body.dark-mode .card-content h3 { color: #f8fafc; }
body.dark-mode .card-content p { color: #94a3b8; }
body.dark-mode .open-btn { background: #4f46e5; color: #ffffff !important; }
body.dark-mode .open-btn:hover { background: #6366f1; }
body.dark-mode .how-to-btn { background: #334155; color: #cbd5e1 !important; }
body.dark-mode .how-to-btn:hover { background: #4f46e5; color: #ffffff !important; }
/* =========================================================
SHARE BUTTONS CSS (Light & Dark Mode)
========================================================= */
.social-share-wrapper { margin: 10px 0 50px 0; text-align: center; background: #ffffff; border: 1px solid #e2e8f0; padding: 25px; border-radius: 16px; transition: 0.5s; }
.social-share-wrapper h3 { font-size: 16px; color: #1e293b; margin-top: 0; margin-bottom: 15px; font-weight: 700; transition: 0.5s; }
.social-share-bar { display: flex; justify-content: center; gap: 15px; align-items: center; }
.share-btn { width: 45px; height: 45px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white !important; font-size: 22px; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.share-btn:hover { transform: translateY(-4px); }
/* Brand Colors */
.share-wa { background-color: #25D366; }
.share-fb { background-color: #1877F2; }
.share-x { background-color: #000000; }
.share-tg { background-color: #0088cc; }
/* DARK MODE - SHARE BUTTONS */
body.dark-mode .social-share-wrapper { background-color: #1e293b !important; border-color: #334155 !important; }
body.dark-mode .social-share-wrapper h3 { color: #f8fafc !important; }
body.dark-mode .share-x { background-color: #333333 !important; }
/* =========================================================
HOW TO USE (PRO GRID) CSS (Light & Dark Mode)
========================================================= */
.how-to-pro-container { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 30px; margin: 40px auto; box-shadow: 0 10px 30px rgba(0,0,0,0.03); transition: 0.5s; max-width: 100%; scroll-margin-top: 100px; }
.how-to-pro-heading { font-size: 20px; font-weight: 700; color: #1e293b; margin-top: 0; margin-bottom: 25px; display: flex; align-items: center; gap: 10px; transition: 0.5s; }
.how-to-pro-heading i { color: #8b5cf6; font-size: 24px; }
.how-to-pro-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.how-to-step { display: flex; align-items: flex-start; gap: 15px; background: #f8fafc; padding: 20px; border-radius: 15px; border: 1px dashed #cbd5e1; transition: all 0.3s ease; }
.how-to-step:hover { border-color: #8b5cf6; background: #f5f3ff; transform: translateY(-4px); box-shadow: 0 8px 20px rgba(139,92,246,0.1); }
.step-circle { width: 38px; height: 38px; background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; flex-shrink: 0; box-shadow: 0 4px 10px rgba(139,92,246,0.3); }
.step-text-box h4 { margin: 0 0 5px 0; color: #1e293b; font-size: 15px; font-weight: 700; transition: 0.5s; }
.step-text-box p { margin: 0; color: #475569; font-size: 13px; line-height: 1.6; transition: 0.5s; }
/* Mobile View for Grid */
@media (max-width: 768px) {
.how-to-pro-grid { grid-template-columns: 1fr; }
.how-to-pro-container { padding: 25px 20px; }
}
/* DARK MODE - HOW TO USE */
body.dark-mode .how-to-pro-container { background: #1e293b; border-color: #334155; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
body.dark-mode .how-to-pro-heading { color: #f8fafc; }
body.dark-mode .how-to-step { background: #0f172a; border-color: #475569; }
body.dark-mode .how-to-step:hover { border-color: #8b5cf6; background: #1e293b; }
body.dark-mode .step-text-box h4 { color: #f8fafc; }
body.dark-mode .step-text-box p { color: #94a3b8; }
/* KB & MB ICON CUSTOM STYLES (PHOTO RESIZER CATEGORY) */
.kb-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; min-width: 50px; height: 40px; background-color: #e0f2fe; color: #1e3a8a; border-radius: 12px; font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 800; border: 2px solid #3b82f6; transition: all 0.3s ease; margin-left: 20px; }
.kb-icon span { font-size: 12px; margin-left: 3px; font-weight: 700; }
/* DARK MODE FOR CATEGORY PAGES */
body.dark-mode .cat-hero { background: #1e293b; border-color: #334155; }
body.dark-mode .cat-title { color: #f8fafc; }
body.dark-mode .cat-desc { color: #94a3b8; }
body.dark-mode .cat-search-box { background: #0f172a; border-color: #334155; }
body.dark-mode .cat-search-box input { color: #f8fafc; }
body.dark-mode .kb-icon { background-color: #1e293b; color: #60a5fa; border-color: #3b82f6; }
/* Mobile Fix for Category Cards */
@media screen and (max-width: 600px) {
.kb-icon { min-width: 45px !important; height: 30px !important; font-size: 15px !important; padding: 0 8px !important; }
}
/* ========================================================= */
/* SCROLL TO TOP BUTTON (Smart Placement above Chatbot) */
/* ========================================================= */
#scrollToTopBtn {
position: fixed;
/* рдЪреИрдЯрдмреЙрдЯ рдХреЗ рдмрдЯрди рд╕реЗ рдареАрдХ рдКрдкрд░ (рд▓рдЧрднрдЧ 90px рдКрдкрд░) рд╕реЗрдЯ рдХрд┐рдпрд╛ рд╣реИ */
bottom: 90px;
right: 31.5px;
background-color: #1e293b; /* рдбрд╛рд░реНрдХ рдХрд▓рд░ рддрд╛рдХрд┐ рдЕрд▓рдЧ рджрд┐рдЦреЗ */
color: white;
width: 45px;
height: 45px;
border-radius: 50%;
border: none;
font-size: 18px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
/* рд╢реБрд░реБрдЖрдд рдореЗрдВ рдмрдЯрди рдЫреБрдкрд╛ рд░рд╣реЗрдЧрд╛ */
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease-in-out;
z-index: 9998; /* рдЪреИрдЯрдмреЙрдЯ (9999) рдХреЗ рдареАрдХ рдиреАрдЪреЗ */
}
/* рд╣реЛрд╡рд░ рдЗреЮреЗрдХреНрдЯ (Hover Effect) */
#scrollToTopBtn:hover {
background-color: #3b82f6; /* рдорд╛рдЙрд╕ рд▓реЗ рдЬрд╛рдиреЗ рдкрд░ рдмреНрд▓реВ рд╣реЛ рдЬрд╛рдПрдЧрд╛ */
transform: translateY(-5px) !important; /* рд╣рд▓реНрдХрд╛ рд╕рд╛ рдКрдкрд░ рдЙрдЫрд▓реЗрдЧрд╛ */
box-shadow: 0 8px 20px rgba(59,130,246,0.4);
}
/* рдЬрдм JS рдЗрд╕реЗ 'show-btn' рдХреНрд▓рд╛рд╕ рджреЗрдЧрд╛, рддрдм рдпрд╣ рдкреНрд░рдХрдЯ (Appear) рд╣реЛрдЧрд╛ */
#scrollToTopBtn.show-btn {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* ЁЯФе Dark Mode Support ЁЯФе */
body.dark-mode #scrollToTopBtn {
background-color: #334155;
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
body.dark-mode #scrollToTopBtn:hover {
background-color: #60a5fa;
}
/* ЁЯУ▒ Mobile Responsiveness (рдореЛрдмрд╛рдЗрд▓ рдкрд░ рдЪреИрдЯрдмреЙрдЯ рдХреЗ рдКрдкрд░ рд╕реЗрдЯ рдХрд░реЗрдВ) */
@media (max-width: 480px) {
#scrollToTopBtn {
bottom: 85px; /* рдореЛрдмрд╛рдЗрд▓ рдореЗрдВ рдЪреИрдЯрдмреЙрдЯ рдмрдЯрди рдХреЗ рдереЛреЬрд╛ рдФрд░ рдкрд╛рд╕ */
right: 22.5px;
width: 40px;
height: 40px;
font-size: 16px;
}
}
/* ========================================================= */
/* ЁЯОп FLOATING BADGE SYSTEM (Top Right Corner) */
/* ========================================================= */
.tool-card {
position: relative; /* рдпрд╣ рдмрд╣реБрдд реЫрд░реВрд░реА рд╣реИ! */
overflow: hidden; /* рдХреЛрдиреЛрдВ рд╕реЗ рдмрд╛рд╣рд░ рдХреБрдЫ рди рдирд┐рдХрд▓реЗ */
}
/* рд╕рднреА рдмреИрдЬ рдХрд╛ рдХреЙрдорди рдбрд┐реЫрд╛рдЗрди (рдмрд╛рд░-рдмрд╛рд░ рдХреЛрдб рдирд╣реАрдВ рд▓рд┐рдЦрдирд╛ рдкреЬреЗрдЧрд╛) */
.tool-badge {
position: absolute;
top: 12px;
right: 12px;
color: #ffffff;
font-size: 9px;
font-weight: 800;
padding: 4px 8px;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
z-index: 5;
white-space: nowrap;
}
/* 1. Coming Soon Badge */
.badge-upcoming { background: #64748b; }
/* 2. NEW ЁЯФе Badge */
.badge-new { background: #ef4444; animation: pulse 2s infinite; }
/* 3. POPULAR тнР Badge */
.badge-popular { background: #8b5cf6; }
/* 4. TOP ЁЯПЖ Badge */
.badge-top { background: #eab308; color: #1e293b; }