/* money.wholetech.com — Paul Walhus financial command center Four palettes, switched via data-theme on , persisted in localStorage. Theme variable names mirror austinmayor.com/css/civic.css so component code is portable. Themes: - vault (default) — private-bank navy + gold - ledger — limestone paper + cedar ink + sage (classic accounting) - terminal — black + phosphor green (Bloomberg / crypto terminal) - bauhaus — bold geometric primaries (red/yellow/blue on cream) */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} :root{ --r:14px; --r-sm:8px; --r-lg:22px; --shadow-card:0 1px 3px rgba(0,0,0,.08); --shadow-card-hover:0 12px 32px rgba(0,0,0,.18); } /* ============================================================ THEME: VAULT (default) — private-banking navy + gold ============================================================ */ :root, :root[data-theme="vault"]{ --bg:#0c1726; --bg-2:#13223a; --bg-3:#1a2d4d; --surface:#162a45; --surface-2:#1d3358; --line:#2c4576; --ink:#f1eddf; --paper:#d8d2bf; --muted:#8aa0c2; --accent:#d4af37; /* gold */ --accent-2:#f4cd5a; --accent-deep:#9c8025; --positive:#7ec896; --negative:#e07b78; --warn:#e8b76b; --font-head:'Fraunces',Georgia,'Times New Roman',serif; --font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; --font-mono:'JetBrains Mono','Menlo','Consolas',monospace; } /* ============================================================ THEME: LEDGER — paper accounting ============================================================ */ :root[data-theme="ledger"]{ --bg:#f5f0e6; --bg-2:#efe7d4; --bg-3:#e2d9c4; --surface:#fbf7ee; --surface-2:#f5f0e6; --line:#d6cdb9; --ink:#1e3329; --paper:#3a4b3f; --muted:#7a8278; --accent:#5f7f5a; /* sage */ --accent-2:#7a9c75; --accent-deep:#3f5e3f; --positive:#3f7f5a; --negative:#a04545; --warn:#a26840; } /* ============================================================ THEME: TERMINAL — black + phosphor green ============================================================ */ :root[data-theme="terminal"]{ --bg:#080a0c; --bg-2:#0d1116; --bg-3:#13181f; --surface:#0f1418; --surface-2:#161d24; --line:#1e2a33; --ink:#c8f0c8; --paper:#7fb37f; --muted:#4a6c4f; --accent:#3ef07a; /* phosphor */ --accent-2:#7af7a3; --accent-deep:#1ea354; --positive:#3ef07a; --negative:#ff5c4d; --warn:#ffaa3a; --font-head:'JetBrains Mono','Menlo','Consolas',monospace; --font-body:'JetBrains Mono','Menlo','Consolas',monospace; } /* ============================================================ THEME: BAUHAUS — bold geometric primaries on cream ============================================================ */ :root[data-theme="bauhaus"]{ --bg:#f4ede0; --bg-2:#ebe2cf; --bg-3:#e0d3b8; --surface:#ffffff; --surface-2:#f7f1e3; --line:#1a1a1a; --ink:#0a0a0a; --paper:#222222; --muted:#666666; --accent:#e63946; /* primary red */ --accent-2:#f4a261; --accent-deep:#a91d2c; --positive:#2a9d8f; --negative:#e63946; --warn:#f4a261; --font-head:'Fraunces',Georgia,serif; } body{ font-family:var(--font-body); background:var(--bg); color:var(--ink); line-height:1.55; min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:var(--accent);text-decoration:none;transition:color .15s} a:hover{color:var(--accent-2)} /* ============================================================ Top banner (matches WholeTech network top-banner spec) ============================================================ */ .top-banner{ background:var(--bg-2); border-bottom:1px solid var(--line); padding:10px 24px; font-size:.82rem; font-family:var(--font-body); } .top-inner{ max-width:1240px;margin:0 auto; display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; } .back-pill{ display:inline-flex;align-items:center;gap:6px; padding:5px 14px;border:1px solid var(--line);border-radius:30px; color:var(--muted);font-weight:500; } .back-pill:hover{border-color:var(--accent);color:var(--accent)} .subnav{display:flex;gap:18px;flex-wrap:wrap} .subnav a{color:var(--muted);font-weight:500} .subnav a:hover{color:var(--accent)} /* ============================================================ Header ============================================================ */ .site-head{ padding:36px 24px 24px; background:var(--bg); border-bottom:1px solid var(--line); } .head-inner{ max-width:1240px;margin:0 auto; display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap; } .brand{ font-family:var(--font-head); font-size:2.4rem;font-weight:900;letter-spacing:-1.4px; color:var(--ink);line-height:1; } .brand .dot{color:var(--accent)} .brand-sub{ font-family:var(--font-body); font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:2.4px; color:var(--muted);margin-top:8px; } /* Theme switcher */ .theme-switch{ display:flex;gap:6px;align-items:center; background:var(--surface);border:1px solid var(--line); padding:5px;border-radius:30px; } .theme-switch button{ background:transparent;border:0;cursor:pointer; padding:6px 14px;border-radius:24px; font-family:var(--font-body);font-size:.76rem;font-weight:600; letter-spacing:.6px;text-transform:uppercase; color:var(--muted);transition:all .18s; } .theme-switch button:hover{color:var(--ink)} .theme-switch button.is-on{background:var(--accent);color:var(--bg)} :root[data-theme="bauhaus"] .theme-switch button.is-on{color:#fff} /* ============================================================ Hero / KPI strip ============================================================ */ .hero{ max-width:1240px;margin:0 auto;padding:50px 24px 30px; } .hero h1{ font-family:var(--font-head); font-size:clamp(2.4rem,5vw,4.2rem); font-weight:900;line-height:1.02;letter-spacing:-2.2px; color:var(--ink);margin-bottom:18px; } .hero h1 em{font-style:italic;color:var(--accent);font-weight:500} .hero .lede{ font-size:1.18rem;max-width:760px;line-height:1.5;color:var(--paper); } .kpi-strip{ max-width:1240px;margin:24px auto;padding:0 24px; display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px; } .kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px 22px 20px; position:relative;overflow:hidden; } .kpi .lab{ font-size:.7rem;text-transform:uppercase;letter-spacing:1.8px; color:var(--muted);margin-bottom:10px;font-weight:600; } .kpi .val{ font-family:var(--font-head);font-size:2rem;font-weight:900; color:var(--ink);letter-spacing:-1px;line-height:1; } .kpi .delta{ font-size:.78rem;margin-top:8px;font-family:var(--font-mono); } .kpi .delta.pos{color:var(--positive)} .kpi .delta.neg{color:var(--negative)} /* ============================================================ Module grid — the 10 module tiles on the hub ============================================================ */ .mod-grid{ max-width:1240px;margin:30px auto 50px;padding:0 24px; display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px; } .mod{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px 26px; transition:transform .2s, border-color .2s, box-shadow .2s; position:relative;display:block; } .mod:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-card-hover); } .mod .num{ position:absolute;top:18px;right:22px; font-family:var(--font-mono);font-size:.72rem; color:var(--muted);letter-spacing:1px; } .mod h3{ font-family:var(--font-head);font-size:1.45rem; font-weight:900;color:var(--ink);margin-bottom:10px; letter-spacing:-.6px; } .mod p{ font-size:.95rem;color:var(--paper);line-height:1.5;margin-bottom:14px; } .mod .bullets{ list-style:none;padding:0;margin:0 0 14px 0; font-size:.83rem;color:var(--muted); } .mod .bullets li{ padding:3px 0 3px 14px;position:relative; } .mod .bullets li::before{ content:'›';position:absolute;left:0;color:var(--accent);font-weight:700; } .mod .arrow{ color:var(--accent);font-weight:700;font-size:.86rem; letter-spacing:.4px; } .mod:hover .arrow{color:var(--accent-2)} /* Bauhaus override — geometric color blocks */ :root[data-theme="bauhaus"] .mod{ border-width:2px;border-color:var(--ink); box-shadow:5px 5px 0 var(--ink); } :root[data-theme="bauhaus"] .mod:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--accent); } :root[data-theme="bauhaus"] .mod:nth-child(3n+1){background:#fef3d8} :root[data-theme="bauhaus"] .mod:nth-child(3n+2){background:#dde9f7} :root[data-theme="bauhaus"] .mod:nth-child(3n+3){background:#fce0dc} /* ============================================================ Section / page common ============================================================ */ .wrap{max-width:1180px;margin:0 auto;padding:30px 24px 60px} .wrap.narrow{max-width:880px} h2.sect{ font-family:var(--font-head); font-size:2rem;font-weight:900;letter-spacing:-1px; color:var(--ink);margin:40px 0 18px; } h2.sect .pre{ display:block;font-family:var(--font-body);font-size:.74rem; text-transform:uppercase;letter-spacing:2.4px; color:var(--accent);font-weight:700;margin-bottom:8px; } h3.sub{ font-family:var(--font-head);font-size:1.32rem;font-weight:700; color:var(--ink);margin:24px 0 12px;letter-spacing:-.4px; } p.body{font-size:1rem;color:var(--paper);margin-bottom:14px;line-height:1.65} /* Tables (compact ledger style) */ table.ledger{ width:100%;border-collapse:collapse; background:var(--surface);border:1px solid var(--line); border-radius:var(--r);overflow:hidden; font-size:.92rem;margin:14px 0 22px; } table.ledger th{ background:var(--bg-2); font-family:var(--font-body);font-size:.74rem; text-transform:uppercase;letter-spacing:1.4px; color:var(--muted);font-weight:700; text-align:left;padding:12px 14px; border-bottom:1px solid var(--line); } table.ledger td{ padding:11px 14px;border-bottom:1px solid var(--line); color:var(--ink);vertical-align:top; } table.ledger tr:last-child td{border-bottom:0} table.ledger tr:hover td{background:var(--surface-2)} table.ledger td.num,table.ledger th.num{ text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums; } table.ledger td.pos{color:var(--positive)} table.ledger td.neg{color:var(--negative)} table.ledger .tag{ display:inline-block;padding:2px 8px;border-radius:4px; font-size:.7rem;text-transform:uppercase;letter-spacing:.8px;font-weight:700; background:var(--bg-2);color:var(--muted); } table.ledger .tag.ok{background:rgba(126,200,150,.18);color:var(--positive)} table.ledger .tag.warn{background:rgba(232,183,107,.22);color:var(--warn)} table.ledger .tag.bad{background:rgba(224,123,120,.22);color:var(--negative)} /* Cards */ .card{ background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:24px;margin-bottom:18px; } .card h3{ font-family:var(--font-head);font-size:1.2rem;font-weight:800; color:var(--ink);margin-bottom:10px;letter-spacing:-.4px; } .card p{color:var(--paper);font-size:.95rem;margin-bottom:10px} .card .lab{ font-size:.7rem;text-transform:uppercase;letter-spacing:1.6px; color:var(--accent);font-weight:700;margin-bottom:8px;display:block; } .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px} .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px} /* Buttons */ .btn{ display:inline-block; background:var(--accent);color:var(--bg); padding:11px 22px;border-radius:8px;border:0; font-weight:700;font-size:.88rem;cursor:pointer; font-family:var(--font-body);transition:all .15s;letter-spacing:.3px; } .btn:hover{background:var(--accent-2);color:var(--bg);transform:translateY(-1px)} .btn-ghost{ background:transparent;color:var(--accent); border:1px solid var(--accent); } .btn-ghost:hover{background:var(--accent);color:var(--bg)} /* Form */ .form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:12px} .form-field label{ display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:1.2px; color:var(--muted);font-weight:700;margin-bottom:5px; } .form-field input,.form-field textarea,.form-field select{ width:100%;padding:10px 12px;background:var(--bg); border:1px solid var(--line);border-radius:var(--r-sm); color:var(--ink);font-family:var(--font-body);font-size:.95rem; } .form-field input:focus,.form-field textarea:focus,.form-field select:focus{ outline:0;border-color:var(--accent); } /* Pull-quotes / callouts */ .callout{ border-left:4px solid var(--accent); background:var(--surface-2); padding:16px 20px;border-radius:0 var(--r-sm) var(--r-sm) 0; margin:18px 0;font-size:.96rem;color:var(--paper); } .callout strong{color:var(--ink)} /* Footer */ .site-foot{ border-top:1px solid var(--line); padding:30px 24px 50px;background:var(--bg-2); margin-top:60px; } .foot-inner{ max-width:1240px;margin:0 auto; display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap; font-size:.82rem;color:var(--muted); } .foot-inner a{color:var(--muted)} .foot-inner a:hover{color:var(--accent)} @media (max-width: 640px){ .hero h1{font-size:2.2rem;letter-spacing:-1.2px} .brand{font-size:1.9rem} table.ledger{font-size:.84rem} table.ledger th,table.ledger td{padding:9px 8px} } /* Print — clean for invoices */ @media print{ .top-banner,.theme-switch,.site-foot,.no-print{display:none !important} body{background:#fff;color:#000} .wrap{max-width:none;padding:0} }