/* Freedback site design system — the single source of truth for the look of * every page served under freedback.net (the landing page and the static demo * pages). The React showcase at /demo/ mirrors these exact tokens in * demo-react/src/styles.css (kept in sync by hand — change both together). * * Theming: light is the base. Dark applies automatically when the OS/browser * asks for it (prefers-color-scheme), UNLESS the visitor has pinned a theme via * the toggle (theme.js writes data-theme="light|dark" on + localStorage). * So the precedence is: explicit toggle > system preference > light. */ :root { --fb-bg: #fafafa; --fb-surface: #ffffff; --fb-ink: #1a1a1a; --fb-muted: #555; --fb-line: #e3e3e3; --fb-accent: #0857c3; --fb-accent-ink: #ffffff; --fb-soft: #eef2f9; --fb-code-bg: #f3f3f3; --fb-banner-bg: #fff7e6; --fb-banner-line: #f0d28a; --fb-banner-ink: #6b4e00; --fb-danger: #c00; /* Code blocks (snippets) stay dark in both themes on purpose. */ --fb-block-bg: #1e1e2e; --fb-block-ink: #e6e6f0; --fb-radius: 10px; --fb-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); color-scheme: light; } /* The dark palette, applied both when following the system AND when pinned. The * two selectors share identical declarations (plain CSS can't dedupe them). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fb-bg: #15171a; --fb-surface: #1b1e22; --fb-ink: #e8e8e8; --fb-muted: #9aa0a6; --fb-line: #2c3036; --fb-accent: #6ea8fe; --fb-accent-ink: #0b1220; --fb-soft: #21262d; --fb-code-bg: #25282c; --fb-banner-bg: #2a2410; --fb-banner-line: #5c4d12; --fb-banner-ink: #e8d48a; --fb-danger: #ff6b6b; color-scheme: dark; } } :root[data-theme="dark"] { --fb-bg: #15171a; --fb-surface: #1b1e22; --fb-ink: #e8e8e8; --fb-muted: #9aa0a6; --fb-line: #2c3036; --fb-accent: #6ea8fe; --fb-accent-ink: #0b1220; --fb-soft: #21262d; --fb-code-bg: #25282c; --fb-banner-bg: #2a2410; --fb-banner-line: #5c4d12; --fb-banner-ink: #e8d48a; --fb-danger: #ff6b6b; color-scheme: dark; } /* ---- base ---------------------------------------------------------------- */ * { box-sizing: border-box; } body { margin: 0; font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--fb-ink); background: var(--fb-bg); } main { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.1rem 4rem; } a { color: var(--fb-accent); } h1 { margin: 0; font-size: 2.2rem; letter-spacing: -0.02em; } h2 { margin-top: 2.5rem; border-bottom: 1px solid var(--fb-line); padding-bottom: 0.3rem; } code { background: var(--fb-code-bg); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.9em; word-break: break-word; } pre { background: var(--fb-block-bg); color: var(--fb-block-ink); border-radius: 8px; padding: 0.85rem 1rem; overflow-x: auto; font-size: 0.85rem; line-height: 1.5; } pre code { background: none; padding: 0; color: inherit; } /* ---- page chrome --------------------------------------------------------- */ .home-link, .sub { margin-top: 0.3rem; } .home-link { margin: 0 0 0.6rem; font-size: 0.95rem; } .sub { color: var(--fb-muted); font-size: 1.1rem; } .section-note { color: var(--fb-muted); margin-top: -0.4rem; } .cta { display: inline-block; margin: 0.4rem 0.6rem 0.4rem 0; padding: 0.6rem 1.1rem; background: var(--fb-accent); color: var(--fb-accent-ink); border-radius: 8px; text-decoration: none; font-weight: 600; } .cta.secondary { background: var(--fb-soft); color: var(--fb-accent); } .demos { list-style: none; padding-left: 0; } .demos li { margin: 0.5rem 0; } .nav { margin-top: 2.4rem; } footer { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--fb-line); color: var(--fb-muted); font-size: 0.9rem; } /* ---- components ---------------------------------------------------------- */ .banner { margin: 1.4rem 0; padding: 0.8rem 1.1rem; border-radius: var(--fb-radius); background: var(--fb-banner-bg); border: 1px solid var(--fb-banner-line); color: var(--fb-banner-ink); font-size: 0.95rem; } .banner strong { color: inherit; } .card { margin: 1.2rem 0; padding: 1rem 1.25rem 1.1rem; border: 1px solid var(--fb-line); border-radius: var(--fb-radius); background: var(--fb-surface); } .card h3 { margin: 0 0 0.25rem; } .card .uri { font-size: 0.85rem; color: var(--fb-muted); margin: 0 0 0.6rem; word-break: break-all; } .card .blurb { color: var(--fb-muted); margin: 0.3rem 0 0.9rem; font-size: 0.96rem; } .widget-host, .widgets { margin: 0.25rem 0 0.5rem; } .widgets { display: flex; flex-direction: column; gap: 0.7rem; } .snippet { margin-top: 0.5rem; } .snippet summary { cursor: pointer; color: var(--fb-accent); font-size: 0.9rem; } .snippet pre { margin: 0.5rem 0 0; } /* Form / questionnaire building blocks (collect + questionnaire pages). */ .q { background: var(--fb-surface); border: 1px solid var(--fb-line); border-radius: var(--fb-radius); padding: 1rem 1.1rem; margin: 1rem 0; } .q > label { display: block; font-weight: 600; margin-bottom: 0.5rem; } .q small { color: var(--fb-muted); font-weight: 400; } .export-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1rem 0; } .count { color: var(--fb-muted); } /* Action button (exports, etc.) — a class, NOT bare `button`, so it never * clobbers the widgets' own light-DOM buttons (.fb-stars button et al.). */ .fb-btn { font: inherit; cursor: pointer; color: var(--fb-accent-ink); background: var(--fb-accent); border: none; border-radius: 6px; padding: 0.45rem 0.9rem; } .fb-btn.secondary { background: var(--fb-soft); color: var(--fb-accent); } .fb-btn:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 2px; } /* ---- theme toggle -------------------------------------------------------- */ .fb-theme-toggle { position: fixed; top: 0.8rem; right: 0.8rem; z-index: 20; width: 2.3rem; height: 2.3rem; border-radius: 999px; border: 1px solid var(--fb-line); background: var(--fb-surface); color: var(--fb-ink); font-size: 1.1rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--fb-shadow); } .fb-theme-toggle:hover { border-color: var(--fb-accent); } .fb-theme-toggle:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 2px; } /* ---- widget visuals ----------------------------------------------------- * The shipped widgets (widgets/freedback-widgets.js) render light-DOM markup * with these classes and inject NO styles of their own, so the page owns their * look. Mirrors widgets/demo.html, themed via the tokens above. */ .fb-row { display: flex; gap: 0.25rem; align-items: center; } .fb-stars button, .fb-thumb button { font-size: 1.4rem; background: none; border: none; cursor: pointer; padding: 0 0.1rem; line-height: 1; color: inherit; } .fb-stars button:disabled, .fb-thumb button:disabled { cursor: default; opacity: 0.6; } .fb-agg { color: var(--fb-muted); margin-left: 0.5rem; font-variant-numeric: tabular-nums; } .fb-status { color: var(--fb-danger); margin-left: 0.5rem; font-size: 0.85rem; } .fb-comment .fb-row, .fb-tag .fb-row { gap: 0.4rem; margin-bottom: 0.5rem; } .fb-in { flex: 1; padding: 0.35rem 0.5rem; border: 1px solid var(--fb-line); border-radius: 6px; background: var(--fb-surface); color: var(--fb-ink); } .fb-comment button, .fb-tag button, .fb-scalar .fb-send { padding: 0.35rem 0.7rem; border: 1px solid var(--fb-line); border-radius: 6px; background: var(--fb-soft); color: var(--fb-ink); cursor: pointer; } .fb-scalar { display: flex; gap: 0.5rem; align-items: center; } .fb-out { font-variant-numeric: tabular-nums; min-width: 1.5em; text-align: center; } .fb-list { list-style: none; padding: 0; margin: 0.25rem 0 0; } .fb-list li { padding: 0.35rem 0.6rem; background: var(--fb-soft); border-radius: 6px; margin-bottom: 0.3rem; } .fb-chip { display: inline-block; background: var(--fb-soft); border-radius: 999px; padding: 0.1em 0.7em; margin: 0.15em 0.25em 0.15em 0; font-size: 0.85rem; } /* A discreet author fingerprint next to a piece of feedback — a "same * author?" glance, and (with `data-author-href`) a link to a view of that * identity used as an ordinary feedback target (an author's own IRI). */ .fb-fp { color: var(--fb-muted); font-size: 0.78rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-decoration: none; opacity: 0.75; } a.fb-fp:hover, a.fb-fp:focus-visible { opacity: 1; text-decoration: underline; } /* "Delete my feedback" (right to erasure, ADR 0021): a small × the widgets * render on the visitor's OWN items (and as post-publish undo on ratings). */ .fb-del { background: none; border: none; color: var(--fb-muted); cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0 0.25rem; margin-left: 0.35rem; border-radius: 4px; vertical-align: baseline; } .fb-del:hover, .fb-del:focus-visible { color: var(--fb-danger); background: var(--fb-surface); } .fb-chip .fb-del { margin-left: 0.15rem; padding: 0 0.1rem; font-size: 0.85rem; } /* (problem reports, ADR 0023): shares the comment look; * each reported issue is marked with a leading ⚠. */ .fb-issue .fb-row { gap: 0.4rem; margin-bottom: 0.5rem; } .fb-issue button { padding: 0.35rem 0.7rem; border: 1px solid var(--fb-line); border-radius: 6px; background: var(--fb-soft); color: var(--fb-ink); cursor: pointer; } .fb-issue textarea.fb-in { resize: vertical; font: inherit; } .fb-issue .fb-list li.fb-issue-item::before { content: "⚠ "; } /* Threaded replies (ADR 0024): opt-in via `data-replies`. A "Reply" control * on each comment/reply reveals an inline form; the replies that target an * item nest beneath it, indented with a connecting rule. */ .fb-reply-btn { background: none; border: none; color: var(--fb-muted); cursor: pointer; font-size: 0.78rem; padding: 0 0.25rem; margin-left: 0.35rem; border-radius: 4px; } .fb-reply-btn:hover, .fb-reply-btn:focus-visible { color: var(--fb-ink); text-decoration: underline; } .fb-reply-form { margin-top: 0.35rem; gap: 0.4rem; } .fb-reply-form .fb-in { flex: 1; } .fb-replies { list-style: none; padding: 0; margin: 0.4rem 0 0 0.75rem; border-left: 2px solid var(--fb-line); padding-left: 0.6rem; } .fb-replies li.fb-reply-item { background: transparent; padding: 0.25rem 0; margin-bottom: 0.2rem; } /* ---- compiled docs (/docs/**, built from docs/*.md by docs-tools) --------- */ /* The wrapper the doc compiler puts around rendered Markdown. Widens the column * a touch (prose + tables + wide code fences) and gives the generated headings, * tables, blockquotes and lists a readable rhythm using the site tokens. */ main.doc { max-width: 52rem; } .doc-nav { margin: 0 0 1.5rem; font-size: 0.95rem; color: var(--fb-muted); } .doc h1 { font-size: 2rem; } .doc h2 { margin-top: 2.2rem; } .doc h3 { margin-top: 1.8rem; } .doc h4 { margin-top: 1.4rem; color: var(--fb-muted); } .doc p, .doc li { line-height: 1.65; } .doc ul, .doc ol { padding-left: 1.4rem; } .doc li { margin: 0.25rem 0; } .doc blockquote { margin: 1rem 0; padding: 0.35rem 0 0.35rem 1rem; border-left: 3px solid var(--fb-line); color: var(--fb-muted); } .doc blockquote p { margin: 0.4rem 0; } .doc hr { border: none; border-top: 1px solid var(--fb-line); margin: 2rem 0; } /* Tables scroll horizontally on narrow screens rather than break the layout. */ .doc table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.92rem; display: block; overflow-x: auto; } .doc th, .doc td { border: 1px solid var(--fb-line); padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; } .doc th { background: var(--fb-soft); } .doc img { max-width: 100%; } /* The docs index / ADR index listing. */ .doc-list { list-style: none; padding: 0; } .doc-list li { padding: 0.5rem 0.7rem; background: var(--fb-soft); border-radius: 6px; margin-bottom: 0.4rem; }