/* Any.Company shared account bar + login / registration form. Self-contained: every colour is an --ac-* token, so the bar looks the same on every page whatever palette the page itself uses. Host-page contract: the bar is position:fixed and --ac-bar is its height. This file already pads by that amount; a page only has to add var(--ac-bar,0px) to its own sticky/fixed offsets (e.g. `.topbar{top:var(--ac-bar,0px)}`). */ :root { --ac-bar: 40px; } body { padding-top: var(--ac-bar); } .ac-root { --ac-navy: #10224f; --ac-on-navy: #eef2fb; --ac-surface: #fff; --ac-text: #10224f; --ac-muted: #5b6b8c; --ac-border: #e2e8f4; --ac-hover: #eef3fc; --ac-primary: #2f6fed; --ac-primary-h: #2358c8; --ac-on-primary: #fff; --ac-danger: #c8323c; --ac-danger-bg: #fdecee; --ac-ok: #1f8a4c; --ac-ok-bg: #e6f5ec; --ac-shadow: 0 14px 36px rgba(16, 34, 79, .22); font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ac-text); } @media (prefers-color-scheme: dark) { .ac-root { --ac-surface: #131b36; --ac-text: #eef2fb; --ac-muted: #a7b2cc; --ac-border: #24304f; --ac-hover: #1a2444; --ac-primary: #3f74ee; --ac-primary-h: #5b8cf5; --ac-danger: #ef6b73; --ac-danger-bg: #3a2027; --ac-ok: #4cc38a; --ac-ok-bg: #16311f; --ac-shadow: 0 14px 36px rgba(0, 0, 0, .6); } } .ac-root *, .ac-root *::before, .ac-root *::after { box-sizing: border-box; } .ac-root [hidden] { display: none !important; } .ac-root button, .ac-root input { font: inherit; color: inherit; } .ac-root a { color: var(--ac-primary); } /* ---------- bar ---------- */ .ac-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--ac-bar); z-index: 500; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--ac-navy); color: var(--ac-on-navy); border-bottom: 1px solid rgba(255, 255, 255, .08); } .ac-brand { display: flex; align-items: center; gap: 8px; color: var(--ac-on-navy) !important; font-weight: 700; text-decoration: none; white-space: nowrap; min-width: 0; } .ac-brand img { width: 24px; height: 24px; border-radius: 6px; display: block; } .ac-grow { flex: 1 1 auto; min-width: 8px; } .ac-user { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ac-on-navy); } .ac-avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ac-primary); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; } .ac-user-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .ac-bar .ac-btn { height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .28); background: transparent; color: var(--ac-on-navy); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; font-size: 13px; } .ac-bar .ac-btn:hover { background: rgba(255, 255, 255, .12); } .ac-bar .ac-btn.ac-solid { background: var(--ac-primary); border-color: var(--ac-primary); color: #fff; } .ac-bar .ac-btn.ac-solid:hover { background: var(--ac-primary-h); } .ac-bar .ac-burger { width: 32px; padding: 0; justify-content: center; border-color: transparent; } .ac-bar svg { display: block; flex: none; } .ac-root :focus-visible { outline: 2px solid #8fb2ff; outline-offset: 2px; } /* ---------- hamburger menu ---------- */ .ac-menu { position: fixed; top: calc(var(--ac-bar) + 4px); right: 8px; z-index: 510; width: min(280px, calc(100vw - 16px)); max-height: calc(100vh - var(--ac-bar) - 16px); overflow: auto; padding: 6px; background: var(--ac-surface); color: var(--ac-text); border: 1px solid var(--ac-border); border-radius: 12px; box-shadow: var(--ac-shadow); } .ac-menu h6 { margin: 8px 10px 4px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ac-muted); font-weight: 700; } .ac-menu h6:first-child { margin-top: 4px; } .ac-menu a, .ac-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ac-text); text-align: left; text-decoration: none; cursor: pointer; } .ac-menu a:hover, .ac-menu button:hover { background: var(--ac-hover); } .ac-menu a[aria-current="page"] { background: var(--ac-hover); box-shadow: inset 3px 0 0 var(--ac-primary); font-weight: 600; } .ac-menu hr { border: 0; border-top: 1px solid var(--ac-border); margin: 6px 0; } .ac-menu .ac-who { padding: 6px 10px 8px; color: var(--ac-muted); font-size: 12.5px; overflow-wrap: anywhere; } /* ---------- dialog + form (reusable) ---------- */ .ac-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; overflow: auto; background: rgba(8, 16, 40, .55); } .ac-dialog { position: relative; width: min(420px, 100%); max-height: 100%; overflow: auto; padding: 22px 22px 18px; background: var(--ac-surface); color: var(--ac-text); border: 1px solid var(--ac-border); border-radius: 16px; box-shadow: var(--ac-shadow); } .ac-dialog-head { position: absolute; top: 10px; right: 10px; } .ac-close { border: 0; background: transparent; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; color: var(--ac-muted); display: grid; place-items: center; } .ac-close:hover { background: var(--ac-hover); } .ac-form h2 { margin: 0 0 4px; padding-right: 32px; font-size: 20px; letter-spacing: -.01em; } .ac-form .ac-lead { margin: 0 0 14px; color: var(--ac-muted); } .ac-social { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; } .ac-social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 40px; border: 1px solid var(--ac-border); border-radius: 10px; background: var(--ac-surface); color: var(--ac-text); font-weight: 600; cursor: pointer; } .ac-social-btn:hover { background: var(--ac-hover); } .ac-social-btn svg { flex: none; } .ac-divider { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--ac-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } .ac-divider::before, .ac-divider::after { content: ""; flex: 1; height: 1px; background: var(--ac-border); } .ac-field { display: block; margin: 0 0 12px; } .ac-field > span { display: block; margin-bottom: 4px; font-weight: 600; font-size: 13px; } .ac-field input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--ac-border); border-radius: 10px; background: var(--ac-surface); color: var(--ac-text); } .ac-field input:focus { outline: 2px solid var(--ac-primary); outline-offset: 0; border-color: var(--ac-primary); } .ac-check { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 12px; font-size: 13px; } .ac-check input { margin-top: 2px; flex: none; width: 16px; height: 16px; } .ac-msg { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; font-size: 13px; overflow-wrap: anywhere; } .ac-msg.ac-err { background: var(--ac-danger-bg); color: var(--ac-danger); } .ac-msg.ac-ok { background: var(--ac-ok-bg); color: var(--ac-ok); } .ac-submit { width: 100%; height: 42px; border: 0; border-radius: 10px; cursor: pointer; font-weight: 700; background: var(--ac-primary); color: var(--ac-on-primary); } .ac-submit:hover { background: var(--ac-primary-h); } .ac-submit:disabled { opacity: .65; cursor: progress; } .ac-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 12px; font-size: 13px; } .ac-linkbtn { border: 0; background: none; padding: 0; color: var(--ac-primary); cursor: pointer; text-decoration: underline; } @media (max-width: 560px) { .ac-bar { padding: 0 8px; gap: 6px; } .ac-brand span { display: none; } .ac-user-name { max-width: 110px; } .ac-btn-label { display: none; } .ac-bar .ac-btn { padding: 0 8px; } .ac-dialog { padding: 18px 16px 14px; } } @media (prefers-reduced-motion: no-preference) { .ac-overlay { animation: ac-fade .12s ease-out; } @keyframes ac-fade { from { opacity: 0; } to { opacity: 1; } } }