/* * ══════════════════════════════════════════════════════════════ * FORMITY V3 — NEET PG PAGE PATCH * File: pg_patch.css * * INSTRUCTIONS: * In your NEET PG template (pg.html / templates/pg/index.html): * * Step 1 — Add Google Fonts if not already in : * * * Step 2 — Add this as * * PG COLOUR STRATEGY: * - Page accent = Teal (#1A957A) — distinct from UG terracotta * - Body, nav, cards = same cream/terracotta as all other pages * - This makes PG feel part of the same system but visually distinct * ══════════════════════════════════════════════════════════════ */ /* ── 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; --tl-d:#0F5E48; --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 ── On PG page the nav shows teal/teal-50 for PG — keep that, but fix everything else to match v3 system */ 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 — active on this page → plum (consistent with rest of site) */ nav a[href="/pg/"], nav a.text-teal-600.bg-teal-50, nav a.text-teal-600.font-semibold { background: var(--pl-l) !important; color: var(--pl) !important; border-radius: 20px !important; font-weight: 500 !important; } /* Mobile nav active */ nav a.block.text-teal-600.bg-teal-50 { background: var(--pl-l) !important; color: var(--pl) !important; } /* ── HERO ── Was: .gradient-bg-pg (dark teal→cyan) Now: Formity teal gradient — warm, on-brand */ .gradient-bg-pg { background: linear-gradient(135deg, #0B3D33 0%, #1A957A 55%, #2DB896 100%) !important; color: #fff !important; } .gradient-bg-pg * { color: #fff !important; } .gradient-bg-pg h1 { font-family: 'Lora', serif !important; font-size: clamp(28px, 5vw, 52px); font-weight: 600; } .gradient-bg-pg p { font-family: 'DM Sans', sans-serif !important; font-weight: 300; } /* Eyebrow dot/label inside hero */ .gradient-bg-pg .bg-teal-500\/20, .gradient-bg-pg [class*="bg-teal"][class*="20"] { background: rgba(255,255,255,0.18) !important; border: 1px solid rgba(255,255,255,0.25) !important; color: rgba(255,255,255,.9) !important; } /* Hero CTAs */ .gradient-bg-pg a[class*="bg-white"], .gradient-bg-pg button.bg-white { background: #fff !important; color: var(--tl) !important; border-radius: var(--r) !important; font-weight: 500 !important; } .gradient-bg-pg a[class*="border-white"], .gradient-bg-pg button[class*="border-white"] { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.5) !important; border-radius: var(--r) !important; } .gradient-bg-pg a[class*="border-white"]:hover { background: rgba(255,255,255,.12) !important; } /* "PG Counselling — ₹14,990" label inside hero */ .gradient-bg-pg p.text-white { color: rgba(255,255,255,0.85) !important; } /* ── PREDICTOR WIDGET CARD ── */ .glass, div.bg-white.rounded-2xl, div.bg-white.rounded-xl { background: #fff !important; border: 1px solid var(--border) !important; border-radius: var(--r2) !important; } /* Widget label text */ .glass label, div.bg-white label { color: var(--ink3) !important; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 500; } /* Input fields */ .glass input, .glass select, div.bg-white input, div.bg-white select { border: 1px solid var(--border2) !important; border-radius: var(--r) !important; background: var(--c) !important; color: var(--ink) !important; font-family: 'DM Sans', sans-serif !important; } .glass input:focus, .glass select:focus, div.bg-white input:focus, div.bg-white select:focus { border-color: var(--tl) !important; box-shadow: 0 0 0 3px rgba(26,149,122,.1) !important; background: #fff !important; outline: none !important; } /* "Predict" button — teal for PG */ button[class*="from-teal"], button[class*="bg-teal"], button.bg-gradient-to-r, .predict-btn, button[type="submit"] { background: var(--tl) !important; background-image: none !important; color: #fff !important; border: none !important; border-radius: var(--r) !important; font-family: 'DM Sans', sans-serif !important; font-weight: 500 !important; transition: opacity .15s !important; } button[class*="from-teal"]:hover, button[class*="bg-teal"]:hover, button[type="submit"]:hover { opacity: .87 !important; background: var(--tl-d) !important; } /* Slider */ input[type="range"] { accent-color: var(--tl) !important; border: none !important; background: transparent !important; } /* Rank result number */ .rank-number-pg, [class*="rank-number"] { background: linear-gradient(135deg, var(--tl), #2DB896) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ── BODY SECTIONS ── */ .bg-gray-50, .min-h-screen { background: var(--c) !important; } section { background: var(--c) !important; } section.bg-gray-50, section.bg-gray-100 { background: var(--c2) !important; } .bg-white { background: #fff !important; } /* ── SECTION CARDS (FAQ, How it works, etc.) ── */ .bg-white.rounded-xl, .bg-white.rounded-2xl, .rounded-xl.border, .rounded-2xl.border { background: #fff !important; border: 1px solid var(--border) !important; color: var(--ink) !important; } .bg-white.rounded-xl:hover, .bg-white.rounded-2xl:hover { border-color: var(--border2) !important; box-shadow: 0 6px 20px rgba(26,149,122,.07) !important; } /* ── COLOURED BACKGROUNDS → palette ── */ .bg-teal-50 { background: var(--tl-l) !important; } .bg-teal-100 { background: var(--tl-l) !important; } .bg-blue-50 { background: var(--tc-l) !important; } .bg-green-50 { background: var(--tl-l) !important; } .bg-purple-50 { background: var(--pl-l) !important; } /* ── TEXT COLOURS ── */ .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; } /* Keep teal text for PG-specific elements */ .text-teal-600, .text-teal-500 { color: var(--tl) !important; } .text-teal-400 { color: var(--tl) !important; opacity: .75; } /* Convert blue/purple to terracotta */ .text-blue-600, .text-indigo-600, .text-purple-600 { color: var(--tc) !important; } /* ── SPECIALTY TAGS / CHIPS ── */ .bg-teal-100.text-teal-800, .bg-teal-50.text-teal-700, .bg-teal-50.text-teal-600 { background: var(--tl-l) !important; color: var(--tl) !important; border: 1px solid rgba(26,149,122,.2) !important; border-radius: 20px !important; } .bg-blue-100.text-blue-800, .bg-blue-50.text-blue-600 { background: var(--tc-l) !important; color: var(--tc) !important; border-radius: 20px !important; } .bg-purple-100.text-purple-800, .bg-purple-50.text-purple-600 { background: var(--pl-l) !important; color: var(--pl) !important; border-radius: 20px !important; } /* ── FAQ ACCORDION ── */ details summary { color: var(--ink) !important; font-family: 'DM Sans', sans-serif !important; } details summary:hover { color: var(--tl) !important; } details[open] summary { color: var(--tl) !important; } details[open] { border-color: rgba(26,149,122,.2) !important; } /* ── LINKS ── */ a { color: var(--tl) !important; } /* teal links on PG page */ a:hover { opacity: .82; } nav a { color: var(--ink2) !important; } nav a:hover { color: var(--ink) !important; } footer a { color: rgba(250,248,244,.7) !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; } .border-teal-200 { border-color: rgba(26,149,122,.3) !important; } .border-teal-500 { border-color: var(--tl) !important; } .border-teal-600 { border-color: var(--tl) !important; } /* ── SHADOWS ── */ .shadow { box-shadow: 0 2px 12px rgba(26,149,122,.06) !important; } .shadow-lg { box-shadow: 0 8px 28px rgba(26,149,122,.09) !important; } .shadow-xl { box-shadow: 0 12px 40px rgba(26,149,122,.11) !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; }