/* Created by Joseph Foss on 7/28/26. */ /* Shared palette and chrome for the public pages. Loaded last in so it overrides each page's own :root block without those blocks being touched. Light is the default and matches index.html. Dark is opt-in and matches mft-landing.html. Both variable name sets are defined so one file drives every page. */ :root { --paper:#E7DFD3; --paper-deep:#DCD2C2; --card:#F2ECE2; --ink:#1A1712; --ink-soft:#5E5548; --faint:#8C8172; --red:#93291E; --red-deep:#6E1E15; --rule:#C7BCA9; --bg:#E7DFD3; --panel:#F2ECE2; --line:#C7BCA9; --txt:#1A1712; --dim:#5E5548; --red-dk:#6E1E15; --barbg:rgba(231,223,211,.94); --grain:.30; --display:'Fraunces',Georgia,serif; --ui:'Inter',-apple-system,system-ui,sans-serif; } :root[data-theme="dark"] { --paper:#0b0b0c; --paper-deep:#000000; --card:#141416; --ink:#e8e8e8; --ink-soft:#9a9a9f; --faint:#6d6d72; --red:#c40606; --red-deep:#8a0303; --rule:#26262a; --bg:#0b0b0c; --panel:#141416; --line:#26262a; --txt:#e8e8e8; --dim:#9a9a9f; --red-dk:#8a0303; --barbg:rgba(11,11,12,.94); --grain:0; } body { background:var(--paper); color:var(--ink); font-family:var(--ui); } /* Grain reads as dirt on black, so it belongs to light mode only. */ :root[data-theme="dark"] body::before { opacity:0; } .mftSiteBar { display:flex; align-items:center; gap:18px; padding:12px 20px; border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:60; background:var(--barbg); backdrop-filter:blur(12px); } .mftSiteBar .mftMark { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); white-space:nowrap; } .mftSiteBar .mftMark img { height:30px; width:auto; max-width:160px; object-fit:contain; display:block; } .mftSiteBar .mftMark span { font-family:var(--display); font-weight:600; font-size:1.2rem; letter-spacing:-.01em; } .mftSiteBar .mftGap { margin-left:auto; } .mftTopLinks { display:flex; align-items:center; gap:20px; } .mftTopLinks a { font-size:.8rem; color:var(--ink-soft); text-decoration:none; white-space:nowrap; } .mftTopLinks a:hover { color:var(--ink); } .mftTopLinks a.on { color:var(--red); font-weight:600; } .mftTopLinks a.ext { border-left:1px solid var(--rule); padding-left:20px; color:var(--red); } .mftIconBtn { background:none; border:1px solid var(--rule); color:var(--ink-soft); width:36px; height:36px; border-radius:12px; font-size:15px; line-height:1; cursor:pointer; } .mftIconBtn:hover { border-color:var(--red); color:var(--red); } .mftSignIn { border:1px solid var(--rule); border-radius:12px; padding:11px 18px; font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); text-decoration:none; white-space:nowrap; } .mftSignIn:hover { border-color:var(--red); color:var(--red); } .mftSiteBottom { position:fixed; left:0; right:0; bottom:0; top:auto; z-index:60; display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; border-top:1px solid var(--rule); background:var(--barbg); padding-bottom:env(safe-area-inset-bottom); scrollbar-width:none; } .mftSiteBottom::-webkit-scrollbar { display:none; } .mftSiteBottom a { flex:0 0 auto; padding:22px 18px; text-decoration:none; color:var(--ink-soft); font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; white-space:nowrap; border-top:3px solid transparent; } .mftSiteBottom a.on { color:#fff; background:var(--red-deep); border-top-color:var(--red); } .mftSiteBottom a.ext { border-left:1px solid var(--rule); color:var(--red); } input, select, textarea { background:var(--paper-deep); color:var(--ink); border-color:var(--rule); font-family:var(--ui); } select { appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238C8172' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }