/* ============================================================================ calc-mf-theme.css — the Mutual Funds Home look, for the five personal calculators (SIP & Goal, Income Tax, Home Loan, Car Loan, Rent vs Buy). ---------------------------------------------------------------------------- All five were built from one token set, so one override re-skins all five. Nothing here touches markup or arithmetic: every rule re-declares a variable the page already uses, or swaps a font. Loaded last in , which is what lets a plain :root block win over each page's own. ============================================================================ */ :root{ /* gold replaces amber — one accent across the site, not two */ --amber: #b8871c; --amber-light: #dcab3c; --amber-dark: #6f550f; --amber-pale: #faf1dc; /* the same up/down pair the fund pages use */ --emerald: #0a5f58; --emerald-light: #2f8f7f; --rose: #a52b22; /* the calculators reached for two more hues for charts; the section has one cool tone, so both resolve to it rather than introducing a third palette */ --violet: #1b4f8a; --sky: #2c6ba8; /* navy, not near-black brown */ --dark: #0d1526; --dark2: #1b2745; --dark3: #2b3452; --dark4: #3a4462; --stone: #5a637a; /* warm cream paper, white cards on top of it */ --cream: #efe9db; --cream2: #f8f4ea; --cream3: #ded5c2; --text: #0d1526; } /* Fraunces out, Bebas Neue in — the display face every other page in the section already sets its headings in. It has a single weight and no italic, so weight is normalised: a synthesised bold on a display face reads as a rendering fault, not emphasis. */ h1,h2,h3,.h1,.h2,.h3,[class*="display"],[class*="hero-title"]{ font-family:'Bebas Neue',sans-serif !important; font-weight:400 !important; letter-spacing:.5px; } h1{font-size:clamp(30px,5vw,46px);line-height:1.05} h2{font-size:27px;line-height:1.12} h3{font-size:20px;line-height:1.18} /* the page sets its own family on body, so this has to say so explicitly */ body{background:var(--cream);color:var(--text); font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif} /* money lines up in a column or it is hard to read */ table td,table th,output,input[type="number"], [class*="num"],[class*="amt"],[class*="value"],[class*="result"]{font-variant-numeric:tabular-nums} /* ── the hero line, and the width the text runs to ───────────────────────── `.accent` set the highlighted half of the headline in italic. Bebas Neue has no italic cut, so the browser was slanting the upright one — a synthesised oblique, which is why that half read as a different, worse typeface than the half beside it. Upright, and the colour alone carries the emphasis. */ .accent,.accent2{font-style:normal !important} /* The hero copy was capped at ~600px and the page column at 1200 inside a 1560 header, so the text stopped a third of the way across and the rest of the row was empty. */ .hero-inner,.main{max-width:1560px !important} .hero-sub{max-width:none !important} /* The long-form section under each calculator sits in its own wrapper, which kept its own 1200px cap after .main was widened — so the page went wide and the reading matter below it did not. */ .seo-in{max-width:1560px !important} /* The hard breaks that used to split these headlines were replaced by real spaces in the markup — hiding a
in CSS also removes the word gap it was standing in for. */