Blog
-
Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
/* ============================================
RUPAN CHAKMA — CUSTOM BLOG DESIGN
Twenty Twenty-Five Child Styles
============================================ */
/* ———- ১. CSS Variables (রঙ পরিবর্তন করতে এখানে বদলান) ———- */
:root {
–rc-primary: #1e3a8a; /* মূল রঙ – গাঢ় নীল */
–rc-accent: #f59e0b; /* অ্যাকসেন্ট – কমলা */
–rc-text: #1f2937; /* টেক্সট */
–rc-muted: #6b7280; /* হালকা টেক্সট */
–rc-bg: #ffffff; /* ব্যাকগ্রাউন্ড */
–rc-soft: #f9fafb; /* হালকা সেকশন */
–rc-border: #e5e7eb; /* বর্ডার */
–rc-radius: 14px; /* রেডিয়াস */
–rc-shadow: 0 4px 20px rgba(0,0,0,0.06);
–rc-shadow-hover: 0 12px 32px rgba(0,0,0,0.12);
–rc-font: ‘Hind Siliguri’, ‘Inter’, system-ui, -apple-system, sans-serif;
–rc-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ———- ২. বেস সেটিং ———- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(–rc-font);
color: var(–rc-text);
background: var(–rc-bg);
line-height: 1.75;
font-size: 17px;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
border-radius: 8px;
}
a {
color: var(–rc-primary);
text-decoration: none;
transition: var(–rc-transition);
}
a:hover { color: var(–rc-accent); }
/* ———- ৩. হেডিং টাইপোগ্রাফি (Fluid) ———- */
h1, h2, h3, h4, h5, h6 {
font-family: var(–rc-font);
font-weight: 700;
line-height: 1.3;
color: var(–rc-text);
margin-top: 1.5em;
margin-bottom: 0.6em;
}
h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
/* ———- ৪. কনটেইনার ———- */
.wp-site-blocks,
.is-layout-constrained > * {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
/* ———- ৫. হেডার (Sticky + Glass Effect) ———- */
.wp-block-template-part header,
header.wp-block-template-part {
position: sticky;
top: 0;
z-index: 999;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(–rc-border);
transition: var(–rc-transition);
}
/* সাইটের লোগো/নাম */
.wp-block-site-title a {
font-weight: 800;
font-size: 1.35rem;
letter-spacing: -0.02em;
color: var(–rc-primary);
}
/* নেভিগেশন লিংক */
.wp-block-navigation-item a {
font-weight: 500;
padding: 8px 14px;
border-radius: 8px;
position: relative;
}
.wp-block-navigation-item a::after {
content: ”;
position: absolute;
bottom: 4px;
left: 50%;
width: 0;
height: 2px;
background: var(–rc-accent);
transition: var(–rc-transition);
transform: translateX(-50%);
}
.wp-block-navigation-item a:hover::after {
width: 60%;
}
/* ———- ৬. হিরো / ফিচার্ড সেকশন ———- */
.wp-block-cover {
border-radius: var(–rc-radius);
overflow: hidden;
margin-bottom: 2rem;
}
.wp-block-cover h1,
.wp-block-cover h2 {
text-shadow: 0 2px 20px rgba(0,0,0,0.4);
letter-spacing: -0.02em;
}
/* ———- ৭. পোস্ট কার্ড গ্রিড (মূল আকর্ষণ) ———- */
.wp-block-post-template {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 28px;
list-style: none;
padding: 0;
margin: 2rem 0;
}
.wp-block-post-template li {
margin: 0 !important;
}
/* প্রতিটি পোস্ট কার্ড */
.wp-block-post {
background: var(–rc-bg);
border: 1px solid var(–rc-border);
border-radius: var(–rc-radius);
overflow: hidden;
transition: var(–rc-transition);
display: flex;
flex-direction: column;
height: 100%;
}
.wp-block-post:hover {
transform: translateY(-6px);
box-shadow: var(–rc-shadow-hover);
border-color: transparent;
}
/* ফিচার্ড ইমেজ */
.wp-block-post-featured-image {
margin: 0;
overflow: hidden;
aspect-ratio: 16 / 10;
}
.wp-block-post-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
transition: transform 0.6s ease;
}
.wp-block-post:hover .wp-block-post-featured-image img {
transform: scale(1.06);
}
/* পোস্ট টাইটেল */
.wp-block-post-title {
font-size: 1.25rem;
margin: 1rem 1.25rem 0.5rem;
line-height: 1.4;
}
.wp-block-post-title a {
color: var(–rc-text);
background-image: linear-gradient(var(–rc-accent), var(–rc-accent));
background-size: 0% 2px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: var(–rc-transition);
}
.wp-block-post-title a:hover {
background-size: 100% 2px;
color: var(–rc-primary);
}
/* এক্সের্প্ট */
.wp-block-post-excerpt {
margin: 0 1.25rem 1rem;
color: var(–rc-muted);
font-size: 0.95rem;
line-height: 1.65;
flex-grow: 1;
}
.wp-block-post-excerpt__more-text a {
display: inline-block;
margin-top: 0.5rem;
font-weight: 600;
color: var(–rc-primary);
}
/* পোস্ট মেটা (তারিখ, লেখক) */
.wp-block-post-date,
.wp-block-post-author-name,
.wp-block-post-terms {
font-size: 0.82rem;
color: var(–rc-muted);
margin: 0 1.25rem;
}
.wp-block-post-date {
margin-top: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
}
/* ———- ৮. একক পোস্ট (Single Post) ———- */
.single-post .wp-block-post-content {
max-width: 760px;
margin: 0 auto;
font-size: 1.08rem;
line-height: 1.85;
}
.single-post .wp-block-post-content p {
margin-bottom: 1.4em;
}
/* ড্রপ ক্যাপ – প্রথম অক্ষর বড় */
.single-post .wp-block-post-content > p:first-of-type::first-letter {
font-size: 3.5rem;
font-weight: 800;
float: left;
line-height: 0.9;
margin: 0.1em 0.12em 0 0;
color: var(–rc-primary);
}
/* ব্লককোট */
.wp-block-quote {
border-left: 4px solid var(–rc-accent);
background: var(–rc-soft);
padding: 1.25rem 1.5rem;
margin: 2rem 0;
border-radius: 0 var(–rc-radius) var(–rc-radius) 0;
font-style: italic;
font-size: 1.1rem;
}
/* কোড ব্লক */
.wp-block-code,
pre {
background: #1e293b;
color: #e2e8f0;
padding: 1.25rem;
border-radius: var(–rc-radius);
overflow-x: auto;
font-size: 0.9rem;
line-height: 1.6;
}
/* টেবিল রেসপন্সিভ */
.wp-block-table {
overflow-x: auto;
display: block;
}
/* ———- ৯. বাটন ———- */
.wp-block-button__link,
button,
input[type=”submit”] {
background: var(–rc-primary);
color: #fff !important;
padding: 12px 28px;
border-radius: 999px;
font-weight: 600;
border: none;
cursor: pointer;
transition: var(–rc-transition);
font-size: 0.95rem;
letter-spacing: 0.02em;
}
.wp-block-button__link:hover,
button:hover,
input[type=”submit”]:hover {
background: var(–rc-accent);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
}
/* ———- ১০. ফর্ম (কমেন্ট, সার্চ) ———- */
input[type=”text”],
input[type=”email”],
input[type=”url”],
input[type=”search”],
textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid var(–rc-border);
border-radius: 10px;
font-family: var(–rc-font);
font-size: 1rem;
transition: var(–rc-transition);
background: var(–rc-bg);
}
input:focus,
textarea:focus {
outline: none;
border-color: var(–rc-primary);
box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
}
/* ———- ১১. ফুটার ———- */
footer.wp-block-template-part,
.wp-block-template-part footer {
background: var(–rc-soft);
border-top: 1px solid var(–rc-border);
margin-top: 4rem;
padding: 2.5rem 0;
text-align: center;
color: var(–rc-muted);
font-size: 0.9rem;
}
/* ———- ১২. স্ক্রল অ্যানিমেশন ———- */
@keyframes rcFadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.wp-block-post,
.wp-block-cover,
.wp-block-group {
animation: rcFadeUp 0.6s ease both;
}
/* ———- ১৩. মোবাইল রেসপন্সিভ (মূল অংশ) ———- */
@media (max-width: 782px) {
body { font-size: 16px; }
.wp-site-blocks,
.is-layout-constrained > * {
padding-left: 16px;
padding-right: 16px;
}
/* গ্রিড এক কলামে */
.wp-block-post-template {
grid-template-columns: 1fr;
gap: 20px;
}
/* ড্রপ ক্যাপ মোবাইলে ছোট */
.single-post .wp-block-post-content > p:first-of-type::first-letter {
font-size: 2.5rem;
}
/* হেডার padding কম */
header.wp-block-template-part {
padding: 10px 0;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.35rem; }
}
@media (max-width: 480px) {
body { font-size: 15px; line-height: 1.7; }
.wp-block-post-template {
gap: 16px;
}
.wp-block-post-title {
font-size: 1.1rem;
margin: 0.75rem 1rem 0.4rem;
}
.wp-block-post-excerpt { margin: 0 1rem 0.75rem; }
.wp-block-button__link { padding: 10px 22px; font-size: 0.9rem; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.2rem; }
}
/* ———- ১৪. প্রিন্ট স্টাইল ———- */
@media print {
header, footer, .wp-block-navigation { display: none; }
body { font-size: 12pt; color: #000; }
}