:root { --bg: #0b1020; --card: #151b30; --ink: #e7ecf5; --muted: #9aa6c0; --accent: #2d8cff; --ok: #38c172; --line: #25304d; /* Text links. Same blue as --accent and the same green as --ok, but named separately so a restyle of the buttons/badges that use those two doesn't silently repaint every link on every page. */ --link: #2d8cff; --link-hover: #38c172; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.5; } /* apphome.ejs only (see server/views/apphome.ejs's and public/js/apphome-camera-toggle.js). Transparent by DEFAULT — the same "camera-safe by default" principle already applied to apphome.ejs's content (see #apphome-camera in apphome.ejs) extended to the page background: a solid background would paint over the live camera feed wherever the camera tile isn't covered by a card, in every surface, before client-side JS has even run. Restored to the normal opaque var(--bg) only once apphome-camera-toggle.js confirms we're NOT in the Camera surface. */ .apphome-body { background: transparent; } .apphome-body.not-camera { background: var(--bg); } .app { max-width: 720px; margin: 0 auto; padding: 2.5rem 1.25rem; } .header h1 { margin: 0 0 0.25rem; font-size: 1.5rem; } .header .sub { margin: 0 0 1.5rem; color: var(--muted); } .card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 1rem; } .card h2 { margin: 0 0 0.75rem; font-size: 1.05rem; transition: color 0.2s ease, text-shadow 0.2s ease; } .card h2.highlight { color: var(--accent); text-shadow: 0 0 0.5rem rgba(45, 140, 255, 0.6); } .card h3 { margin: 1rem 0 0.4rem; font-size: 0.9rem; color: var(--muted); } .kv { display: grid; grid-template-columns: 9rem 1fr; gap: 0.35rem 1rem; font-size: 0.95rem; } .kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-all; } .badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; } .badge.ok { background: rgba(56, 193, 114, 0.15); color: var(--ok); } .badge.muted { background: rgba(154, 166, 192, 0.15); color: var(--muted); } .btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; padding: 0.6rem 1.1rem; border-radius: 8px; font-weight: 600; } /* ── Links ──────────────────────────────────────────────────────────────── Global, applies to every on every page (home.css is the one stylesheet loaded by all views). Underlined blue at rest, green with the underline removed on hover. :visited is given the SAME treatment as :link deliberately — the browser default of recolouring visited links is not wanted here, and the pair has to be stated explicitly because `a:visited` (0,1,1) outranks a bare `a` (0,0,1). :focus-visible rides along with :hover so keyboard users get the same feedback; it is focus-VISIBLE rather than :focus so a mouse click doesn't leave the link stuck green afterwards. */ a, a:link, a:visited { color: var(--link); text-decoration: underline; } a:hover, a:focus-visible { color: var(--link-hover); text-decoration: none; } /* .btn is an painted as a button (blue fill, white text) — the rule above would underline it and turn its label green on hover, so it opts out. Listed with the same states so it wins on specificity rather than source order. */ a.btn, a.btn:link, a.btn:visited, a.btn:hover, a.btn:focus-visible { color: #fff; text-decoration: none; } /* Kept as an alias: .link predates the global rule above and is still on the nav/footer anchors, which now inherit their colour from it anyway. */ .link { color: var(--link); } /* Button + secondary link row (e.g. the logout confirm form). */ .actions { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; } /* In-client sign-in progress line (apphome.js). Empty until it has something to say, so it takes no space in the recognised/idle states. */ .status { margin: 0.75rem 0 0; min-height: 1.2em; color: var(--muted); font-size: 0.9rem; } .foot { margin-top: 1.5rem; color: var(--muted); font-size: 0.85rem; } .site-foot { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.85rem; } .site-foot .dot { margin: 0 0.5rem; color: var(--muted); } .site-menu { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); font-size: 0.85rem; } .site-menu .dot { margin: 0 0.5rem; color: var(--muted); } .kv-list { list-style: none; margin: 0; padding: 0; font-size: 0.95rem; } .kv-list li { padding: 0.35rem 0; border-bottom: 1px solid var(--line); } .kv-list li:last-child { border-bottom: none; } // now follows polls.css content, which is included in home.css for this app, so that the app can be used in the Zoom client without needing to load a second CSS file. This is done by including the pollsCssUrl in the head of the import and export pages. The polls.css file is also included in the home page for use when running outside of the Zoom client. /* Poll list page — layered on top of home.css, which owns the palette. */ :root { --warn: #f0b429; --quiz: #b98cff; } /* Poll cards carry more content than the base pages, so widen the column. */ .app.wide { max-width: 880px; } .muted { color: var(--muted); } .small { font-size: 0.85rem; } .card.warn { border-color: rgba(240, 180, 41, 0.5); } .stats { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0 0 1rem; padding: 0; list-style: none; color: var(--muted); font-size: 0.95rem; } .stats strong { color: var(--ink); font-size: 1.1rem; } .window-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; } .window-form label { display: flex; flex-direction: column; gap: 0.25rem; color: var(--muted); font-size: 0.85rem; } .window-form input { width: 5rem; padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; } /* Put the rescan form beside the scan summary when there is room, and let it wrap underneath on narrow viewports (Zoom sidebar, small phones) instead of relying on a fixed breakpoint. */ #scan { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; } /* The flex-BASIS is what makes the wrap happen: flexbox breaks a line when the items' hypothetical sizes overflow, so `1 1 auto` + min-width:0 would let the summary squeeze to a sliver and never wrap. A basis says "below this, put the form on its own row" — fluid at every width, no media query. */ .scan-summary { flex: 1 1 15rem; min-width: 0; } .scan-summary h2 { margin-bottom: 0.25rem; } .scan-summary .stats { margin: 0; } #rescan { flex: 0 1 auto; min-width: 0; max-width: 100%; } /* home.css styles .btn for links; these are the bits a