/* * ══════════════════════════════════════════════════════════════ * FORMITY V3 — HOW IT WORKS PAGE PATCH * File: how_counselling_works_patch.css * * INSTRUCTIONS: * In your how_counselling_works template (or how-counselling-works.html), * add this * * Step 3 — No HTML changes needed. All overrides target existing Tailwind classes. * ══════════════════════════════════════════════════════════════ */ /* ── 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 ── This page uses the Tailwind nav (bg-white border-b), not v3-nav. Override it to match v3-nav exactly. */ 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 .stream-btn:first-child, 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 item (How It Works = currently active) */ nav a.text-purple-600.bg-purple-50.font-semibold, nav a.font-semibold.text-purple-600 { background: var(--tc-l) !important; color: var(--tc) !important; border-radius: 20px !important; } /* Tools dropdown items */ .bg-white.rounded-xl.shadow-lg a { color: var(--ink2) !important; } .bg-white.rounded-xl.shadow-lg a:hover { background: var(--c2) !important; color: var(--ink) !important; } /* ── HERO SECTION ── Was: dark navy/indigo gradient-bg Now: warm terracotta gradient */ .gradient-bg { background: linear-gradient(135deg, #2C1A0E 0%, #BF5E28 60%, #E8946C 100%) !important; color: #fff !important; } .gradient-bg h1, .gradient-bg h2, .gradient-bg p, .gradient-bg span { color: #fff !important; } .gradient-bg h1, .gradient-bg h2 { font-family: 'Lora', serif !important; } .gradient-bg p { font-family: 'DM Sans', sans-serif !important; font-weight: 300; } /* Eyebrow tag inside hero */ .gradient-bg .bg-white\/20, .gradient-bg [class*="bg-white"] { background: rgba(255,255,255,0.18) !important; color: rgba(255,255,255,0.9) !important; border: 1px solid rgba(255,255,255,0.25) !important; } /* Hero CTAs */ .gradient-bg button, .gradient-bg a[class*="bg-white"] { background: #fff !important; color: var(--tc) !important; border-radius: var(--r) !important; font-weight: 500 !important; border: none !important; } .gradient-bg button:hover, .gradient-bg a[class*="bg-white"]:hover { background: var(--tc-l) !important; } .gradient-bg button[class*="border-white"], .gradient-bg a[class*="border-white"] { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.5) !important; } .gradient-bg button[class*="border-white"]:hover { background: rgba(255,255,255,0.12) !important; } /* ── BODY SECTIONS ── */ body, .bg-gray-50, .min-h-screen { background: var(--c) !important; } section { background: var(--c) !important; } section.bg-gray-50, section.bg-gray-100, .bg-gray-50, .bg-gray-100 { background: var(--c2) !important; } .bg-white { background: #fff !important; } /* ── CARDS ── Decision tree cards, "Three decisions" cards, feature cards */ .bg-white.rounded-xl, .bg-white.rounded-2xl, .rounded-xl.border, .rounded-2xl.border, [class*="rounded-xl"][class*="border"], [class*="rounded-2xl"][class*="border"] { background: #fff !important; border: 1px solid var(--border) !important; color: var(--ink) !important; } /* Coloured card variants — map to Formity palette */ .bg-blue-50 { background: var(--tc-l) !important; } .bg-indigo-50 { background: var(--pl-l) !important; } .bg-green-50 { background: var(--tl-l) !important; } .bg-teal-50 { background: var(--tl-l) !important; } .bg-purple-50 { background: var(--pl-l) !important; } .bg-orange-50 { background: var(--am-l) !important; } .bg-amber-50 { background: var(--am-l) !important; } .bg-red-50 { background: #FDEAEA !important; } /* Decision number circles / step numbers */ .bg-blue-600, .bg-indigo-600, .bg-purple-600 { background: var(--tc) !important; color: #fff !important; } .bg-green-600, .bg-teal-600 { background: var(--tl) !important; color: #fff !important; } /* ── TEXT COLOURS ── */ .text-gray-900 { color: var(--ink) !important; } .text-gray-800 { color: var(--ink) !important; } .text-gray-700 { color: var(--ink2) !important; } .text-gray-600 { color: var(--ink2) !important; } .text-gray-500 { color: var(--ink3) !important; } .text-gray-400 { color: var(--ink3) !important; } .text-blue-600, .text-indigo-600, .text-purple-600, .text-violet-600 { color: var(--tc) !important; } .text-blue-100 { color: rgba(255,255,255,0.85) !important; } .text-teal-600, .text-green-600 { color: var(--tl) !important; } /* ── PRIMARY BUTTONS ── */ .bg-blue-600, .hover\:bg-blue-700, button[class*="bg-blue"], a[class*="bg-blue"] { background: var(--tc) !important; color: #fff !important; } .bg-blue-600:hover, button[class*="bg-blue"]:hover { background: #A04A18 !important; } /* ── LINKS ── */ a { color: var(--tc) !important; } a:hover { opacity: .82; } nav a, footer a { color: inherit !important; } /* "Check your 3-scenario rank" inline link */ a.text-blue-600, a.text-indigo-600, a.text-purple-600 { color: var(--tc) !important; text-decoration: underline; } /* ── 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; } .border-blue-200, .border-indigo-200 { border-color: rgba(191,94,40,.3) !important; } /* ── "BEFORE / DURING / AFTER" PRICING CARDS ── Specifically the card backgrounds in the feature comparison section */ .border-blue-500, .border-indigo-500 { border-color: var(--tc) !important; } .border-green-500, .border-teal-500 { border-color: var(--tl) !important; } /* Highlighted "During" card */ .ring-2.ring-blue-500, .ring-2.ring-indigo-500 { box-shadow: 0 0 0 2px var(--tc) !important; } .ring-2.ring-green-500, .ring-2.ring-teal-500 { box-shadow: 0 0 0 2px var(--tl) !important; } /* ── CHECKMARKS / TICK ICONS ── */ .text-green-500, .text-green-400 { color: var(--tl) !important; } .text-blue-500 { color: var(--tc) !important; } /* ── FAQ / ACCORDION ── */ details summary, .accordion-trigger { font-family: 'DM Sans', sans-serif !important; color: var(--ink) !important; } details summary:hover { color: var(--tc) !important; } details[open] summary { color: var(--tc) !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; } /* ── MISC TAILWIND OVERRIDES ── */ .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; }