/* * ══════════════════════════════════════════════════════════════ * FORMITY V3 — BLOG PAGE PATCH * File: blog_patch.css * * INSTRUCTIONS: * In your blog template (blog.html / blog/index.html): * * Step 1 — Add Google Fonts if not already in : * * * Step 2 — Add this as * * Step 3 — No HTML changes needed. * ══════════════════════════════════════════════════════════════ */ /* ── DESIGN TOKENS ── */ :root { --c:#FAF8F4; --c2:#F3EDE3; --c3:#EAE0D0; --ink:#1A1410; --ink2:#4A3F35; --ink3:#80706A; --ink4:#B0A098; --tc:#BF5E28; --tc-l:#F3EAE3; --tc-m:#E8946C; --tl:#1A957A; --tl-l:#E2F4EE; --pl:#42336A; --pl-l:#ECEAF5; --am:#A86E14; --am-l:#F6F0E2; --border:rgba(160,140,120,0.18); --border2:rgba(160,140,120,0.36); --r:10px; --r2:16px; --ease:cubic-bezier(.4,0,.2,1); } /* ── BODY ── */ body { font-family: 'DM Sans', sans-serif !important; background: var(--c) !important; color: var(--ink) !important; } /* ── HEADINGS ── */ h1, h2, h3, h4 { font-family: 'Lora', serif !important; color: var(--ink) !important; } /* ── NAV ── */ nav, nav.bg-white { background: rgba(250,248,244,0.94) !important; backdrop-filter: blur(16px) !important; border-bottom: 1px solid var(--border) !important; } nav a { color: var(--ink2) !important; } nav a:hover { color: var(--ink) !important; } /* NEET UG pill */ nav a[href="/"], nav a.text-blue-600.bg-blue-50 { background: var(--tc-l) !important; color: var(--tc) !important; border-radius: 20px !important; font-weight: 500 !important; } /* NEET PG pill */ nav a[href="/pg/"], nav a.text-teal-600, nav a.text-purple-600 { background: var(--pl-l) !important; color: var(--pl) !important; border-radius: 20px !important; font-weight: 500 !important; } /* Active nav — Blog */ nav a.text-purple-600.bg-purple-50.font-semibold { background: var(--tc-l) !important; color: var(--tc) !important; border-radius: 20px !important; } nav a.font-semibold.text-purple-600 { background: var(--tc-l) !important; color: var(--tc) !important; } /* Mobile nav active item */ nav a.block.py-2.text-purple-600.bg-purple-50 { background: var(--tc-l) !important; color: var(--tc) !important; } /* ── HERO ── Blog hero: was dark purple .gradient-bg Now: terracotta gradient, same warm palette */ .gradient-bg { background: linear-gradient(135deg, #2C1A0E 0%, #BF5E28 60%, #E8946C 100%) !important; color: #fff !important; } .gradient-bg * { color: #fff !important; } .gradient-bg h1 { font-family: 'Lora', serif !important; font-size: clamp(28px, 5vw, 48px); font-weight: 600; } .gradient-bg p { font-family: 'DM Sans', sans-serif !important; font-weight: 300; opacity: .9; } /* ── BODY BACKGROUND ── */ .bg-gray-50, .min-h-screen, body { background: var(--c) !important; } .bg-white { background: #fff !important; } .bg-gray-100 { background: var(--c2) !important; } /* ── FILTER PILLS / CATEGORY CHIPS ── */ /* Default (inactive) chip */ .tag-chip { background: var(--c2) !important; color: var(--ink2) !important; border: 1px solid var(--border2) !important; border-radius: 20px !important; font-family: 'DM Sans', sans-serif !important; font-weight: 500 !important; transition: all .15s !important; } .tag-chip:hover { background: var(--tc-l) !important; color: var(--tc) !important; border-color: rgba(191,94,40,.3) !important; } /* Active chip (currently selected category) */ .tag-chip.bg-blue-600, .tag-chip.text-white, button.tag-chip[class*="bg-blue"] { background: var(--tc) !important; color: #fff !important; border-color: var(--tc) !important; } /* Row 2 filter chips (state / topic) */ .tag-chip.bg-gray-200, .tag-chip.bg-gray-100 { background: var(--c2) !important; color: var(--ink2) !important; border-color: var(--border2) !important; } /* ── BLOG CARDS ── */ .glass, .blog-card, a.glass, a.blog-card { background: #fff !important; border: 1px solid var(--border) !important; border-radius: var(--r2) !important; color: var(--ink) !important; text-decoration: none !important; transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s !important; } .glass:hover, .blog-card:hover, a.glass:hover, a.blog-card:hover { border-color: var(--border2) !important; box-shadow: 0 8px 28px rgba(80,40,10,.09) !important; transform: translateY(-2px) !important; } /* Card date */ .blog-card .text-gray-500, .glass .text-gray-500 { color: var(--ink3) !important; font-size: 12px; } /* Card title */ .blog-card h2, .blog-card h3, .glass h2, .glass h3 { font-family: 'Lora', serif !important; color: var(--ink) !important; } /* Card excerpt */ .blog-card p, .glass p { color: var(--ink2) !important; font-weight: 300; } /* "Read more →" */ .blog-card a[class*="text-"], .glass a[class*="text-"], a.text-purple-600, a.text-blue-600, a.read-more { color: var(--tc) !important; font-weight: 500 !important; text-decoration: none !important; } a.text-purple-600:hover, a.text-blue-600:hover { opacity: .8 !important; } /* "LATEST" label badge */ .bg-blue-600.text-white, span[class*="bg-blue"][class*="text-white"], div[class*="bg-blue"][class*="text-white"] { background: var(--tc) !important; color: #fff !important; border-radius: 6px !important; } /* ── POST TAGS inside cards (NEET UG, NEET PG, Counselling etc.) ── */ .bg-gray-100.text-gray-700, .bg-gray-100.text-gray-600, .rounded-full.bg-gray-100 { background: var(--c2) !important; color: var(--ink2) !important; border: 1px solid var(--border) !important; border-radius: 20px !important; } /* ── PAGINATION ── */ button[class*="bg-blue"], a[class*="bg-blue"][class*="rounded"] { background: var(--tc) !important; color: #fff !important; } button[class*="bg-blue"]:hover { background: #A04A18 !important; } /* ── TEXT OVERRIDES ── */ .text-gray-900, .text-gray-800 { color: var(--ink) !important; } .text-gray-700, .text-gray-600 { color: var(--ink2) !important; } .text-gray-500, .text-gray-400 { color: var(--ink3) !important; } .text-gray-300 { color: var(--ink4) !important; } .text-blue-100 { color: rgba(255,255,255,.85) !important; } .text-purple-600, .text-purple-500, .text-violet-600, .text-blue-600, .text-blue-500, .text-indigo-600 { color: var(--tc) !important; } /* ── BORDERS ── */ .border-gray-100 { border-color: var(--border) !important; } .border-gray-200 { border-color: var(--border) !important; } .border-gray-300 { border-color: var(--border2) !important; } /* ── SHADOWS ── */ .shadow { box-shadow: 0 2px 12px rgba(80,40,10,.07) !important; } .shadow-lg { box-shadow: 0 8px 28px rgba(80,40,10,.10) !important; } .shadow-xl { box-shadow: 0 12px 40px rgba(80,40,10,.12) !important; } /* ── FOOTER ── */ footer { background: var(--ink) !important; color: var(--c) !important; } footer a { color: rgba(250,248,244,0.7) !important; } footer a:hover { color: #fff !important; }