/** * SidelineWatch — assets/styles.css * * One shared stylesheet instead of every page embedding its own copy of * the same tokens. Change the palette here, once, and every page picks it * up — instead of hunting through fifteen files that each duplicated the * same :root block. Same discipline this project already applies to PHP * (lib/format.php, lib/nav.php, etc.), just for CSS. * * Loaded via a plain in each page's , before * that page's own small amount of page-specific CSS (layout quirks that * only make sense on one page stay in that page, not here). */ :root{ /* A warm, light "scorecard paper" base — the same vintage-sports palette as the homepage (navy, sky blue, olive, honey, blaze orange), reframed around a light ground rather than dark mode. See index.php for the original reasoning; this is the same system, centralized. */ --bg: #FAF5E9; --panel: #FFFFFF; --panel-raised: #F3EEE0; --line: #E4D9C2; --ink: #1C2B35; --dim: #64707A; --blue: #33658A; /* Baltic Blue — informational / step markers */ --sky: #86BBD8; /* Sky Reflection — light tints, hover washes */ --green: #758E4F; /* Palm Leaf — action / live / positive */ --honey: #F6AE2D; /* Honey Bronze — feature highlights */ --orange: #F26419; /* Blaze Orange — collision / conflict / warning */ --green-hover: #62764A; --green-bg: #EEF1E6; --green-line: #C7D3B1; --orange-bg: #FCEADC; --orange-line: #F3BE97; --orange-text: #C24A0E; --honey-bg: #FDF1D9; --honey-line: #F0D28A; --honey-text: #A6720F; /* lib/nav.php (shared across every page) falls back to a hardcoded lime if --lime isn't defined. Aliasing it here keeps the nav's accent link in this palette instead of the old bright acid-green. --bad is aliased for the same reason: pages being migrated one at a time may still have an inline style="" referencing the old name before that specific line gets cleaned up — this keeps it resolving to something sensible instead of silently breaking during the transition. */ --lime: #758E4F; --bad: #C24A0E; --font-display: 'Big Shoulders Display', sans-serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'DM Mono', monospace; } *{ box-sizing: border-box; } body{ margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font-body), system-ui, sans-serif; padding: 56px 20px; -webkit-font-smoothing: antialiased; } a{ color: inherit; } :focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; } /* ---------- layout widths — pick the one that fits the page ---------- */ .wrap{ max-width: 640px; margin: 0 auto; } .wrap-sm{ max-width: 420px; margin: 0 auto; } .wrap-lg{ max-width: 920px; margin: 0 auto; } .wrap-xl{ max-width: 1080px; margin: 0 auto; } /* ---------- headings ---------- */ h1{ font-size: 22px; margin-bottom: 6px; } h1 span{ color: var(--green); } h2{ font-size: 14px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); margin-bottom: 14px; } .sub{ color: var(--dim); font: 13px var(--font-mono); margin-bottom: 26px; } p.small{ color: var(--dim); font-size: 13px; } p.small a{ color: var(--green); text-decoration: none; } /* ---------- cards ---------- */ .card{ background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px; margin-bottom: 16px; } /* ---------- banners (success / error / warning) ---------- */ .msg{ background: var(--green-bg); border: 1px solid var(--green-line); color: var(--green); border-radius: 10px; padding: 13px 16px; margin-bottom: 18px; font-size: 14px; } .err{ background: var(--orange-bg); border: 1px solid var(--orange-line); color: var(--orange-text); border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; } .err p + p{ margin-top: 4px; } .warn{ background: var(--honey-bg); border: 1px solid var(--honey-line); color: var(--honey-text); border-radius: 10px; padding: 13px 16px; margin-bottom: 18px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .warn form{ display: inline; } .banner{ background: var(--orange-bg); border: 1px solid var(--orange-line); color: var(--orange-text); border-radius: 10px; padding: 13px 16px; margin-bottom: 20px; font-size: 14px; } .banner.ok{ background: var(--green-bg); border-color: var(--green-line); color: var(--green); } /* ---------- status text ---------- */ .status{ font: 500 13px var(--font-mono); letter-spacing: 0.04em; margin-bottom: 14px; } .on, .ok{ color: var(--green); } .off{ color: var(--dim); } .bad{ color: var(--orange-text); } /* ---------- buttons ---------- */ button, input[type="submit"]{ font: 500 13px var(--font-mono); cursor: pointer; border-radius: 8px; padding: 9px 14px; border: 1px solid var(--line); background: transparent; color: var(--ink); } button.primary{ background: var(--green); color: var(--bg); border: none; } button.primary:hover{ background: var(--green-hover); } button.danger{ color: var(--orange-text); border-color: var(--orange-line); } button.small{ padding: 6px 10px; font-size: 12px; } button.ghost{ background: transparent; color: var(--dim); border: 1px solid var(--line); } /* full-width, larger CTA-style button (login/signup submit) */ .btn-block{ width: 100%; margin-top: 22px; background: var(--green); color: var(--bg); border: none; border-radius: 9px; padding: 13px; font: 600 14px var(--font-mono); cursor: pointer; text-align: center; text-decoration: none; display: block; box-sizing: border-box; } .btn-block:hover{ background: var(--green-hover); } .row{ display: flex; gap: 10px; flex-wrap: wrap; } /* ---------- forms ---------- */ label{ display: block; font: 500 13px var(--font-mono); color: var(--dim); margin: 16px 0 6px; } label:first-of-type{ margin-top: 0; } input, select, textarea{ width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; color: var(--ink); font: 15px var(--font-body); } input:focus, select:focus, textarea:focus{ outline: none; border-color: var(--green); } /* ---------- pills / badges ---------- */ .pill{ font: 500 11px var(--font-mono); padding: 3px 9px; border-radius: 20px; border: 1px solid var(--line); white-space: nowrap; display: inline-block; } .pill.on, .pill.ok{ color: var(--green); border-color: var(--green-line); } .pill.off{ color: var(--dim); } .pill.bad{ color: var(--orange-text); border-color: var(--orange-line); } /* ---------- stat grids (admin dashboards) ---------- */ .statgrid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; } .stat{ background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; } .stat .n{ font: 700 26px var(--font-mono); color: var(--ink); } .stat .l{ font-size: 12px; color: var(--dim); margin-top: 2px; } .stat.bad .n{ color: var(--orange-text); } .row-split{ display: flex; gap: 20px; flex-wrap: wrap; } .row-split > div{ flex: 1; min-width: 220px; } /* ---------- tables ---------- */ table{ width: 100%; border-collapse: collapse; font-size: 13px; } th{ text-align: left; font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); padding: 0 8px 10px; border-bottom: 1px solid var(--line); } td{ padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; } tr:last-child td{ border-bottom: none; } .empty{ color: var(--dim); font-size: 14px; padding: 4px 0; } /* ---------- bar chart (admin stats — email volume) ---------- */ .bars{ display: flex; align-items: flex-end; gap: 4px; height: 80px; margin-top: 10px; } .bars .bar{ flex: 1; background: var(--line); border-radius: 3px 3px 0 0; position: relative; min-height: 2px; } .bars .bar .fail{ background: var(--orange); border-radius: 3px 3px 0 0; position: absolute; bottom: 0; left: 0; right: 0; } .barlabels{ display: flex; gap: 4px; margin-top: 4px; } .barlabels span{ flex: 1; text-align: center; font: 10px var(--font-mono); color: var(--dim); } /* ---------- log / preformatted output ---------- */ pre.errlog, pre.logtail{ background: var(--panel-raised); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font: 12px var(--font-mono); color: var(--dim); overflow-x: auto; white-space: pre-wrap; max-height: 300px; overflow-y: auto; } pre.runoutput{ background: var(--green-bg); border: 1px solid var(--green-line); border-radius: 8px; padding: 10px 12px; font: 11px var(--font-mono); color: var(--green); overflow-x: auto; white-space: pre-wrap; max-height: 260px; overflow-y: auto; margin-top: 10px; } /* ---------- list rows (dashboard feed list, etc.) ---------- */ .feedlist{ list-style: none; } .feedlist li{ display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); } .feedlist li:last-child{ border-bottom: none; } .feedlist .meta{ font-size: 14px; } .feedlist .plat{ color: var(--dim); font: 12px var(--font-mono); display: block; margin-top: 2px; } a.addlink{ display: block; text-align: center; margin-top: 14px; font: 500 13px var(--font-mono); color: var(--green); text-decoration: none; border: 1px dashed var(--line); border-radius: 9px; padding: 11px; } /* ---------- admin action panels (admin-families.php) ---------- */ .actions-panel{ margin-top: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px; } .actions-panel form{ display: inline-block; margin: 0 6px 6px 0; } .actions-panel button{ font: 500 12px var(--font-mono); cursor: pointer; border-radius: 7px; padding: 6px 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); } .actions-panel button.danger{ color: var(--orange-text); border-color: var(--orange-line); } .actions-panel button.primary{ background: var(--green); color: var(--bg); border: none; } /* ---------- shared top nav (lib/nav.php) ---------- */ nav.topnav{ display: flex; align-items: center; justify-content: space-between; max-width: 1080px; margin: 0 auto; padding: 14px 24px; font-family: var(--font-body); } nav.topnav .brand{ font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; } nav.topnav .brand span{ color: var(--green); } nav.topnav .navlinks{ display: flex; gap: 18px; align-items: center; font-family: var(--font-mono); font-size: 13px; } nav.topnav .navlinks a{ text-decoration: none; color: var(--dim); } nav.topnav .navlinks a:hover{ color: var(--ink); } nav.topnav .navlinks a.accent{ color: var(--green); } /* ---------- legal content pages (privacy, terms, refund policy, etc.) ---------- */ .legal h1{ font-size: 26px; margin-bottom: 4px; } .legal .updated{ color: var(--dim); font: 13px var(--font-mono); margin-bottom: 36px; } .legal h2{ font: 700 15px var(--font-body); text-transform: none; letter-spacing: normal; color: var(--ink); margin: 32px 0 10px; } .legal p, .legal li{ font-size: 14.5px; line-height: 1.65; color: var(--ink); } .legal ul{ margin: 8px 0; padding-left: 20px; } .legal li{ margin-bottom: 4px; } .legal p{ margin: 0 0 12px; } .legal a{ color: var(--green); } /* ---------- third-party connection disclaimer (onboarding, dashboard edit-feed) ---------- */ .thirdparty-note{ margin: -8px 0 4px; font-size: 11.5px; color: var(--dim); font-style: italic; } /* ---------- required consent checkboxes (billing-confirm, signup) ---------- */ .agree-row{ display:flex; gap:10px; align-items:flex-start; margin-top:16px; } .agree-row input{ width:auto; margin-top:3px; } .agree-row label{ margin:0; text-transform:none; letter-spacing:normal; font-family:var(--font-body); font-size:13.5px; color:var(--ink); font-weight:400; } .agree-row label a{ color: var(--green); } /* ---------- sitewide footer (lib/footer.php) ---------- */footer.sitewide{ max-width: 1080px; margin: 56px auto 0; padding: 20px 24px; border-top: 1px solid var(--line); text-align: center; font: 11px var(--font-mono); color: var(--dim); opacity: 0.75; } footer.sitewide a{ color: var(--dim); text-decoration: none; } footer.sitewide a:hover{ color: var(--ink); } footer.sitewide .sep{ margin: 0 8px; color: var(--line); }