/* These tokens are deliberately identical to photobooth-dashboard's own design system (dashboard/src/index.css) -- GetMyPhoto is the guest-facing half of the same product, not a separately-designed site, so it should read as one consistent family: same fonts, same exact color values, same radius/border treatment. Dark is the default look (bare :root); a guest whose OS prefers light gets the light palette automatically (the @media block below); the toggle button (see theme.js) can override either way, persisted in localStorage as data-theme on , which always wins over the system preference. */ :root { --font: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --bg: #0c0d11; --surface: #101117; --card: #181922; --card-hover: #1e1f2a; --border: rgba(255, 255, 255, 0.07); --t1: #e9eaf1; --t2: #8b8d9f; --t3: #585a6e; --accent: #f59e0b; --err: #ef4444; --input-bg: #12131a; --radius: 8px; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f1f2f6; --surface: #f8f9fb; --card: #ffffff; --card-hover: #f6f7fa; --border: rgba(15, 18, 30, 0.08); --t1: #15161d; --t2: #565969; --t3: #8a8d9c; --accent: #c2710a; --err: #dc2626; --input-bg: #ffffff; } } :root[data-theme="light"] { --bg: #f1f2f6; --surface: #f8f9fb; --card: #ffffff; --card-hover: #f6f7fa; --border: rgba(15, 18, 30, 0.08); --t1: #15161d; --t2: #565969; --t3: #8a8d9c; --accent: #c2710a; --err: #dc2626; --input-bg: #ffffff; } :root[data-theme="dark"] { --bg: #0c0d11; --surface: #101117; --card: #181922; --card-hover: #1e1f2a; --border: rgba(255, 255, 255, 0.07); --t1: #e9eaf1; --t2: #8b8d9f; --t3: #585a6e; --accent: #f59e0b; --err: #ef4444; --input-bg: #12131a; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--t1); font-family: var(--font); display: flex; flex-direction: column; align-items: center; padding: 32px 16px; } .wrap { width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; gap: 24px; } .wrap.wide { max-width: 720px; } .brand { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; color: var(--t1); text-decoration: none; } .brand .accent { color: var(--accent); } .brand-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .brand-row-left { display: flex; align-items: center; gap: 10px; } .brand-logo { height: 40px; width: auto; display: block; } .theme-toggle { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--t2); display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; cursor: pointer; } .theme-toggle:hover { color: var(--t1); filter: none; } .brand-suffix { font-size: 1rem; font-weight: 600; color: var(--t2); } .card { width: 100%; background: var(--card); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; } h1 { font-size: 1.2rem; margin: 0; font-weight: 600; } p.subtitle { margin: 0; color: var(--t2); font-size: 0.95rem; } .venue-logo { max-width: 160px; max-height: 72px; object-fit: contain; } form { width: 100%; display: flex; flex-direction: column; gap: 12px; } input[type="text"], input[type="tel"], input[type="email"], input[type="password"] { width: 100%; padding: 14px 16px; font-size: 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--input-bg); color: var(--t1); } input[type="text"]::placeholder, input[type="tel"]::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder { color: var(--t3); } /* The booth-code field only (index.html) -- styled to look like a row of OTP-style boxes (one cell per character) rather than a plain text field, since a guest is transcribing a short printed code rather than writing a sentence. A monospace font makes every glyph exactly 1ch wide, so the cell dividers (a repeating background gradient) line up with typed characters without needing separate DOM elements per box. */ input.code-input { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 600; text-transform: uppercase; text-align: left; white-space: pre; letter-spacing: 0.55ch; padding: 14px 0 14px 0.85ch; background-color: var(--input-bg); background-image: repeating-linear-gradient( to right, transparent 0, transparent calc(1.55ch - 1px), var(--border) calc(1.55ch - 1px), var(--border) 1.55ch ); background-position: 0.85ch center; } input.code-input::placeholder { color: var(--t3); letter-spacing: 0.55ch; text-transform: none; } button, .btn { padding: 14px 20px; font-size: 1rem; font-weight: 600; border-radius: var(--radius); border: none; cursor: pointer; background: var(--accent); color: #1a1206; text-decoration: none; display: inline-block; text-align: center; } button:hover, .btn:hover { filter: brightness(1.08); } .btn.secondary { background: transparent; color: var(--t1); border: 1px solid var(--border); } .error { color: var(--err); font-size: 0.9rem; margin: 0; } .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; width: 100%; } .photo { background: var(--card-hover); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .photo img { width: 100%; display: block; aspect-ratio: 3 / 4; object-fit: cover; } .photo .photo-actions { padding: 8px; display: flex; justify-content: center; } .photo.main { grid-column: 1 / -1; } .photo.main img { aspect-ratio: 3 / 2; } .actions-row { display: flex; gap: 12px; width: 100%; } .actions-row .btn { flex: 1; } footer { color: var(--t3); font-size: 0.8rem; text-align: center; max-width: 480px; }