/* Clean Gallery — front end Signature: ticket-stub cards — a dashed perforation between cover photo and label, with circular die-cut notches bitten into the card edges. Tokens live on :root (not .cg-root) on purpose: the lightbox is appended directly to so it can escape any theme container that clips overflow, which means it sits OUTSIDE .cg-root in the DOM. If the tokens were scoped to .cg-root, the lightbox would never see them. */ :root { --cg-ink: #15151a; --cg-ink-raised: #1c1c22; --cg-paper: #f4efe3; --cg-gold: #c99a44; --cg-velvet: #4a1942; --cg-mist: #8a8f98; --cg-line: rgba(255, 255, 255, 0.08); --cg-radius: 14px; --cg-display: 'Bebas Neue', 'Oswald', Impact, sans-serif; --cg-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --cg-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; } .cg-root { background: var(--cg-ink); color: var(--cg-paper); font-family: var(--cg-body) !important; border-radius: 18px; padding: 24px; box-sizing: border-box; position: relative; isolation: isolate; line-height: 1.5; } .cg-root, .cg-root *, .cg-lightbox, .cg-lightbox * { box-sizing: border-box; } .cg-root img { max-width: 100%; display: block; } /* Hard reset for interactive elements so the host theme's own button/link styling (border-radius, box-shadow, hover color, uppercase transforms, etc.) can't bleed through. This is the fix for warped buttons/X icons and the stray purple hover color. */ .cg-root button, .cg-lightbox button, .cg-lightbox a { appearance: none !important; -webkit-appearance: none !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; text-transform: none !important; text-decoration: none !important; letter-spacing: normal; font-weight: 400; margin: 0; } .cg-root a { text-decoration: none; } /* --------------------------------------------------------------------- Top bar / search ------------------------------------------------------------------ */ .cg-topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .cg-search-wrap { position: relative; flex: 1 1 260px; min-width: 200px; } .cg-search { width: 100%; background: var(--cg-ink-raised) !important; border: 1px solid var(--cg-line) !important; color: var(--cg-paper) !important; border-radius: 999px !important; padding: 12px 18px 12px 44px !important; font-family: var(--cg-body) !important; font-size: 15px !important; outline: none; transition: border-color 0.15s ease; line-height: 1.3; } .cg-search::placeholder { color: var(--cg-mist); opacity: 1; } .cg-search:focus { border-color: var(--cg-gold) !important; } .cg-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--cg-mist); pointer-events: none; z-index: 1; } .cg-browse-all { background: none !important; border: 1px solid var(--cg-line) !important; color: var(--cg-mist) !important; border-radius: 999px !important; padding: 11px 18px !important; font-family: var(--cg-body) !important; font-size: 13px !important; cursor: pointer; white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease; } .cg-browse-all:hover, .cg-browse-all:focus-visible { color: var(--cg-paper) !important; border-color: var(--cg-gold) !important; } /* --------------------------------------------------------------------- Breadcrumb — the "how do I get back" nav. Deliberately loud: solid gold pill for the clickable step, plain text for where you already are. ------------------------------------------------------------------ */ .cg-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; } .cg-crumb { font-family: var(--cg-body) !important; font-size: 14px !important; line-height: 1.2; color: var(--cg-paper); } button.cg-crumb { background: var(--cg-gold) !important; color: var(--cg-ink) !important; border: none !important; border-radius: 999px !important; padding: 9px 16px !important; cursor: pointer; font-weight: 600 !important; transition: filter 0.15s ease, transform 0.15s ease; } button.cg-crumb:hover, button.cg-crumb:focus-visible { filter: brightness(1.1); transform: translateY(-1px); } .cg-crumb-current { color: var(--cg-mist) !important; padding: 9px 2px; font-weight: 500 !important; } .cg-crumb-sep { color: var(--cg-mist); font-size: 15px; } /* --------------------------------------------------------------------- Heading ------------------------------------------------------------------ */ .cg-heading { display: flex; align-items: baseline; gap: 10px; margin: 0 0 20px; flex-wrap: wrap; } .cg-heading h2 { font-family: var(--cg-display) !important; font-weight: 400 !important; letter-spacing: 0.03em; font-size: 32px; margin: 0; color: var(--cg-paper) !important; line-height: 1.1; text-transform: none; } .cg-heading .cg-count { font-family: var(--cg-mono); font-size: 13px; color: var(--cg-gold); } /* --------------------------------------------------------------------- Grid + ticket-stub cards ------------------------------------------------------------------ */ .cg-grid { display: grid; grid-template-columns: repeat(var(--cg-cols, auto-fill), minmax(180px, 1fr)); gap: 18px; } .cg-card { background: var(--cg-ink-raised) !important; border-radius: var(--cg-radius) !important; overflow: hidden; cursor: pointer; border: 1px solid var(--cg-line) !important; transition: transform 0.15s ease, border-color 0.15s ease; position: relative; text-align: left; padding: 0 !important; color: var(--cg-paper) !important; font: inherit; display: block; width: 100%; } .cg-card:hover, .cg-card:focus-visible { transform: translateY(-3px); border-color: var(--cg-gold) !important; outline: none; } .cg-card:hover *, .cg-card:focus-visible * { color: inherit; } .cg-card-cover { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #222, #111); overflow: hidden; position: relative; } .cg-card-cover img { width: 100%; height: 100%; object-fit: cover; } .cg-card-cover.cg-no-cover::after { content: '\2726'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--cg-gold); } /* Perforation seam with punched-out circular notches */ .cg-card-seam { position: relative; border-top: 2px dashed rgba(244, 239, 227, 0.18); margin: 0 14px; } .cg-card-seam::before, .cg-card-seam::after { content: ''; position: absolute; top: -8px; width: 16px; height: 16px; background: var(--cg-ink); border-radius: 50%; } .cg-card-seam::before { left: -22px; } .cg-card-seam::after { right: -22px; } .cg-card-label { padding: 12px 14px 14px; } .cg-card-label h3 { font-family: var(--cg-display) !important; font-weight: 400 !important; letter-spacing: 0.02em; font-size: 19px; margin: 0 0 4px; color: var(--cg-paper) !important; line-height: 1.15; text-transform: none; } .cg-card-label .cg-meta { font-family: var(--cg-mono); font-size: 11.5px; color: var(--cg-gold); text-transform: uppercase; letter-spacing: 0.05em; } .cg-card-label .cg-tag-unassigned { color: var(--cg-mist); } /* --------------------------------------------------------------------- Search results (flat list across albums + galleries) ------------------------------------------------------------------ */ .cg-results-group { margin-bottom: 18px; } .cg-results-group > .cg-eyebrow { font-family: var(--cg-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cg-mist); margin-bottom: 10px; display: block; } /* --------------------------------------------------------------------- Empty / error states ------------------------------------------------------------------ */ .cg-empty, .cg-error, .cg-missing { font-family: var(--cg-body); color: var(--cg-mist); text-align: center; padding: 48px 20px; font-size: 15px; } .cg-error { color: #e2a2a2; } /* --------------------------------------------------------------------- Loading skeletons ------------------------------------------------------------------ */ .cg-skel { background: linear-gradient(90deg, var(--cg-ink-raised) 25%, #24242c 37%, var(--cg-ink-raised) 63%); background-size: 400% 100%; animation: cg-shimmer 1.4s ease infinite; border-radius: var(--cg-radius); } .cg-skel-cover { aspect-ratio: 4 / 3; } .cg-skel-line { height: 12px; margin: 14px 14px 16px; border-radius: 4px; } @keyframes cg-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } /* --------------------------------------------------------------------- Gallery thumbnail wall ------------------------------------------------------------------ */ .cg-thumb-grid { display: grid; grid-template-columns: repeat(var(--cg-thumb-cols, auto-fill), minmax(140px, 1fr)); gap: 10px; } .cg-thumb { border: none !important; padding: 0 !important; background: var(--cg-ink-raised) !important; border-radius: 8px !important; overflow: hidden; cursor: zoom-in; aspect-ratio: 1 / 1; position: relative; } .cg-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; } .cg-thumb:hover img, .cg-thumb:focus-visible img { transform: scale(1.05); } .cg-thumb:focus-visible { outline: 2px solid var(--cg-gold); outline-offset: -2px; } .cg-thumb.cg-thumb-missing::after { content: '\2726'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--cg-mist); } /* --------------------------------------------------------------------- Lightbox — appended to , so every color here relies on :root tokens (see top of file) rather than .cg-root scoping. ------------------------------------------------------------------ */ .cg-lightbox { position: fixed; inset: 0; background: rgba(10, 10, 12, 0.94) !important; z-index: 999999; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.18s ease; font-family: var(--cg-body); } .cg-lightbox.cg-open { opacity: 1; } .cg-lightbox-img-wrap { max-width: 92vw; max-height: 86vh; display: flex; align-items: center; justify-content: center; } .cg-lightbox img { max-width: 92vw; max-height: 86vh; width: auto; height: auto; border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .cg-lightbox-close, .cg-lightbox-prev, .cg-lightbox-next, .cg-lightbox-download { position: absolute !important; background: rgba(255, 255, 255, 0.1) !important; border: none !important; color: #f4efe3 !important; cursor: pointer; border-radius: 50% !important; width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; font-size: 0 !important; line-height: 1 !important; transition: background 0.15s ease, color 0.15s ease; z-index: 2; } .cg-lightbox-close svg, .cg-lightbox-prev svg, .cg-lightbox-next svg, .cg-lightbox-download svg { width: 20px !important; height: 20px !important; display: block !important; pointer-events: none; } .cg-lightbox-close:hover, .cg-lightbox-prev:hover, .cg-lightbox-next:hover, .cg-lightbox-download:hover { background: #c99a44 !important; color: #15151a !important; } .cg-lightbox-close { top: 20px; right: 20px; } .cg-lightbox-download { top: 20px; left: 20px; } .cg-lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); } .cg-lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); } .cg-lightbox-counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-family: var(--cg-mono); font-size: 13px; letter-spacing: 0.08em; color: #c99a44 !important; background: rgba(0, 0, 0, 0.4) !important; padding: 6px 14px; border-radius: 999px; } .cg-lightbox-caption { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); max-width: 80vw; text-align: center; font-size: 13px; color: #8a8f98 !important; } /* --------------------------------------------------------------------- Responsive ------------------------------------------------------------------ */ @media (max-width: 640px) { .cg-root { padding: 16px; border-radius: 12px; } /* Mobile always gets 2 columns, no matter what's configured for desktop — a fixed higher column count doesn't fit a phone screen and this overrides it regardless of the saved setting. Also override grid-template-columns directly with minmax(0,1fr): the normal minmax(180px,1fr) used elsewhere assumes the browser is choosing how many columns fit (auto-fill), but here we're forcing an exact count — with a 180px floor, two columns don't fit inside a narrow phone's padded width, so the grid overflows sideways. */ .cg-root { --cg-cols: 2 !important; --cg-thumb-cols: 2 !important; } .cg-grid, .cg-thumb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .cg-heading h2 { font-size: 26px; } .cg-grid, .cg-thumb-grid { gap: 12px; } .cg-lightbox-prev, .cg-lightbox-next, .cg-lightbox-download, .cg-lightbox-close { width: 38px !important; height: 38px !important; } .cg-lightbox-close svg, .cg-lightbox-prev svg, .cg-lightbox-next svg, .cg-lightbox-download svg { width: 17px !important; height: 17px !important; } } @media (min-width: 641px) and (max-width: 900px) { /* Tablet: 3 columns regardless of the desktop setting. Same fix as mobile above — an explicit count needs minmax(0,1fr), not a fixed pixel floor, or it can overflow on the narrower end of this range. */ .cg-root { --cg-cols: 3 !important; --cg-thumb-cols: 3 !important; } .cg-grid, .cg-thumb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* --------------------------------------------------------------------- Reduced motion ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .cg-card, .cg-thumb img, .cg-lightbox, .cg-card-cover img { transition: none; } .cg-skel { animation: none; } }