/* Nudgery — document styling for static policy/legal pages. Pairs with the shared /assets/fonts/fonts.css (Atkinson Hyperlegible Next, which sets --font-body and the html font-family). No JS, no external requests. */ /* Palette mirrors the Nudgery app's brand system (see app DESIGN.md): violet leads, teal secondary, golden yellow as a sparing accent. The app is designed dark-first, and the site wears dark as its canonical face (not following the visitor's OS). To instead follow the OS, move these dark values into @media (prefers-color-scheme: dark) and restore the light palette (kept below, commented) as the :root default. */ :root { color-scheme: dark; --bg: #141218; /* near-black, violet undertone */ --fg: #e7e3ef; /* violet-tinted near-white */ --muted: #a39daf; --rule: #2c2933; --surface: #1e1b24; /* card surface, one step from bg */ --link: #c8a8f0; /* violet primary, desaturated for dark */ --link-hover: #ddc6fb; --teal: #6ec9c0; /* secondary */ --accent: #ffcc55; /* golden yellow — high-contrast on dark; whimsy accent */ --accent-bg: var(--surface); } /* Legal/document pages (e.g. the privacy policy) opt into a sober, neutral light theme via class="legal" on — minimal brand personality, closer to a plain document. (The app's *brand* light palette, if ever wanted instead: --bg #f5f0ff · --fg #1a1820 · --muted #5f5a6b · --rule #ddd5ec · --surface #ede8f5 · --link #5b3a8a · --teal #1c7069.) */ :root.legal { color-scheme: light; --bg: #fcfcfb; /* plain near-white */ --fg: #1b1b1a; /* neutral near-black */ --muted: #5a5a57; --rule: #e2e2dd; --surface: #f2f2ee; /* faint grey for the TL;DR callout */ --link: #2d4a7a; /* sober slate-blue, not brand violet */ --link-hover: #1e3358; --teal: #2d4a7a; --accent: #ffcc55; --accent-bg: var(--surface); } * { box-sizing: border-box; } html { /* font-family inherited from fonts.css (--font-body) */ font-size: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-size: 1.125rem; line-height: 1.6; } main { max-width: 42rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; } header.doc { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); } h1 { font-weight: 800; font-size: 1.9rem; line-height: 1.2; margin: 0 0 0.5rem; } h2 { font-weight: 700; font-size: 1.3rem; line-height: 1.25; margin: 2.5rem 0 0.6rem; } h3 { font-weight: 700; font-size: 1.05rem; margin: 1.6rem 0 0.4rem; } p, li { margin: 0.6rem 0; } ul { padding-left: 1.25rem; } a { color: var(--link); text-underline-offset: 0.15em; } a:hover { color: var(--link-hover); } a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 2px; } .meta { color: var(--muted); font-size: 0.95rem; margin: 0.25rem 0; } .tldr { background: var(--accent-bg); border: 1px solid var(--rule); border-radius: 16px; padding: 0.75rem 1.25rem 1rem; margin-top: 0.5rem; } .tldr h2 { margin-top: 0.75rem; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--accent-bg); padding: 0.1em 0.35em; border-radius: 4px; } /* Tables (e.g. the guide's per-question-type visualization matrix). */ table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.98rem; } th, td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule); vertical-align: top; } th { font-weight: 700; color: var(--fg); } caption { text-align: left; color: var(--muted); font-size: 0.9rem; margin-bottom: 0.4rem; } /* Nested sub-bullets (caveats under a question type) read as secondary. */ li > ul { margin: 0.3rem 0 0.5rem; } li > ul li { color: var(--muted); } /* Masthead tagline. "Ask yourself." is the app's real tagline; the violet ties it to the brand. The longer line is supporting. */ .tagline { font-size: 1.35rem; font-weight: 700; color: var(--link); margin: 0.35rem 0 0; } .subtagline { font-size: 1.05rem; color: var(--muted); margin: 0.15rem 0 0; } /* Hero nudge card — a faithful, static Nudgery notification. Surface card with the app's rounded-16 shape language; the question carries the weight, the inert Yes/No "buttons" echo the app's outlined style. */ .nudge-card { margin: 2rem 0; padding: 1rem 1.25rem 1.1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.35); } .nudge-card__head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--muted); } .nudge-card__icon { border-radius: 5px; flex: none; } .nudge-card__app { font-weight: 600; color: var(--fg); } .nudge-card__when { margin-left: auto; } .nudge-card__q { font-size: 1.2rem; font-weight: 600; margin: 0.6rem 0 0.9rem; color: var(--fg); } .nudge-card__actions { display: flex; gap: 0.6rem; } .nudge-btn { flex: 1; text-align: center; padding: 0.5rem 1rem; border: 1.5px solid var(--link); border-radius: 12px; color: var(--link); font-weight: 600; } .nudge-card__cap { margin: 0.85rem 0 0; font-size: 0.85rem; color: var(--muted); } /* Example nudges — communicates "track anything" with the real sample questions. */ .examples { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; } .examples li { margin: 0; padding: 0.4rem 0.85rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; font-size: 0.95rem; } /* "Gift, not toll" support block — inline, not a banner. The Ko-fi badge is a self-hosted SVG; it's a plain link, so Ko-fi's servers are only contacted when the visitor actually clicks. */ .support { margin: 2rem 0; padding: 1rem 1.25rem; background: var(--accent-bg); border: 1px solid var(--rule); border-radius: 16px; } .support p { margin: 0 0 0.75rem; } .kofi-badge { display: inline-block; line-height: 0; } .kofi-badge img { height: 36px; width: auto; display: block; } /* Action row (e.g. Get it / Source / Privacy). */ .actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1.5rem; margin: 1.5rem 0; } /* In the masthead the row is header material — snug under the tagline, above the rule. */ .masthead .actions { margin: 1.25rem 0 0; } /* Editorial placeholder — a visible "write here" box for prose that's yours to fill. Dashed so it's obviously a draft slot, not finished content. Delete the class (and its contents) once the real prose lands. */ .writeme { border: 1px dashed var(--rule); border-radius: 16px; padding: 0.5rem 1.25rem; margin: 1rem 0; color: var(--muted); } .writeme::before { content: "✍ write here"; display: block; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0.5rem 0; } footer.doc { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.9rem; } @media print { :root { --bg: #fff; --fg: #000; --link: #000; --accent-bg: #fff; --rule: #999; } body { font-size: 11pt; } a { text-decoration: underline; } .tldr { border: 1px solid #999; } }