/* Digital namecard One-screen layout: the card is sized to the *small* viewport height (svh), so it fits with browser toolbars showing. The QR takes whatever height is left. Appearance is layered on : data-theme = light | dark | midnight (absent = follow the phone) data-accent = ember (default) | navy | ocean | emerald | violet | gold | graphite data-font = geist (default) | grotesk | editorial | jakarta | system */ :root { /* Accent: interface colours. --accent-ink is the accent used for small icons and text */ --accent-1: #EB001B; --accent-2: #FF5F00; --accent-3: #F79E1B; --accent-rgb: 235, 0, 27; --accent-2-rgb: 255, 95, 0; --on-accent: #FFFFFF; --accent-ink: var(--accent-1); --accent-gradient: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%); /* Monogram badge and QR code, drawn on the always-white plate. Every QR colour stays dark enough to scan (>= 4:1 against white): centre -> edge ramp, finder core, animation tint */ --mark-1: #EB001B; --mark-2: #FF5F00; --qr-0: #F5300B; --qr-1: #E6001B; --qr-2: #A8001C; --qr-3: #3A0A16; --qr-4: #16161B; --qr-eye: #E3001B; --qr-tint: #FF5F00; /* Organisation colours stay fixed whatever accent is chosen */ --mc-gradient: linear-gradient(135deg, #EB001B 0%, #FF5F00 100%); --hkbu-blue: #004898; /* Surfaces & ink (light) */ color-scheme: light; --bg: #F4F3F0; --blob-a: rgba(var(--accent-rgb), 0.10); --blob-b: rgba(var(--accent-2-rgb), 0.08); --card: #FFFFFF; --card-surface: var(--card); --sky: none; --sky-size: auto; --card-border: rgba(17, 17, 20, 0.07); --card-shadow: 0 1px 2px rgba(17, 17, 20, 0.04), 0 12px 32px -12px rgba(17, 17, 20, 0.14), 0 40px 80px -40px rgba(17, 17, 20, 0.22); --panel: #F7F7F8; --line: rgba(17, 17, 20, 0.08); --ink: #111114; --ink-2: #3D3D45; --muted: #7A7A85; --corner: rgba(17, 17, 20, 0.22); --qr-glow: rgba(var(--accent-rgb), 0.20); --hkbu-ink: var(--hkbu-blue); --success: #0F9D58; --warn: #C2410C; --dot: rgba(17, 17, 20, 0.2); /* Type sizes */ --fs-name: clamp(1.75rem, min(9vw, 5.3svh), 2.375rem); --fs-phone: clamp(0.8125rem, min(3.6vw, 2.2svh), 0.9375rem); --fs-title: clamp(0.8125rem, min(3.8vw, 2.3svh), 0.96875rem); --fs-email: clamp(0.75rem, min(3.4vw, 2.1svh), 0.875rem); --fs-label: clamp(0.5625rem, min(2.6vw, 1.55svh), 0.6875rem); --fs-btn: clamp(0.8125rem, min(3.7vw, 2.2svh), 0.9375rem); /* Spacing (scales with viewport height so short phones stay on one screen) */ --gutter: clamp(8px, 2.6vw, 24px); --pad-x: clamp(16px, 5vw, 28px); --pad-y: clamp(14px, 2.6svh, 28px); --gap: clamp(8px, 1.9svh, 20px); --row-pad: clamp(7px, 1.25svh, 12px); --btn-h: clamp(42px, 6.6svh, 52px); --corner-out: 8px; --radius-card: 28px; --radius-plate: 18px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- Themes ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #18181B; --blob-a: rgba(var(--accent-rgb), 0.12); --blob-b: rgba(var(--accent-2-rgb), 0.08); --card: #232327; --card-border: rgba(255, 255, 255, 0.06); --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 60px -24px rgba(0, 0, 0, 0.6); --panel: #2C2C31; --line: rgba(255, 255, 255, 0.08); --ink: #F4F4F5; --ink-2: #D4D4D8; --muted: #A1A1AA; --corner: rgba(255, 255, 255, 0.28); --qr-glow: rgba(0, 0, 0, 0.45); --hkbu-ink: #8DB3EE; --success: #34C27A; --warn: #FB923C; --dot: rgba(255, 255, 255, 0.25); --accent-ink: var(--accent-2); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #18181B; --blob-a: rgba(var(--accent-rgb), 0.12); --blob-b: rgba(var(--accent-2-rgb), 0.08); --card: #232327; --card-border: rgba(255, 255, 255, 0.06); --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 60px -24px rgba(0, 0, 0, 0.6); --panel: #2C2C31; --line: rgba(255, 255, 255, 0.08); --ink: #F4F4F5; --ink-2: #D4D4D8; --muted: #A1A1AA; --corner: rgba(255, 255, 255, 0.28); --qr-glow: rgba(0, 0, 0, 0.45); --hkbu-ink: #8DB3EE; --success: #34C27A; --warn: #FB923C; --dot: rgba(255, 255, 255, 0.25); --accent-ink: var(--accent-2); } /* Charcoal "Dark" is soft grey; Midnight is a deep blue night sky: navy card, cool ink, a faint star field and the accent as a neon glow */ :root[data-theme="midnight"] { color-scheme: dark; --bg: #02030A; --sky: radial-gradient(1px 1px at 17px 23px, rgba(255, 255, 255, 0.85), transparent), radial-gradient(1px 1px at 91px 71px, rgba(200, 215, 255, 0.7), transparent), radial-gradient(1.5px 1.5px at 143px 37px, rgba(255, 255, 255, 0.9), transparent), radial-gradient(1px 1px at 61px 131px, rgba(180, 200, 255, 0.6), transparent), radial-gradient(1px 1px at 197px 151px, rgba(255, 255, 255, 0.75), transparent), radial-gradient(1.5px 1.5px at 233px 97px, rgba(220, 230, 255, 0.8), transparent), radial-gradient(ellipse 90% 55% at 50% -8%, rgba(56, 78, 190, 0.45), transparent 70%), radial-gradient(ellipse 70% 45% at 50% 108%, rgba(var(--accent-2-rgb), 0.18), transparent 70%); --sky-size: 257px 181px, 311px 223px, 197px 263px, 349px 157px, 229px 293px, 283px 211px, 100% 100%, 100% 100%; --blob-a: rgba(var(--accent-rgb), 0.22); --blob-b: rgba(var(--accent-2-rgb), 0.16); --card: #0C1233; --card-surface: linear-gradient(180deg, #121A45 0%, #0A0F2B 55%, #080C22 100%); --card-border: rgba(150, 170, 255, 0.16); --card-shadow: 0 1px 0 rgba(170, 190, 255, 0.12) inset, 0 0 0 1px rgba(var(--accent-2-rgb), 0.12), 0 40px 110px -30px rgba(var(--accent-2-rgb), 0.6); --panel: rgba(140, 160, 255, 0.07); --line: rgba(150, 170, 255, 0.13); --ink: #EEF1FF; --ink-2: #BAC2E4; --muted: #8089B3; --corner: rgba(170, 190, 255, 0.4); --qr-glow: rgba(var(--accent-2-rgb), 0.7); --hkbu-ink: #8DB3EE; --success: #34C27A; --warn: #FB923C; --dot: rgba(170, 190, 255, 0.3); --accent-ink: var(--accent-2); } /* ---------- Accents ---------- Not scoped to :root, so a colour swatch in the settings panel can carry its own palette. */ [data-accent="ember"] { --accent-1: #EB001B; --accent-2: #FF5F00; --accent-3: #F79E1B; --accent-rgb: 235, 0, 27; --accent-2-rgb: 255, 95, 0; --mark-1: #EB001B; --mark-2: #FF5F00; --qr-0: #F5300B; --qr-1: #E6001B; --qr-2: #A8001C; --qr-3: #3A0A16; --qr-4: #16161B; --qr-eye: #E3001B; --qr-tint: #FF5F00; } [data-accent="navy"] { --accent-1: #0B3D91; --accent-2: #2F6FD0; --accent-3: #D8B77A; --accent-rgb: 11, 61, 145; --accent-2-rgb: 47, 111, 208; --mark-1: #0B3D91; --mark-2: #2F6FD0; --qr-0: #2B6FD6; --qr-1: #1F5FC4; --qr-2: #0B3D91; --qr-3: #0E2248; --qr-4: #111623; --qr-eye: #0B3D91; --qr-tint: #D8B77A; } [data-accent="ocean"] { --accent-1: #0066FF; --accent-2: #0093CC; --accent-3: #7EE8FA; --accent-rgb: 0, 102, 255; --accent-2-rgb: 0, 147, 204; --mark-1: #0066FF; --mark-2: #00A3D9; --qr-0: #0072D6; --qr-1: #0062C4; --qr-2: #004A99; --qr-3: #0B2A4A; --qr-4: #0F1722; --qr-eye: #0062C4; --qr-tint: #00B4D8; } [data-accent="emerald"] { --accent-1: #047857; --accent-2: #059669; --accent-3: #34D399; --accent-rgb: 4, 120, 87; --accent-2-rgb: 5, 150, 105; --mark-1: #047857; --mark-2: #10B981; --qr-0: #0B8A5C; --qr-1: #067A50; --qr-2: #055C3D; --qr-3: #0B2A1F; --qr-4: #101814; --qr-eye: #047857; --qr-tint: #34D399; } [data-accent="violet"] { --accent-1: #6D28D9; --accent-2: #DB2777; --accent-3: #F0ABFC; --accent-rgb: 109, 40, 217; --accent-2-rgb: 219, 39, 119; --mark-1: #6D28D9; --mark-2: #DB2777; --qr-0: #C0268A; --qr-1: #A21CAF; --qr-2: #6D28D9; --qr-3: #2A1450; --qr-4: #15121F; --qr-eye: #7C3AED; --qr-tint: #F472B6; } [data-accent="gold"] { --accent-1: #8A6414; --accent-2: #C9962E; --accent-3: #F2D38A; --accent-rgb: 138, 100, 20; --accent-2-rgb: 201, 150, 46; --mark-1: #8A6414; --mark-2: #C9962E; --qr-0: #9A7016; --qr-1: #87610F; --qr-2: #6A4B0C; --qr-3: #33260E; --qr-4: #16130E; --qr-eye: #7A560E; --qr-tint: #E8C06A; } [data-accent="graphite"] { --accent-1: #1C1C22; --accent-2: #52525C; --accent-3: #A1A1AA; --accent-rgb: 28, 28, 34; --accent-2-rgb: 82, 82, 92; --mark-1: #1C1C22; --mark-2: #52525C; --qr-0: #45454F; --qr-1: #3A3A43; --qr-2: #2A2A31; --qr-3: #1C1C22; --qr-4: #111114; --qr-eye: #52525C; --qr-tint: #8A8A96; } /* Graphite on a dark card flips to light greys so buttons and icons stay visible */ @media (prefers-color-scheme: dark) { :root:not([data-theme])[data-accent="graphite"] { --accent-1: #E4E4E7; --accent-2: #A1A1AA; --accent-3: #FFFFFF; --accent-rgb: 228, 228, 231; --accent-2-rgb: 161, 161, 170; --on-accent: #111114; } } :root[data-theme="dark"][data-accent="graphite"], :root[data-theme="midnight"][data-accent="graphite"] { --accent-1: #E4E4E7; --accent-2: #A1A1AA; --accent-3: #FFFFFF; --accent-rgb: 228, 228, 231; --accent-2-rgb: 161, 161, 170; --on-accent: #111114; } /* ---------- Font pairings: display (name), text, mono (labels) ---------- */ :root, [data-font="geist"] { --font-display: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --name-weight: 700; --name-tracking: -0.045em; } [data-font="grotesk"] { --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace; --name-weight: 700; --name-tracking: -0.04em; } [data-font="editorial"] { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --name-weight: 600; --name-tracking: -0.02em; } [data-font="jakarta"] { --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace; --name-weight: 800; --name-tracking: -0.04em; } [data-font="system"] { --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --name-weight: 700; --name-tracking: -0.03em; } [hidden] { display: none !important; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { --pt: max(var(--gutter), env(safe-area-inset-top)); --pb: max(var(--gutter), env(safe-area-inset-bottom)); font-family: var(--font-sans); background: var(--bg); color: var(--ink); line-height: 1.35; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: var(--pt) max(var(--gutter), env(safe-area-inset-right)) var(--pb) max(var(--gutter), env(safe-area-inset-left)); overflow-x: hidden; } /* Soft brand-colour glow behind the card (static: animating it repaints the whole screen on Safari) */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(closest-side at 22% 18%, var(--blob-a), transparent), radial-gradient(closest-side at 80% 85%, var(--blob-b), transparent); pointer-events: none; z-index: 0; } /* Background photo (namecard app): the photo fills the page and the card turns to frosted glass */ .has-photo body::before { background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.28)), var(--photo) center / cover no-repeat; } .has-photo body::after { display: none; } .has-photo .card { background: color-mix(in srgb, var(--card) 72%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); } /* Midnight's star field: one static layer, gently twinkling via opacity (GPU only) */ body::after { content: ''; position: fixed; inset: 0; background: var(--sky); background-size: var(--sky-size); pointer-events: none; z-index: 0; } :root[data-theme="midnight"] body::after { will-change: opacity; animation: twinkle 7s ease-in-out infinite alternate; } @keyframes twinkle { from { opacity: 0.65; } to { opacity: 1; } } a { color: inherit; text-decoration: none; } svg { display: block; flex: none; } /* ---------- Card ---------- */ .card { position: relative; z-index: 1; width: min(100%, 420px); height: calc(100vh - var(--pt) - var(--pb)); height: calc(100svh - var(--pt) - var(--pb)); min-height: 500px; max-height: 780px; display: flex; flex-direction: column; padding: var(--pad-y) var(--pad-x); background: var(--card-surface); border: 1px solid var(--card-border); border-radius: var(--radius-card); box-shadow: var(--card-shadow); overflow: hidden; } /* Brand hairline across the top edge: two identical gradient periods slide by one period, using transform so it runs on the GPU instead of repainting the card */ .card::before { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 3px; background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3), var(--accent-2), var(--accent-1), var(--accent-2), var(--accent-3), var(--accent-2), var(--accent-1)); animation: shimmer 6s linear infinite; will-change: transform; } @keyframes shimmer { to { transform: translateX(-50%); } } /* ---------- Header ---------- */ .card-head { flex: none; display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 0.8svh, 8px); text-align: center; } .card-name { font-family: var(--font-display); font-size: var(--fs-name); font-weight: var(--name-weight); letter-spacing: var(--name-tracking); line-height: 1; color: var(--ink); white-space: nowrap; text-rendering: optimizeLegibility; } /* Letters are wrapped by JS for the reveal; the mask keeps descenders visible */ .card-name .char-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; } .card-name .char { display: inline-block; } .card-phone { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: var(--fs-phone); font-weight: 500; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--ink-2); padding: 2px 4px; border-radius: 6px; transition: color 0.2s ease; } .card-phone svg { width: 0.95em; height: 0.95em; fill: none; stroke: var(--accent-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .card-phone:hover { color: var(--accent-ink); } /* ---------- QR ---------- */ .qr-stage { flex: 1 1 0; min-height: 140px; margin-top: var(--gap); display: grid; place-items: center; container-type: size; touch-action: pan-y; /* horizontal swipes belong to the QR carousel */ -webkit-user-select: none; user-select: none; } .qr-frame { position: relative; width: min(100%, 300px); aspect-ratio: 1; } @supports (width: 1cqmin) { .qr-frame { width: min(100cqw - var(--corner-out) * 2, 100cqh - var(--corner-out) * 2, 340px); } } .qr-border { position: absolute; inset: 0; border-radius: calc(var(--radius-plate) + 2px); padding: 2px; overflow: hidden; background: var(--line); box-shadow: 0 18px 40px -18px var(--qr-glow); isolation: isolate; } /* A comet of brand colour travelling around the plate's edge */ .qr-orbit { position: absolute; inset: -50%; background: conic-gradient(from 0deg, transparent 0turn 0.62turn, rgba(var(--accent-2-rgb), 0) 0.62turn, var(--accent-3) 0.8turn, var(--accent-2) 0.9turn, var(--accent-1) 0.99turn, transparent 1turn); animation: orbit 5.5s linear infinite; will-change: transform; } @keyframes orbit { to { transform: rotate(1turn); } } .qr-plate { position: relative; width: 100%; height: 100%; background: #FFFFFF; border-radius: var(--radius-plate); overflow: hidden; } #qrcode { display: block; width: 100%; height: 100%; } .qr-logo { position: absolute; top: 50%; left: 50%; width: var(--logo-size, 20%); height: var(--logo-size, 20%); margin: calc(var(--logo-size, 20%) / -2) 0 0 calc(var(--logo-size, 20%) / -2); padding: 0; border: 0; background: none; cursor: pointer; border-radius: 30%; z-index: 2; will-change: transform; } /* Box-shadow on its own layer: a filter here would be re-rendered every frame while the logo scales */ .qr-logo-shadow { position: absolute; inset: 0; border-radius: 30%; box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.38); } .qr-logo:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; } .qr-logo svg { width: 100%; height: 100%; overflow: visible; } .qr-logo g { fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; } .hn-ink path { stroke-dasharray: 1 1.2; stroke-dashoffset: 0; } #hnGrad stop:first-child { stop-color: var(--mark-1); } #hnGrad stop:last-child { stop-color: var(--mark-2); } .hn-initials { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; stroke: none; } /* Centre-logo designs (data-logo on the logo, or on a preview tile) */ [data-logo="outline"] .hn-badge { fill: #FFFFFF; stroke: var(--mark-1); stroke-width: 6; } [data-logo="outline"] .hn-mark { stroke: var(--mark-1); } [data-logo="outline"] .hn-initials { fill: var(--mark-1); } [data-logo="serif"] .hn-badge, [data-logo="mono"] .hn-badge { fill: var(--qr-4); } [data-logo="serif"] .hn-initials { font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif; font-style: italic; font-weight: 600; letter-spacing: -0.02em; } [data-logo="mono"] .hn-initials { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0; fill: var(--qr-tint); } .qr-logo[data-logo="circle"], .qr-logo[data-logo="serif"], .qr-logo[data-logo="circle"] .qr-logo-shadow, .qr-logo[data-logo="serif"] .qr-logo-shadow { border-radius: 50%; } .hn-badge { transform-box: fill-box; transform-origin: center; } .qr-shock { position: absolute; top: 50%; left: 50%; width: var(--logo-size, 20%); height: var(--logo-size, 20%); margin: calc(var(--logo-size, 20%) / -2) 0 0 calc(var(--logo-size, 20%) / -2); border-radius: 50%; border: 2px solid var(--mark-2); opacity: 0; pointer-events: none; z-index: 1; } .qr-glint { position: absolute; inset: -20%; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%); transform: translateX(-120%); pointer-events: none; z-index: 3; } /* Viewfinder corners */ .qr-corner { position: absolute; width: clamp(12px, 7%, 22px); height: clamp(12px, 7%, 22px); border: 2px solid var(--corner); pointer-events: none; } .qr-corner.tl { top: calc(var(--corner-out) * -1); left: calc(var(--corner-out) * -1); border-right: 0; border-bottom: 0; border-top-left-radius: 10px; } .qr-corner.tr { top: calc(var(--corner-out) * -1); right: calc(var(--corner-out) * -1); border-left: 0; border-bottom: 0; border-top-right-radius: 10px; } .qr-corner.bl { bottom: calc(var(--corner-out) * -1); left: calc(var(--corner-out) * -1); border-right: 0; border-top: 0; border-bottom-left-radius: 10px; } .qr-corner.br { bottom: calc(var(--corner-out) * -1); right: calc(var(--corner-out) * -1); border-left: 0; border-top: 0; border-bottom-right-radius: 10px; } .qr-caption { flex: none; display: flex; flex-direction: column; align-items: center; gap: clamp(5px, 0.9svh, 8px); margin-top: clamp(8px, 1.6svh, 16px); } .qr-label { display: flex; align-items: center; justify-content: center; gap: 0.7em; min-height: 1.6em; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .live-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); } .live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--accent-ink); animation: livePing 2s var(--ease-out) infinite; } @keyframes livePing { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(3); opacity: 0; } } /* ---------- QR slots: swipe between the contact card and your own codes ---------- */ .qr-track { display: flex; width: 100%; height: 100%; will-change: transform; } .qr-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; } .qr-slide-custom img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; } /* The plate is always white, so the add tile uses fixed light colours */ .qr-add { position: absolute; inset: 8%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px dashed rgba(17, 17, 20, 0.18); border-radius: 16px; background: #FAFAFA; color: #111114; font-family: var(--font-sans); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .qr-add:hover { border-color: var(--mark-2); background: #F6F6F7; } .qr-add-icon { display: grid; place-items: center; width: clamp(36px, 22%, 48px); aspect-ratio: 1; margin-bottom: 6px; border-radius: 30%; background: linear-gradient(135deg, var(--mark-1), var(--mark-2)); box-shadow: 0 8px 18px -8px rgba(var(--accent-rgb), 0.55); } .qr-add-icon svg { width: 46%; height: 46%; fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; } .qr-add-title { font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.01em; } .qr-add-hint { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: #7A7A85; } /* Arrow buttons: desktop only (touch screens swipe) */ .qr-arrow { position: absolute; top: 50%; z-index: 3; display: none; place-items: center; width: 36px; height: 36px; margin-top: -18px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); box-shadow: 0 8px 18px -10px rgba(17, 17, 20, 0.45); cursor: pointer; transition: opacity 0.25s ease, transform 0.25s var(--ease-out); } .qr-arrow.prev { left: -18px; } .qr-arrow.next { right: -18px; } .qr-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .qr-arrow:hover { transform: scale(1.08); } .qr-arrow:disabled { opacity: 0; pointer-events: none; } @media (hover: hover) and (pointer: fine) { .qr-arrow { display: grid; } } .qr-edit { padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink-2); font: inherit; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; } .qr-edit:hover { border-color: var(--accent-2); color: var(--accent-ink); } .qr-pager { display: flex; align-items: center; gap: 6px; height: 6px; } .qr-dot { position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: var(--dot); cursor: pointer; transition: width 0.4s var(--ease-out), background-color 0.3s ease; } .qr-dot::after { content: ''; position: absolute; inset: -9px -3px; /* comfortable tap target */ } .qr-dot.is-add { background: transparent; box-shadow: inset 0 0 0 1.5px var(--dot); } .qr-dot.is-active { width: 18px; background: var(--accent-gradient); box-shadow: none; } /* ---------- Editor dialog ---------- */ .qr-editor { width: min(100% - 20px, 420px); max-width: none; max-height: calc(100svh - 20px); margin: auto; padding: 0; border: 0; border-radius: 24px; background: var(--card); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5); overflow: auto; overscroll-behavior: contain; } .qr-editor::backdrop { background: rgba(10, 10, 13, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .editor-panel { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; } .editor-head { display: flex; align-items: center; justify-content: space-between; } .editor-head h2 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; } .editor-x { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--panel); color: var(--ink-2); cursor: pointer; } .editor-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .crop-view { position: relative; width: min(100%, 38svh); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border-radius: 16px; background: #FFFFFF; touch-action: none; cursor: grab; } .crop-view:active { cursor: grabbing; } .crop-img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; pointer-events: none; } /* Rule-of-thirds guides and a brand-coloured crop edge */ .crop-grid { position: absolute; inset: 0; border-radius: inherit; background-image: linear-gradient(rgba(var(--accent-2-rgb), 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-2-rgb), 0.3) 1px, transparent 1px); background-size: 33.334% 33.334%; background-position: -1px -1px; box-shadow: inset 0 0 0 2px rgba(var(--accent-2-rgb), 0.85); pointer-events: none; } .crop-tools { display: flex; align-items: center; gap: 6px; min-height: 28px; } .crop-status { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--muted); } .crop-status[data-tone="ok"] { color: var(--success); } .crop-status[data-tone="warn"] { color: var(--warn); } .chip { flex: none; height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font: 500 0.78125rem/1 var(--font-sans); white-space: nowrap; cursor: pointer; } .chip:hover { border-color: var(--accent-2); } .crop-zoom { display: flex; align-items: center; gap: 10px; color: var(--muted); } .crop-zoom svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .zoom-range { flex: 1; height: 28px; accent-color: var(--accent-ink); } .name-input { height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); font: 500 16px var(--font-sans); /* 16px stops iOS zooming in on focus */ } .name-input:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; } .name-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } .name-chips::-webkit-scrollbar { display: none; } .editor-actions { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .editor-actions .btn { height: 44px; padding: 0 18px; } .editor-actions .btn-primary { flex: 1; } .text-btn { margin-right: auto; padding: 8px 4px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 600 0.8125rem var(--font-sans); cursor: pointer; } .editor-delete { color: #D0021B; } .editor-delete.is-confirm { padding: 8px 12px; background: #D0021B; color: #FFFFFF; } .toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 10; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; background: #111114; color: #FFFFFF; font: 500 0.8125rem var(--font-sans); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5); transform: translateX(-50%); } /* ---------- Settings: gear + Appearance sheet ---------- */ .card-settings, .card-transfer { position: absolute; top: max(6px, calc(var(--pad-y) - 8px)); right: max(6px, calc(var(--pad-x) - 10px)); z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease, transform 0.6s var(--ease-out); } .card-transfer { right: auto; left: max(6px, calc(var(--pad-x) - 10px)); } .card-settings:hover, .card-transfer:hover { color: var(--ink); background: var(--panel); } .card-settings:hover { transform: rotate(45deg); } .card-settings:focus-visible, .card-transfer:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } .card-settings svg, .card-transfer svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* A bottom sheet on phones, so the card above stays visible as a live preview */ .sheet { width: min(100% - 16px, 440px); max-width: none; max-height: calc(100svh - 16px); margin: auto auto max(8px, env(safe-area-inset-bottom)); padding: 0; border: 0; border-radius: 24px; background: var(--card); color: var(--ink); box-shadow: 0 -12px 50px -18px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--card-border); overflow: auto; overscroll-behavior: contain; } .sheet::backdrop { background: rgba(10, 10, 13, 0.12); } /* Wide screens: park the panel beside the card */ @media (min-width: 1200px) { .sheet { margin: auto max(24px, calc(50% - 700px)) auto auto; } } .set-panel { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 16px; } .set-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; } .set-label { width: 100%; padding: 0; margin-bottom: 8px; display: flex; align-items: baseline; justify-content: space-between; font-family: var(--font-mono); font-size: 0.65625rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .set-value { font-weight: 500; letter-spacing: 0.08em; color: var(--ink-2); } /* Radios stay focusable and keyboard-operable; the span is the visible control */ .set-group input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .set-group label { position: relative; cursor: pointer; } .seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); } .seg span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 2px 6px; border-radius: 10px; font: 500 0.75rem/1 var(--font-sans); color: var(--ink-2); white-space: nowrap; transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } .seg svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .seg input:checked + span { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--line); } /* A scrolling row clips on every side, so leave room for the selected ring, the hover grow and the focus outline (~6px), and pull the row back with negative margins */ .swatches, .font-tiles { display: flex; gap: 10px; margin: -4px -8px; padding: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 8px; } .swatches::-webkit-scrollbar, .font-tiles::-webkit-scrollbar { display: none; } .swatch span { display: block; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 70%, var(--accent-3) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); transition: transform 0.3s var(--ease-out), box-shadow 0.25s ease; } .swatch:hover span { transform: scale(1.08); } .swatch input:checked + span { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); } .font-tiles { gap: 8px; } .font-tile span { display: flex; flex-direction: column; gap: 5px; min-width: 118px; padding: 10px 12px 9px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); scroll-snap-align: start; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .font-tile b { font-family: var(--font-display); font-size: 1.125rem; font-weight: var(--name-weight); letter-spacing: var(--name-tracking); line-height: 1.1; color: var(--ink); white-space: nowrap; } .font-tile small { font-family: var(--font-mono); font-size: 0.59375rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .font-tile input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .set-group input:focus-visible + span { outline: 2px solid var(--accent-2); outline-offset: 2px; } @media (max-width: 330px) { .card-settings, .card-transfer { width: 28px; height: 28px; } } /* ---------- Import / export sheet ---------- */ .transfer-menu { display: flex; flex-direction: column; gap: 8px; } .transfer-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink); text-align: left; font-family: var(--font-sans); cursor: pointer; transition: border-color 0.2s ease, transform 0.2s var(--ease-out); } .transfer-row:hover { border-color: var(--accent-2); } .transfer-row:active { transform: scale(0.985); } .transfer-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-gradient); color: var(--on-accent); } .transfer-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .transfer-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .transfer-text b { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; } .transfer-text small { font-size: 0.78125rem; line-height: 1.35; color: var(--muted); } .transfer-status { min-height: 1.2em; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); } .transfer-status[data-tone="ok"] { color: var(--success); } .transfer-status[data-tone="warn"] { color: var(--warn); } .transfer-restore { align-self: flex-start; } .transfer-restore.is-confirm { padding: 8px 12px; background: var(--ink); color: var(--card); } .transfer-review { display: flex; flex-direction: column; gap: 12px; } .review-title { font-size: 0.9375rem; color: var(--ink-2); overflow-wrap: anywhere; } .review-title b { color: var(--ink); } .review-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); font-size: 0.84375rem; } .review-list:empty { display: none; } .review-list dt { font-family: var(--font-mono); font-size: 0.65625rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.9; color: var(--muted); } .review-list dd { color: var(--ink); overflow-wrap: anywhere; } .review-notes { display: flex; flex-direction: column; gap: 4px; padding-left: 1.1em; font-size: 0.78125rem; line-height: 1.4; color: var(--warn); } .review-notes[data-tone="error"] { color: #D0021B; } /* ---------- Affiliations ---------- */ .card-roles { flex: none; margin-top: var(--gap); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .role-row { display: flex; align-items: center; gap: 12px; padding: var(--row-pad) 14px; transition: background-color 0.2s ease; } .role-row + .role-row { border-top: 1px solid var(--line); } .role-row:hover, .role-row:active { background: var(--line); } .role-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .role-org { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; } .org-mc { background: var(--mc-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; align-self: flex-start; } .org-hkbu { color: var(--hkbu-ink); } .org-accent { color: var(--accent-ink); } .role-title { font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; color: var(--ink); } .role-email { font-size: var(--fs-email); font-weight: 400; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; } .role-arrow { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease-out), stroke 0.2s ease; } .role-row:hover .role-arrow { transform: translate(2px, -2px); stroke: var(--accent-ink); } /* ---------- Actions ---------- */ .card-actions { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 10px; margin-top: var(--gap); } .card-actions.solo { grid-template-columns: minmax(0, 1fr); } .btn { position: relative; height: var(--btn-h); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border-radius: 14px; font-family: var(--font-sans); font-size: var(--fs-btn); font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; overflow: hidden; transition: transform 0.2s var(--ease-out), box-shadow 0.25s ease, background-color 0.2s ease; } .btn span { overflow: hidden; text-overflow: ellipsis; } .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .btn svg.icon-fill { width: 16px; height: 16px; fill: currentColor; stroke: none; } .btn:active { transform: scale(0.97); } .btn-ghost { color: var(--ink); background: var(--panel); border: 1px solid var(--line); } .btn-ghost svg { color: #0A66C2; } .btn-ghost:hover { background: var(--line); } .btn-primary { color: var(--on-accent); border: 0; background: var(--accent-gradient); box-shadow: 0 8px 20px -8px rgba(var(--accent-rgb), 0.55); } /* Periodic light sweep across the primary button */ .btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-100%); animation: btnSheen 5s ease-in-out 3s infinite; } @keyframes btnSheen { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .btn-primary:hover { box-shadow: 0 12px 28px -8px rgba(var(--accent-rgb), 0.6); } .btn-primary.is-done { background: linear-gradient(135deg, #13B26B, var(--success)); box-shadow: 0 8px 20px -8px rgba(15, 157, 88, 0.55); } /* ---------- Intro: initial hidden state until JS takes over ---------- */ .intro .card { opacity: 0; } /* ---------- Short screens: tighten type a notch ---------- */ @media (max-height: 600px) and (orientation: portrait) { :root { --corner-out: 6px; } .role-row { gap: 8px; } } /* Very narrow phones (e.g. Galaxy Fold cover screen) */ @media (max-width: 330px) { .card-actions { grid-template-columns: auto minmax(0, 1fr); } .btn-ghost span { display: none; } .role-arrow { display: none; } } /* ---------- Landscape phones: QR left, details right ---------- */ @media (orientation: landscape) and (max-height: 540px) { :root { --fs-name: clamp(1.5rem, 7svh, 2rem); --fs-phone: 0.8125rem; --fs-title: 0.8125rem; --fs-email: 0.75rem; --fs-label: 0.5625rem; --fs-btn: 0.8125rem; --pad-y: 14px; --gap: 10px; --row-pad: 7px; --btn-h: 40px; --corner-out: 6px; --gutter: 10px; } .card { width: min(100%, 760px); min-height: 260px; max-height: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr auto; grid-template-areas: "qr head" "qr roles" "cap actions"; column-gap: 24px; } .card-head { grid-area: head; align-items: flex-start; text-align: left; } .qr-stage { grid-area: qr; margin-top: 0; min-height: 0; } .qr-caption { grid-area: cap; align-self: center; margin-top: 0; } .card-roles { grid-area: roles; align-self: center; } .card-actions { grid-area: actions; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } /* No travelling comet: a still brand-gradient ring instead */ .qr-orbit { background: linear-gradient(135deg, var(--accent-1), var(--accent-2), var(--accent-3)); } }