/* EventGallery — global styles. Warm-analog editorial look, single fixed theme. */ :root { --c-accent: #b8513a; --c-accent-2: #486138; --c-paper: #f4ede0; --c-card: #faf6ed; --c-ink: #1a1611; --c-ink-dim: #6a5e4d; --c-line: rgba(26,22,17,0.10); --c-line-strong: rgba(26,22,17,0.18); --c-tint: rgba(184,81,58,0.10); --r-sm: 6px; --r: 10px; --r-lg: 20px; --f-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif; --f-script: "Caveat", cursive; --f-mono: "JetBrains Mono", ui-monospace, monospace; --f-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; background: var(--c-paper); color: var(--c-ink); font-family: var(--f-sans); font-feature-settings: "ss01"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* native-app feel: no rubber-band/pull-to-refresh, no grey tap flash */ overscroll-behavior: none; -webkit-tap-highlight-color: transparent; } /* ── native-app lockdown ───────────────────────────────────── Make the whole thing behave like an installed app: no pinch/double-tap zoom, no accidental text selection, no long-press callout, no image ghost-drag, no horizontal overflow. Inputs/copy-fields/lightbox opt back in. */ /* clip horizontal overflow on (the viewport scroller) — doing this on would force overflow-y to compute to auto and break sticky headers */ html { overflow-x: hidden; } body { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; } input, textarea, select, [contenteditable="true"], .selectable, .selectable *, .copy-row .val, code { -webkit-user-select: text; -moz-user-select: text; user-select: text; -webkit-touch-callout: default; } img, a, button { -webkit-user-drag: none; user-drag: none; } img { -webkit-touch-callout: none; } /* warm paper grain over the whole app */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: multiply; opacity: 0.5; background-image: url("data:image/svg+xml;utf8,"); } body > * { position: relative; z-index: 1; } button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; border: 0; background: transparent; padding: 0; } button:disabled { cursor: not-allowed; } input, textarea, select { font-family: inherit; color: inherit; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ── type utilities ─────────────────────────────────────── */ .t-display { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.05; } .t-display em { font-style: italic; } .t-script { font-family: var(--f-script); line-height: 1; color: var(--c-accent); } .t-mono { font-family: var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; font-size: 10.5px; font-weight: 500; } .t-dim { color: var(--c-ink-dim); } .t-rule { display: inline-flex; align-items: center; gap: 10px; } .t-rule::before, .t-rule::after { content: ''; width: 22px; height: 1px; background: currentColor; opacity: 0.4; } /* ── buttons ─────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 100px; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .15s, opacity .15s, transform .05s; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--c-ink); color: var(--c-paper); } .btn-primary:hover { background: #000; } .btn-accent { background: var(--c-accent); color: #fff; } .btn-accent:hover { filter: brightness(1.07); } .btn-ghost { background: transparent; color: var(--c-ink); border: 1px solid var(--c-line-strong); } .btn-ghost:hover { background: rgba(0,0,0,0.04); } .btn-google { background: #fff; color: #14110d; border: 1px solid var(--c-line-strong); height: 50px; padding: 0 24px; font-weight: 500; width: 100%; } .btn-google:hover { background: #f7f5f0; } .btn-sm { height: 32px; padding: 0 14px; font-size: 12.5px; } .btn-block { width: 100%; } .btn:disabled { opacity: 0.5; } .btn .ic { width: 16px; height: 16px; } /* ── card / input ────────────────────────────────────────── */ .card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-lg); } .input, .textarea, select.input { height: 44px; width: 100%; border: 1px solid var(--c-line-strong); background: rgba(255,255,255,0.55); border-radius: var(--r); padding: 0 14px; font-size: 14px; } .textarea { height: auto; padding: 10px 14px; resize: vertical; min-height: 64px; } .input:focus, .textarea:focus, select.input:focus { outline: 2px solid var(--c-accent); outline-offset: -1px; border-color: transparent; } .label { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-dim); margin-bottom: 8px; display: block; } .field { margin-bottom: 18px; } .field-note { font-size: 12px; color: var(--c-ink-dim); margin: 8px 2px 0; } /* ── cover image picker ──────────────────────────────────── */ .cover-pick { border: 1.5px dashed var(--c-line-strong); border-radius: var(--r); min-height: 132px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; background: rgba(255,255,255,0.4); color: var(--c-ink-dim); font-size: 13px; text-align: center; padding: 14px; } .cover-pick:hover { border-color: var(--c-accent); } .cover-pick img { width: 100%; height: 200px; object-fit: cover; border-radius: 6px; } /* cover focal-point editor */ .cover-ed-frame { width: 360px; max-width: 100%; height: 250px; border-radius: 18px; position: relative; overflow: hidden; background-repeat: no-repeat; background-size: cover; cursor: grab; touch-action: none; user-select: none; box-shadow: 0 14px 32px rgba(28,22,14,0.22); } .cover-ed-frame:active { cursor: grabbing; } .cover-ed-script { position: absolute; left: 22px; bottom: 14px; font-family: var(--f-script); font-size: 38px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.45); pointer-events: none; } .cover-ed-hint { font-size: 12px; color: var(--c-ink-dim); margin-top: 9px; } /* ── date field ──────────────────────────────────────────── */ .datefield { position: relative; } .datefield .input { padding-right: 40px; } .datefield-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 6px; color: var(--c-ink-dim); display: inline-flex; align-items: center; justify-content: center; } .datefield-btn:hover { background: rgba(0,0,0,0.05); } .datefield-btn .ic { width: 17px; height: 17px; } .datefield-cal { position: absolute; z-index: 600; top: calc(100% + 6px); left: 0; width: 252px; background: var(--c-card); border: 1px solid var(--c-line-strong); border-radius: var(--r); box-shadow: 0 14px 34px rgba(28,22,14,0.2); padding: 12px; } .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .cal-head span { font-family: var(--f-display); font-size: 16px; text-transform: capitalize; } .cal-head button { width: 28px; height: 28px; border-radius: 6px; color: var(--c-ink-dim); display: inline-flex; align-items: center; justify-content: center; } .cal-head button:hover { background: rgba(0,0,0,0.05); } .cal-head button .ic { width: 15px; height: 15px; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .cal-wd { text-align: center; font-family: var(--f-mono); font-size: 9.5px; color: var(--c-ink-dim); text-transform: uppercase; padding-bottom: 4px; } .cal-day { height: 30px; border-radius: 6px; font-size: 12.5px; } .cal-day:hover { background: var(--c-tint); } .cal-day.sel { background: var(--c-accent); color: #fff; } /* ── layout ──────────────────────────────────────────────── */ .wrap { max-width: 1140px; margin: 0 auto; padding: 0 32px; } .wrap-narrow { max-width: 900px; margin: 0 auto; padding: 0 32px; } .site-header { display: flex; align-items: center; gap: 24px; padding: 16px 32px; border-bottom: 1px solid var(--c-line); background: rgba(255,255,255,0.3); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(8px); max-width: 100%; } .site-header > * { min-width: 0; } /* let the crumb shrink instead of overflowing */ .site-header .brand, .site-header .avatar, .site-header #lang-slot { flex: none; } #crumb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-style: italic; font-size: 22px; line-height: 1; } .spacer { flex: 1; } /* event header action row wraps on narrow screens (title + buttons) */ .ev-head { flex-wrap: wrap; } .ev-head #ev-name { overflow-wrap: anywhere; } .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--c-accent-2); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 15px; } /* ── grids ───────────────────────────────────────────────── */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 880px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } .wrap, .wrap-narrow { padding: 0 18px; } .site-header { padding: 14px 18px; } } /* ── phones: this app is used mostly on phones, incl. the admin ──────────── tighten the owner/admin screens so they read like a native mobile app */ @media (max-width: 560px) { .wrap, .wrap-narrow { padding: 0 16px; } .site-header { padding: 11px 16px; gap: 10px; } .brand { font-size: 19px; } main.wrap { padding-top: 26px !important; } /* event hero: compact, action buttons take the full row */ .ev-head { gap: 12px; padding-top: 20px !important; } .ev-head #ev-meta { font-size: 13px; } .ev-head > div:last-child { width: 100%; display: flex; } .ev-head > div:last-child .btn { flex: 1; } /* tab strip */ .tabs { padding: 0 16px; } .tab { padding: 12px 13px; font-size: 13px; } /* create wizard + generic cards: less inner padding on a narrow screen */ .card { padding: 18px !important; border-radius: var(--r); } .steps { gap: 4px; margin-bottom: 22px; } .step { padding: 9px 6px; } #map { height: 250px !important; } /* QR tab: stack the copy rows so long links / keys never overflow */ .copy-row { grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px; } .copy-row .t-mono { grid-column: 1 / -1; } .copy-row .val { font-size: 12px; } /* tables: shrink so 4–5 columns fit a phone without clipping */ .tbl { font-size: 12.5px; } .tbl th { padding: 9px 8px; font-size: 9px; letter-spacing: 0.08em; } .tbl td { padding: 10px 8px; } .toggle-row { padding: 14px; gap: 12px; } } /* ── event cards ─────────────────────────────────────────── */ .event-card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; text-align: left; display: flex; flex-direction: column; cursor: pointer; } .event-card:hover { border-color: var(--c-line-strong); } .event-card .cover { height: 170px; position: relative; } .event-card .body { padding: 18px; } .badge-live { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,0.92); color: var(--c-accent); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 9px; border-radius: 100px; display: inline-flex; gap: 6px; align-items: center; } .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .card-new { border: 1px dashed var(--c-line-strong); background: transparent; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--c-ink-dim); border-radius: var(--r-lg); cursor: pointer; } .card-new:hover { background: rgba(0,0,0,0.02); } .plus-circle { width: 56px; height: 56px; border-radius: 50%; background: var(--c-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; } /* ── photo tile ──────────────────────────────────────────── */ .photo { position: relative; overflow: hidden; background: #d8c9b3; width: 100%; height: 100%; } .photo img { width: 100%; height: 100%; object-fit: cover; } .photo-by { position: absolute; bottom: 8px; left: 8px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.08em; background: rgba(0,0,0,0.5); color: #fff; padding: 2px 7px; border-radius: 4px; } /* small square grid used by the upload-tab "recent" strip */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .gallery-grid .tile { aspect-ratio: 1; border-radius: 6px; overflow: hidden; position: relative; } /* ── tabs ────────────────────────────────────────────────── */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-line); padding: 0 32px; /* never overflow the viewport: scroll the tab row horizontally instead */ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: none; white-space: nowrap; padding: 12px 16px; font-size: 13.5px; font-weight: 500; color: var(--c-ink-dim); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab.active { color: var(--c-ink); border-bottom-color: var(--c-accent); } .tab .count { font-family: var(--f-mono); font-size: 10px; color: var(--c-ink-dim); background: rgba(28,22,14,0.07); padding: 2px 6px; border-radius: 100px; margin-left: 6px; } /* ── table ───────────────────────────────────────────────── */ /* wide data tables scroll horizontally on a phone instead of clipping */ .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .tbl th { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-dim); font-weight: 500; text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--c-line-strong); } .tbl td { padding: 13px 14px; border-bottom: 1px solid var(--c-line); } .icon-danger { color: var(--c-ink-dim); padding: 6px 9px; } .icon-danger:hover { color: var(--c-accent); background: var(--c-tint); } .icon-danger .ic { width: 16px; height: 16px; } /* ── event log (observability) ───────────────────────────── */ .log-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .chip-btn { padding: 6px 14px; border-radius: 100px; border: 1px solid var(--c-line-strong); font-size: 12.5px; color: var(--c-ink-dim); background: transparent; } .chip-btn.active { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); } .log-tbl td { vertical-align: top; } .log-badge { display: inline-block; padding: 2px 9px; border-radius: 100px; font-size: 11px; font-weight: 500; white-space: nowrap; } .log-badge.kgreen { background: rgba(72,97,56,0.14); color: var(--c-accent-2); } .log-badge.kamber { background: rgba(184,81,58,0.14); color: var(--c-accent); } .log-badge.kblue { background: rgba(50,70,100,0.10); color: #3a4a66; } .log-badge.kgray { background: rgba(28,22,14,0.07); color: var(--c-ink-dim); } .log-badge.kred { background: rgba(168,50,50,0.12); color: #a83232; } .log-flag { display: inline-block; width: 15px; text-align: center; border-radius: 3px; font-size: 9px; font-weight: 700; line-height: 14px; margin-left: 1px; } .log-flag.on { background: var(--c-accent-2); color: #fff; } .log-flag.off { background: var(--c-line-strong); color: var(--c-ink-dim); opacity: 0.55; } /* ── toggle ──────────────────────────────────────────────── */ .toggle { width: 46px; height: 26px; border-radius: 100px; background: rgba(28,22,14,0.18); position: relative; transition: background .15s; flex: none; } .toggle.on { background: var(--c-accent); } .toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); } .toggle.on::after { left: 23px; } .toggle-row { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--c-line); border-radius: var(--r); background: rgba(255,255,255,0.4); margin-bottom: 12px; } .toggle-row .grow { flex: 1; } /* ── pills / chips ───────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 9px; border-radius: 100px; } .chip-ok { color: var(--c-accent-2); background: rgba(72,97,56,0.12); } .chip-accent { color: var(--c-accent); background: var(--c-tint); } /* ── toast ───────────────────────────────────────────────── */ .toast-host { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; } .toast { background: var(--c-ink); color: var(--c-paper); padding: 12px 20px; border-radius: 100px; font-size: 13.5px; box-shadow: 0 10px 30px rgba(28,22,14,0.3); animation: pop .2s ease-out; } .toast.err { background: var(--c-accent); color: #fff; } @keyframes pop { from { opacity: 0; transform: translateY(8px); } } @keyframes fadeIn { from { opacity: 0; } } /* ── misc ────────────────────────────────────────────────── */ .muted { color: var(--c-ink-dim); } .center { text-align: center; } .hidden { display: none !important; } .divider { display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-dim); margin: 22px 0; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--c-line); } .spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--c-line-strong); border-top-color: var(--c-accent); animation: spin .7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .empty { text-align: center; padding: 60px 20px; color: var(--c-ink-dim); } /* steps */ .steps { display: flex; gap: 6px; margin-bottom: 28px; } .step { flex: 1; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--c-line); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-dim); } .step.active { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); } .step.done { background: var(--c-tint); color: var(--c-accent); border-color: transparent; } /* ── attendee (mobile) — native app shell ─────────────────── */ /* Fixed-height column: header + tabbar pinned, only the middle scrolls. No document scroll, no rubber-band revealing the background. */ body.eg-app { overflow: hidden; } .phone { max-width: 520px; margin: 0 auto; height: 100vh; height: 100dvh; background: var(--c-paper); position: relative; display: flex; flex-direction: column; overflow: hidden; } .phone-pad { padding: 22px 20px; } .phone-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* host that lets a gallery fill the remaining phone height (so the feed can snap one post per screen) while the grid scrolls normally */ .gallery-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; } .appbar { flex: none; z-index: 10; display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 18px 12px; background: rgba(244,237,224,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-line); } .appbar .title { font-family: var(--f-display); font-style: italic; font-size: 18px; line-height: 1; } /* per-event brand wordmark (guest app eyebrow + invite header) */ .appbar-brand { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-dim); margin-bottom: 3px; line-height: 1; } .guest-brand { text-align: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-dim); margin: 0 0 14px; } .appbar-brand:empty, .guest-brand:empty { display: none; } .tabbar { flex: none; z-index: 10; display: flex; gap: 4px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); background: rgba(244,237,224,0.94); backdrop-filter: blur(12px); border-top: 1px solid var(--c-line); } .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; color: var(--c-ink-dim); font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; } .tabbar button.active { color: var(--c-accent); } .tabbar button .ic { width: 22px; height: 22px; } .big-action { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px; border-radius: 16px; text-align: left; margin-bottom: 12px; } .big-action .ic-box { width: 46px; height: 46px; border-radius: 13px; flex: none; display: inline-flex; align-items: center; justify-content: center; } .big-action.primary { background: var(--c-ink); color: var(--c-paper); } .big-action.primary .ic-box { background: var(--c-accent); color: #fff; } .big-action.ghost { background: rgba(255,255,255,0.6); border: 1px solid var(--c-line); } .big-action.ghost .ic-box { background: rgba(28,22,14,0.08); } .big-action .ic { width: 22px; height: 22px; } .note-box { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: rgba(28,22,14,0.04); font-size: 12.5px; color: var(--c-ink-dim); line-height: 1.5; } .note-box .ic { width: 18px; height: 18px; flex: none; color: var(--c-accent-2); } #gate-map { height: 230px; border-radius: 14px; border: 1px solid var(--c-line-strong); } .invite-cover { height: 250px; border-radius: 22px; position: relative; overflow: hidden; box-shadow: 0 18px 40px rgba(28,22,14,0.22); } .invite-script { position: absolute; left: 26px; bottom: 16px; font-size: 44px; color: #fff; transform: rotate(-4deg); text-shadow: 0 2px 14px rgba(0,0,0,0.45); } /* ── decorative script accent ────────────────────────────── */ .script { font-family: var(--f-script); color: var(--c-accent); line-height: 1; display: inline-block; } /* ── photo frame (print / polaroid look) ─────────────────── */ .frame { background: #fbf7ec; padding: 10px 10px 26px; border: 1px solid rgba(28,22,14,0.10); box-shadow: 0 16px 30px rgba(28,22,14,0.20); } /* ── landing hero photo collage ──────────────────────────── */ .collage { position: relative; height: 520px; } .collage .pin { position: absolute; filter: drop-shadow(0 16px 26px rgba(28,22,14,0.22)); } .collage .pin .photo { display: block; } /* ── gallery toolbar + feed ──────────────────────────────── */ .gallery-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } /* sub-header zone in the attendee app: the gallery toggle lives OUTSIDE the scroll area, so the row can never be carried away by scroll/snap */ #subbar { flex: none; } #subbar:not(:empty) { background: rgba(244,237,224,0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-line); padding: 8px 20px; } #subbar .gallery-bar { margin: 0; } .seg { display: inline-flex; border: 1px solid var(--c-line-strong); border-radius: 100px; overflow: hidden; } .seg button { width: 36px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-ink-dim); } .seg button.active { background: var(--c-ink); color: var(--c-paper); } .seg button .ic { width: 16px; height: 16px; } .lang-seg button { width: auto; padding: 0 11px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; } /* ── Instagram-style profile grid ────────────────────────── */ .ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 3px; } .ig-cell { position: relative; aspect-ratio: 1; overflow: hidden; background: #d8c9b3; cursor: zoom-in; } .ig-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Instagram-style feed: stories row + snapping posts ───── */ .ig-feed-wrap { display: flex; flex-direction: column; height: min(80vh, 760px); /* contained, snapping viewport (owner page) */ } /* inside a fill host (attendee phone) the feed grows to the remaining height */ .gallery-fill .ig-feed-wrap { height: auto; flex: 1; min-height: 0; } .ig-stories { flex: none; display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 12px 14px; border-bottom: 1px solid var(--c-line); background: var(--c-paper); scrollbar-width: none; } .ig-stories::-webkit-scrollbar { display: none; } .ig-story { flex: none; width: 66px; text-align: center; cursor: pointer; } .ig-ring { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto; padding: 2px; box-sizing: border-box; background: conic-gradient(from 140deg, #b8513a, #d9a14a, #486138, #b8513a); } .ig-ring.all { background: var(--c-line-strong); } .ig-story:not(.active) .ig-ring { background: var(--c-line-strong); } .ig-av { width: 100%; height: 100%; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid var(--c-paper); display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 18px; color: var(--c-ink); background-color: var(--c-accent-2); } .ig-story.active .ig-nm { color: var(--c-ink); font-weight: 600; } .ig-nm { margin-top: 5px; font-size: 10.5px; color: var(--c-ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ig-feed { flex: 1; min-height: 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #1a1611; } .ig-post { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; background: var(--c-paper); } .ig-post-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--c-paper); } .ig-post-media { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #15110d; cursor: zoom-in; } .ig-post-media img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .ig-cell, .ig-post-media { position: relative; } .tile-del { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(26,22,17,0.6); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 2; } .tile-del .ic { width: 15px; height: 15px; } .tile-del:hover { background: var(--c-accent); } @media (hover: hover) { .ig-cell .tile-del { display: none; } .ig-cell:hover .tile-del { display: flex; } } /* ── lightbox ────────────────────────────────────────────── */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(20,16,11,0.94); display: flex; align-items: center; justify-content: center; animation: fadeIn .15s ease-out; } .lightbox .lb-stage { position: absolute; inset: 0; overflow: auto; display: flex; align-items: center; justify-content: center; } .lightbox img { max-width: 94vw; max-height: 92vh; object-fit: contain; cursor: zoom-in; transition: max-width .15s, max-height .15s; box-shadow: 0 30px 80px rgba(0,0,0,0.5); } .lightbox img.zoomed { max-width: none; max-height: none; cursor: zoom-out; } .lightbox img.lb-anim { animation: lbIn .2s ease-out; } @keyframes lbIn { from { opacity: 0.3; transform: scale(0.96); } } .lb-btn { position: fixed; z-index: 2; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); } .lb-btn:hover { background: rgba(255,255,255,0.22); } .lb-btn .ic { width: 22px; height: 22px; } .lb-close { top: 18px; right: 18px; } .lb-prev { left: 18px; top: 50%; transform: translateY(-50%); } .lb-next { right: 18px; top: 50%; transform: translateY(-50%); } .lb-caption { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255,255,255,0.85); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; background: rgba(0,0,0,0.4); padding: 6px 14px; border-radius: 100px; } @media (max-width: 880px) { .lb-prev { left: 8px; } .lb-next { right: 8px; } } /* ── appbar icon button (guest settings gear) ────────────── */ .icon-btn { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--c-ink-dim); } .icon-btn:hover { background: var(--c-line); color: var(--c-ink); } .icon-btn .ic { width: 19px; height: 19px; } /* ── "Add to Home Screen" hint bar (above the tabbar) ────── */ .install-hint { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--c-tint); border-top: 1px solid var(--c-line); color: var(--c-ink); } .install-hint .ih-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--c-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .install-hint .ih-ic .ic { width: 15px; height: 15px; } .install-hint .ih-text { flex: 1; font-size: 12px; line-height: 1.35; } .install-hint .ih-close { flex: none; width: 26px; height: 26px; border-radius: 50%; color: var(--c-ink-dim); display: inline-flex; align-items: center; justify-content: center; } .install-hint .ih-close:hover { background: var(--c-line); } .install-hint .ih-close .ic { width: 14px; height: 14px; } /* ── bottom sheet (guest profile / rename) ───────────────── */ .sheet-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(20,16,11,0.45); display: flex; align-items: flex-end; justify-content: center; animation: fadeIn .15s ease-out; transition: opacity .15s; } .sheet { width: 100%; max-width: 520px; background: var(--c-paper); border-radius: 22px 22px 0 0; padding: 10px 20px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 44px rgba(28,22,14,0.28); animation: sheetUp .24s cubic-bezier(.2,.8,.2,1); } @keyframes sheetUp { from { transform: translateY(100%); } } .sheet-grip { width: 42px; height: 4px; border-radius: 2px; background: var(--c-line-strong); margin: 4px auto 14px; } .sheet-title { font-family: var(--f-display); font-style: italic; font-size: 23px; margin-bottom: 16px; } /* ── geofence picker (create wizard + event settings) ────── */ .geo-config { margin-top: 4px; } .geo-search-wrap { position: relative; margin-bottom: 10px; } .geo-map { height: 300px; border-radius: var(--r); border: 1px solid var(--c-line-strong); overflow: hidden; background: #e9e3d6; } .geo-map-fallback { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--c-ink-dim); font-size: 13px; } .geo-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 500; background: var(--c-card); border: 1px solid var(--c-line-strong); border-radius: var(--r); overflow: hidden; overflow-y: auto; max-height: 260px; box-shadow: 0 12px 30px rgba(28,22,14,0.18); } .geo-result { padding: 10px 14px; cursor: pointer; font-size: 13.5px; border-bottom: 1px solid var(--c-line); display: flex; gap: 10px; align-items: flex-start; } .geo-result:last-child { border-bottom: 0; } .geo-result:hover { background: var(--c-tint); } .geo-result .ic { width: 15px; height: 15px; color: var(--c-accent); flex: none; margin-top: 2px; } .geo-result .sub { color: var(--c-ink-dim); font-size: 12px; } /* Leaflet panes must not be flattened by the global image rules */ .leaflet-container img { -webkit-user-drag: auto; } @media (max-width: 560px) { .geo-map { height: 240px; } }