/* Gather UI — design tokens + components. Two skins: light (default) and dark via [data-theme="dark"] on . Mark hues validated with the dataviz palette validator (chroma + contrast). */ :root { --bg: #f6f1e7; --card: #fdfaf3; --ink: #2a241c; --muted: #7b7264; --line: #e4dbc9; --ember: #b4522a; /* action, single-series chart hue */ --ember-soft: #b4522a22; --pine: #2c7d4c; /* present / good */ --pine-soft: #2c7d4c1f; --amber: #a8842c; /* in-progress status */ --rust: #9c3a24; /* needs attention status */ --shadow: 0 1px 3px rgba(42, 36, 28, 0.08); --radius: 10px; } [data-theme="dark"] { --bg: #201a14; --card: #2a231b; --ink: #efe6d6; --muted: #a1968a; --line: #3b332a; --ember: #d97a48; --ember-soft: #d97a4829; --pine: #67c186; --pine-soft: #67c18624; --amber: #cfa64e; --rust: #c96a52; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: 16px; line-height: 1.45; } .serif, h1, h2 { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-weight: 500; letter-spacing: -0.01em; } .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } a { color: var(--ember); } button { font: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 8px; padding: 0.4rem 0.9rem; } button.primary { background: var(--ember); border-color: var(--ember); color: #fff8f0; } button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; } /* ---------- g-brand : app name line ---------- */ g-brand { display: inline-flex; align-items: baseline; gap: 0.4rem; white-space: nowrap; } g-brand .brand-org { font-size: 0.82rem; color: var(--muted); letter-spacing: 0.02em; } g-brand .brand-sep { color: var(--muted); } g-brand .brand-app { font-weight: 600; letter-spacing: 0.08em; color: var(--ember); } /* ---------- g-count : live door count ---------- */ g-count { display: flex; align-items: baseline; gap: 0.9rem; } g-count .nums { font-size: 3.2rem; line-height: 1; } g-count .nums .of { color: var(--muted); font-size: 1.6rem; } g-count .meta { color: var(--muted); font-size: 0.85rem; } g-count .first-badge { display: inline-block; background: var(--ember-soft); color: var(--ember); border-radius: 999px; padding: 0.1rem 0.6rem; font-weight: 600; font-size: 0.8rem; } /* ---------- g-card : roll-call card (the signature) ---------- */ g-card { display: block; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.85rem 1rem; cursor: pointer; user-select: none; transition: border-color 0.18s ease, background 0.18s ease, transform 0.06s ease; } g-card:active { transform: scale(0.985); } g-card .name { font-size: 1.12rem; font-weight: 600; } g-card .group { color: var(--muted); font-size: 0.8rem; margin-top: 0.1rem; } g-card .state { margin-top: 0.45rem; font-size: 0.82rem; color: var(--muted); } g-card[state="here"] { border-left-color: var(--pine); background: var(--pine-soft); } g-card[state="here"] .state { color: var(--pine); font-weight: 600; } g-card[first] .name::after { content: "first time"; color: var(--ember); background: var(--ember-soft); font-size: 0.66rem; font-weight: 700; border-radius: 999px; padding: 0.08rem 0.5rem; margin-left: 0.5rem; vertical-align: 0.15em; } @media (prefers-reduced-motion: reduce) { g-card, g-card:active { transition: none; transform: none; } } /* ---------- g-search ---------- */ g-search { display: block; } g-search input { width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.65rem 0.9rem; } g-search input::placeholder { color: var(--muted); } /* ---------- g-kpi : stat tile ---------- */ g-kpi { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.9rem 1.1rem; } g-kpi .label { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; } g-kpi .value { font-size: 2rem; line-height: 1.15; margin-top: 0.15rem; } g-kpi .hint { color: var(--muted); font-size: 0.8rem; margin-top: 0.15rem; } g-kpi[tone="alert"] .value { color: var(--rust); } g-kpi[tone="good"] .value { color: var(--pine); } /* ---------- g-trend : weekly attendance bars ---------- */ g-trend { display: block; position: relative; } g-trend svg { display: block; width: 100%; height: auto; } g-trend .bar { fill: var(--ember); } g-trend .bar:hover { opacity: 0.82; } g-trend .grid { stroke: var(--line); stroke-width: 1; } g-trend .grid:not(.baseline) { opacity: 0.55; } g-trend .axis-label { fill: var(--muted); font-size: 11px; font-family: inherit; } g-trend .direct-label { fill: var(--ink); font-size: 12px; font-weight: 600; } g-trend .tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--bg); font-size: 0.78rem; border-radius: 6px; padding: 0.25rem 0.55rem; transform: translate(-50%, -120%); white-space: nowrap; opacity: 0; transition: opacity 0.1s; } g-trend .tip.show { opacity: 1; } /* ---------- g-health : per-group bar ---------- */ g-health { display: grid; grid-template-columns: 8.5rem 1fr 3.5rem; gap: 0.7rem; align-items: center; } g-health .gname { font-size: 0.9rem; } g-health .track { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; } g-health .fill { height: 100%; background: var(--pine); border-radius: 5px 4px 4px 5px; } g-health .frac { color: var(--muted); font-size: 0.82rem; text-align: right; } /* ---------- g-chip : outreach status ---------- */ g-chip { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; padding: 0.15rem 0.65rem; border: 1px solid var(--line); color: var(--muted); } g-chip[status="flagged"] { color: var(--rust); border-color: var(--rust); } g-chip[status="assigned"] { color: var(--amber); border-color: var(--amber); } g-chip[status="contacted"] { color: var(--ember); border-color: var(--ember); } g-chip[status="reconnected"] { color: var(--pine); border-color: var(--pine); } /* ---------- g-outreach : call-list row ---------- */ g-outreach { display: grid; grid-template-columns: 1fr auto auto auto; gap: 0.9rem; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 1rem; } g-outreach .who .name { font-weight: 600; } g-outreach .who .seen { color: var(--muted); font-size: 0.8rem; } g-outreach .days { font-size: 1.3rem; color: var(--rust); text-align: center; } g-outreach .days small { display: block; font-size: 0.65rem; color: var(--muted); } /* ---------- g-meeting : meeting row ---------- */ g-meeting { display: flex; justify-content: space-between; align-items: baseline; padding: 0.55rem 0.2rem; border-bottom: 1px solid var(--line); } g-meeting .mwrap { display: flex; flex-direction: column; gap: 0.1rem; } g-meeting .when { font-size: 0.95rem; } g-meeting .where { color: var(--muted); font-size: 0.82rem; } g-meeting .topic { font-weight: 600; font-size: 0.92rem; } g-meeting .kind-pill { display: inline-block; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; padding: 0.08rem 0.55rem; margin-left: 0.45rem; vertical-align: 0.1em; } g-meeting .kind-pill.kind-pancake { color: var(--amber); border-color: var(--amber); } g-meeting .kind-pill.kind-ranch { color: var(--pine); border-color: var(--pine); } g-meeting .kind-pill.kind-vols { color: var(--ember); border-color: var(--ember); } g-meeting .count { color: var(--muted); font-size: 0.85rem; } g-meeting[upcoming] .when { color: var(--ember); font-weight: 600; } /* ---------- g-intake : add-a-member form ---------- */ g-intake form.intake { display: grid; gap: 1.05rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem; } g-intake .field label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.3rem; } g-intake .field .why { color: var(--muted); font-weight: 400; } g-intake .field input { width: 100%; font: inherit; font-size: 1.1rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 0.65rem 0.8rem; } g-intake .check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; } g-intake .check input { width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; accent-color: var(--ember); } g-intake .check .sub { color: var(--muted); font-size: 0.8rem; } g-intake .actions { display: flex; gap: 0.8rem; align-items: center; } g-intake .actions button.primary { font-size: 1.05rem; padding: 0.6rem 1.4rem; } g-intake .done { background: var(--pine-soft); border: 1px solid var(--pine); color: var(--pine); border-radius: 8px; padding: 0.8rem 1rem; font-weight: 600; display: none; } g-intake .done.show { display: block; } g-intake .error { color: var(--rust); font-size: 0.88rem; display: none; } g-intake .error.show { display: block; } /* ---------- g-meeting-grid : excel-like schedule editor ---------- */ g-meeting-grid { display: block; } g-meeting-grid .mg-head, g-meeting-grid .mg-row { display: grid; grid-template-columns: 8.6rem 5.4rem 9.5rem 10.5rem 1.2fr 1fr 3.6rem 4.6rem; gap: 0.45rem; align-items: center; padding: 0.3rem 0.5rem; } g-meeting-grid .mg-head { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; } g-meeting-grid .mg-row { background: var(--card); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 0.35rem; } g-meeting-grid input, g-meeting-grid select { font: inherit; font-size: 0.9rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 0.3rem 0.45rem; width: 100%; } g-meeting-grid .mg-row.masked { opacity: 0.45; } g-meeting-grid .mg-row.masked input, g-meeting-grid .mg-row.masked select { text-decoration: line-through; } g-meeting-grid .mask { font-size: 0.8rem; padding: 0.3rem 0.5rem; } g-meeting-grid .mg-actions { margin-top: 0.6rem; text-align: right; } /* ---------- g-quadrant : tap-your-part-of-town grid ---------- */ g-quadrant { display: block; max-width: 22rem; } g-quadrant .quad-square { position: relative; display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: var(--card); } g-quadrant .quad { border: 0; border-radius: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; cursor: pointer; padding: 1rem; } /* The two perpendicular lines: right edge of left cells, bottom edge of top cells. */ g-quadrant .quad:nth-child(odd) { border-right: 2px solid var(--ink); } g-quadrant .quad:nth-child(-n+2) { border-bottom: 2px solid var(--ink); } g-quadrant .quad:hover { background: var(--ember-soft); } g-quadrant .quad.picked { background: var(--pine-soft); } g-quadrant .quad.picked .qlabel { color: var(--pine); } g-quadrant .qlabel { font-weight: 700; font-size: 1.3rem; letter-spacing: 0.05em; } g-quadrant .qgroup { color: var(--muted); font-size: 0.82rem; } g-quadrant .quad.picked .qgroup { color: var(--pine); font-weight: 600; } g-quadrant .quad-center { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); background: var(--ember); border-radius: 50%; pointer-events: none; } /* ---------- g-gate : token entry ---------- */ g-gate { display: block; max-width: 26rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem; } g-gate h2 { margin: 0 0 0.2rem; font-size: 1.3rem; } g-gate p { color: var(--muted); font-size: 0.88rem; margin: 0 0 0.9rem; } g-gate form { display: flex; gap: 0.6rem; } g-gate input { flex: 1; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.7rem; }