/* Prayer Circle — shared theme Created 2026-09-04. One palette for every page on prayercircle.co.uk, matching the app's red and white rather than the purple and gold the new site launched with. Light is the default and dark is opt-in, in this order: 1. ?theme=light|dark — how the app opens these pages 2. data-theme on — the toggle, remembered in localStorage 3. prefers-color-scheme — the device setting pc-theme.js sets the attribute before paint so there is no flash. --pc-brand is the app's red. It appears 90 times across the Flutter source, so it, not AppColors.primary (#E53935), is what people actually see. On dark grounds it lightens to --pc-brand-on-dark: #EC2A37 on near-black fails contrast for text and small shapes. */ :root { color-scheme: light; --pc-brand: #ec2a37; --pc-brand-strong: #c4121f; --pc-brand-soft: rgba(236, 42, 55, .10); --pc-brand-line: rgba(236, 42, 55, .35); --pc-on-brand: #ffffff; --pc-bg: #ffffff; --pc-surface: #faf7f7; --pc-surface-2: #f2edee; --pc-text: #1a1114; --pc-muted: #6a6169; --pc-border: #e8e0e1; --pc-hero-from: #ec2a37; --pc-hero-to: #a80d18; --pc-hero-text: #ffffff; --pc-hero-mid: #d01824; --pc-hero-accent: #ffc9cd; --pc-brand-lite: #ff6b74; --pc-star: #f5a623; --pc-code-bg: #16100f; --pc-success: #1f9d55; --pc-danger: #c4121f; --pc-shadow: 0 1px 3px rgba(26, 17, 20, .08), 0 8px 24px rgba(26, 17, 20, .06); --pc-shadow-lg: 0 10px 40px rgba(26, 17, 20, .12); --pc-radius: 14px; --pc-radius-lg: 22px; --pc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* The device setting, unless a choice has been stamped on . */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --pc-brand: #ff5c68; --pc-brand-strong: #ff8189; --pc-brand-soft: rgba(255, 92, 104, .14); --pc-brand-line: rgba(255, 92, 104, .40); --pc-on-brand: #2a0206; --pc-bg: #120b0c; --pc-surface: #1c1113; --pc-surface-2: #26181b; --pc-text: #f6eef0; --pc-muted: #b3a4a7; --pc-border: rgba(255, 255, 255, .12); --pc-hero-from: #8f0d17; --pc-hero-to: #3d0509; --pc-hero-text: #ffffff; --pc-hero-mid: #66090f; --pc-hero-accent: #ffb3b9; --pc-brand-lite: #ff8189; --pc-star: #ffc94d; --pc-code-bg: #16100f; --pc-success: #4ade80; --pc-danger: #ff7d86; --pc-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .4); --pc-shadow-lg: 0 10px 40px rgba(0, 0, 0, .5); } } /* The explicit choice, so the toggle wins in both directions. */ :root[data-theme="dark"] { color-scheme: dark; --pc-brand: #ff5c68; --pc-brand-strong: #ff8189; --pc-brand-soft: rgba(255, 92, 104, .14); --pc-brand-line: rgba(255, 92, 104, .40); --pc-on-brand: #2a0206; --pc-bg: #120b0c; --pc-surface: #1c1113; --pc-surface-2: #26181b; --pc-text: #f6eef0; --pc-muted: #b3a4a7; --pc-border: rgba(255, 255, 255, .12); --pc-hero-from: #8f0d17; --pc-hero-to: #3d0509; --pc-hero-text: #ffffff; --pc-hero-mid: #66090f; --pc-hero-accent: #ffb3b9; --pc-brand-lite: #ff8189; --pc-star: #ffc94d; --pc-code-bg: #16100f; --pc-success: #4ade80; --pc-danger: #ff7d86; --pc-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .4); --pc-shadow-lg: 0 10px 40px rgba(0, 0, 0, .5); } /* ------------------------------------------------------------------ base */ html { scroll-behavior: smooth; } body { background: var(--pc-bg); color: var(--pc-text); font-family: var(--pc-font); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--pc-brand); } ::selection { background: var(--pc-brand); color: var(--pc-on-brand); } :where(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--pc-brand); outline-offset: 2px; } /* --------------------------------------------------------- theme toggle */ .pc-theme-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; font: inherit; font-size: 13px; line-height: 1; color: var(--pc-text); background: var(--pc-surface); border: 1px solid var(--pc-border); border-radius: 999px; cursor: pointer; } .pc-theme-toggle:hover { background: var(--pc-surface-2); } .pc-theme-toggle .pc-theme-label { font-weight: 600; } /* Pages that put the toggle inside a dark bar want it readable there. */ .pc-on-dark .pc-theme-toggle { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); } .pc-on-dark .pc-theme-toggle:hover { background: rgba(255, 255, 255, .2); }