/* ============================================================================ ABAT SOP Answer App — staff surface Token-driven, per-org brand themes (TheraKidz / Halcyon), light + dark. Palette drives off [data-org] on ; safety/amber stay semantic in both. Brand-network rule: the two orgs never share a primary colour. ============================================================================ */ :root { color-scheme: light dark; /* --- Neutrals (TheraKidz defaults; overridden per-org below) --- */ --bg: #FAFAF5; /* warm white */ --surface: #FFFFFF; --surface-2: #F2F2EA; /* second neutral layer: pre / feedback bar */ --ink: #1A1A1A; /* black star */ --ink-2: #5B5B54; /* muted — AA on --bg */ --border: #E4E4DA; --border-strong: #CFCFC3; /* --- Brand (TheraKidz green) --- */ --brand: #006B3F; --brand-strong: #00532F; --brand-ink: #FFFFFF; --brand-tint: #E7F0EB; /* --- Semantic states (shared: safety must be unambiguous across orgs) --- */ --urgent: #B3261E; --urgent-strong: #8C1C16; --urgent-ink: #FFFFFF; --urgent-tint: #FBEBE9; --amber: #8A6100; --amber-tint: #F6EDD7; /* --- System --- */ --focus: var(--brand); --radius: 0.625rem; --tap: 2.75rem; /* 44px minimum touch target */ --shadow-card: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 12px rgba(0, 0, 0, .04); --ease: cubic-bezier(.22, 1, .36, 1); /* ease-out-quint */ } /* Halcyon — ocean (navy primary, never green) */ :root[data-org="halcyon"] { --bg: #F7F9FB; /* cloud white */ --surface: #FFFFFF; --surface-2: #EBF1F5; --ink: #16242E; /* AA navy-ink (screen body; docx keeps storm grey) */ --ink-2: #4F5E6E; /* storm grey, darkened to AA */ --border: #DCE4EA; --border-strong: #C3D0D9; --brand: #0F2E4A; /* navy */ --brand-strong: #0A2237; --brand-ink: #FFFFFF; --brand-tint: #E6EDF2; } @media (prefers-color-scheme: dark) { :root { /* TheraKidz — warm dark, luminous green */ --bg: #14150F; --surface: #1E1F17; --surface-2: #262820; --ink: #F3F1E7; --ink-2: #B4B1A1; --border: #34362B; --border-strong: #474939; --brand: #45B57F; /* green lifted for dark-bg legibility */ --brand-strong: #5EC493; --brand-ink: #06130C; --brand-tint: #182619; --urgent: #F08A80; --urgent-strong: #F5A79F; --urgent-ink: #2A0906; --urgent-tint: #2E1512; --amber: #E8C877; --amber-tint: #2C2413; } :root[data-org="halcyon"] { /* Halcyon — deep ocean, luminous teal (navy reads as surface here) */ --bg: #0C161E; --surface: #122230; --surface-2: #1A2E3D; --ink: #E9F1F6; --ink-2: #A3B4C0; --border: #24384A; --border-strong: #34506A; --brand: #64C1B5; /* teal, lifted */ --brand-strong: #7DCFC5; --brand-ink: #05201B; --brand-tint: #12292B; } } * { box-sizing: border-box; } body { margin: 0; font: 16px/1.5 system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--bg); -webkit-text-size-adjust: 100%; } main { max-width: 40rem; margin: 0 auto; padding: 1rem 1rem 3rem; } h1 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 .9rem; text-wrap: balance; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; } /* ---- Top chrome: safeguard + banners ---------------------------------- */ #safeguard-btn { position: sticky; top: 0; z-index: 10; width: 100%; min-height: var(--tap); padding: .75rem 1rem; border: 0; background: var(--urgent); color: var(--urgent-ink); font: 700 1rem/1.3 inherit; cursor: pointer; transition: background .15s var(--ease); } #safeguard-btn:hover { background: var(--urgent-strong); } #safeguard-btn:active { background: var(--urgent-strong); } #safeguard-btn:focus-visible { outline-offset: -3px; outline-color: var(--urgent-ink); } .dev-banner { background: var(--amber); color: #fff; text-align: center; padding: .35rem; font-size: .85rem; font-weight: 600; } #net-banner { background: var(--surface-2); color: var(--ink-2); text-align: center; padding: .35rem; font-size: .85rem; border-bottom: 1px solid var(--border); } #net-banner[hidden] { display: none; } /* ---- Home: ask + quick questions -------------------------------------- */ #ask { display: flex; gap: .5rem; margin-bottom: 1rem; } #ask input { flex: 1; min-width: 0; min-height: var(--tap); padding: .7rem .85rem; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } #ask input::placeholder { color: var(--ink-2); } #ask input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); } #ask button { min-height: var(--tap); padding: 0 1.15rem; border: 1px solid var(--brand); background: var(--brand); color: var(--brand-ink); border-radius: var(--radius); font: 600 .95rem/1 inherit; cursor: pointer; transition: background .15s var(--ease); } #ask button:hover { background: var(--brand-strong); border-color: var(--brand-strong); } .quick { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } .qq { min-height: var(--tap); padding: .55rem .9rem; border: 1px solid var(--border-strong); background: var(--surface); color: var(--brand); border-radius: 999px; font-size: .9rem; font-weight: 500; cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease); } .qq:hover { background: var(--brand-tint); border-color: var(--brand); } .qq:active { background: color-mix(in srgb, var(--brand-tint) 70%, var(--brand)); } /* ---- Answer card ------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem 1.1rem; margin-top: 1rem; box-shadow: var(--shadow-card); animation: card-in .22s var(--ease) both; } .card .answer { font-size: 1.1rem; font-weight: 700; line-height: 1.4; margin: 0; text-wrap: pretty; } /* Urgent = full treatment (no side-stripe): tinted surface, full border, leading warning glyph — urgency is carried by icon + label, not colour alone. */ .card.urgent { border: 1.5px solid var(--urgent); background: var(--urgent-tint); } .card.urgent .answer { display: flex; gap: .5rem; color: var(--urgent-strong); } .card.urgent .answer::before { content: "\26A0"; /* ⚠ */ flex: none; font-size: 1.15em; line-height: 1.25; } .card.urgent h3 { color: var(--urgent-strong); } .card h3 { margin: 1rem 0 .25rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--ink-2); } .card section > p { margin: .25rem 0; } .card .do-now ol { margin: .25rem 0; padding-left: 1.3rem; } .card .do-now li { margin: .15rem 0; } .card .do-now li::marker { color: var(--brand); font-weight: 700; } .card.urgent .do-now li::marker { color: var(--urgent-strong); } .card footer.source { margin-top: 1rem; padding-top: .7rem; border-top: 1px solid var(--border); font-size: .8rem; color: var(--ink-2); } .card pre { white-space: pre-wrap; font: .85rem/1.55 inherit; color: var(--ink); background: var(--surface-2); padding: .7rem .8rem; border-radius: .45rem; margin: .5rem 0 0; } /* Inline text-action buttons (Why? / Read the SOP section) — real tap area, no tiny link */ button[data-action] { display: inline-flex; align-items: center; min-height: 2.25rem; margin-top: .3rem; padding: .25rem 0; border: 0; background: none; color: var(--brand); font: 600 .9rem/1 inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .card.urgent button[data-action] { color: var(--urgent-strong); } .stale-warning { background: var(--amber-tint); color: var(--amber); font-weight: 700; padding: .55rem .75rem; border-radius: .45rem; margin-bottom: .7rem; font-size: .9rem; } .fallback { background: var(--amber-tint); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); border-radius: var(--radius); padding: 1rem 1.1rem; margin-top: 1rem; color: var(--ink); font-weight: 600; animation: card-in .22s var(--ease) both; } .fallback p { margin: 0; } .others { margin-top: .85rem; font-size: .9rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; } /* ---- Feedback (Phase 6) ----------------------------------------------- */ .feedback { margin-top: .85rem; padding: .6rem .75rem; background: var(--surface-2); border-radius: var(--radius); font-size: .9rem; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; } .fb-label { color: var(--ink-2); } .feedback button { min-height: 2.25rem; font-size: .85rem; padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease); } .feedback button:hover { background: var(--brand-tint); border-color: var(--brand); } .feedback.done { color: var(--brand-strong); background: var(--brand-tint); font-weight: 600; } /* ---- Footer ------------------------------------------------------------ */ .disclosure { font-size: .78rem; color: var(--ink-2); margin-bottom: .4rem; } .app-footer { margin-top: 2rem; font-size: .8rem; text-align: center; color: var(--ink-2); } .stamp { font-size: .75rem; color: var(--ink-2); text-align: center; margin-bottom: .3rem; } .app-footer a { color: var(--brand); text-underline-offset: 2px; } /* ---- Org selector (first run) ----------------------------------------- */ .org-pick { padding-top: 1rem; } .org-pick .lead { color: var(--ink-2); margin: 0 0 1.25rem; font-size: .95rem; } .org-grid { display: grid; gap: .75rem; } .org-btn { display: flex; flex-direction: column; gap: .2rem; text-align: left; min-height: var(--tap); padding: 1rem 1.1rem; border: 1.5px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease), transform .1s var(--ease); } .org-btn:hover { transform: translateY(-1px); } .org-btn:active { transform: translateY(0); } .org-btn .org-name { font-size: 1.05rem; font-weight: 700; } .org-btn .org-where { font-size: .85rem; color: var(--ink-2); } /* Preview each brand's own primary on its swatch, before the theme is applied */ .org-btn[data-org="therakidz"] { border-left-color: #006B3F; } .org-btn[data-org="therakidz"] .org-name { color: #006B3F; } .org-btn[data-org="therakidz"]:hover { border-color: #006B3F; background: #E7F0EB; } .org-btn[data-org="halcyon"] .org-name { color: #0F2E4A; } .org-btn[data-org="halcyon"]:hover { border-color: #0F2E4A; background: #E6EDF2; } @media (prefers-color-scheme: dark) { .org-btn[data-org="therakidz"] .org-name { color: #45B57F; } .org-btn[data-org="therakidz"]:hover { border-color: #45B57F; background: #182619; } .org-btn[data-org="halcyon"] .org-name { color: #64C1B5; } .org-btn[data-org="halcyon"]:hover { border-color: #64C1B5; background: #12292B; } } /* ---- Motion ------------------------------------------------------------ */ @keyframes card-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }