/* Money Before 18 -- no web fonts, no framework. A system font stack means zero font requests, which is most of Core Web Vitals handled before you write a line of layout. */ :root{ --ink:#191d21; --ink-2:#4a5158; --ink-3:#6b7480; --line:#e3e6ec; --line-2:#eef0f4; --bg:#ffffff; --bg-2:#f7f8fb; --wrap:1080px; --narrow:720px; --r:10px; /* default brand accent, used on home and utility pages */ --accent:#0f766e; --accent-2:#0d9488; --accent-wash:#f0fdfa; --accent-line:#a7ddd6; --amber-wash:#fdf6e8; --amber-line:#e8d5a8; } /* ---------- per-section colour system ---------- Each hub owns a hue. The accent variables are re-bound on and on individual cards, so one rule set colours breadcrumbs, links, answer boxes, headings, tool chrome and card rules without any per-page CSS. Every base colour below clears 4.5:1 on white. */ [data-hub="first-job"]{ --accent:#1d4ed8; --accent-2:#2563eb; --accent-wash:#eff6ff; --accent-line:#bfdbfe; } [data-hub="allowance"]{ --accent:#b45309; --accent-2:#d97706; --accent-wash:#fffbeb; --accent-line:#fcd88a; } [data-hub="accounts"]{ --accent:#15803d; --accent-2:#16a34a; --accent-wash:#f0fdf4; --accent-line:#b3ecc4; } [data-hub="spending"]{ --accent:#be123c; --accent-2:#e11d48; --accent-wash:#fff1f2; --accent-line:#fecdd3; } [data-hub="money-talks"]{ --accent:#6d28d9; --accent-2:#7c3aed; --accent-wash:#f5f3ff; --accent-line:#ddd6fe; } [data-hub="tools"]{ --accent:#0f766e; --accent-2:#0d9488; --accent-wash:#f0fdfa; --accent-line:#99e6dd; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, "Helvetica Neue",Arial,sans-serif; font-feature-settings:"kern" 1; text-rendering:optimizeLegibility; } .wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px} .wrap.narrow{max-width:var(--narrow)} .skip{ position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff; padding:10px 16px;z-index:100;border-radius:0 0 var(--r) 0; } .skip:focus{left:0} a{color:var(--accent);text-underline-offset:2px} a:hover{color:var(--accent-2)} /* ---------- header ---------- */ .site-header{ border-bottom:1px solid var(--line); background:var(--bg); position:sticky;top:0;z-index:50; } .site-header .wrap{ display:flex;align-items:center;gap:18px; min-height:68px;flex-wrap:wrap; } .brand{ text-decoration:none;color:var(--ink);display:block;padding:12px 0; flex:0 0 auto; } .brand-name{ display:block;font-weight:700;font-size:20px;letter-spacing:-.02em; line-height:1.15; } /* a small coloured mark so the header is not pure text */ .brand-name::before{ content:"";display:inline-block;width:11px;height:11px;border-radius:3px; margin-right:8px;vertical-align:baseline; background:linear-gradient(135deg,var(--accent-2),var(--accent)); } .brand-tag{ display:block;font-size:12px;color:var(--ink-3); letter-spacing:.01em;margin-top:1px; } .site-nav{margin-left:auto;display:flex;gap:2px;flex-wrap:nowrap} .site-nav a{ color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:500; padding:8px 9px;border-radius:7px;white-space:nowrap; } .site-nav a:hover{background:var(--bg-2);color:var(--ink)} .site-nav a[aria-current]{color:var(--accent);background:var(--accent-wash)} .navtoggle{ display:none;margin-left:auto;background:none;border:1px solid var(--line); border-radius:7px;padding:8px 14px;font:inherit;font-size:14px; color:var(--ink-2);cursor:pointer; } @media(max-width:980px){ .navtoggle{display:block;align-self:center} .site-header .wrap{gap:12px} .brand{flex:1 1 auto} .site-nav{ display:none;width:100%;flex-direction:column;gap:0;flex-wrap:wrap; border-top:1px solid var(--line);padding:8px 0 12px;margin-left:0; order:3; } .site-nav.open{display:flex} .site-nav a{padding:11px 4px;font-size:16px} } /* ---------- breadcrumbs ---------- */ .crumbs{ font-size:13.5px;color:var(--ink-3);margin:22px 0 0; display:flex;flex-wrap:wrap;gap:8px;align-items:center; } .crumbs a{color:var(--ink-3);text-decoration:none} .crumbs a:hover{color:var(--accent);text-decoration:underline} .crumbs .sep{color:var(--line);margin:0 -2px} /* ---------- typography ---------- */ h1{ font-size:clamp(28px,4.4vw,40px);line-height:1.18;letter-spacing:-.022em; margin:18px 0 12px;font-weight:750; } h2{ font-size:clamp(21px,2.6vw,26px);line-height:1.28;letter-spacing:-.014em; margin:2.2em 0 .5em;font-weight:700; } h3{font-size:18.5px;line-height:1.35;margin:1.8em 0 .4em;font-weight:670} p{margin:0 0 1.15em} article ul,article ol{margin:0 0 1.3em;padding-left:1.3em} article li{margin-bottom:.45em} article li::marker{color:var(--ink-3)} strong{font-weight:650} .byline{ font-size:14px;color:var(--ink-3);margin:0 0 26px; padding-bottom:18px;border-bottom:1px solid var(--line-2); } .byline a{color:var(--ink-2);font-weight:550;text-decoration:none} .byline a:hover{color:var(--accent);text-decoration:underline} .byline .dot{margin:0 6px;color:var(--line)} /* ---------- the answer box ---------- */ .answer{ background:var(--accent-wash); border:1px solid #cfe4e0; border-radius:var(--r); padding:18px 22px 4px; margin:0 0 30px; } .answer-label{ font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--accent);margin:0 0 6px; } .answer p{margin-bottom:.9em} .answer p:last-child{margin-bottom:1em} /* ---------- callouts ---------- */ blockquote{ margin:1.6em 0;padding:2px 0 2px 20px; border-left:3px solid var(--accent-2);color:var(--ink-2); } blockquote p:last-child{margin-bottom:0} .note,.warn{ border-radius:var(--r);padding:16px 20px 4px;margin:1.6em 0; font-size:16px; } .note{background:var(--bg-2);border:1px solid var(--line)} .warn{background:var(--amber-wash);border:1px solid var(--amber-line)} /* script / say-this blocks */ .script{ background:var(--bg-2);border-left:3px solid var(--ink-3); border-radius:0 var(--r) var(--r) 0; padding:16px 20px 4px;margin:1.5em 0; } .script p{margin-bottom:.8em} .script em{color:var(--ink-2)} /* ---------- tables ---------- */ .tablewrap{overflow-x:auto;margin:1.6em 0} table{border-collapse:collapse;width:100%;font-size:15.5px;margin:1.6em 0} th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)} th{ font-weight:650;font-size:13px;letter-spacing:.03em;text-transform:uppercase; color:var(--ink-3);border-bottom:2px solid var(--line); } tbody tr:hover{background:var(--bg-2)} /* ---------- checklists ---------- */ .checklist{list-style:none;padding-left:0} .checklist li{ position:relative;padding-left:30px;margin-bottom:.6em; } .checklist li::before{ content:"";position:absolute;left:0;top:.35em; width:16px;height:16px;border:1.5px solid var(--accent-2);border-radius:4px; } /* ---------- faq ---------- */ .faq{margin-top:3em} .faq details{ border-bottom:1px solid var(--line);padding:2px 0; } .faq summary{ cursor:pointer;padding:15px 0;font-weight:600;font-size:17px; list-style:none;display:flex;justify-content:space-between;gap:16px; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--accent);font-weight:400;font-size:22px;line-height:1} .faq details[open] summary::after{content:"\2212"} .faq details p{margin:0 0 1em;color:var(--ink-2)} /* ---------- sources ---------- */ .sources{ margin-top:3em;padding-top:22px;border-top:1px solid var(--line); font-size:15px; } .sources h2{font-size:15px;text-transform:uppercase;letter-spacing:.07em; color:var(--ink-3);margin:0 0 .7em} .sources ul{padding-left:1.1em} .sources li{margin-bottom:.4em;color:var(--ink-2)} /* ---------- book box ---------- */ .bookbox{ margin:2.6em 0 0;padding:20px 24px; background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r); font-size:15.5px; } .bk-eyebrow{ font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--ink-3);margin:0 0 4px; } .bk-title{font-weight:700;font-size:18px;margin:0 0 6px;color:var(--ink)} .bk-blurb{margin:0 0 8px;color:var(--ink-2)} .bk-note{margin:0 0 12px;font-size:13.5px;color:var(--ink-3);line-height:1.55} .bk-assoc{display:block;margin-top:4px} .bk-link{ display:inline-block;font-weight:600;font-size:15px;text-decoration:none; color:var(--accent);border:1px solid #cfe4e0;background:#fff; padding:9px 18px;border-radius:7px; } .bk-link:hover{background:var(--accent-wash)} /* ---------- related ---------- */ .related{margin-top:2.6em;padding-top:22px;border-top:1px solid var(--line)} .related h2{font-size:15px;text-transform:uppercase;letter-spacing:.07em; color:var(--ink-3);margin:0 0 .7em} .related ul{list-style:none;padding:0;margin:0} .related li{margin-bottom:.5em} .related a{font-weight:550;text-decoration:none} .related a:hover{text-decoration:underline} /* ---------- hub / home cards ---------- */ .hero{background:var(--bg-2);border-bottom:1px solid var(--line);padding:44px 0 40px} .hero h1{margin-top:0;max-width:16ch} .hero-body{font-size:18.5px;color:var(--ink-2);max-width:60ch} .hero-body p:last-child{margin-bottom:0} .hub-intro{font-size:18px;color:var(--ink-2);margin-bottom:8px;max-width:62ch} .cards{ list-style:none;padding:0;margin:34px 0 10px; display:grid;gap:2px;background:var(--line); border:1px solid var(--line);border-radius:var(--r);overflow:hidden; } @media(min-width:680px){.cards{grid-template-columns:1fr 1fr}} .card{background:var(--bg);padding:22px 24px} .card h2,.card h3{margin:0 0 6px;font-size:18px;line-height:1.32;letter-spacing:-.01em} .card a{text-decoration:none;color:var(--ink)} .card a:hover{color:var(--accent)} .card p{margin:0;font-size:15px;color:var(--ink-3);line-height:1.55} .popular{margin:44px 0 10px} .popular h2{font-size:15px;text-transform:uppercase;letter-spacing:.07em; color:var(--ink-3);margin:0 0 .8em} .popular ul{list-style:none;padding:0;margin:0} .popular li{border-bottom:1px solid var(--line-2)} .popular a{display:block;padding:13px 0;text-decoration:none;font-weight:550} .popular a:hover{color:var(--accent-2)} /* ---------- tools ---------- */ .tool{ background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r); padding:24px;margin:1.8em 0; } .tool .row{ display:flex;flex-wrap:wrap;gap:16px;align-items:stretch;margin-bottom:18px; } .tool .field{ flex:1 1 170px;min-width:0; display:flex;flex-direction:column;justify-content:flex-end; } .tool label{ display:block;font-size:13px;font-weight:600;color:var(--ink-2); margin-bottom:5px;letter-spacing:.01em; } .tool input[type=number],.tool input[type=text],.tool select{ width:100%;font:inherit;font-size:16px;padding:10px 12px;height:42px; border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink); appearance:none;-webkit-appearance:none; } .tool select{ background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7480' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center; background-size:11px;padding-right:34px; } .tool input:focus,.tool select:focus{outline:2px solid var(--accent-2);outline-offset:-1px} .tool input[type=range]{width:100%;accent-color:var(--accent-2)} .tool .out{ background:#fff;border:1px solid var(--line);border-radius:8px; padding:18px 20px;margin-top:4px; } .tool .big{font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--accent); line-height:1.2;margin:0} .tool .sub{font-size:14px;color:var(--ink-3);margin:4px 0 0} .tool .bars{margin-top:16px} .tool .bar{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:14px} .tool .bar .lab{flex:0 0 78px;color:var(--ink-3)} .tool .bar .track{ flex:1;height:20px;background:var(--line-2);border-radius:4px;overflow:hidden; display:block; } /* display:block matters: an inline span ignores width and height entirely, which silently renders every bar empty. */ .tool .bar .fill{ display:block;height:100%;min-width:2px; background:var(--accent-2);border-radius:4px;transition:width .18s ease; } .tool .bar .val{flex:0 0 88px;text-align:right;font-variant-numeric:tabular-nums; font-weight:600} .tool .note{font-size:13.5px;margin-top:14px;background:none;border:none;padding:0; color:var(--ink-3)} .printable{ border:1px solid var(--line);border-radius:var(--r);padding:0;overflow:hidden; margin:1.8em 0; } .printable table{margin:0} .printable th{background:var(--bg-2)} .printable td.write{height:38px} @media print{ .site-header,.site-footer,.crumbs,.related,.bookbox,.faq,.navtoggle,.skip{display:none} body{font-size:12pt} .tool{background:none;border:1px solid #999} } /* ---------- footer ---------- */ .site-footer{ margin-top:70px;border-top:1px solid var(--line);background:var(--bg-2); padding:34px 0 44px;font-size:14px;color:var(--ink-3); } .footer-nav{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:20px} .footer-nav a{color:var(--ink-2);text-decoration:none;font-weight:550} .footer-nav a:hover{color:var(--accent)} .site-footer p{margin:0 0 11px;max-width:78ch;line-height:1.6} .site-footer .disclosure{color:var(--ink-2)} .site-footer .disclaimer{font-size:13px} .site-footer .copy{font-size:13px;color:var(--ink-3)} /* ===================================================================== COLOUR LAYER Everything below exists to put the section palette on screen. It sits last so it overrides the neutral base without editing it. ===================================================================== */ /* ---------- header: a thin spectrum rule, and colour-coded nav ---------- */ .site-header{ border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(16,24,40,.02); } .site-header::after{ content:"";display:block;height:3px;width:100%; position:absolute;left:0;bottom:-3px; background:linear-gradient(90deg, #1d4ed8 0%, #1d4ed8 16.66%, #b45309 16.66%, #b45309 33.33%, #15803d 33.33%, #15803d 50%, #be123c 50%, #be123c 66.66%, #6d28d9 66.66%, #6d28d9 83.33%, #0f766e 83.33%, #0f766e 100%); opacity:.9; } .site-header{position:sticky;top:0;z-index:50} .site-header .wrap{position:relative} .site-nav a:hover{background:var(--accent-wash);color:var(--accent)} .site-nav a[aria-current]{color:var(--accent);background:var(--accent-wash)} /* ---------- hero ---------- */ .hero{ background: radial-gradient(900px 340px at 12% -20%, var(--accent-wash) 0%, transparent 70%), linear-gradient(180deg,#fbfcfe 0%,var(--bg-2) 100%); border-bottom:1px solid var(--line); padding:52px 0 48px; } .hero h1{max-width:15ch} .hero h1::after{ content:"";display:block;width:64px;height:4px;border-radius:2px;margin:18px 0 0; background:linear-gradient(90deg,var(--accent-2),var(--accent)); } /* ---------- cards: a coloured rule per section ---------- */ .cards{ background:transparent;border:0;border-radius:0;gap:14px;overflow:visible; } .card{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r); border-top:3px solid var(--accent); padding:20px 22px 22px; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .card:hover{ box-shadow:0 6px 20px rgba(16,24,40,.07); transform:translateY(-2px); } .card h2 a,.card h3 a{color:var(--ink)} .card:hover h2 a,.card:hover h3 a{color:var(--accent)} .card h2::before,.card h3::before{content:none} /* ---------- section headings get a coloured tick ---------- */ article h2{position:relative;padding-left:15px} article h2::before{ content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:4px; border-radius:2px;background:var(--accent);opacity:.75; } .sources h2,.related h2,.faq h2,.popular h2{padding-left:0} .sources h2::before,.related h2::before,.faq h2::before,.popular h2::before{content:none} /* ---------- answer box takes the section colour ---------- */ .answer{background:var(--accent-wash);border-color:var(--accent-line)} .answer-label{color:var(--accent)} /* ---------- breadcrumbs, links, faq, tools ---------- */ .crumbs a:hover{color:var(--accent)} .byline a:hover{color:var(--accent)} .faq summary::after{color:var(--accent)} .faq summary:hover{color:var(--accent)} blockquote{border-left-color:var(--accent-2)} .script{border-left-color:var(--accent-2)} .checklist li::before{border-color:var(--accent-2)} .tool{ border-top:3px solid var(--accent); background:linear-gradient(180deg,var(--accent-wash) 0%,var(--bg-2) 55%); } .tool .big{color:var(--accent)} .tool .bar .fill{background:var(--accent-2)} .tool input:focus,.tool select:focus{outline-color:var(--accent-2)} .tool input[type=range]{accent-color:var(--accent-2)} .bk-link{color:var(--accent);border-color:var(--accent-line)} .bk-link:hover{background:var(--accent-wash)} /* ---------- most-read list, colour-coded by section ---------- */ .popular li{ border-bottom:1px solid var(--line-2); border-left:3px solid var(--accent); padding-left:14px;border-radius:2px; } .popular li:hover{background:var(--accent-wash)} .popular a:hover{color:var(--accent)} /* ---------- hub index pages ---------- */ .hub-intro{ border-left:3px solid var(--accent); padding-left:18px; } /* ---------- tables ---------- */ th{border-bottom:2px solid var(--accent);color:var(--accent)} tbody tr:hover{background:var(--accent-wash)} /* ---------- callouts pick up the section colour ---------- */ .note{background:var(--accent-wash);border-color:var(--accent-line)} /* ---------- book box ---------- */ .bookbox{border-top:3px solid var(--accent)} /* ---------- links and lists ---------- */ .sources a{color:var(--accent)} .related a{color:var(--accent)} article li::marker{color:var(--accent)} /* ---------- footer spectrum ---------- */ .site-footer{border-top:3px solid transparent; border-image:linear-gradient(90deg,#1d4ed8,#b45309,#15803d,#be123c,#6d28d9,#0f766e) 1; }