Subscribe to VB Sambad

Get the latest news, articles and updates directly in your inbox.

Comments

Comments feature will be available soon.

/*========================================================== POST HERO PART-2 Breadcrumb • Badges • Title • Meta • Toolbar ==========================================================*/ /*========================================================== BREADCRUMB ==========================================================*/ .post-breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:15px; margin-bottom:25px; color:var(--text-light); } .post-breadcrumb a{ font-weight:500; color:var(--text-light); } .post-breadcrumb a:hover{ color:var(--primary); } .post-breadcrumb strong{ font-weight:600; color:var(--dark); } .post-breadcrumb i{ font-size:12px; } /*========================================================== ARTICLE HEADER ==========================================================*/ .article-header{ margin-bottom:35px; animation:fadeUp .6s ease; } /*========================================================== BADGES ==========================================================*/ .article-badges{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:25px; } .badge-category, .badge-breaking, .badge-featured, .badge-cover, .badge-editor, .badge-trending{ display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:50px; font-size:14px; font-weight:600; transition:var(--transition); } .badge-category{ background:#fff7ed; color:var(--primary); border:1px solid #fed7aa; } .badge-breaking{ background:#fee2e2; color:#dc2626; } .badge-featured{ background:#fef3c7; color:#d97706; } .badge-cover{ background:#ede9fe; color:#6d28d9; } .badge-editor{ background:#dbeafe; color:#2563eb; } .badge-trending{ background:#dcfce7; color:#15803d; } .article-badges span:hover, .article-badges a:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); } /*========================================================== TITLE ==========================================================*/ .post-title{ font-size:54px; font-weight:800; line-height:1.18; margin-bottom:18px; color:var(--dark); letter-spacing:-1px; } .post-subtitle{ font-size:22px; line-height:1.8; font-weight:400; color:var(--text-light); margin-bottom:35px; max-width:980px; } /*========================================================== POST META ==========================================================*/ .post-meta{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-bottom:35px; padding-bottom:25px; border-bottom:1px solid var(--border); } .meta-item{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:500; color:var(--text-light); } .meta-item i{ color:var(--primary); font-size:15px; width:18px; text-align:center; } .meta-item a{ color:var(--dark); font-weight:600; } .meta-item a:hover{ color:var(--primary); } /*========================================================== TOOLS ==========================================================*/ .post-tools{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:35px; } .post-tools button{ display:flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 18px; background:#fff; border:1px solid var(--border); border-radius:50px; font-size:15px; font-weight:600; color:var(--dark); transition:var(--transition); box-shadow:var(--shadow-sm); } .post-tools button i{ font-size:15px; color:var(--primary); } .post-tools button:hover{ background:var(--primary); border-color:var(--primary); color:#fff; transform:translateY(-3px); box-shadow:var(--shadow); } .post-tools button:hover i{ color:#fff; } /*========================================================== TOOL ACTIVE ==========================================================*/ .post-tools button.active{ background:var(--primary); border-color:var(--primary); color:#fff; } .post-tools button.active i{ color:#fff; } /*========================================================== PRINT BUTTON ==========================================================*/ .post-tools button:last-child{ background:#f8fafc; } .post-tools button:last-child:hover{ background:var(--secondary); border-color:var(--secondary); } /*========================================================== FEATURED IMAGE ==========================================================*/ .featured-image{ position:relative; overflow:hidden; border-radius:28px; margin-bottom:18px; box-shadow:var(--shadow-lg); } .featured-image img{ width:100%; height:auto; transition:.7s ease; } .featured-image:hover img{ transform:scale(1.04); } .featured-image figcaption{ position:absolute; left:0; right:0; bottom:0; padding:14px 20px; background:linear-gradient( 180deg, transparent, rgba(0,0,0,.75) ); color:#fff; font-size:14px; display:flex; align-items:center; gap:10px; font-weight:500; } .featured-image figcaption i{ color:#ffd54f; } /*========================================================== FEATURED IMAGE LOADER ==========================================================*/ .featured-image{ background:#f3f4f6; min-height:260px; } /*========================================================== ARTICLE HERO SPACING ==========================================================*/ .article-header+.featured-image{ margin-top:10px; } /*========================================================== SMALL UTILITIES ==========================================================*/ .text-muted{ color:var(--text-light); } .fw-600{ font-weight:600; } .fw-700{ font-weight:700; } /*========================================================== VB SAMBAD CMS v5.0 PART-3 TABLE OF CONTENTS QUOTE ARTICLE CONTENT ==========================================================*/ /*========================================================== TABLE OF CONTENTS ==========================================================*/ .table-of-content{ background:#fff; border:1px solid var(--border); border-radius:24px; padding:30px; margin:45px 0; box-shadow:var(--shadow); } .toc-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; } .toc-header h3{ margin:0; font-size:24px; display:flex; align-items:center; gap:12px; } .toc-header h3 i{ color:var(--primary); } .toc-toggle{ width:42px; height:42px; border-radius:50%; background:#fff7ed; color:var(--primary); border:none; transition:var(--transition); } .toc-toggle:hover{ background:var(--primary); color:#fff; } #tocList{ display:flex; flex-direction:column; gap:12px; } #tocList li{ margin:0; } #tocList a{ display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:14px; font-size:15px; font-weight:500; color:var(--dark); transition:var(--transition); } #tocList a::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--primary); flex-shrink:0; } #tocList a:hover{ background:#fff7ed; padding-left:22px; color:var(--primary); } /*========================================================== QUOTE ==========================================================*/ .post-quote{ position:relative; margin:50px 0; padding:40px; background:linear-gradient(135deg,#fff7ed,#ffffff); border-left:6px solid var(--primary); border-radius:24px; box-shadow:var(--shadow); overflow:hidden; } .post-quote i{ position:absolute; right:25px; top:20px; font-size:65px; opacity:.08; color:var(--primary); } .post-quote p{ font-size:24px; font-weight:600; line-height:1.8; margin:0; color:var(--dark); } /*========================================================== POST CONTENT ==========================================================*/ .post-content{ font-size:20px; line-height:2; color:var(--text); word-break:break-word; overflow-wrap:break-word; } .post-content>*:last-child{ margin-bottom:0; } /*========================================================== PARAGRAPH ==========================================================*/ .post-content p{ font-size:20px; line-height:2; margin-bottom:28px; color:var(--text); } /*========================================================== HEADINGS ==========================================================*/ .post-content h2{ font-size:40px; margin:70px 0 25px; padding-bottom:12px; border-bottom:3px solid var(--primary); } .post-content h3{ font-size:32px; margin:55px 0 22px; } .post-content h4{ font-size:28px; margin:40px 0 18px; } .post-content h5{ font-size:24px; margin:35px 0 15px; } .post-content h6{ font-size:20px; margin:30px 0 12px; } /*========================================================== LINK ==========================================================*/ .post-content a{ color:var(--secondary); font-weight:600; text-decoration:none; border-bottom:2px solid transparent; transition:var(--transition); } .post-content a:hover{ color:var(--primary); border-color:var(--primary); } /*========================================================== IMAGE ==========================================================*/ .post-content img{ display:block; margin:40px auto; max-width:100%; height:auto; border-radius:24px; box-shadow:var(--shadow-lg); transition:.5s; cursor:pointer; } .post-content img:hover{ transform:scale(1.02); } /*========================================================== FIGURE ==========================================================*/ .post-content figure{ margin:40px auto; text-align:center; } .post-content figcaption{ margin-top:14px; font-size:14px; color:var(--text-light); font-style:italic; } /*========================================================== LIST ==========================================================*/ .post-content ul, .post-content ol{ margin:25px 0 30px 35px; } .post-content li{ margin-bottom:14px; line-height:1.9; } /*========================================================== TABLE ==========================================================*/ .post-content table{ width:100%; border-collapse:collapse; margin:40px 0; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); } .post-content table th{ background:var(--primary); color:#fff; padding:16px; text-align:left; } .post-content table td{ padding:15px; border:1px solid var(--border); background:#fff; } .post-content table tr:nth-child(even) td{ background:#f8fafc; } /*========================================================== CODE ==========================================================*/ .post-content pre{ background:#0f172a; color:#f8fafc; padding:24px; border-radius:18px; overflow:auto; margin:35px 0; font-size:15px; } .post-content code{ font-family:Consolas,monospace; } /*========================================================== INLINE CODE ==========================================================*/ .post-content p code, .post-content li code{ background:#fff7ed; padding:3px 8px; border-radius:8px; color:var(--primary); font-size:.92em; } /*========================================================== HR ==========================================================*/ .post-content hr{ border:none; height:1px; background:var(--border); margin:60px 0; } /*========================================================== EMBED ==========================================================*/ .post-content iframe, .post-content video{ width:100%; aspect-ratio:16/9; border:none; border-radius:24px; margin:40px 0; box-shadow:var(--shadow-lg); } /*========================================================== HIGHLIGHT ==========================================================*/ .post-content mark{ background:#fde68a; padding:2px 6px; border-radius:4px; } /*========================================================== BLOCKQUOTE INSIDE CONTENT ==========================================================*/ .post-content blockquote{ margin:40px 0; padding:25px 30px; background:#f8fafc; border-left:5px solid var(--secondary); border-radius:18px; font-style:italic; font-size:20px; } /*========================================================== DROP CAP ==========================================================*/ .post-content p:first-of-type:first-letter{ float:left; font-size:72px; line-height:60px; padding-right:10px; font-weight:700; color:var(--primary); } /*========================================================== TEXT ALIGNMENT ==========================================================*/ .post-content .text-center{ text-align:center; } .post-content .text-right{ text-align:right; } /*========================================================== VB SAMBAD CMS v5.0 PART-4 TAGS • SHARE • ARTICLE INFO • THANK YOU ==========================================================*/ /*========================================================== POST TAGS ==========================================================*/ .post-tags{ margin:70px 0 50px; padding:35px; background:#fff; border-radius:28px; box-shadow:var(--shadow); border:1px solid var(--border); } .post-tags h3{ display:flex; align-items:center; gap:12px; margin-bottom:25px; font-size:26px; } .post-tags h3 i{ color:var(--primary); } .tags-wrapper{ display:flex; flex-wrap:wrap; gap:14px; } .tag-item{ display:inline-flex; align-items:center; padding:12px 22px; background:#f8fafc; border:1px solid var(--border); border-radius:50px; font-size:15px; font-weight:600; transition:var(--transition); color:var(--dark); } .tag-item:hover{ background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-3px); box-shadow:var(--shadow); } /*========================================================== SOCIAL SHARE ==========================================================*/ .share-box{ margin:60px 0; padding:35px; background:#fff; border-radius:28px; box-shadow:var(--shadow); border:1px solid var(--border); } .share-box h3{ display:flex; align-items:center; gap:12px; margin-bottom:28px; font-size:26px; } .share-box h3 i{ color:var(--primary); } .share-buttons{ display:flex; flex-wrap:wrap; gap:15px; } .share{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#f8fafc; border:1px solid var(--border); font-size:20px; transition:var(--transition); color:var(--dark); } .share:hover{ transform:translateY(-5px); box-shadow:var(--shadow); color:#fff; } .share.facebook:hover{ background:#1877F2; } .share.twitter:hover{ background:#000; } .share.linkedin:hover{ background:#0A66C2; } .share.whatsapp:hover{ background:#25D366; } .share.telegram:hover{ background:#229ED9; } .share.email:hover{ background:#dc2626; } .share.native:hover{ background:var(--primary); } /*========================================================== ARTICLE INFORMATION ==========================================================*/ .article-information{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:60px 0; } .info-card{ background:#fff; border-radius:24px; padding:28px; display:flex; align-items:center; gap:18px; box-shadow:var(--shadow); border:1px solid var(--border); transition:var(--transition); } .info-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); } .info-icon{ width:62px; height:62px; border-radius:50%; background:#fff7ed; display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--primary); flex-shrink:0; } .info-card span{ display:block; font-size:14px; color:var(--text-light); margin-bottom:4px; } .info-card strong{ font-size:18px; color:var(--dark); } /*========================================================== READING COMPLETE ==========================================================*/ .reading-complete{ margin:70px 0; padding:60px; border-radius:30px; background:linear-gradient(135deg,#fff7ed,#ffffff); text-align:center; box-shadow:var(--shadow); border:1px solid #fde68a; } .complete-icon{ width:95px; height:95px; margin:auto; margin-bottom:25px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--primary); color:#fff; font-size:42px; box-shadow:0 15px 40px rgba(249,115,22,.25); } .reading-complete h3{ font-size:34px; margin-bottom:18px; } .reading-complete p{ font-size:19px; max-width:700px; margin:auto; color:var(--text-light); line-height:1.9; } /*========================================================== ANIMATION ==========================================================*/ .post-tags, .share-box, .article-information, .reading-complete{ animation:fadeUp .7s ease; } /*========================================================== HOVER GLOW ==========================================================*/ .post-tags:hover, .share-box:hover{ box-shadow:0 20px 50px rgba(15,23,42,.10); } /*========================================================== DIVIDER ==========================================================*/ .section-divider{ width:100%; height:1px; background:var(--border); margin:70px 0; } /*========================================================== RESPONSIVE ==========================================================*/ @media(max-width:992px){ .article-information{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .share-buttons{ justify-content:center; } .article-information{ grid-template-columns:1fr; } .info-card{ padding:22px; } .reading-complete{ padding:35px 25px; } .complete-icon{ width:75px; height:75px; font-size:30px; } .reading-complete h3{ font-size:28px; } } /*========================================================== VB SAMBAD CMS v5.0 PART-5 WRITER & AUTHOR ==========================================================*/ /*========================================================== COMMON PROFILE CARD ==========================================================*/ .writer-card, .author-card{ position:relative; margin:70px 0; padding:40px; background:#fff; border-radius:32px; border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; transition:var(--transition); } .writer-card:hover, .author-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); } /*========================================================== TOP BORDER ==========================================================*/ .writer-card::before, .author-card::before{ content:""; position:absolute; left:0; top:0; width:100%; height:6px; background:linear-gradient( 90deg, var(--primary), var(--secondary) ); } /*========================================================== TOP AREA ==========================================================*/ .writer-top, .author-top{ display:flex; align-items:center; gap:35px; margin-bottom:35px; } /*========================================================== AVATAR ==========================================================*/ .writer-avatar, .author-avatar{ flex-shrink:0; position:relative; } /*========================================================== IMAGE OUTER RING ==========================================================*/ .writer-avatar::before, .author-avatar::before{ content:""; position:absolute; inset:-8px; border-radius:50%; background:linear-gradient( 135deg, var(--primary), #fbbf24, var(--secondary) ); z-index:0; } /*========================================================== PROFILE IMAGE ==========================================================*/ .writer-avatar img, .author-avatar img{ position:relative; z-index:1; width:160px; height:160px; object-fit:cover; border-radius:50%; border:6px solid #fff; background:#fff; box-shadow: 0 15px 35px rgba(0,0,0,.15); transition:.5s; } .writer-card:hover img, .author-card:hover img{ transform:scale(1.08) rotate(-2deg); } /*========================================================== DETAILS ==========================================================*/ .writer-details, .author-details{ flex:1; min-width:0; } .writer-details h2, .author-details h2{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:34px; margin-bottom:15px; } /*========================================================== VERIFIED BADGE ==========================================================*/ .verified-badge{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; background:#dcfce7; color:#15803d; font-size:13px; font-weight:700; border-radius:50px; } .verified-badge i{ font-size:14px; } /*========================================================== DESIGNATION ==========================================================*/ .writer-designation, .author-role{ display:inline-flex; align-items:center; gap:10px; padding:12px 18px; margin-bottom:25px; background:#fff7ed; color:var(--primary); border-radius:50px; font-weight:600; } .author-role{ background:#eff6ff; color:var(--secondary); } /*========================================================== STATISTICS ==========================================================*/ .writer-stats, .author-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:10px; } .writer-stats div, .author-stats div{ background:#f8fafc; padding:22px; border-radius:18px; text-align:center; border:1px solid var(--border); transition:var(--transition); } .writer-stats div:hover, .author-stats div:hover{ background:#fff7ed; border-color:#fed7aa; transform:translateY(-4px); } .writer-stats strong, .author-stats strong{ display:block; font-size:28px; font-weight:700; color:var(--dark); margin-bottom:6px; } .writer-stats span, .author-stats span{ font-size:14px; color:var(--text-light); } /*========================================================== BIO ==========================================================*/ .writer-bio, .author-bio{ margin:35px 0; padding:28px; background:#f8fafc; border-left:5px solid var(--primary); border-radius:20px; font-size:17px; line-height:1.9; } /*========================================================== CONTACT BUTTONS ==========================================================*/ .writer-contact{ display:flex; flex-wrap:wrap; gap:15px; margin-bottom:25px; } .writer-contact .btn{ padding:12px 22px; font-size:15px; font-weight:600; } .writer-contact .btn i{ margin-right:8px; } /*========================================================== SOCIAL ==========================================================*/ .writer-social, .author-social{ display:flex; flex-wrap:wrap; gap:15px; margin:25px 0; } .writer-social a, .author-social a{ width:50px; height:50px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#f8fafc; border:1px solid var(--border); font-size:18px; color:var(--dark); transition:var(--transition); } .writer-social a:hover, .author-social a:hover{ background:var(--primary); border-color:var(--primary); color:#fff; transform:translateY(-5px); box-shadow:var(--shadow); } /*========================================================== FOOTER BUTTON ==========================================================*/ .writer-footer, .author-footer{ margin-top:30px; } .writer-footer .btn, .author-footer .btn{ padding:14px 28px; font-size:16px; font-weight:700; border-radius:50px; } /*========================================================== HOVER EFFECT ==========================================================*/ .writer-card:hover .writer-details h2, .author-card:hover .author-details h2{ color:var(--primary); } /*========================================================== RESPONSIVE ==========================================================*/ @media(max-width:992px){ .writer-top, .author-top{ flex-direction:column; text-align:center; } .writer-details h2, .author-details h2{ justify-content:center; } .writer-stats, .author-stats{ grid-template-columns:1fr; } .writer-contact, .writer-social, .author-social{ justify-content:center; } } @media(max-width:576px){ .writer-card, .author-card{ padding:25px; } .writer-avatar img, .author-avatar img{ width:120px; height:120px; } .writer-details h2, .author-details h2{ font-size:28px; } .writer-bio, .author-bio{ padding:20px; font-size:16px; } .writer-footer .btn, .author-footer .btn{ width:100%; } } /*========================================================== VB SAMBAD CMS v5.0 PART-6 RECOMMENDATION • PREVIOUS • NEXT • RELATED ==========================================================*/ /*========================================================== SECTION ==========================================================*/ .recommendation-section{ margin:80px 0; } .recommendation-section:last-child{ margin-bottom:20px; } /*========================================================== TITLE ==========================================================*/ .recommendation-section .section-title{ margin-bottom:35px; padding-bottom:15px; border-bottom:2px solid var(--border); } .recommendation-section .section-title h2{ font-size:32px; font-weight:700; display:flex; align-items:center; gap:14px; } .recommendation-section .section-title h2 i{ color:var(--primary); } /*========================================================== PREVIOUS / NEXT ==========================================================*/ .article-navigation{ margin:70px 0; } .article-nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:30px; background:#fff; border-radius:28px; border:1px solid var(--border); box-shadow:var(--shadow); height:100%; transition:var(--transition); } .article-nav:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:#fed7aa; } .nav-icon{ width:70px; height:70px; border-radius:50%; background:#fff7ed; display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--primary); flex-shrink:0; transition:var(--transition); } .article-nav:hover .nav-icon{ background:var(--primary); color:#fff; transform:scale(1.1); } .nav-content{ flex:1; } .nav-content small{ display:block; font-size:14px; margin-bottom:10px; color:var(--text-light); } .nav-content h4{ font-size:22px; line-height:1.45; margin:0; color:var(--dark); transition:var(--transition); } .article-nav:hover h4{ color:var(--primary); } /*========================================================== CARD ==========================================================*/ .recommend-card{ display:block; height:100%; background:#fff; border-radius:24px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); transition:var(--transition); } .recommend-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-lg); } /*========================================================== IMAGE ==========================================================*/ .recommend-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:.6s; } .recommend-card:hover img{ transform:scale(1.08); } /*========================================================== BODY ==========================================================*/ .recommend-body{ padding:24px; } .recommend-category{ display:inline-flex; padding:6px 14px; margin-bottom:16px; background:#fff7ed; border-radius:50px; font-size:13px; font-weight:700; color:var(--primary); } .recommend-body h4{ font-size:21px; line-height:1.5; margin-bottom:18px; transition:var(--transition); } .recommend-card:hover h4{ color:var(--primary); } /*========================================================== META ==========================================================*/ .recommend-meta{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:14px; color:var(--text-light); } .recommend-meta span{ display:flex; align-items:center; gap:8px; } .recommend-meta i{ color:var(--primary); } /*========================================================== DATE ==========================================================*/ .recommend-body>span{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-light); } .recommend-body>span i{ color:var(--primary); } /*========================================================== OVERLAY EFFECT ==========================================================*/ .recommend-card{ position:relative; } .recommend-card::after{ content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:linear-gradient( 90deg, var(--primary), var(--secondary) ); transform:scaleX(0); transform-origin:left; transition:.4s; } .recommend-card:hover::after{ transform:scaleX(1); } /*========================================================== IMAGE SHADOW ==========================================================*/ .recommend-card img{ background:#f3f4f6; } /*========================================================== GRID GAP ==========================================================*/ .recommendation-section .row{ row-gap:28px; } /*========================================================== ANIMATION ==========================================================*/ .recommend-card{ animation:fadeUp .6s ease; } /*========================================================== EMPTY ==========================================================*/ .no-post{ padding:40px; background:#fff; border-radius:20px; text-align:center; border:1px dashed var(--border); color:var(--text-light); } /*========================================================== RESPONSIVE ==========================================================*/ @media(max-width:992px){ .article-nav{ padding:24px; } .nav-content h4{ font-size:19px; } } @media(max-width:768px){ .article-navigation .row{ row-gap:20px; } .article-nav{ flex-direction:column; text-align:center; } .nav-content{ text-align:center!important; } .recommend-body{ padding:18px; } .recommend-body h4{ font-size:18px; } } @media(max-width:576px){ .recommendation-section{ margin:60px 0; } .recommendation-section .section-title h2{ font-size:26px; } .nav-icon{ width:56px; height:56px; font-size:22px; } } /*========================================================== VB SAMBAD CMS v5.0 POST.CSS PART-7 FINAL NEWSLETTER • COMMENTS • BACK TO TOP READING MODE • TOAST • RESPONSIVE • PRINT ==========================================================*/ /*========================================================== NEWSLETTER ==========================================================*/ .newsletter-box{ margin:90px 0 60px; padding:60px; background:linear-gradient(135deg,#fff7ed,#ffffff); border-radius:32px; border:1px solid #fed7aa; box-shadow:var(--shadow-lg); text-align:center; overflow:hidden; position:relative; } .newsletter-box::before{ content:""; position:absolute; width:320px; height:320px; right:-120px; top:-120px; border-radius:50%; background:rgba(249,115,22,.08); } .newsletter-content{ position:relative; z-index:2; } .newsletter-content h2{ font-size:40px; margin-bottom:15px; } .newsletter-content h2 i{ color:var(--primary); margin-right:10px; } .newsletter-content p{ font-size:18px; color:var(--text-light); max-width:720px; margin:0 auto 30px; } .newsletter-form{ display:flex; justify-content:center; gap:15px; max-width:720px; margin:auto; } .newsletter-form input{ height:58px; border-radius:50px; border:2px solid var(--border); padding:0 24px; font-size:16px; flex:1; transition:var(--transition); } .newsletter-form input:focus{ border-color:var(--primary); box-shadow:0 0 0 4px rgba(249,115,22,.12); } .newsletter-form button{ height:58px; padding:0 32px; } /*========================================================== COMMENTS ==========================================================*/ .comments-section{ margin:70px 0; padding:40px; background:#fff; border-radius:30px; box-shadow:var(--shadow); border:1px solid var(--border); } .comments-section h2{ font-size:30px; margin-bottom:25px; display:flex; align-items:center; gap:12px; } .comments-section h2 i{ color:var(--primary); } #commentsContainer{ padding:30px; border-radius:20px; background:#f8fafc; text-align:center; color:var(--text-light); } /*========================================================== BACK TO TOP ==========================================================*/ .back-to-top{ position:fixed; right:25px; bottom:25px; width:58px; height:58px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; border:none; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(30px); transition:.35s; box-shadow:0 12px 30px rgba(249,115,22,.35); z-index:999; } .back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); } .back-to-top:hover{ background:var(--primary-dark); transform:translateY(-5px); } /*========================================================== READING MODE ==========================================================*/ body.reading-mode{ background:#1c1917; color:#e7e5e4; transition:.35s; } body.reading-mode .post-wrapper{ background:#292524; } body.reading-mode .post-content{ color:#e7e5e4; } body.reading-mode .post-content h1, body.reading-mode .post-content h2, body.reading-mode .post-content h3, body.reading-mode .post-content h4, body.reading-mode .post-content h5, body.reading-mode .post-content h6{ color:#fff; } body.reading-mode .post-content a{ color:#fdba74; } body.reading-mode .table-of-content, body.reading-mode .share-box, body.reading-mode .writer-card, body.reading-mode .author-card, body.reading-mode .reading-complete, body.reading-mode .newsletter-box, body.reading-mode .comments-section, body.reading-mode .post-tags{ background:#292524; border-color:#44403c; } body.reading-mode .info-card, body.reading-mode .recommend-card{ background:#292524; border-color:#44403c; } body.reading-mode .post-tools button{ background:#292524; color:#fff; border-color:#44403c; } /*========================================================== TOAST ==========================================================*/ .vb-toast{ position:fixed; top:30px; right:30px; background:#0f172a; color:#fff; padding:16px 24px; border-radius:14px; font-weight:600; opacity:0; transform:translateY(-20px); transition:.3s; z-index:999999; box-shadow:var(--shadow-lg); } .vb-toast.show{ opacity:1; transform:translateY(0); } .vb-toast.success{ background:#16a34a; } .vb-toast.error{ background:#dc2626; } /*========================================================== LISTEN BUTTON ==========================================================*/ .listening{ animation:pulseAudio 1s infinite; } @keyframes pulseAudio{ 0%{ transform:scale(1); } 50%{ transform:scale(1.08); } 100%{ transform:scale(1); } } /*========================================================== TRANSLATE ==========================================================*/ .translating{ opacity:.65; pointer-events:none; } /*========================================================== PRINT ==========================================================*/ @media print{ header, footer, .post-tools, .writer-social, .author-social, .share-box, .newsletter-box, .comments-section, .back-to-top, .article-navigation, .recommendation-section{ display:none!important; } body{ background:#fff; color:#000; } .post-wrapper{ box-shadow:none; padding:0; } .post-content{ font-size:15px; line-height:1.7; } a{ color:#000; text-decoration:none; } } /*========================================================== TABLET ==========================================================*/ @media(max-width:992px){ .post-wrapper{ padding:28px; } .post-title{ font-size:40px; } .newsletter-box{ padding:40px; } } /*========================================================== MOBILE ==========================================================*/ @media(max-width:768px){ .post-page{ padding:20px 0 40px; } .post-wrapper{ padding:20px; border-radius:20px; } .post-title{ font-size:30px; line-height:1.35; } .post-subtitle{ font-size:18px; } .post-content{ font-size:18px; line-height:1.9; } .post-content p{ font-size:18px; } .newsletter-form{ flex-direction:column; } .newsletter-form button{ width:100%; } .newsletter-box{ padding:30px 22px; } .newsletter-content h2{ font-size:30px; } .back-to-top{ right:15px; bottom:15px; width:50px; height:50px; } } /*========================================================== SMALL MOBILE ==========================================================*/ @media(max-width:480px){ .post-title{ font-size:26px; } .post-meta{ gap:12px; } .post-tools{ justify-content:center; } .post-tools button{ width:48%; } .post-content h2{ font-size:28px; } .post-content h3{ font-size:24px; } .newsletter-content h2{ font-size:26px; } .comments-section{ padding:25px; } } /*========================================================== LIGHTBOX ==========================================================*/ .vb-lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; z-index:999999; animation:fadeUp .25s ease; } .vb-lightbox-content{ position:relative; max-width:95%; max-height:95%; } .vb-lightbox img{ max-width:100%; max-height:90vh; border-radius:16px; box-shadow:0 25px 60px rgba(0,0,0,.45); } .vb-close{ position:absolute; top:-45px; right:0; font-size:42px; font-weight:700; color:#fff; cursor:pointer; transition:.3s; } .vb-close:hover{ color:#f97316; transform:rotate(90deg); } /*========================================================== END OF FILE ==========================================================*/