/* ===== CREATOR SONU STYLE - PIXXY NEWSPAPER 11 OVERRIDE ===== */ /* TOP ANNOUNCEMENT BAR */ .cs-topbar { background: #f0fdf4; border-bottom: 1px solid #e2e8f0; padding: 6px 20px; display: flex; align-items: center; gap: 16px; font-size: 13px; font-family: 'Poppins', sans-serif; } .cs-topbar .dot { width: 10px; height: 10px; background: #22c55e; border-radius: 50%; display: inline-block; animation: pulse 2s infinite; } @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.4)} 50%{box-shadow:0 0 0 6px rgba(34,197,94,0)} } .cs-topbar a { color: #64748b; font-weight: 500; text-decoration: none; } .cs-topbar a:hover { color: #6c63ff; } /* SITEMAP BAR */ .cs-sitemapbar { background: #1e293b; padding: 7px 20px; display: flex; align-items: center; justify-content: space-between; } .cs-sitemapbar a { color: #94a3b8; font-size: 13px; font-weight: 500; text-decoration: none; } .cs-sitemapbar a:hover { color: #fff; } .cs-sitemapbar .cs-socials a { margin-left: 12px; font-size: 16px; } .cs-sitemapbar .cs-socials a:hover { color: #e1306c; } /* DARK MODE TOGGLE BUTTON */ .cs-darkbtn { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #e2e8f0; background: #f8fafc; cursor: pointer; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; margin-left: 8px; } .cs-darkbtn:hover { background: #6c63ff; color: #fff; border-color: #6c63ff; } /* GET PLUS BUTTON */ .cs-getplus { background: linear-gradient(135deg, #6c63ff, #a78bfa); color: #fff !important; padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; text-decoration: none !important; box-shadow: 0 4px 14px rgba(108,99,255,0.3); transition: all 0.2s; margin-left: 8px; } .cs-getplus:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(108,99,255,0.4); } /* HERO SECTION */ .cs-hero { background: linear-gradient(135deg, #fce7f3 0%, #ede9fe 50%, #dcfce7 100%); padding: 65px 20px 55px; text-align: center; position: relative; overflow: hidden; } .cs-hero::before { content: ''; position: absolute; top: -60px; right: -60px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(167,139,250,0.25) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .cs-hero-title { font-size: clamp(26px, 5vw, 44px); font-weight: 800; color: #1e293b; line-height: 1.2; margin-bottom: 6px; font-family: 'Poppins', sans-serif; } .cs-hero-sub { font-size: clamp(20px, 4vw, 34px); font-weight: 700; color: #1e293b; margin-bottom: 18px; font-family: 'Poppins', sans-serif; } .cs-hero-desc { font-size: 15px; color: #64748b; max-width: 620px; margin: 0 auto 28px; line-height: 1.7; font-family: 'Poppins', sans-serif; } .cs-search-wrap { max-width: 500px; margin: 0 auto; position: relative; z-index: 1; } .cs-search-input { width: 100%; padding: 14px 54px 14px 22px; border-radius: 50px; border: 2px solid rgba(108,99,255,0.2); background: rgba(255,255,255,0.88); backdrop-filter: blur(10px); font-size: 15px; font-family: 'Poppins', sans-serif; outline: none; box-shadow: 0 4px 20px rgba(108,99,255,0.1); transition: all 0.2s; } .cs-search-input:focus { border-color: #6c63ff; } .cs-search-btn { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; background: linear-gradient(135deg, #6c63ff, #a78bfa); border: none; border-radius: 50%; cursor: pointer; color: #fff; font-size: 15px; } /* VIRAL BANNER */ .cs-viralbanner { background: linear-gradient(135deg, #1e3a5f, #0f2b4a); padding: 22px 28px; } .cs-viralbanner h2 { font-size: 20px; font-weight: 700; color: #22c55e; margin-bottom: 4px; font-family: 'Poppins', sans-serif; } .cs-viralbanner p { font-size: 13px; color: #94a3b8; font-family: 'Poppins', sans-serif; } /* CATEGORY BUTTONS */ .cs-cats { background: #fff; padding: 26px 16px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; border-bottom: 1px solid #e2e8f0; } .cs-catbtn { display: inline-flex; align-items: center; gap: 7px; padding: 11px 20px; border-radius: 50px; border: 2px solid #e2e8f0; background: #fff; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: #1e293b; text-decoration: none; transition: all 0.2s; cursor: pointer; } .cs-catbtn:hover, .cs-catbtn.active { background: #1e293b; color: #fff; border-color: #1e293b; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); text-decoration: none; } /* FREE PACKS HEADING */ .cs-packhead { text-align: center; padding: 44px 20px 20px; background: #f8fafc; } .cs-packhead h2 { font-size: 28px; font-weight: 800; color: #1e293b; margin-bottom: 10px; font-family: 'Poppins', sans-serif; } .cs-packhead p { font-size: 15px; color: #64748b; max-width: 580px; margin: 0 auto; line-height: 1.7; font-family: 'Poppins', sans-serif; } /* DARK MODE */ [data-cs-dark="1"] body, [data-cs-dark="1"] .cs-hero, [data-cs-dark="1"] .cs-cats, [data-cs-dark="1"] .cs-packhead { background: #0f172a !important; color: #f1f5f9 !important; } [data-cs-dark="1"] .cs-topbar { background: #0f2318 !important; } [data-cs-dark="1"] .cs-hero { background: linear-gradient(135deg, #2d1b36, #1a1040, #0f2318) !important; } [data-cs-dark="1"] .cs-hero-title, [data-cs-dark="1"] .cs-hero-sub { color: #f1f5f9 !important; } [data-cs-dark="1"] .cs-catbtn { background: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; } [data-cs-dark="1"] .cs-packhead h2 { color: #f1f5f9 !important; } /* MOBILE */ @media (max-width: 600px) { .cs-hero { padding: 44px 16px 36px; } .cs-hero-title { font-size: 24px; } .cs-getplus span { display: none; } }
Tutorial - | How to use ?
Sitemap

Read more

List Grid

All Viral Reels Templates

Everything for Edit

Made with Love by

Pixy Newspaper 11 Template is Designed Theme for Giving Enhanced look Various Features are availabl…
To Top