/* * Palette mirrors src/palette.ts in the app, so the page and the phone look like one product. * The theme is chosen by the small script in index.html, which sets data-theme on before * the first paint. It always writes an answer, so the two blocks below cover every case and * neither palette is ever written out twice. */ :root, :root[data-theme="light"] { color-scheme: light; --background: #F8F8F3; --surface: #FFFFFF; --ink: #202D26; --muted: #647269; --border: #E2E7DF; --primary: #275D45; --primary-fill: #275D45; --on-primary: #FFFFFF; --primary-light: #E8F0E6; --accent: #D7EEA6; --danger: #AE403D; --danger-light: #FCEDEA; --subtle: #F3F5EF; /* Site icons arrive with their own colours and mostly assume a pale backing, so the logo chip stays light in both themes rather than swallowing a dark favicon. */ --artwork: #E8F0E6; --artwork-mark: #275D45; } :root[data-theme="dark"] { color-scheme: dark; --background: #121814; --surface: #1A211C; --ink: #E9EFE8; --muted: #9AA79D; --border: #2C352E; --primary: #8ACCA6; --primary-fill: #2E6B50; --on-primary: #FFFFFF; --primary-light: #21332A; --accent: #D7EEA6; --danger: #E8807C; --danger-light: #3A1F1E; --subtle: #232B25; --artwork: #DDE6DA; --artwork-mark: #275D45; } /* A QR code keeps its dark-on-white contrast in both themes: scanners expect a light quiet zone, and an inverted code is read far less reliably. */ :root { --qr-background: #FFFFFF; } * { box-sizing: border-box; } body { margin: 0; background: var(--background); color: var(--ink); font: 400 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; } .app { max-width: 540px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 0 22px; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 0 18px; } .brand { display: flex; align-items: center; gap: 9px; } .brand-mark { width: 39px; height: 39px; border-radius: 13px; background: var(--primary-fill); color: var(--accent); display: grid; place-items: center; } .brand-name { font-size: 22px; font-weight: 800; letter-spacing: -0.8px; } .brand-dot { color: var(--primary); } .badge { font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-light); border-radius: 8px; padding: 5px 9px; } .badge:empty { display: none; } .topbar-actions { display: flex; align-items: center; gap: 9px; } .theme-toggle { display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; } .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--ink); border-color: var(--primary); outline: none; } .theme-toggle svg { width: 16px; height: 16px; flex: none; } /* Nothing to press until the script has filled it in. */ .theme-toggle:empty { display: none; } /* Keep the brand, count, and accessible appearance control together on small phones. */ @media (max-width: 380px) { .theme-label { display: none; } .theme-toggle { min-width: 38px; justify-content: center; padding: 0 10px; } .topbar-actions { gap: 6px; } .brand-name { font-size: 20px; white-space: nowrap; } } .main { flex: 1; } .footer { text-align: center; font-size: 10px; color: var(--muted); padding: 24px 0 18px; } h1 { font-size: 30px; line-height: 1.15; letter-spacing: -1.1px; font-weight: 800; margin: 4px 0 0; } .subtitle { color: var(--muted); font-size: 13px; margin: 9px 0 22px; } .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 148px; padding: 18px 10px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); font: inherit; color: inherit; text-align: center; cursor: pointer; text-decoration: none; } .tile:hover, .tile:focus-visible { border-color: var(--primary); background: var(--primary-light); outline: none; } .tile-name { font-size: 13px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; } .artwork { width: 68px; height: 68px; border-radius: 21px; display: grid; place-items: center; background: var(--artwork); overflow: hidden; flex: none; } .artwork img { width: 60%; height: 60%; object-fit: contain; } .artwork svg { width: 52%; height: 52%; color: var(--artwork-mark); } .back { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0; background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; } .back:hover { color: var(--ink); } .detail { display: flex; flex-direction: column; gap: 12px; } .detail h1 { text-align: center; font-size: 28px; } .detail .subtitle { text-align: center; margin-bottom: 4px; } .qr-card { background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 18px; display: flex; flex-direction: column; align-items: center; } .qr-card-header { display: flex; align-items: center; gap: 10px; width: 100%; } .qr-card-heading { flex: 1; text-align: center; min-width: 0; } .qr-card-label { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qr-card-caption { font-size: 8px; color: var(--muted); font-weight: 600; letter-spacing: 1.4px; margin-top: 4px; } .corner { width: 38px; height: 38px; border-radius: 13px; border: 0; background: var(--subtle); color: var(--muted); display: grid; place-items: center; cursor: pointer; flex: none; } .corner:hover, .corner:focus-visible { color: var(--ink); outline: none; box-shadow: 0 0 0 2px var(--primary-light); } .corner[data-copied="true"] { color: var(--primary); } .corner svg { width: 19px; height: 19px; } .qr-wrap { margin: 5px 0 4px; background: var(--qr-background); width: 100%; max-width: 320px; } .qr-wrap canvas, .qr-wrap img { display: block; width: 100%; height: auto; aspect-ratio: 1; } .qr-divider { height: 1px; background: var(--border); width: 100%; margin-bottom: 14px; } .qr-card-footer { display: flex; align-items: center; gap: 5px; width: 100%; } .qr-card-brand { color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: -0.5px; } .qr-card-note { flex: 1; text-align: right; font-size: 7px; letter-spacing: 0.8px; color: var(--muted); } .button { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px; padding: 14px 18px; border-radius: 18px; border: 0; background: var(--primary-fill); color: var(--on-primary); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; width: 100%; } .button:hover { opacity: 0.9; } .button svg { width: 20px; height: 20px; } .notice { display: flex; gap: 9px; padding: 14px; border-radius: 14px; background: var(--danger-light); color: var(--danger); font-size: 14px; } .empty { text-align: center; color: var(--muted); font-size: 13px; padding: 40px 0; } @media (max-width: 380px) { .app { padding: 0 16px; } } .action-row { display: flex; gap: 10px; } .action-row .button { flex: 1; min-width: 0; } .button.secondary { background: var(--primary-light); color: var(--primary); } .button:disabled { opacity: .6; cursor: default; } .action-status { font-size: 12px; color: var(--muted); margin: 0; } .action-status:empty { display: none; }