/* =========================================================================== AssociateMed design tokens (shared by site + portal). Brand: two interlocking medical crosses — navy #004D81 + sky blue #41B0F7. Neutral surfaces (black/grey/white) with blue as the accent. Light + dark. Theme is selected by data-theme on (see web/shared/theme.js); absent that, prefers-color-scheme is honored via the @media block below. =========================================================================== */ :root { /* Brand — constant across themes */ --font-brand:'Ubuntu', system-ui, -apple-system, "Segoe UI", sans-serif; --brand-navy:#004D81; --brand-blue:#41B0F7; --brand-blue-d:#1f93e0; --danger:#ED230D; --success:#1EB100; --err:#c0392b; /* Sidebar — dark in BOTH themes (deep navy-black, carries the dark-mode logo) */ --side-bg:#0d1b2a; --side-bg-2:#0a1622; --side-ink:#eaf1f8; --side-muted:#8aa0b6; --side-active:#13314d; --side-line:#1b3047; /* Light theme surfaces */ --bg:#eef1f6; --surface:#ffffff; --surface-2:#f6f8fb; --ink:#14203a; --muted:#5f6b7c; --line:#e2e8f0; --accent:#004D81; /* primary action — navy reads strong on white */ --accent-ink:#ffffff; --link:#1f7ac0; --shadow:0 1px 2px rgba(13,27,42,.06), 0 2px 8px rgba(13,27,42,.04); } [data-theme="dark"] { --bg:#15191f; --surface:#21262d; --surface-2:#1a1f25; --ink:#e6ebf2; --muted:#9aa6b3; --line:#30363d; --accent:#41B0F7; /* brighter blue for contrast on charcoal */ --accent-ink:#06283d; --link:#5cbcf8; --err:#ff6f60; --shadow:0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#15191f; --surface:#21262d; --surface-2:#1a1f25; --ink:#e6ebf2; --muted:#9aa6b3; --line:#30363d; --accent:#41B0F7; --accent-ink:#06283d; --link:#5cbcf8; --err:#ff6f60; --shadow:0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3); } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } a { color: var(--link); } /* Shared topbar (the onboarding site uses this; the portal has its own shell) */ .topbar { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; background:var(--surface); border-bottom:1px solid var(--line); } .brand { font-family: var(--font-brand); font-weight:700; color: var(--brand-navy); display:flex; align-items:center; gap:9px; text-decoration:none; } .back-site { color: var(--muted); text-decoration:none; font-size:.85rem; font-weight:500; } .back-site:hover { color: var(--link); } [data-theme="dark"] .brand { color: var(--brand-blue); } .brand img { width:26px; height:26px; } /* Theme-aware logo: navy+blue mark on light, blue+white mark on dark. */ .brand .logo-dark { display:none; } [data-theme="dark"] .brand .logo-light { display:none; } [data-theme="dark"] .brand .logo-dark { display:inline; } .topbar-right { display:flex; align-items:center; gap:14px; } .theme-toggle-sm { display:inline-flex; align-items:center; gap:7px; background:transparent; border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:7px 11px; font:inherit; font-size:.82rem; cursor:pointer; } .theme-toggle-sm:hover { border-color:var(--brand-blue); color:var(--link); } .theme-toggle-sm svg { width:15px; height:15px; } main { max-width: 560px; margin: 0 auto; padding: 28px 20px 60px; } h1 { font-size: 1.5rem; margin: .2em 0 .1em; } .sub { color: var(--muted); margin-top: 0; } .steps { display:flex; gap:6px; font-size:.78rem; color:var(--muted); margin: 8px 0 22px; flex-wrap:wrap; } .steps .on { color: var(--accent); font-weight:700; } form { display:flex; flex-direction:column; gap:12px; } label { display:flex; flex-direction:column; gap:4px; font-size:.85rem; color:var(--muted); } input, textarea, select { padding:10px; border:1px solid var(--line); border-radius:8px; font:inherit; background:var(--surface); color:var(--ink); } input:focus, textarea:focus, select:focus { outline:2px solid var(--brand-blue); outline-offset:0; border-color:var(--brand-blue); } textarea { min-height:90px; resize:vertical; } .row { display:flex; gap:12px; } .row > label { flex:1; } button.primary { background: var(--accent); color:var(--accent-ink); border:0; border-radius:8px; padding:12px 16px; font:inherit; font-weight:600; cursor:pointer; } button.primary:hover { filter:brightness(1.06); } button.primary:disabled { opacity:.5; cursor:default; } button.link { background:none; border:0; color:var(--link); cursor:pointer; font:inherit; text-decoration:underline; } .plan { border:1px solid var(--line); border-radius:10px; padding:16px; background:var(--surface); display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; } .plan .price { font-weight:700; } .err { color: var(--err); font-size:.82rem; min-height:1em; } .field-err { color: var(--err); font-size:.78rem; } .note { background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:12px; font-size:.88rem; } .banner { border-radius:8px; padding:12px 14px; font-size:.88rem; margin:0 0 18px; } .banner.warn { background:#fde7ef; border:1px solid #f3bcd2; color:#9b2247; } .banner.info { background:#e7f1fb; border:1px solid #bcd8f5; color:#1a4f8a; } [data-theme="dark"] .banner.warn { background:#3a1623; border-color:#74324b; color:#f6b8cf; } [data-theme="dark"] .banner.info { background:#0f2c46; border-color:#1f4a72; color:#bcdcfb; } .banner .link { color:inherit; font-weight:700; } .card-link { word-break:break-all; background:var(--surface-2); border:1px dashed var(--line); padding:10px; border-radius:8px; color:var(--ink); } .overlay { position:fixed; inset:0; background:color-mix(in srgb, var(--bg) 85%, transparent); display:flex; align-items:center; justify-content:center; z-index:100; } .overlay[hidden] { display:none; } .spinner { width:34px; height:34px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }