/* Sign-in page. Self-contained: everything outside /public needs a session, so this cannot load css/app.css. Same tokens, light and dark (the theme is set on by /public/theme.js). */ :root { color-scheme: light; --page: #f5f7f9; --surface: #ffffff; --ink: #1e2630; --muted: #5a6573; --hair: #e3e7ec; --accent: #55c94a; --accent-strong: #23801d; --critical-text: #b42318; --critical-wash: #fdeeee; --radius: 12px; --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.05); --field-line: #c9ccd3; --button: #55c94a; --button-hover: #6fd85f; --brand-ink: #1e2630; --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --brand-green: #55c94a; --on-accent: #1e2630; --mark-a: #55c94a; --mark-b: #00b8b8; --mark-c: #0f5f5f; --mark-d: #1e2630; --mark-p1a: #6fd85f; --mark-p1b: #1aa84a; --mark-p2a: #00b8b8; --mark-p2b: #0a7a7a; --mark-p3: #1e2630; --mark-p3-ink: #ffffff; } :root[data-theme="dark"] { color-scheme: dark; --page: #141a21; --surface: #1e2630; --ink: #f2f5f8; --muted: #9aa6b4; --hair: #2d3744; --accent: #55c94a; --accent-strong: #7fd874; --critical-text: #f08a8a; --critical-wash: #3a1818; --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); --field-line: #3f4b5a; --button: #55c94a; --button-hover: #6fd85f; --brand-ink: #ffffff; --mark-p3: #ffffff; --mark-p3-ink: #1e2630; } /* Brand packs: the same values as css/app.css ( is set by /public/brand-boot.js). */ :root[data-brand="platinumcloud"] { --page: #f4f7fb; --surface: #ffffff; --ink: #0e1528; --muted: #56637a; --hair: #e1e7f0; --field-line: #c6cfdd; --accent: #3296ff; --accent-strong: #1664c7; --button: #3296ff; --button-hover: #5aabff; --brand-ink: #0e1528; --brand-green: #1f7fe8; --on-accent: #060a13; --shadow: 0 1px 2px rgba(6, 10, 19, 0.05), 0 1px 3px rgba(6, 10, 19, 0.06); --mark-a: #3296ff; --mark-b: #9aa8bd; --mark-c: #1d4f99; --mark-d: #0e1528; --mark-p1a: #5aabff; --mark-p1b: #1664c7; --mark-p2a: #b8c3d3; --mark-p2b: #6b7a90; --mark-p3: #0e1528; --mark-p3-ink: #ffffff; } :root[data-brand="platinumcloud"][data-theme="dark"] { --page: #060a13; --surface: #0e1528; --ink: #eef3fa; --muted: #95a3b8; --hair: #1f2a42; --field-line: #34425e; --accent: #3296ff; --accent-strong: #7cbcff; --button: #3296ff; --button-hover: #5aabff; --brand-ink: #ffffff; --brand-green: #3296ff; --on-accent: #060a13; --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); --mark-a: #3296ff; --mark-b: #9aa8bd; --mark-c: #1d4f99; --mark-d: #0e1528; --mark-p1a: #5aabff; --mark-p1b: #1664c7; --mark-p2a: #b8c3d3; --mark-p2b: #6b7a90; --mark-p3: #ffffff; --mark-p3-ink: #0e1528; } :root[data-brand="integracloud"] { --page: #f3f6fa; --surface: #ffffff; --ink: #072549; --muted: #52647f; --hair: #dfe6ef; --field-line: #c3cedc; --accent: #80aadc; --accent-strong: #2a5f9e; --button: #80aadc; --button-hover: #9dbee6; --brand-ink: #072549; --brand-green: #4f86c6; --on-accent: #072549; --shadow: 0 1px 2px rgba(3, 19, 39, 0.05), 0 1px 3px rgba(3, 19, 39, 0.06); --mark-a: #80aadc; --mark-b: #3c7cc4; --mark-c: #1c4f8a; --mark-d: #072549; --mark-p1a: #a3c3e8; --mark-p1b: #4f86c6; --mark-p2a: #3c7cc4; --mark-p2b: #1c4f8a; --mark-p3: #072549; --mark-p3-ink: #ffffff; } :root[data-brand="integracloud"][data-theme="dark"] { --page: #031327; --surface: #072549; --ink: #eef4fb; --muted: #9fb2cc; --hair: #16375f; --field-line: #2b4d78; --accent: #80aadc; --accent-strong: #a9c8ec; --button: #80aadc; --button-hover: #9dbee6; --brand-ink: #ffffff; --brand-green: #80aadc; --on-accent: #072549; --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); --mark-a: #80aadc; --mark-b: #3c7cc4; --mark-c: #1c4f8a; --mark-d: #031327; --mark-p1a: #a3c3e8; --mark-p1b: #4f86c6; --mark-p2a: #3c7cc4; --mark-p2b: #1c4f8a; --mark-p3: #ffffff; --mark-p3-ink: #072549; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; } body { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--page); color: var(--ink); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; } h1, p { margin: 0; } .muted { color: var(--muted); } .card { width: 100%; max-width: 380px; padding: 28px 28px 24px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); box-shadow: var(--shadow); } .brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 24px; text-align: center; } .fc-mark { width: 88px; height: 88px; } .fc-mark-text { font: 700 25px var(--font); fill: var(--brand-ink); letter-spacing: -0.02em; } .fc-mark-gap { fill: var(--surface); } .mk-a { stop-color: var(--mark-a); } .mk-b { stop-color: var(--mark-b); } .mk-c { stop-color: var(--mark-c); } .mk-d { stop-color: var(--mark-d); } .mk-p1a { stop-color: var(--mark-p1a); } .mk-p1b { stop-color: var(--mark-p1b); } .mk-p2a { stop-color: var(--mark-p2a); } .mk-p2b { stop-color: var(--mark-p2b); } .fc-mark-people { fill: var(--mark-p3); } .fc-mark-people-ink { fill: var(--mark-p3-ink); } .fc-word { font-size: 28px; letter-spacing: -0.02em; color: var(--brand-ink); white-space: nowrap; } .fc-word-fresh { font-weight: 700; } .fc-word-cloud { font-weight: 300; } .fc-word-360 { font-weight: 700; color: var(--brand-green); } .fc-tagline { font-size: 12px; letter-spacing: 0.08em; color: var(--muted); } h1 { font-size: 20px; letter-spacing: -0.01em; margin-bottom: 6px; } form { display: flex; flex-direction: column; margin-top: 20px; } label { font-weight: 600; font-size: 13px; margin: 12px 0 6px; } label:first-child { margin-top: 0; } input { height: 42px; padding: 0 12px; font: inherit; font-size: 16px; /* 16px stops iOS zooming into the field */ color: var(--ink); background: var(--surface); border: 1px solid var(--field-line); border-radius: 8px; } input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .banner { margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: var(--critical-wash); color: var(--critical-text); font-weight: 500; } button { height: 44px; margin-top: 18px; font: inherit; font-weight: 600; color: var(--on-accent); background: var(--button); border: 0; border-radius: 8px; cursor: pointer; } button:hover { background: var(--button-hover); } button[disabled] { opacity: 0.6; cursor: progress; } .foot { margin-top: 18px; font-size: 13px; } a { color: var(--accent-strong); }