/* ============================================================================ calc-mf-theme.css — the Mutual Funds Home look, applied to the calculators. ---------------------------------------------------------------------------- Nothing here touches a calculator's markup or its arithmetic. Every rule is a re-declaration of a variable the page already uses, or a font swap, so the same file can be dropped on top of any of the calculators and only their appearance changes. Loaded last in , which is what lets a plain :root block win over the page's own. ============================================================================ */ :root{ /* paper and cards — warm cream page, white cards floating on it */ --surface: #ffffff; --surface-2:#f8f4ea; --surface-3:#efe9db; --ground: #efe9db; --ground-2: #e4dccb; /* ink */ --ink: #0d1526; --ink-2: #2b3452; --ink-3: #5a637a; /* rules */ --line: #ded5c2; --line-2: #c8bda3; /* navy — the header, the dark bands */ --navy: #0d1526; --navy-deep: #05111f; --navy-mid: #1b2745; --navy-wash: #e3e9f3; /* gold — the one accent */ --gold: #b8871c; --gold-deep: #6f550f; --gold-lt: #dcab3c; --gold-wash: #faf1dc; /* up and down, the same two the fund pages use */ --emerald: #0a5f58; --emerald-deep: #08463f; --emerald-wash: #e2f6ef; --burgundy: #a52b22; --burgundy-deep: #7a1f18; --burgundy-wash: #faeae6; /* chart series */ --c-invested: #1b4f8a; --c-returns: #0a5f58; --c-loss: #a52b22; --c-real: #b8871c; /* the page ran 1200 inside a 1560 header, which left a band of empty paper down both sides on any real desktop */ --wrap: 1560px; --serif: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; } body{font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--ground);color:var(--ink)} /* Headings are Bebas Neue, as on every other page of the section. It has one weight and no italic, so it is put only where a display face belongs — and `font-weight` is normalised because the markup asks for 600/700 in places and a synthesised bold on a display face looks like a mistake. */ h1,h2,h3,.h1,.h2,.h3{font-family:'Bebas Neue',sans-serif !important;font-weight:400 !important; letter-spacing:.5px;color:var(--ink)} h1{font-size:clamp(30px,5vw,46px);line-height:1.05} h2{font-size:27px;line-height:1.1} h3{font-size:20px;line-height:1.15} /* figures — tabular, so columns of money line up */ table td,table th,input[type="number"],output, [class*="num"],[class*="amt"],[class*="value"],[class*="result"]{ font-variant-numeric:tabular-nums}