* { box-sizing: border-box; } :root { --bg: #0b0d10; --card: #17191d; --card-border: #24272c; --text: #eceef0; --muted: #8a909b; --accent: #4f8cff; --accent-hover: #6b9fff; --green: #32d74b; --red: #ff453a; --gray: #3a3f47; --input-bg: #101215; --input-border: #2c3038; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28); } /* Per-company theme choice, defaults to dark (the :root values above). Set via on company-scoped pages. */ :root[data-theme="light"] { --bg: #f5f5f7; --card: #ffffff; --card-border: #e5e5ea; --text: #1d1d1f; --muted: #6e6e73; --accent: #0071e3; --accent-hover: #0077ed; --green: #248a3d; --red: #d70015; --gray: #d2d2d7; --input-bg: #ffffff; --input-border: #d2d2d7; --shadow: 0 1px 3px rgba(0,0,0,.08); } * { transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease, transform .1s ease; } body { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: radial-gradient(1200px 600px at 50% -10%, #191d24 0%, var(--bg) 55%); color: var(--text); margin: 0; padding: 2rem 1rem; min-height: 100vh; } .wrap { max-width: 480px; margin: 0 auto; } .wrap.wide { max-width: 900px; } .card { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 1rem; } h1 { font-size: 1.4rem; margin: 0 0 .25rem; letter-spacing: -.01em; } h2 { font-size: 1.1rem; margin: 0 0 .75rem; letter-spacing: -.01em; } .muted { color: var(--muted); font-size: .9rem; } .points { font-size: 3rem; font-weight: 700; margin: .5rem 0; letter-spacing: -.02em; } .progress { height: 10px; background: var(--gray); border-radius: 6px; overflow: hidden; margin: .75rem 0; } .progress > div { height: 100%; background: var(--green); } .stamp-grid, .stamp-option .swatch { color: var(--gray); /* unfilled stamp outlines use currentColor so they adapt to the theme */ } .stamp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: .5rem; margin: 1rem 0; } .stamp { aspect-ratio: 1 / 1; } .stamp-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .75rem; margin: .5rem 0 1rem; } .stamp-option { text-align: center; cursor: pointer; } .stamp-option .swatch { width: 56px; height: 56px; margin: 0 auto .35rem; background: var(--input-bg); border-radius: 10px; padding: 6px; } .stamp-option input { width: auto; } .stamp-option span { display: block; font-size: .8rem; color: var(--muted); } .reward-ready { background: linear-gradient(135deg, #32d74b, #22b83c); color: #06280d; padding: .75rem 1rem; border-radius: 10px; text-align: center; font-weight: 700; } .reward-collapsed { margin-bottom: .5rem; font-size: .9rem; padding: .5rem .9rem; } table { width: 100%; border-collapse: collapse; font-size: .9rem; } th, td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--card-border); } th { color: var(--muted); font-weight: 500; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } form.inline { display: inline; } label { display: block; font-size: .85rem; margin: .75rem 0 .25rem; color: var(--muted); } input, button, select { width: 100%; padding: .6rem .7rem; border-radius: 10px; border: 1px solid var(--input-border); font-size: 1rem; background: var(--input-bg); color: var(--text); } input::placeholder { color: #5a6068; } input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,140,255,.25); } button { background: var(--accent); color: #fff; border: 1px solid transparent; margin-top: 1rem; cursor: pointer; font-weight: 600; } button:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); } button:active:not(:disabled) { transform: translateY(0); } button:disabled { opacity: .4; cursor: not-allowed; } button.secondary { background: var(--gray); } button.secondary:hover:not(:disabled) { background: #474d57; } button.danger { background: var(--red); } button.danger:hover:not(:disabled) { background: #ff6259; } .error { background: rgba(255,69,58,.12); color: #ff8078; border: 1px solid rgba(255,69,58,.3); padding: .6rem .8rem; border-radius: 10px; margin-bottom: 1rem; font-size: .9rem; } .row { display: flex; gap: .5rem; } .row > * { flex: 1; } nav { margin-bottom: 1rem; font-size: .9rem; display: flex; align-items: center; gap: 1rem; } nav a { color: var(--muted); } nav a:hover { color: var(--text); } nav strong { color: var(--text); } .badge { display: inline-block; background: var(--gray); color: var(--text); border-radius: 6px; padding: .1rem .5rem; font-size: .8rem; } /* Corner bar on the public card page: panel link on the left, identity/login on the right. */ .corner-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; font-size: .8rem; color: var(--muted); } .corner-bar a { font-size: .8rem; color: var(--muted); } .corner-bar a:hover { color: var(--accent-hover); } .corner-bar form { display: inline; } .link-button { all: unset; font-size: .8rem; color: var(--muted); cursor: pointer; } .link-button:hover { color: var(--accent-hover); } .modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); align-items: center; justify-content: center; padding: 1rem; z-index: 100; } .modal { width: 100%; max-width: 360px; margin: 0; }