h1.main-page-title, .page-title, .title--primary, .article__title { display: none !important; } #dg, #dg *, #dg *::before, #dg *::after { box-sizing: border-box !important; margin: 0; padding: 0; font-family: 'DM Sans', sans-serif !important; } #dg a { color: inherit !important; text-decoration: none !important; } #dg button { appearance: none !important; -webkit-appearance: none !important; background: transparent; border: none; outline: none; box-shadow: none; cursor: pointer; } #dg { --bg: #ffffff; --ink: #111111; --card: #ffffff; --line: #eae9e4; --muted: #6b6b6b; --faint: #e2e1dc; --green: #0e7a54; --green-bg: rgba(14,122,84,0.08); --green-b: rgba(14,122,84,0.25); --amber: #b27300; --amber-bg: rgba(178,115,0,0.08); --amber-b: rgba(178,115,0,0.25); --red: #c0392b; background: var(--bg) !important; color: var(--ink) !important; width: 100vw; margin-left: calc(50% - 50vw); overflow-x: hidden; min-height: 100vh; -webkit-font-smoothing: antialiased; line-height: 1.5; transition: background 0.25s, color 0.25s; scroll-behavior: smooth; } #dg.dark { --bg: #0f0f0f; --ink: #f0eeea; --card: #181818; --line: #1e1e1e; --muted: #999; --faint: #252525; --green: #34d399; --green-bg: rgba(52,211,153,0.1); --green-b: rgba(52,211,153,0.2); --amber: #fbbf24; --amber-bg: rgba(251,191,36,0.1); --amber-b: rgba(251,191,36,0.2); --red: #f87171; } /* Dark mode: cover entire page including Shopify section wrapper */ #dg.dark ~ *, #dg.dark { background-color: #0f0f0f !important; } .shopify-section:has(#dg.dark) { background: #0f0f0f !important; } body:has(#dg.dark) { background: #0f0f0f !important; } .dg-inner { max-width: 960px; margin: 0 auto !important; padding: 0 48px 80px; } /* Header */ .dg-hdr { display: flex; align-items: center; justify-content: flex-end; padding: 20px 0 20px; margin-bottom: 0; } .dg-hdr-actions { display: flex; align-items: center; gap: 8px; } .dg-hdr-btn { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--muted) !important; padding: 8px 16px !important; border-radius: 8px !important; border: 1px solid transparent !important; transition: all 0.15s; cursor: pointer; background: transparent !important; } .dg-hdr-btn:hover { background: var(--faint) !important; color: var(--ink) !important; } /* Support dropdown (Merch + Donate) — subtle amber accent, always available */ #dg .dg-support-wrap { position: relative; display: inline-block; } #dg .dg-support-btn { color: var(--amber) !important; } #dg .dg-support-btn:hover, #dg .dg-support-wrap.open .dg-support-btn { background: var(--amber-bg) !important; color: var(--amber) !important; } #dg .dg-support-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 168px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 200; } #dg .dg-support-wrap.open .dg-support-menu { display: flex; } #dg .dg-support-item { display: flex; align-items: center; gap: 9px; padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--ink) !important; border-radius: 8px; white-space: nowrap; text-transform: none; letter-spacing: 0; transition: background 0.15s; } #dg .dg-support-item:hover { background: var(--faint); } #dg.dark .dg-support-menu { box-shadow: 0 8px 24px rgba(0,0,0,0.4); } /* Premium nav lock */ .dg-premium-nav.dg-locked { cursor: default; opacity: 0.55; position: relative; } .dg-premium-nav.dg-locked::after { content: '✦'; font-size: 7px; vertical-align: super; margin-left: 3px; color: #d4a017; } /* Filter bar locked for free users — visible but greyed out, with a click-trap that opens upgrade modal */ .dg-filter-bar.dg-locked-bar { position: relative; opacity: 0.55; pointer-events: none; user-select: none; filter: saturate(0.6); } .dg-filter-bar.dg-locked-bar::after { content: '✦ Members only'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #d4a017; background: rgba(255,255,255,0.92); border: 1px solid rgba(212,160,23,0.35); border-radius: 999px; padding: 6px 14px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); pointer-events: none; } #dg.dark .dg-filter-bar.dg-locked-bar::after { background: rgba(20,20,20,0.92); border-color: rgba(212,160,23,0.45); } .dg-filter-bar-clicktrap { position: absolute; inset: 0; z-index: 10; cursor: pointer; pointer-events: auto; } /* Loading */ #dg-loading { display: flex; align-items: center; justify-content: center; min-height: 50vh; flex-direction: column; gap: 16px; } #dg-loading .spin { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--amber); border-radius: 50%; animation: dgSpin 0.8s linear infinite; box-shadow: inset 0 0 0 1px var(--line); } @keyframes dgSpin { to { transform: rotate(360deg); } } #dg-loading p { font-size: 13px; color: var(--muted); } /* Error */ #dg-error { display: none; text-align: center; padding: 80px 24px; } #dg-error h2 { font-family: 'Bebas Neue', sans-serif !important; font-size: clamp(32px, 4vw, 44px); letter-spacing: 0.02em; line-height: 0.95; margin-bottom: 16px; } #dg-error p { font-size: 16px; color: var(--muted); line-height: 1.6; margin-bottom: 28px; } #dg-error a { color: var(--amber) !important; font-weight: 600; } /* ── GRID VIEW ── */ #dg-grid-view { display: none; } .dg-grid-hero { padding: 48px 0 32px; text-align: center; background: var(--bg); } .dg-grid-headline { font-family: 'Bebas Neue', sans-serif !important; font-size: clamp(40px, 5.5vw, 64px); line-height: 0.95; letter-spacing: 0.015em; color: var(--ink); margin-bottom: 16px; white-space: nowrap; } .dg-grid-headline em { font-style: normal; color: transparent !important; -webkit-text-stroke: 1.5px var(--ink); } /* "Gems" word — dashed underline accent */ .dg-gem-def { border-bottom: 3px dashed var(--amber); padding-bottom: 2px; } .dg-grid-sub { font-size: 15px; line-height: 1.7; color: var(--muted); max-width: 480px; margin: 0 auto; text-align: center; } .dg-grid-note { font-size: 12px; font-style: italic; line-height: 1.6; color: var(--muted); max-width: 460px; margin: 8px auto 0; text-align: center; opacity: 0.75; } /* #dg * reset zeroes margins, so re-assert auto centering with !important */ #dg .dg-grid-note { margin-top: 8px !important; margin-bottom: 12px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } .dg-grid-count { margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0.03em; } .dg-grid-count strong { color: var(--ink); font-weight: 800; } .dg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 24px; } .dg-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: all 0.25s ease; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.03); display: block; } .dg-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: var(--faint); } .dg-card-img { height: 172px; background-size: cover; background-position: center; background-color: var(--faint); position: relative; } .dg-card-img::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 52px; background: linear-gradient(transparent, var(--card)); } .dg-card-img-empty { height: 172px; background: var(--faint); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); position: relative; } .dg-card-img-empty::after { content: ''; font-size: 32px; opacity: 0.3; position: absolute; } /* Status badge */ .dg-card-status { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 3px 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; line-height: 1.3; border-radius: 8px; width: auto; height: auto; white-space: nowrap; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .dg-card-status-open { background: rgba(14,122,84,0.9); color: #fff; } .dg-card-status-closed { background: rgba(192,57,43,0.85); color: #fff; } /* Card body — flex row with text left + arrow right */ .dg-card-body { padding: 16px 20px 20px !important; display: flex !important; align-items: center !important; gap: 12px !important; } .dg-card-text { flex: 1 !important; min-width: 0 !important; } .dg-card-type { font-size: 11px !important; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px !important; } .dg-card-flag { display: inline-block; width: 16px; height: 12px; margin-right: 9px; vertical-align: -1px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); } .dg-card-name { font-size: 16px !important; font-weight: 800; color: var(--ink); margin: 4px 0 4px !important; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dg-card-loc { font-size: 12px !important; color: var(--muted); margin-top: 4px !important; margin-bottom: 4px !important; } .dg-card-desc { font-size: 12px !important; color: var(--muted); line-height: 1.5; margin-top: 4px !important; } .dg-card-arrow { width: 32px; height: 32px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--faint); background: transparent; transition: all 0.2s cubic-bezier(0.22,1,0.36,1); flex-shrink: 0; padding: 0; margin: 0; } .dg-card:hover .dg-card-arrow { color: var(--ink); transform: translateX(3px); } .dg-grid-empty { text-align: center; padding: 60px 0; font-size: 16px; color: var(--muted); } /* ── PROFILE VIEW ── */ #dg-profile { display: none; } .dg-back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--muted); transition: color 0.15s; cursor: pointer; padding: 8px 0; min-height: 44px; } .dg-back-link:hover { color: var(--ink); } .dg-hero { width: 100%; height: 380px; background-size: cover; background-position: center; background-color: var(--faint); position: relative; border-radius: 16px; overflow: hidden; margin-top: 8px; } .dg-hero-grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.7) 100%) !important; } .dg-hero-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px 36px; } .dg-hero-type { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-bottom: 10px; text-shadow: 0 1px 6px rgba(0,0,0,0.4); } .dg-hero-name { font-family: 'Bebas Neue', sans-serif !important; font-size: clamp(40px, 5vw, 60px); letter-spacing: 0.02em; line-height: 0.95; color: #fff; margin-bottom: 16px; text-shadow: 0 2px 16px rgba(0,0,0,0.5), 0 0 40px rgba(0,0,0,0.2); word-break: break-word; } .dg-pills { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .dg-pill { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 16px; border-radius: 40px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 2px rgba(255,255,255,0.15); cursor: pointer; } .dg-pill-open { background: rgba(14,122,84,0.85); border-color: rgba(14,122,84,0.5); } .dg-pill-closed { background: rgba(220,53,69,0.85); border-color: rgba(220,53,69,0.5); } .dg-pill-type { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.25); } .dg-gallery-wrap { position: relative; } .dg-gallery-counter { text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.06em; padding: 12px 0 4px; } .dg-gallery-hint { text-align: center; font-size: 11px; color: var(--muted); opacity: 0.5; padding-bottom: 8px; transition: opacity 0.5s; } .dg-gallery { display: flex; gap: 8px; padding: 16px 0 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; } .dg-gallery::-webkit-scrollbar { height: 4px; } .dg-gallery::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 4px; } .dg-gimg { width: 80px; height: 60px; border-radius: 8px; background-size: cover; background-position: center; cursor: pointer; flex-shrink: 0; border: 2px solid var(--line); transition: all 0.15s ease; opacity: 0.6; } .dg-gimg:hover, .dg-gimg.active { border-color: var(--ink); opacity: 1; } /* Profile sections */ .dg-section { display: flex; align-items: center; gap: 12px; margin: 28px 0 14px; } .dg-section:first-of-type { margin-top: 24px; } .dg-section-title { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .dg-section-line { flex: 1; height: 1px; background: var(--line); } /* About card */ .dg-desc { font-size: 16px; line-height: 1.7; color: var(--muted); background: var(--card); border-radius: 14px; padding: 24px 28px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); } /* Note callout — description shown as a note directly above Location */ #dg .dg-note { display: flex; gap: 14px; align-items: flex-start; background: var(--amber-bg) !important; border: 1px solid var(--amber-b) !important; border-radius: 14px !important; padding: 18px 22px !important; box-shadow: none !important; } #dg .dg-note-icon { font-size: 18px; line-height: 1.5; flex-shrink: 0; } #dg .dg-note-body { flex: 1; min-width: 0; } #dg .dg-note-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; } #dg .dg-note .dg-desc { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; color: var(--ink) !important; font-size: 15px !important; line-height: 1.7 !important; } /* Our Food Recommendations — chips */ #dg .dg-food-recs { display: flex; flex-wrap: wrap; gap: 10px; } #dg .dg-food-rec { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); } #dg .dg-food-rec::before { content: '\1F374'; font-size: 12px; opacity: 0.7; } #dg.dark .dg-food-rec { box-shadow: none; } /* Location card */ .dg-loc { font-size: 14px; color: var(--ink); line-height: 1.6; } .dg-address-text { font-size: 14px; color: var(--ink); line-height: 1.6; } /* Hours card */ .dg-hrs-card { background: var(--card); border: none; border-radius: 14px; padding: 24px 28px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); } .dg-hrs { width: 100%; border-collapse: collapse; } .dg-hrs td { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); } .dg-hrs tr:last-child td { border-bottom: none; } .dg-hrs td:first-child { color: var(--ink); font-weight: 600; width: 140px; } .dg-hrs .today td { color: var(--ink); font-weight: 600; background: rgba(178,115,0,0.04); } .dg-hrs .today td:first-child { color: var(--amber); border-radius: 8px 0 0 8px; padding-left: 12px; margin-left: -16px; } .dg-hrs .today td:last-child { border-radius: 0 8px 8px 0; padding-right: 16px; } .dg-today-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--amber-bg); color: var(--amber); padding: 4px 12px; border-radius: 8px; margin-left: 8px; vertical-align: middle; } /* Menu image */ .dg-menu-img { width: 100%; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(0,0,0,0.06); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); cursor: zoom-in; } .dg-menu-img:hover { transform: scale(1.02); } /* Product grid */ .dg-prod-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; } .dg-prod-img { width: 100% !important; aspect-ratio: 1/1 !important; object-fit: cover !important; border-radius: 12px !important; border: 1px solid var(--line) !important; transition: all 0.3s cubic-bezier(0.22,1,0.36,1); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.04); display: block !important; } .dg-prod-img:hover { transform: scale(1.03); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } .dg-prod-grid:empty::after { content: 'No photos yet'; display: block; padding: 48px; text-align: center; color: var(--muted); font-size: 14px; font-weight: 500; background: var(--bg); border-radius: 14px; border: 2px dashed var(--line); grid-column: 1 / -1; } /* Logo card */ .dg-logo-wrap { display: flex; align-items: center; gap: 20px; padding: 24px 24px; background: var(--card); border: none; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.04); transition: all 0.2s ease; } .dg-logo-wrap:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); } .dg-logo-img { width: 64px; height: 64px; border-radius: 14px; object-fit: contain; background: var(--bg); border: 1px solid var(--line); flex-shrink: 0; } .dg-logo-name { font-family: 'Bebas Neue', sans-serif !important; font-size: 24px; letter-spacing: 0.02em; line-height: 1; } .dg-logo-type { font-size: 13px; color: var(--muted); margin-top: 4px; } /* Footer */ .dg-ftr { text-align: center; padding: 24px 0 16px; margin-top: 48px; border-top: 1px solid var(--line); } .dg-ftr-text { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; } /* ── DARK MODE OVERRIDES ── */ #dg.dark .dg-card { box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.3); } #dg.dark .dg-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.15), 0 0 0 1px rgba(251,191,36,0.1); } #dg.dark .dg-card-img::after { background: linear-gradient(transparent, #181818) !important; } #dg.dark .dg-desc, #dg.dark .dg-loc, #dg.dark .dg-hrs-card, #dg.dark .dg-logo-wrap { box-shadow: 0 2px 8px rgba(0,0,0,0.3); } #dg.dark .dg-hrs .today td { background: rgba(251,191,36,0.06); } #dg.dark .dg-today-badge { background: var(--amber-bg); } #dg.dark .dg-hero-grad { background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%) !important; } #dg.dark .dg-prod-img { box-shadow: 0 2px 8px rgba(0,0,0,0.2); } #dg.dark .dg-card-status-open { background: rgba(52,211,153,0.9); } #dg.dark .dg-card-status-closed { background: rgba(248,113,113,0.85); } #dg.dark .dg-toast { background: var(--card); color: var(--ink); border: 1px solid var(--line); } #dg.dark .dg-related-card { box-shadow: 0 2px 8px rgba(0,0,0,0.2); } #dg.dark .dg-featured-card { background: linear-gradient(135deg, var(--card) 0%, rgba(251,191,36,0.06) 100%); border-color: rgba(251,191,36,0.2); } #dg.dark .dgup-friend-card:hover { background: var(--card); } #dg.dark .dgup-lb-item { border-color: var(--line); } #dg.dark .dgup-lb-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3); } #dg.dark .dg-levelup-card { background: var(--card); border: 1px solid var(--line); } #dg.dark .dg-levelup-btn { background: var(--ink); color: var(--bg); } #dg.dark .dg-hours-live-open { background: rgba(52,211,153,0.1); color: #34d399; border-color: rgba(52,211,153,0.2); } #dg.dark .dg-hours-live-closed { background: rgba(192,57,43,0.1); color: var(--red); border-color: rgba(248,113,113,0.2); } @media (max-width: 768px) { .dg-inner { padding: 0 24px 60px; } .dg-hero { height: 340px; border-radius: 12px; } .dg-hero-content { padding: 28px; } .dg-prod-grid { grid-template-columns: repeat(2, 1fr); } .dg-section { margin: 32px 0 18px; } .dg-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .dg-grid-hero { padding: 48px 24px 40px; margin: 0 -24px; } .dg-desc, .dg-loc, .dg-hrs-card, .dg-logo-wrap { padding: 24px; } } @media (max-width: 768px) and (min-width: 481px) { .dg-grid { gap: 16px !important; } .dg-prod-grid { gap: 10px !important; } } @media (min-width: 769px) { .dg-grid-hero { padding-bottom: 56px !important; } .dg-grid { gap: 24px !important; } } @media (max-width: 480px) { .dg-inner { padding: 0 16px 48px; } .dg-hdr { flex-wrap: wrap; gap: 12px; padding: 24px 0 20px; } .dg-hero { height: 280px; border-radius: 10px; } .dg-hero-content { padding: 16px 20px; } .dg-hero-name { font-size: clamp(24px, 7vw, 40px); } .dg-gallery { gap: 8px; } .dg-gimg { width: 80px; height: 60px; border-radius: 10px; } .dg-prod-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .dg-logo-wrap { flex-direction: column; text-align: center; } .dg-grid { grid-template-columns: 1fr; gap: 16px; } .dg-card-img, .dg-card-img-empty { height: 152px !important; } .dg-grid-hero { padding: 40px 16px 32px; margin: 0 -16px; } .dg-desc, .dg-loc, .dg-hrs-card { padding: 20px; border-radius: 12px; } #dg-profile { padding: 0 16px !important; } #dg-profile .dg-hero { margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); } } /* ── SPACING & PADDING OVERRIDES ── */ /* Grid: breathing room between hero and cards */ .dg-grid-hero { padding-bottom: 48px !important; } #dg-grid { margin-top: 28px !important; } /* Profile: horizontal padding on ALL content below hero */ #dg-profile { padding: 0 36px !important; max-width: 860px; margin: 0 auto; } #dg-profile .dg-hero { margin-left: -32px; margin-right: -32px; width: calc(100% + 64px); } .dg-profile-top { margin-top: 28px; } /* Profile: section spacing rhythm */ .dg-section { margin-top: 36px !important; margin-bottom: 14px !important; } #dg-logo-section .dg-section { margin-top: 24px !important; } #dg-about-sec, #dg-loc-sec, #dg-hours-sec, #dg-menu-sec, #dg-photos-sec { margin-bottom: 24px; } /* Hours section removed from business profiles — hide regardless of JS re-showing it */ #dg #dg-hours-sec { display: none !important; } /* Profile: hours table row spacing */ .dg-hrs td { padding: 14px 0 !important; } /* Profile: menu image spacing */ .dg-menu-img { margin-top: 0; margin-bottom: 32px; border-radius: 12px !important; max-width: 100%; } #dg-profile .dg-ftr { margin-top: 24px !important; } /* Profile: empty photos grid */ .dg-prod-grid:empty { min-height: 80px; display: flex; align-items: center; justify-content: center; } /* Dark mode: profile section containers */ #dg.dark #dg-about-sec { background: transparent; padding: 0; } #dg.dark #dg-loc-sec { background: var(--card); border-radius: 14px; padding: 24px 28px; margin-left: -4px; margin-right: -4px; } #dg.dark #dg-hours-sec .dg-hrs-card { background: var(--card); } #dg.dark #dg-menu-sec { background: var(--card); border-radius: 14px; padding: 24px 28px; margin-left: -4px; margin-right: -4px; } #dg.dark #dg-photos-sec { background: var(--card); border-radius: 14px; padding: 24px 28px; margin-left: -4px; margin-right: -4px; } #dg.dark #dg-logo-section { background: var(--card); border-radius: 14px; padding: 24px 28px; margin-left: -4px; margin-right: -4px; } /* Mobile: profile padding */ @media (max-width: 768px) { #dg-profile { padding: 0 24px !important; } #dg-profile .dg-hero { margin-left: -24px; margin-right: -24px; width: calc(100% + 48px); } } @media (max-width: 480px) { #dg-grid { grid-template-columns: 1fr !important; } .dg-filter-bar { padding: 0 !important; } .dg-search { font-size: 14px !important; padding: 14px 16px 14px 44px !important; } .dg-grid-headline { white-space: normal !important; font-size: clamp(32px, 8vw, 48px) !important; } .dg-grid-hero { padding: 40px 0 28px !important; margin: 0 -16px !important; padding-left: 16px !important; padding-right: 16px !important; } .dg-prod-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 380px) { #dg-grid { grid-template-columns: 1fr !important; } .dg-prod-grid { grid-template-columns: 1fr 1fr !important; } } /* Prevent horizontal scroll from negative margins */ #dg { overflow-x: hidden !important; } /* ── SIGN-IN GATE (exact homepage hero) ── */ .hm-hero { position: relative !important; width: 100% !important; display: flex; align-items: center !important; justify-content: center !important; overflow: hidden !important; background: var(--bg) !important; transition: background 0.25s !important; } .hm-hero::before { content: '' !important; position: absolute !important; inset: 0 !important; background-image: url("https://res.cloudinary.com/dx5qqakop/image/upload/v1771477168/Untitled_design-2_getxuf_kiqojk.png") !important; background-size: cover !important; background-position: center !important; filter: blur(4px) brightness(1.05) saturate(0.5) !important; transform: scale(1.06) !important; z-index: 0 !important; opacity: 0.18 !important; } .hm-hero::after { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(to bottom, rgba(250,249,247,0.72) 0%, rgba(250,249,247,0.55) 50%, rgba(250,249,247,0.88) 100%) !important; z-index: 0 !important; } #dg.dark .hm-hero::before { filter: blur(6px) brightness(0.18) saturate(0.4) !important; opacity: 1 !important; } #dg.dark .hm-hero::after { background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.85) 100%) !important; } .hm-hero-content { position: relative !important; z-index: 1 !important; max-width: 860px !important; width: 100% !important; padding: 32px 32px 32px !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .hm-hero-title { font-family: 'Bebas Neue', sans-serif !important; font-size: clamp(36px, 5vw, 68px) !important; line-height: 0.95 !important; letter-spacing: 0.025em !important; color: var(--ink) !important; margin-bottom: 12px !important; animation: hm-fadeinup 0.7s ease both !important; } #dg.dark .hm-hero-title { text-shadow: 0 2px 40px rgba(0,0,0,0.5) !important; } .hm-hero-sub { font-size: clamp(13px, 1.4vw, 15px) !important; color: var(--muted) !important; line-height: 1.6 !important; max-width: 480px !important; margin-bottom: 20px !important; animation: hm-fadeinup 0.7s ease 0.1s both !important; font-family: 'DM Sans', sans-serif !important; } .hm-hero-card { width: 100% !important; max-width: 420px !important; background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 20px !important; padding: 20px 24px 16px !important; box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 0 0 1px rgba(178,115,0,0.06) !important; animation: hm-fadeinup 0.7s ease 0.2s both !important; transition: background 0.25s, border-color 0.25s !important; } #dg.dark .hm-hero-card { background: rgba(20,20,20,0.88) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 24px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(178,115,0,0.1) !important; } /* Auth form inside hero card — !important beats #dg * specificity reset */ .hm-hero-card .dg-auth-title { font-family: 'Bebas Neue', sans-serif !important; font-size: 22px !important; letter-spacing: 0.02em !important; line-height: 1 !important; color: var(--ink) !important; margin-bottom: 4px !important; } .hm-hero-card .dg-auth-sub { font-size: 12px !important; color: var(--muted) !important; line-height: 1.4 !important; margin-bottom: 10px !important; font-family: 'DM Sans', sans-serif !important; } .hm-hero-card .dg-auth-fields { display: flex !important; flex-direction: column !important; gap: 7px !important; margin-bottom: 8px !important; } .hm-hero-card .dg-auth-input-wrap { position: relative !important; } .hm-hero-card .dg-auth-input-icon { position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; width: 17px !important; height: 17px !important; color: var(--muted) !important; pointer-events: none !important; } .hm-hero-card .dg-auth-input { width: 100% !important; padding: 10px 14px 10px 40px !important; border: 1px solid var(--line) !important; border-radius: 10px !important; background: var(--faint) !important; color: var(--ink) !important; font-size: 14px !important; font-family: 'DM Sans', sans-serif !important; outline: none !important; transition: border-color 0.2s, background 0.2s !important; box-sizing: border-box !important; } .hm-hero-card .dg-auth-input:focus { border-color: var(--amber-b) !important; box-shadow: 0 0 0 3px var(--amber-bg) !important; } .hm-hero-card .dg-auth-input::placeholder { color: var(--muted) !important; opacity: 0.6 !important; } .hm-hero-card .dg-auth-input.error { border-color: #f06361 !important; } .hm-hero-card .dg-auth-input.valid { border-color: #3ecf8e !important; } .hm-hero-card .dg-auth-input-check { position: absolute !important; right: 14px !important; top: 50% !important; transform: translateY(-50%) !important; color: #3ecf8e !important; font-size: 13px !important; font-weight: 700 !important; opacity: 0 !important; transition: opacity 0.2s !important; pointer-events: none !important; } .hm-hero-card .dg-auth-input.valid ~ .dg-auth-input-check { opacity: 1 !important; } .hm-hero-card .dg-pass-toggle { position: absolute !important; right: 14px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 11px !important; font-weight: 600 !important; color: var(--muted) !important; cursor: pointer !important; background: none !important; border: none !important; font-family: 'DM Sans', sans-serif !important; transition: color 0.15s !important; appearance: none !important; padding: 0 !important; } .hm-hero-card .dg-pass-toggle:hover { color: var(--ink) !important; } .hm-hero-card .dg-pass-strength { height: 3px !important; border-radius: 3px !important; margin-top: 4px !important; background: var(--line) !important; overflow: hidden !important; } .hm-hero-card .dg-pass-strength-bar { height: 100% !important; border-radius: 3px !important; transition: all 0.25s ease !important; width: 0 !important; } .hm-hero-card .dg-pass-strength-bar.weak { width: 33% !important; background: var(--red) !important; } .hm-hero-card .dg-pass-strength-bar.medium { width: 66% !important; background: var(--amber) !important; } .hm-hero-card .dg-pass-strength-bar.strong { width: 100% !important; background: var(--green) !important; } .hm-hero-card .dg-auth-submit { width: 100% !important; padding: 11px 20px !important; background: #b27300 !important; color: #fff !important; font-size: 15px !important; font-weight: 700 !important; border: none !important; border-radius: 10px !important; cursor: pointer !important; transition: filter 0.15s, transform 0.15s !important; font-family: 'DM Sans', sans-serif !important; letter-spacing: 0.03em !important; } .hm-hero-card .dg-auth-submit:hover { filter: brightness(1.12) !important; transform: translateY(-1px) !important; } .hm-hero-card .dg-auth-submit:disabled { opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; filter: none !important; } .hm-hero-card .dg-auth-forgot { font-size: 12px !important; text-align: right !important; margin-top: 10px !important; margin-bottom: 2px !important; } .hm-hero-card .dg-auth-forgot a { color: var(--muted) !important; text-decoration: none !important; font-weight: 500 !important; font-family: 'DM Sans', sans-serif !important; transition: color 0.15s !important; } .hm-hero-card .dg-auth-forgot a:hover { color: var(--ink) !important; } .hm-hero-card .dg-auth-divider { display: flex !important; align-items: center !important; gap: 10px !important; margin: 8px 0 !important; } .hm-hero-card .dg-auth-divider::before, .hm-hero-card .dg-auth-divider::after { content: '' !important; flex: 1 !important; height: 1px !important; background: var(--line) !important; } .hm-hero-card .dg-auth-divider span { font-size: 11px !important; color: var(--muted) !important; white-space: nowrap !important; font-weight: 500 !important; font-family: 'DM Sans', sans-serif !important; } .hm-hero-card .dg-google-btn { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 10px 20px !important; background: var(--card) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; transition: background 0.15s !important; font-family: 'DM Sans', sans-serif !important; } .hm-hero-card .dg-google-btn:hover { background: var(--faint) !important; } .hm-hero-card .dg-auth-switch { font-size: 11px !important; color: var(--muted) !important; margin-top: 8px !important; text-align: center !important; font-family: 'DM Sans', sans-serif !important; } .hm-hero-card .dg-auth-switch a { color: var(--ink) !important; font-weight: 600 !important; text-decoration: none !important; border-bottom: 1px solid var(--line) !important; padding-bottom: 1px !important; transition: border-color 0.15s, color 0.15s !important; } .hm-hero-card .dg-auth-switch a:hover { border-color: var(--amber-b) !important; color: var(--amber) !important; } .hm-hero-card .dg-auth-footer { font-size: 10px !important; color: var(--muted) !important; margin-top: 8px !important; text-align: center !important; font-family: 'DM Sans', sans-serif !important; opacity: 0.6 !important; } .hm-hero-card .dg-auth-step { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin-bottom: 14px !important; } .hm-hero-card .dg-auth-step-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: var(--line) !important; transition: all 0.3s !important; } .hm-hero-card .dg-auth-step-dot.active { background: var(--amber) !important; width: 20px !important; border-radius: 4px !important; } /* Stats row inside card */ .hm-hero-stats { display: flex !important; align-items: center !important; justify-content: center !important; gap: 16px !important; border-top: 1px solid var(--line) !important; padding-top: 10px !important; margin-top: 10px !important; } .hm-hero-stat { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; } .hm-hero-stat-num { font-family: 'Bebas Neue', sans-serif !important; font-size: 22px !important; color: var(--amber) !important; letter-spacing: 0.04em !important; line-height: 1 !important; } .hm-hero-stat-label { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--muted) !important; font-family: 'DM Sans', sans-serif !important; } .hm-hero-stat-div { width: 1px !important; height: 28px !important; background: var(--line) !important; } /* Dark mode */ #dg.dark .hm-hero-card .dg-auth-input { background: rgba(255,255,255,0.06) !important; border-color: var(--line) !important; } #dg.dark .hm-hero-card .dg-auth-input:focus { box-shadow: 0 0 0 3px rgba(251,191,36,0.15) !important; } #dg.dark .hm-hero-card .dg-google-btn { background: rgba(255,255,255,0.06) !important; border-color: var(--line) !important; } /* Fade-in animation */ @keyframes hm-fadeinup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .dg-auth-title { font-family: 'Bebas Neue', sans-serif !important; font-size: 22px; letter-spacing: 0.02em; line-height: 1; color: var(--ink); margin-bottom: 4px; } .dg-auth-sub { font-size: 12px; color: var(--muted); line-height: 1.4; margin-bottom: 10px; } /* Input fields */ .dg-auth-fields { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; } .dg-auth-input-wrap { position: relative; } .dg-auth-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); pointer-events: none; } .dg-auth-input { width: 100% !important; padding: 10px 14px 10px 40px !important; border: 1px solid var(--line) !important; border-radius: 10px !important; background: var(--faint) !important; color: var(--ink) !important; font-size: 14px !important; font-family: 'DM Sans', sans-serif !important; outline: none !important; transition: border-color 0.2s, background 0.2s !important; box-sizing: border-box !important; } .dg-auth-input:focus { border-color: var(--amber-b) !important; box-shadow: 0 0 0 3px var(--amber-bg) !important; } .dg-auth-input::placeholder { color: var(--muted) !important; opacity: 0.6 !important; } .dg-auth-input.error { border-color: var(--red) !important; animation: dgShake 0.35s cubic-bezier(0.68,-0.55,0.27,1.55); } @keyframes dgShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } /* Password toggle */ .dg-pass-toggle { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--muted); font-size: 11px; font-weight: 600; transition: color 0.15s; padding: 0; background: none; border: none; font-family: 'DM Sans', sans-serif; } .dg-pass-toggle:hover { color: var(--ink); } /* Submit button */ .dg-auth-submit { width: 100% !important; padding: 11px 20px !important; background: #b27300 !important; color: #fff !important; font-size: 15px !important; font-weight: 700 !important; border: none !important; border-radius: 10px !important; cursor: pointer; transition: filter 0.15s, transform 0.15s !important; font-family: 'DM Sans', sans-serif !important; letter-spacing: 0.03em !important; display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .dg-auth-submit:hover { filter: brightness(1.12) !important; transform: translateY(-1px) !important; } .dg-auth-submit:disabled { opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; filter: none !important; } .dg-auth-submit.is-loading { cursor: wait !important; opacity: 0.85; } .dg-auth-submit .dg-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: dgSpin 0.7s linear infinite; display: none; flex-shrink: 0; } .dg-auth-submit.is-loading .dg-spinner { display: inline-block; } @keyframes dgSpin { to { transform: rotate(360deg); } } .dg-auth-forgot { font-size: 12px; text-align: right; margin-top: 10px; margin-bottom: 2px; } .dg-auth-forgot a { color: var(--muted) !important; text-decoration: none !important; font-weight: 500; transition: color 0.15s; } .dg-auth-forgot a:hover { color: var(--ink) !important; } .dg-auth-switch { font-size: 11px; color: var(--muted); margin-top: 8px; text-align: center; } .dg-auth-switch a { color: var(--ink) !important; font-weight: 600; text-decoration: none !important; border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: border-color 0.2s; } .dg-auth-switch a:hover { border-color: var(--amber); } .dg-auth-footer { font-size: 10px; color: var(--muted); margin-top: 8px; text-align: center; opacity: 0.7; } /* Google sign-in */ .dg-auth-divider { display: flex; align-items: center; gap: 10px; margin: 8px 0; } .dg-auth-divider::before, .dg-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); } .dg-auth-divider span { font-size: 11px; color: var(--muted); white-space: nowrap; font-weight: 500; } .dg-google-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 20px !important; background: var(--card) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer; transition: background 0.15s; font-family: 'DM Sans', sans-serif !important; } .dg-google-btn:hover { background: var(--faint) !important; } .dg-google-btn svg { flex-shrink: 0; } /* View transitions */ #dg-auth-signup, #dg-auth-login { animation: dgAuthFadeIn 0.3s ease; } @keyframes dgAuthFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Dark mode inputs */ #dg.dark .dg-auth-input { background: rgba(255,255,255,0.06) !important; border-color: var(--line) !important; } #dg.dark .dg-auth-input:focus { box-shadow: 0 0 0 3px rgba(251,191,36,0.15) !important; } #dg.dark .dg-google-btn { background: rgba(255,255,255,0.06) !important; border-color: var(--line) !important; } /* Mobile */ @media (max-width: 600px) { .hm-hero-content { padding: 40px 16px !important; } .hm-hero-card { padding: 20px 16px 16px !important; border-radius: 16px !important; } } /* ── SCROLL PROGRESS BAR ── */ .dg-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--ink); width: 0%; z-index: 9998; transition: none; } /* ── SKELETON LOADING ── */ #dg-skeleton { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 16px; } .dg-skeleton-card { background: var(--card); border-radius: 16px; overflow: hidden; } .dg-skel-img { height: 172px; background: var(--faint); animation: dgShimmer 2s infinite; } .dg-skel-body { padding: 20px; } .dg-skel-line { height: 12px; background: var(--faint); border-radius: 6px; margin-bottom: 10px; animation: dgShimmer 2s infinite; } .dg-skel-line.w40 { width: 40%; } .dg-skel-line.w60 { width: 60%; } .dg-skel-line.w80 { width: 80%; } @keyframes dgShimmer { 0%,100% { opacity: 0.4; } 50% { opacity: 0.7; } } /* ── RECENTLY VIEWED STRIP ── */ .dg-recent-strip { padding: 24px 0 28px; margin-bottom: 8px; } .dg-recent-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .dg-recent-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; } .dg-recent-item { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 14px 8px 8px; flex-shrink: 0; cursor: pointer; transition: all 0.2s; font-size: 13px; font-weight: 500; color: var(--ink); } .dg-recent-item:hover { border-color: var(--ink); transform: translateY(-1px); } .dg-recent-img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--faint); } /* ── SORT DROPDOWN ── */ .dg-filter-sort { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .dg-sort-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; } .dg-saved-btn { padding: 8px 16px !important; font-size: 12px !important; font-weight: 600 !important; border: 1.5px solid var(--line) !important; border-radius: 40px !important; background: var(--card) !important; color: var(--muted) !important; cursor: pointer; font-family: 'DM Sans', sans-serif !important; transition: all 0.2s; -webkit-appearance: none !important; appearance: none !important; } .dg-saved-btn:hover { border-color: var(--ink) !important; color: var(--ink) !important; } .dg-saved-btn.active { background: var(--ink) !important; color: var(--card) !important; border-color: var(--ink) !important; } #dg.dark .dg-saved-btn.active { color: var(--bg) !important; } .dg-sort { padding: 8px 14px; font-size: 12px; font-weight: 600; border: 1.5px solid var(--line); border-radius: 40px; background: var(--card); color: var(--muted); cursor: pointer; font-family: 'DM Sans', sans-serif !important; transition: all 0.2s; -webkit-appearance: none; appearance: none; outline: none; } .dg-sort:hover { border-color: var(--ink); color: var(--ink); } #dg.dark .dg-sort { background: var(--card); border-color: var(--line); color: var(--muted); } /* ── FAVORITES HEART ── */ .dg-fav-btn { position: absolute; top: 14px; left: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; z-index: 2; transition: all 0.2s; border: none !important; padding: 0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .dg-fav-btn.dg-fav-locked { font-size: 13px; opacity: 0.85; background: rgba(255,255,255,0.75); } .dg-profile-fav-btn.dg-fav-locked { opacity: 0.7; } .dg-fav-btn:hover { transform: scale(1.1); } .dg-fav-btn.saved { color: var(--red); } /* ── SHARE BUTTON ── */ .dg-profile-top { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; margin-bottom: 4px; } .dg-profile-actions { display: flex; gap: 10px; align-items: center; } .dg-profile-fav-btn { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.06em; color: var(--muted) !important; padding: 10px 20px !important; border: 1px solid var(--line) !important; border-radius: 10px !important; background: var(--card) !important; cursor: pointer; transition: all 0.2s; min-height: 44px; display: flex; align-items: center; gap: 6px; } .dg-profile-fav-btn:hover { border-color: var(--ink) !important; color: var(--ink) !important; } .dg-profile-fav-btn.saved { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; } /* Save button overlaid on the hero photo, top-left */ #dg .dg-hero-fav { position: absolute !important; top: 14px !important; left: 14px !important; z-index: 6 !important; min-height: 0 !important; padding: 8px 14px !important; border-radius: 24px !important; background: rgba(255,255,255,0.9) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; border: none !important; color: var(--ink) !important; font-size: 13px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; } #dg .dg-hero-fav:hover { background: #fff !important; transform: translateY(-1px); } #dg .dg-hero-fav.saved { background: var(--red) !important; color: #fff !important; } .dg-share-btn { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--muted); padding: 10px 20px; border: 1px solid var(--line) !important; border-radius: 10px; background: var(--card) !important; cursor: pointer; transition: all 0.2s; min-height: 44px; display: flex; align-items: center; gap: 6px; } .dg-share-btn:hover { border-color: var(--ink) !important; color: var(--ink); background: var(--bg) !important; } /* ── QUICK NAV PILLS ── */ .dg-quicknav { display: flex; gap: 8px; padding: 14px 0; overflow-x: auto; position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); margin-bottom: 12px; } .dg-quicknav-pill { font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); white-space: nowrap; cursor: pointer; transition: all 0.2s; flex-shrink: 0; } .dg-quicknav-pill:hover { border-color: var(--ink); color: var(--ink); } /* ── RELATED BUSINESSES ── */ .dg-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .dg-related-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer; transition: all 0.25s ease; } .dg-related-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } .dg-related-img { height: 120px; background-size: cover; background-position: center; background-color: var(--faint); } .dg-related-body { padding: 14px 16px; } .dg-related-name { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 3px; line-height: 1.3; } .dg-related-type { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } @media (max-width: 480px) { .dg-related-grid { grid-template-columns: 1fr 1fr; } } /* ── TOAST ── */ .dg-toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--card); padding: 12px 28px; border-radius: 12px; font-size: 14px; font-weight: 600; opacity: 0; transition: all 0.3s cubic-bezier(0.22,1,0.36,1); z-index: 9999; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,0.15); max-width: 90%; text-align: center; } .dg-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .dg-toast a { color: var(--card) !important; text-decoration: underline !important; cursor: pointer; } /* ── SEARCH & FILTER BAR ── */ .dg-filter-bar { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; } .dg-search-wrap { position: relative; width: 100%; transition: box-shadow 0.2s ease; } .dg-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; z-index: 1; } .dg-search-clear { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--muted); font-size: 14px; padding: 4px 8px; z-index: 1; transition: color 0.15s; } .dg-search-clear:hover { color: var(--ink); } #dg .dg-filter-bar .dg-search { width: 100% !important; padding: 16px 20px 16px 48px !important; font-size: 15px !important; font-weight: 500 !important; font-family: 'DM Sans', sans-serif !important; border: 1.5px solid var(--line) !important; border-radius: 14px !important; background: var(--card) !important; color: var(--ink) !important; outline: none !important; box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important; transition: all 0.25s !important; box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important; } #dg .dg-search:focus { border-color: var(--ink) !important; box-shadow: 0 0 0 4px rgba(0,0,0,0.06) !important; } #dg .dg-search::placeholder { color: var(--muted) !important; font-weight: 400 !important; } #dg .dg-filter-pills { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; margin-top: 4px !important; } #dg .dg-filter-pill { padding: 7px 14px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; border: 1.5px solid var(--line) !important; border-radius: 40px !important; background: var(--card) !important; color: var(--muted) !important; cursor: pointer !important; font-family: 'DM Sans', sans-serif !important; transition: all 0.2s !important; -webkit-appearance: none !important; appearance: none !important; white-space: nowrap !important; } #dg .dg-filter-pill:hover { border-color: var(--ink) !important; color: var(--ink) !important; } #dg .dg-filter-pill.active { background: var(--ink) !important; color: var(--card) !important; border-color: var(--ink) !important; } #dg.dark .dg-filter-pill.active { background: var(--ink) !important; color: var(--bg) !important; } .dg-card-arrow span { line-height: 1; } /* ── CARD DESC CLAMP ── */ .dg-card-desc { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px !important; line-height: 1.6; margin-bottom: 4px; } /* ── CARD IMAGE HOVER OVERLAY ── */ .dg-card-img::before { content: ''; position: absolute; inset: 0; background: transparent; transition: background 0.3s; z-index: 1; pointer-events: none; } .dg-card:hover .dg-card-img::before { background: rgba(0,0,0,0.08); } /* ── CARD STAGGER ANIMATION ── */ @keyframes dgCardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ── COLLAPSIBLE HOURS ── */ .dg-hrs-toggle { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); border-radius: 12px; transition: all 0.2s; margin-bottom: 4px; } .dg-hrs-toggle:hover { background: rgba(0,0,0,0.03); } .dg-hrs-toggle-info { display: flex; align-items: center; gap: 12px; } .dg-hrs-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .dg-hrs-toggle-day { font-weight: 700; color: var(--ink); } .dg-hrs-toggle-time { color: var(--muted); font-weight: 500; } .dg-hrs-chevron { font-size: 12px; color: var(--muted); transition: transform 0.25s cubic-bezier(0.22,1,0.36,1); } .dg-hrs-expanded .dg-hrs-chevron { transform: rotate(180deg); } /* Collapsed: hide ALL rows — toggle IS the summary */ #dg-hours-sec #dg-hrs { display: none; } /* Expanded: show table */ #dg-hours-sec.dg-hrs-expanded #dg-hrs { display: table; width: 100%; animation: dgFadeIn 0.3s ease; } /* Smooth wrapper */ .dg-hrs-card { overflow: hidden; padding-bottom: 16px !important; } /* Today row highlight */ .dg-hrs tr.dg-hrs-today td { background: rgba(0,0,0,0.03); font-weight: 600; } .dg-hrs tr.dg-hrs-today td:first-child { color: var(--ink) !important; } /* ── GALLERY FADE EDGE ── */ .dg-gallery { position: relative !important; } .dg-gallery::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 40px; background: linear-gradient(90deg, transparent, var(--bg)); pointer-events: none; } /* ── SECTION LINE GRADIENT ── */ .dg-section-line { height: 1px !important; background: linear-gradient(90deg, var(--line) 0%, transparent 100%) !important; } /* ── DARK MODE: NEW FEATURES ── */ #dg.dark .dg-search { background: var(--card) !important; border-color: var(--line) !important; color: var(--ink) !important; } #dg.dark .dg-search:focus { border-color: var(--ink) !important; box-shadow: 0 0 0 4px rgba(255,255,255,0.06) !important; } #dg.dark .dg-filter-pill { background: var(--card) !important; border-color: var(--line) !important; color: var(--muted) !important; } #dg.dark .dg-filter-pill:hover { border-color: var(--ink) !important; color: var(--ink) !important; } #dg.dark .dg-filter-pill.active { background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink) !important; } #dg.dark .dg-hrs-toggle { color: var(--ink); } #dg.dark .dg-hrs-toggle:hover { background: rgba(255,255,255,0.04); } #dg.dark .dg-hrs-toggle-day { color: var(--ink); } #dg.dark .dg-hrs tr.dg-hrs-today td { background: rgba(255,255,255,0.04); } #dg.dark .dg-today-badge { background: rgba(255,255,255,0.08) !important; color: var(--ink) !important; } #dg.dark .dg-gallery::after { background: linear-gradient(90deg, transparent 0%, rgba(15,15,15,0.8) 100%); } #dg.dark .leaflet-popup-content-wrapper { border: 1px solid rgba(255,255,255,0.08) !important; } #dg.dark .dg-gallery::-webkit-scrollbar-thumb { background: var(--muted); } #dg.dark .dg-section-line { background: var(--line) !important; } /* ── NO RESULTS EMPTY STATE ── */ /* Icon is provided inline per empty-state message; no ::before to avoid a duplicate icon. */ /* ── DIRECTIONS LINK ── */ .dg-directions-link { display: inline-flex !important; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink) !important; margin-top: 16px !important; padding-top: 12px !important; border-top: 1px solid var(--line) !important; width: 100% !important; transition: all 0.2s; } .dg-directions-link:hover { opacity: 0.7; transform: translateX(4px); } /* ── BACK TO TOP ── */ .dg-back-top { position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--ink) !important; color: var(--card) !important; border: none !important; font-size: 20px; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.15); opacity: 0; transform: translateY(12px); transition: all 0.2s; pointer-events: none; z-index: 100; font-family: 'DM Sans', sans-serif !important; } .dg-back-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .dg-back-top:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.2); } /* ── FADE TRANSITION ── */ @keyframes dgFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .dg-fade-in { animation: dgFadeIn 0.3s ease both; } /* ── ROUND 14 POLISH ── */ /* A: Hero pills padding */ #dg .dg-pill { padding: 6px 16px !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: 0.3px !important; line-height: 1.3 !important; border-radius: 20px !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; } #dg .dg-pill-open { background: rgba(14,122,84,0.85) !important; color: #fff !important; gap: 5px !important; } #dg .dg-pill-type { background: rgba(255,255,255,0.18) !important; color: #fff !important; backdrop-filter: blur(4px) !important; } #dg #dg-pills { display: flex !important; gap: 8px !important; margin-top: 8px !important; flex-wrap: wrap !important; } /* B: Quicknav pills padding */ #dg #dg-quicknav { display: flex !important; gap: 6px !important; padding: 10px 0 !important; border-bottom: 1px solid var(--line) !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } #dg .dg-quicknav-pill { padding: 6px 14px !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--muted) !important; border-radius: 8px !important; white-space: nowrap !important; cursor: pointer !important; transition: all 0.15s !important; } #dg .dg-quicknav-pill:hover { background: var(--faint) !important; color: var(--ink) !important; } /* D: Recently viewed chips */ #dg .dg-recent-strip { margin-bottom: 16px !important; } #dg .dg-recent-label { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; } #dg .dg-recent-item { padding: 6px 14px 6px 6px !important; border-radius: 24px !important; font-size: 13px !important; } #dg .dg-recent-item img { width: 28px !important; height: 28px !important; border-radius: 50% !important; } /* E: Filter sort row */ #dg .dg-filter-sort { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid var(--line) !important; } #dg .dg-saved-btn { padding: 6px 14px !important; border-radius: 20px !important; font-size: 12.5px !important; font-weight: 500 !important; border: 1px solid var(--line) !important; } #dg .dg-sort { padding: 6px 14px !important; border-radius: 20px !important; font-size: 12.5px !important; font-weight: 500 !important; } /* G: Heart/fav button */ #dg .dg-fav-btn { width: 36px !important; height: 36px !important; font-size: 16px !important; } #dg .dg-fav-btn.saved { color: var(--red) !important; background: rgba(255,255,255,0.85) !important; } #dg.dark .dg-fav-btn { background: rgba(0,0,0,0.5) !important; } #dg.dark .dg-fav-btn.saved { color: var(--red) !important; } /* J: Profile saved + share buttons */ #dg .dg-profile-fav-btn { padding: 8px 18px !important; border-radius: 24px !important; font-size: 13px !important; border: 1.5px solid var(--line) !important; background: transparent !important; color: var(--ink) !important; } #dg .dg-profile-fav-btn.saved { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; } #dg .dg-share-btn { padding: 8px 18px !important; border-radius: 24px !important; font-size: 13px !important; border: 1.5px solid var(--line) !important; background: transparent !important; color: var(--ink) !important; min-height: auto !important; } /* K: Gallery counter */ #dg #dg-gallery-counter { font-size: 12px !important; color: var(--muted) !important; font-weight: 500 !important; letter-spacing: 1px !important; padding: 8px 0 !important; } /* L: Logo section — hide redundant "BUSINESS" label */ #dg #dg-logo-section .dg-section { display: none !important; } #dg #dg-logo-section { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; padding: 20px 24px !important; margin-bottom: 8px !important; } #dg .dg-logo-wrap { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin-top: 0 !important; } #dg .dg-logo-img { width: 52px !important; height: 52px !important; border-radius: 12px !important; } #dg .dg-logo-name { font-size: 17px !important; } #dg.dark #dg-logo-section { background: var(--card) !important; border-color: var(--line) !important; } /* M: Hours row hover */ #dg .dg-hrs tr { transition: background 0.15s !important; } #dg .dg-hrs tr:hover { background: rgba(0,0,0,0.02) !important; } #dg.dark .dg-hrs tr:hover { background: rgba(255,255,255,0.03) !important; } /* ── NEW BADGE (inline in card body) ── */ .dg-new-badge { display: inline-block; background: var(--green); color: #fff; font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 8px; margin-left: 6px; vertical-align: middle; line-height: 1.4; } /* ── LOAD MORE ── */ .dg-load-more { display: block; grid-column: 1 / -1; width: fit-content; margin: 32px auto 0; padding: 12px 32px; font-size: 14px; font-weight: 600; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 24px; cursor: pointer; transition: all 0.2s; font-family: inherit; } .dg-load-more:hover { border-color: var(--ink); } /* ── SEARCH SUGGESTIONS ── */ .dg-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: var(--card); border: 1px solid var(--line); border-radius: 0 0 14px 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); z-index: 100; max-height: 280px; overflow-y: auto; display: none; } .dg-suggestion { padding: 12px 16px 12px 48px; font-size: 14px; cursor: pointer; transition: background 0.1s; color: var(--ink); border-bottom: 1px solid var(--line); } .dg-suggestion:last-child { border-bottom: none; } .dg-suggestion:hover { background: var(--faint); } .dg-suggestion-type { font-size: 11px; color: var(--muted); margin-left: 8px; } /* ── MINI MAP ── */ #dg-mini-map { height: 180px; border-radius: 12px; overflow: hidden; margin-top: 14px; border: 1px solid var(--line); } /* ── STICKY BACK BAR ── */ .dg-sticky-back { position: sticky; top: 0; z-index: 60; background: var(--bg); border-bottom: 1px solid var(--line); padding: 10px 0; display: none; } .dg-sticky-back.show { display: flex; align-items: center; justify-content: space-between; } /* ── SAVED COUNT IN HEADER ── */ .dg-saved-count { font-size: 11px; font-weight: 700; background: var(--green); color: #fff; padding: 2px 7px; border-radius: 10px; margin-left: 4px; } /* ── SCROLL REVEAL ── */ .dg-card.dg-reveal { opacity: 0; transform: translateY(20px); } .dg-card.dg-revealed { opacity: 1; transform: translateY(0); transition: opacity 0.4s ease, transform 0.4s ease; } /* ── PROFILE SKELETON ── */ .dg-prof-skeleton { padding: 32px; } .dg-prof-skel-hero { height: 380px; background: var(--faint); border-radius: 16px; margin-bottom: 20px; animation: dgShimmer 2s infinite; } .dg-prof-skel-row { height: 14px; background: var(--faint); border-radius: 6px; margin-bottom: 12px; animation: dgShimmer 2s infinite; } .dg-prof-skel-row.w50 { width: 50%; } .dg-prof-skel-row.w70 { width: 70%; } .dg-prof-skel-row.w40 { width: 40%; } /* ── PHOTO COUNT BADGE ── */ .dg-photo-count { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; backdrop-filter: blur(4px); z-index: 2; } /* ── REPORT LINK ── */ .dg-report-link { font-size: 12px; color: var(--muted); text-align: center; margin-top: 24px; cursor: pointer; transition: color 0.2s; } .dg-report-link:hover { color: var(--ink); } /* ── EMPTY SAVED STATE ── */ .dg-empty-saved { text-align: center; padding: 48px 24px; color: var(--muted); } .dg-empty-saved-icon { font-size: 32px; opacity: 0.4; margin-bottom: 16px; } .dg-empty-saved-text { font-size: 15px; line-height: 1.6; } /* ── OFFERS ── */ .dg-offers-list { display: flex; flex-direction: column; gap: 12px; } .dg-offer-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; display: flex; align-items: flex-start; gap: 14px; } .dg-offer-icon { font-size: 24px; flex-shrink: 0; } .dg-offer-name { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 2px; } .dg-offer-desc { font-size: 13px; color: var(--muted); line-height: 1.5; } .dg-offer-expires { font-size: 11px; color: var(--red); margin-top: 4px; font-weight: 700; } /* ── PRODUCTS ── */ .dg-products-list { display: flex; flex-direction: column; gap: 10px; } .dg-product-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; } .dg-product-name { font-size: 14px; font-weight: 700; color: var(--ink); } .dg-product-price { font-size: 14px; font-weight: 700; color: var(--green); } /* ── LOYALTY STAMPS ── */ .dg-stamps-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 28px; transition: all 0.2s ease; } .dg-stamps-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 4px; } .dg-stamps-sub { font-size: 13px; color: var(--muted); margin-bottom: 16px; } .dg-stamps-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .dg-stamp { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.2s; background: var(--bg); box-shadow: 0 1px 4px rgba(0,0,0,0.05); } .dg-stamp.collected { border-color: var(--green); background: rgba(14,122,84,0.08); box-shadow: 0 0 8px rgba(14,122,84,0.25); } .dg-stamp.today { border-color: var(--ink); border-style: dashed; animation: dgStampPulse 1.5s ease infinite; } /* dgStampPulse keyframes defined in Round 26 (box-shadow pulse) */ .dg-stamp-claim-btn { width: 100%; padding: 14px; font-size: 14px; font-weight: 700; color: #fff; background: var(--green); border: none !important; border-radius: 12px; cursor: pointer; transition: all 0.2s; font-family: inherit; animation: dgNewPulse 2s ease infinite; } .dg-stamp-claim-btn:hover { filter: brightness(1.1); transform: translateY(-1px); } .dg-stamp-claim-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; } .dg-stamp-claim-btn.claimed { background: var(--faint); color: var(--muted); } .dg-stamps-progress { font-size: 12px; color: var(--muted); text-align: center; margin-top: 10px; font-weight: 600; letter-spacing: 0.02em; } .dg-stamp-complete { text-align: center; padding: 20px; } .dg-stamp-complete-icon { font-size: 40px; margin-bottom: 8px; } .dg-stamp-complete-text { font-size: 16px; font-weight: 700; color: var(--green); } /* ── REACTIONS ── */ .dg-reactions { display: flex; gap: 6px; margin-top: 20px; flex-wrap: wrap; } .dg-reaction-btn { padding: 8px 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); font-size: 14px; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 5px; } .dg-reaction-btn:hover { border-color: var(--ink); transform: scale(1.05); } .dg-reaction-btn.reacted { border-color: var(--ink); background: var(--faint); } .dg-reaction-count { font-size: 11px; font-weight: 600; color: var(--muted); } /* ── VISIT COUNTER ── */ .dg-visit-count { font-size: 12px; color: var(--muted); margin-top: 8px; margin-bottom: 4px; } /* ── DISTANCE BADGE ── */ .dg-card-dist { font-size: 11px; color: var(--green); font-weight: 600; margin-top: 2px; } /* ── INVITE BUTTON ── */ .dg-invite-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; font-size: 12px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; transition: all 0.2s; } .dg-invite-btn:hover { border-color: var(--ink); color: var(--ink); } /* O: Product photos grid */ #dg .dg-prod-grid { gap: 8px !important; } #dg .dg-prod-img { border-radius: 12px !important; } #dg .dg-prod-img:hover { opacity: 0.85 !important; transform: scale(1.02) !important; } /* ── MOBILE POLISH (480px) ── */ @media (max-width: 480px) { /* Auth: iOS zoom prevention */ .dg-auth-input { min-height: 44px !important; font-size: 16px !important; } .dg-auth-submit { min-height: 46px !important; font-size: 16px !important; } /* Cards: bigger tap targets */ .dg-card-arrow { width: 36px !important; height: 36px !important; } .dg-fav-btn { width: 40px !important; height: 40px !important; } .dg-card-img, .dg-card-img-empty { height: 152px !important; } .dg-card-name { font-size: 16px !important; } .dg-card-loc { font-size: 14px !important; } /* Search: bigger clear button */ .dg-search-clear { width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; right: 6px !important; } /* Filter pills: horizontal scroll on narrow screens */ #dg .dg-filter-pills { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; flex-wrap: nowrap !important; padding-bottom: 6px !important; } #dg .dg-filter-pill { flex-shrink: 0 !important; padding: 8px 14px !important; } /* Profile hero */ .dg-hero { height: 260px !important; border-radius: 10px !important; } .dg-hero-content { padding: 16px !important; } .dg-hero-name { font-size: clamp(24px, 7vw, 40px) !important; } .dg-pill { font-size: 10px !important; padding: 4px 10px !important; } /* Gallery: bigger thumbnails */ .dg-gimg { width: 90px !important; height: 68px !important; } /* Hours table: tighter */ .dg-hrs td:first-child { width: 100px !important; font-size: 13px !important; } .dg-hrs td { padding: 12px 0 !important; font-size: 13px !important; } .dg-today-badge { font-size: 8px !important; padding: 2px 6px !important; } .dg-hrs-toggle { min-height: 48px; } /* Quicknav: scroll support */ #dg #dg-quicknav { padding: 8px 0 12px !important; } .dg-quicknav-pill { padding: 6px 12px !important; min-height: 38px !important; font-size: 11px !important; } /* Toast: full-width at bottom */ .dg-toast { bottom: 24px !important; left: 16px !important; right: 16px !important; max-width: none !important; transform: translateY(20px) !important; border-radius: 10px !important; } .dg-toast.show { transform: translateY(0) !important; } /* Back-to-top: tighter to edge */ .dg-back-top { bottom: 20px !important; right: 16px !important; } /* Related gems */ .dg-related-img { height: 160px !important; } .dg-related-name { font-size: 12px !important; } /* Profile buttons */ .dg-profile-fav-btn { min-height: 48px !important; } .dg-share-btn { min-height: 44px !important; } .dg-back-link { min-height: 44px !important; } .dgup-avatar-preview { width: 140px; height: 140px; } .dgup-cover { height: 100px !important; } } /* ── ULTRA-SMALL (340px) ── */ @media (max-width: 340px) { .dg-inner { padding: 0 12px 40px !important; } .dg-hero-content { padding: 12px !important; } .dg-desc, .dg-loc, .dg-hrs-card { padding: 16px !important; } .dg-related-grid { grid-template-columns: 1fr !important; } .dg-prod-grid { grid-template-columns: 1fr !important; } .dg-card-body { padding: 14px 16px 16px !important; } } /* ── PROFILE SECTION CONTENT CARDS ── */ #dg-profile .dg-loc { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px; margin-top: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); } #dg-profile .dg-desc { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px; margin-top: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); color: var(--ink); } #dg-profile .dg-hrs-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-top: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); } #dg-profile .dg-logo-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-top: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); } #dg-profile .dg-logo-img { width: 80px !important; height: 80px !important; border-radius: 16px; object-fit: cover; border: 2px solid var(--line); box-shadow: 0 4px 12px rgba(0,0,0,0.06); } /* ── DARK MODE: NEW FEATURES ── */ #dg.dark .dg-back-top { background: var(--ink) !important; color: var(--bg) !important; } #dg.dark .dg-directions-link { color: var(--amber) !important; } #dg.dark .dg-directions-link:hover { color: var(--ink) !important; } #dg.dark #dg-profile .dg-loc, #dg.dark #dg-profile .dg-desc, #dg.dark #dg-profile .dg-hrs-card, #dg.dark #dg-profile .dg-logo-wrap { border-color: var(--line); box-shadow: 0 2px 8px rgba(0,0,0,0.2); } #dg.dark .dg-directions-link { border-color: var(--line) !important; } #dg.dark .dg-stamps-card { box-shadow: 0 2px 8px rgba(0,0,0,0.3); } #dg.dark .dgup-react-pill { border-color: var(--line); } #dg.dark .dgup-react-pill:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.3); } #dg.dark .dg-logo-wrap:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.3); } /* ── FINAL OVERRIDES: CTA REMOVAL, SPACING, GOLD→BLACK ── */ /* Title spacing */ #dg .dg-grid-headline { margin-bottom: 28px !important; } #dg .dg-grid-sub { margin-top: 0 !important; margin-bottom: 20px !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* Dark mode: card type badge */ #dg.dark .dg-card-type { background: rgba(255,255,255,0.06) !important; color: var(--muted) !important; } /* Footer */ #dg .dg-ftr { margin-top: 60px !important; padding-top: 24px !important; border-top: 1px solid var(--line) !important; } /* ── POLISH PASS: PROFILE SECTION TITLES ── */ #dg .dg-section-title { color: var(--muted) !important; font-weight: 600 !important; font-size: 10px !important; letter-spacing: 0.18em !important; } /* ── POLISH PASS: OFFER CARDS ── */ #dg .dg-offer-card { transition: all 0.2s ease; border-color: var(--line); } #dg .dg-offer-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); border-color: var(--faint); } #dg.dark .dg-offer-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.3); } #dg .dg-offer-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--bg); border-radius: 10px; border: 1px solid var(--line); } /* ── POLISH PASS: PRODUCT ITEMS ── */ #dg .dg-product-item { transition: all 0.15s ease; } #dg .dg-product-item:hover { background: var(--bg); transform: translateX(4px); box-shadow: 0 2px 8px rgba(0,0,0,0.04); } /* ── POLISH PASS: ABOUT DESCRIPTION ── */ #dg .dg-desc { font-size: 15px !important; line-height: 1.85 !important; letter-spacing: 0.01em; } /* ── POLISH PASS: GALLERY THUMBNAILS ── */ #dg .dg-gimg { width: 72px !important; height: 54px !important; border-radius: 6px !important; border-width: 1.5px !important; } #dg .dg-gimg.active { border-color: var(--ink) !important; opacity: 1 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.12); } /* ── POLISH PASS: AUTH BRAND PANEL ── */ #dg .dg-auth-brand { background: var(--bg) !important; } #dg.dark .dg-auth-brand { background: var(--bg) !important; } /* ── AUTH GATE: hide header nav when gate is open ── */ #dg.dg-gate-open .dg-hdr { display: none !important; } /* ── POLISH PASS: SEARCH BAR DEPTH ── */ #dg .dg-filter-bar .dg-search { box-shadow: inset 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02) !important; } #dg .dg-search:focus { box-shadow: 0 0 0 3px rgba(14,122,84,0.12), inset 0 1px 2px rgba(0,0,0,0.02) !important; } #dg.dark .dg-search { box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1) !important; } /* ── POLISH PASS: RELATED CARDS ── */ #dg .dg-related-card { border-radius: 14px !important; overflow: hidden; } #dg .dg-related-img { height: 130px !important; transition: transform 0.4s ease; } #dg .dg-related-card:hover .dg-related-img { transform: scale(1.03); } #dg .dg-related-body { padding: 16px 18px !important; } /* ── POLISH PASS: STAMP CARD ── */ #dg .dg-stamps-card { border-color: var(--line); box-shadow: 0 2px 8px rgba(0,0,0,0.03); } #dg .dg-stamp { transition: all 0.25s cubic-bezier(0.22,1,0.36,1); } #dg .dg-stamp.collected { transform: scale(1.05); } /* ── POLISH PASS: REACTIONS ── */ #dg .dg-reaction-btn { border-radius: 24px !important; padding: 5px 12px !important; font-size: 13px !important; } #dg .dg-reaction-btn:hover { background: var(--faint) !important; } /* ── POLISH PASS: QUICKNAV ACTIVE INDICATOR ── */ #dg .dg-quicknav-pill:active { background: var(--ink) !important; color: var(--card) !important; } /* Photo count badge — canonical definition at line ~2003 */ /* ── POLISH PASS: TOAST ANIMATION ── */ #dg .dg-toast { border-radius: 40px !important; padding: 12px 28px !important; font-size: 13px !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } #dg.dark .dg-toast { background: rgba(240,238,234,0.95) !important; color: #111 !important; } /* ── POLISH PASS: CARD SKELETON MATCH ── */ #dg .dg-skeleton-card { border-radius: 14px !important; border: 1px solid var(--line); } #dg .dg-skel-img { height: 160px !important; } /* ── POLISH PASS: PROFILE BACK LINK ── */ #dg .dg-back-link { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.04em; text-transform: uppercase; } #dg .dg-back-link:hover { transform: translateX(-3px); } /* ── POLISH PASS: DIRECTIONS BUTTONS ── */ #dg .dg-directions-link:hover { background: var(--faint) !important; border-color: var(--ink) !important; transform: none !important; } /* ── POLISH PASS: MINI MAP ── */ #dg #dg-mini-map { height: 220px !important; border-radius: 14px !important; margin-top: 20px !important; border: 1px solid var(--line) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } /* ── POLISH PASS: COPY ADDRESS ── */ #dg .dg-address-text { transition: background 0.15s; border-radius: 8px; padding: 6px 8px; margin: -6px -8px; } #dg .dg-address-text:hover { background: var(--faint); } /* ── POLISH PASS: LOAD MORE BUTTON ── */ #dg .dg-load-more { border-radius: 40px !important; padding: 12px 28px !important; font-size: 13px !important; letter-spacing: 0.02em; transition: all 0.2s; } #dg .dg-load-more:hover { background: var(--ink) !important; color: var(--card) !important; border-color: var(--ink) !important; transform: translateY(-2px); } /* ── POLISH PASS: PROFILE FOOTER SUBTLETY ── */ #dg #dg-profile .dg-ftr { border-top-color: transparent !important; } #dg #dg-profile .dg-ftr .dg-ftr-text { opacity: 0.4; font-size: 11px !important; } /* ── POLISH PASS: SMOOTH PAGE TRANSITIONS ── */ #dg-grid-view, #dg-profile { animation: dgPageIn 0.4s ease both; } @keyframes dgPageIn { from { opacity: 0; } to { opacity: 1; } } /* ── UI PASS 3: GRID HERO — TYPED SUBTITLE ── */ .dg-grid-sub .dg-typed-cursor { display: inline-block; width: 2px; height: 1em; background: var(--amber); margin-left: 2px; animation: dgBlink 1s step-end infinite; vertical-align: text-bottom; } @keyframes dgBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } } /* ── UI PASS 3: GRID HERO — STAT PILLS ── */ .dg-hero-stats { display: flex; justify-content: center; gap: 12px; margin-top: 20px; } .dg-hero-stat { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--card); border: 1px solid var(--line); padding: 8px 16px; border-radius: 40px; } .dg-hero-stat-dot { width: 6px; height: 6px; border-radius: 50%; } /* ── UI PASS 3: PROFILE — BREADCRUMB TRAIL ── */ .dg-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); margin-bottom: 4px; } .dg-breadcrumb a { color: var(--muted) !important; transition: color 0.15s; } .dg-breadcrumb a:hover { color: var(--ink) !important; text-decoration: underline !important; } .dg-breadcrumb-sep { opacity: 0.5; } /* ── UI PASS 3: PROFILE — INFO BAR BELOW HERO ── */ .dg-info-bar { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); margin-bottom: 4px; flex-wrap: wrap; } .dg-info-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--muted); } .dg-info-chip svg { width: 14px; height: 14px; opacity: 0.6; } /* ── UI PASS 3: PROFILE — FLOATING ACTION BAR ── */ .dg-fab { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); z-index: 200; display: flex; gap: 8px; padding: 12px 20px; background: var(--ink); border-radius: 48px; box-shadow: 0 8px 32px rgba(0,0,0,0.25); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); } .dg-fab.visible { transform: translateX(-50%) translateY(0); } .dg-fab-btn { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); padding: 10px 18px; border-radius: 24px; transition: all 0.15s; white-space: nowrap; cursor: pointer; background: transparent; border: none; font-family: 'DM Sans', sans-serif !important; } .dg-fab-btn:hover { color: #fff; background: rgba(255,255,255,0.1); } #dg.dark .dg-fab { background: var(--card); border: 1px solid var(--line); } #dg.dark .dg-fab-btn { color: var(--muted); } #dg.dark .dg-fab-btn:hover { color: var(--ink); background: rgba(255,255,255,0.05); } @media (max-width: 480px) { .dg-fab { bottom: 16px; padding: 8px 12px; } .dg-fab-btn { font-size: 11px; padding: 10px 16px; } } /* ── UI PASS 3: GRID — CATEGORY COLOR DOT ON CARD ── */ .dg-card-cat-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: middle; } /* ── UI PASS 3: PROFILE — SECTION COLLAPSE ── */ .dg-section-toggle { cursor: pointer; user-select: none; } .dg-section-toggle .dg-section-chevron { font-size: 10px; color: var(--muted); transition: transform 0.2s; margin-left: 6px; } .dg-section-toggle.collapsed .dg-section-chevron { transform: rotate(-90deg); } .dg-section-content { transition: max-height 0.3s ease, opacity 0.3s ease; overflow: hidden; } .dg-section-content.collapsed { max-height: 0 !important; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; } /* ── UI PASS 3: USER PROFILE — LEVEL PROGRESS ── */ .dgup-level { display: flex; align-items: center; gap: 14px; padding: 20px 24px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-top: 20px; } .dgup-level-badge { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; border: 2px solid var(--green-b); background: var(--green-bg); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); cursor: default; } .dgup-level-badge:hover { transform: rotate(10deg) scale(1.1); } .dgup-level-info { flex: 1; } .dgup-level-name { font-size: 14px; font-weight: 700; color: var(--ink); } .dgup-level-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } .dgup-level-bar { height: 8px; background: var(--line); border-radius: 3px; margin-top: 10px; overflow: hidden; } .dgup-level-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--green) 0%, #34d399 40%, var(--amber) 100%); transition: width 0.8s cubic-bezier(0.22,1,0.36,1); } .dgup-level-xp { font-size: 10px; color: var(--muted); margin-top: 4px; text-align: right; font-variant-numeric: tabular-nums; } /* ── UI PASS 3: USER PROFILE — EXPLORE SUGGESTIONS ── */ .dgup-explore { margin-top: 16px; } .dgup-explore-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; } .dgup-explore-card { flex-shrink: 0; width: 160px; border-radius: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--line); cursor: pointer; transition: all 0.25s ease; margin-bottom: 4px; } .dgup-explore-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); } .dgup-explore-img { height: 100px; background-size: cover; background-position: center; background-color: var(--faint); } .dgup-explore-body { padding: 10px 14px; } .dgup-explore-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dgup-explore-type { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; } .dgup-explore-scroll::-webkit-scrollbar { height: 3px; } .dgup-explore-scroll::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 3px; } /* ── POLISH 2: NEW BADGE GLOW ── */ #dg .dg-new-badge { animation: dgNewPulse 1.5s ease infinite; } @keyframes dgNewPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(14,122,84,0.4); } 50% { box-shadow: 0 0 0 6px rgba(14,122,84,0); } } /* ── POLISH 2: HEART ANIMATION (canonical in Round 24) ── */ #dg .dg-fav-btn.pop { animation: dgHeartPop 0.35s cubic-bezier(0.34,1.56,0.64,1); } /* ── POLISH 2: SCROLL PROGRESS BAR ── */ #dg .dg-progress { background: linear-gradient(90deg, var(--green), #b27300) !important; height: 3px !important; opacity: 0.8; } /* ── POLISH 2: OPEN NOW PILL PULSE ── */ #dg .dg-pill-open::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: dgOpenPulse 1.5s ease infinite; margin-right: 0; } @keyframes dgOpenPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } /* ── POLISH 2: STICKY HEADER WITH BLUR ── */ #dg .dg-hdr { position: sticky !important; top: 0 !important; z-index: 100 !important; background: rgba(255,255,255,0.85) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom: 1px solid var(--line); } #dg.dark .dg-hdr { background: rgba(15,15,15,0.85) !important; } /* ── POLISH 2: EMPTY CARD IMAGE — INITIAL LETTER ── */ #dg .dg-card-img-empty { font-size: 0 !important; } #dg .dg-card-img-empty::after { font-size: 36px !important; opacity: 0.15 !important; font-family: 'Bebas Neue', sans-serif !important; content: attr(data-initial) !important; } /* ── POLISH 2: GALLERY SCROLL SNAP ── */ #dg .dg-gallery { scroll-snap-type: x mandatory; } #dg .dg-gimg { scroll-snap-align: center; } /* ── POLISH 2: PROFILE HERO GRADIENT ── */ #dg .dg-hero-grad { background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.78) 100%) !important; } #dg.dark .dg-hero-grad { background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.85) 100%) !important; } /* ── POLISH 2: STRONGER TODAY HIGHLIGHT ── */ #dg .dg-hrs tr.today td, #dg .dg-hrs tr.dg-hrs-today td { background: rgba(178,115,0,0.06) !important; } #dg .dg-hrs tr.today td:first-child, #dg .dg-hrs tr.dg-hrs-today td:first-child { color: var(--amber) !important; font-weight: 700 !important; } /* ── POLISH 2: AUTH STEP INDICATOR ── */ .dg-auth-step { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 20px; } .dg-auth-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: all 0.3s; } .dg-auth-step-dot.active { background: var(--ink); width: 24px; border-radius: 4px; } /* ── POLISH 2: AUTH SOCIAL PROOF ── */ .dg-auth-proof { display: flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); } .dg-auth-proof-avatars { display: flex; } .dg-auth-proof-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--faint); border: 2px solid var(--bg); margin-left: -8px; display: flex; align-items: center; justify-content: center; font-size: 10px; } .dg-auth-proof-avatar:first-child { margin-left: 0; } .dg-auth-proof-text { font-size: 12px; color: var(--muted); align-self: center; } .dg-auth-proof-text strong { color: var(--ink); } #dg.dark .dg-auth-proof-avatar { border-color: var(--card); } #dg.dark .dgup-streak-dot.active { box-shadow: 0 0 8px rgba(52,211,153,0.3); } #dg.dark .dgup-level-fill { background: linear-gradient(90deg, #34d399 0%, #34d399 40%, #fbbf24 100%); } #dg.dark .dgup-stamp.collected { box-shadow: 0 0 8px rgba(52,211,153,0.3); } #dg.dark .dgup-claim-btn { background: #fbbf24; color: #111; } #dg.dark .dgup-redeem-btn { background: var(--ink); color: var(--bg); } /* ── POLISH 2: INPUT VALID STATE ── */ .dg-auth-input.valid { border-color: var(--green) !important; } .dg-auth-input-check { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--green); font-size: 14px; font-weight: 700; opacity: 0; transition: opacity 0.2s; pointer-events: none; } .dg-auth-input.valid ~ .dg-auth-input-check { opacity: 1; } /* ── POLISH 2: SEARCH SUGGESTIONS KEYBOARD NAV ── */ .dg-suggestion.highlighted { background: var(--faint) !important; } /* ── POLISH 2: CARD HOVER BORDER ── */ #dg .dg-card { border-color: var(--line) !important; transition: all 0.25s cubic-bezier(0.22,1,0.36,1) !important; } #dg .dg-card:hover { border-color: rgba(0,0,0,0.08) !important; } #dg.dark .dg-card:hover { border-color: rgba(255,255,255,0.08) !important; } /* ── POLISH 2: GRID HERO ANIMATED COUNTER ── */ #dg .dg-grid-count { font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.02em; } /* ── POLISH 2: REPORT LINK ── */ #dg .dg-report-link { font-size: 11px !important; letter-spacing: 0.04em; opacity: 0.5; transition: all 0.2s ease; } #dg .dg-report-link:hover { opacity: 1; } /* ── POLISH 2: HEADER BUTTON ACTIVE STATE ── */ #dg .dg-hdr-btn:active { transform: scale(0.95); } /* ── POLISH 2: RECENTLY VIEWED HOVER ── */ #dg .dg-recent-item { box-shadow: 0 1px 3px rgba(0,0,0,0.04); } #dg .dg-recent-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); } /* ── POLISH 2: FILTER PILL TRANSITIONS ── */ #dg .dg-filter-pill { transition: all 0.2s cubic-bezier(0.22,1,0.36,1) !important; } #dg .dg-filter-pill:active { transform: scale(0.95) !important; } #dg .dg-filter-pill.active { box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; } /* ── USER PROFILE VIEW ── */ #dg-user-profile { display: none; max-width: 600px; margin: 0 auto; padding: 0 24px; animation: dgPageIn 0.4s ease both; } /* User card */ .dgup-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; padding: 32px 36px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; margin-top: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); } .dgup-avatar { width: 64px; height: 64px; border-radius: 50%; background: #ffffff; color: var(--card); display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif !important; font-size: 28px; letter-spacing: 0.02em; flex-shrink: 0; } .dgup-info { flex: 1; min-width: 0; text-align: center; } .dgup-name { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.2; } .dgup-email { font-size: 13px; color: var(--muted); margin-top: 2px; } .dgup-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); background: var(--green-bg); border: 1px solid var(--green-b); padding: 4px 12px; border-radius: 20px; } /* Stats row */ .dgup-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; } .dgup-stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 18px; text-align: center; } .dgup-stat-num { font-family: 'Bebas Neue', sans-serif !important; font-size: 32px; color: var(--ink); line-height: 1; letter-spacing: 0.02em; } .dgup-stat-label { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 6px; } /* Sections */ .dgup-sec { margin-top: 36px; } .dgup-sec-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .dgup-sec-title { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .dgup-sec-count { font-size: 11px; color: var(--muted); font-weight: 500; } /* Favorites grid */ .dgup-fav-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .dgup-fav-card { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; transition: all 0.25s ease; } .dgup-fav-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); border-color: var(--faint); } .dgup-fav-img { width: 48px; height: 48px; border-radius: 10px; background-size: cover; background-position: center; background-color: var(--faint); flex-shrink: 0; } .dgup-fav-info { flex: 1; min-width: 0; } .dgup-fav-name { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dgup-fav-type { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .dgup-fav-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .dgup-fav-remove { font-size: 14px; color: var(--muted); cursor: pointer; padding: 4px; transition: opacity 0.2s, color 0.15s; flex-shrink: 0; opacity: 0; } .dgup-fav-card:hover .dgup-fav-remove { opacity: 1; } .dgup-fav-remove:hover { color: var(--red); } /* Recent list */ .dgup-recent-list { display: flex; flex-direction: column; gap: 8px; } .dgup-recent-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: all 0.15s; } .dgup-recent-item:hover { background: var(--faint); } .dgup-recent-img { width: 40px; height: 40px; border-radius: 8px; background-size: cover; background-position: center; background-color: var(--faint); flex-shrink: 0; } .dgup-recent-name { font-size: 14px; font-weight: 500; color: var(--ink); flex: 1; } .dgup-recent-time { font-size: 11px; color: var(--muted); flex-shrink: 0; } /* Reactions summary */ .dgup-reactions { display: flex; gap: 10px; flex-wrap: wrap; } .dgup-react-pill { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; font-size: 14px; transition: all 0.15s ease; cursor: pointer; } .dgup-react-pill:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .dgup-react-count { font-size: 12px; font-weight: 700; color: var(--ink); } /* Empty state */ .dgup-empty { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 14px; line-height: 1.6; } .dgup-empty-icon { font-size: 32px; opacity: 0.3; margin-bottom: 8px; } /* Sign out */ .dgup-signout { display: block; width: 100%; padding: 14px; font-size: 13px; font-weight: 600; color: var(--red); background: transparent; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; transition: all 0.2s; margin-top: 48px; text-align: center; font-family: 'DM Sans', sans-serif !important; } .dgup-signout:hover { border-color: var(--red); background: rgba(192,57,43,0.06); } /* Dark mode */ #dg.dark .dgup-card { box-shadow: 0 2px 8px rgba(0,0,0,0.2); } #dg.dark .dgup-fav-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.3); } #dg.dark .dgup-avatar { background: #ffffff; color: var(--bg); } #dg.dark .dgup-explore-card { box-shadow: 0 2px 8px rgba(0,0,0,0.3); border-color: var(--line); } #dg.dark .dgup-explore-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.4); } #dg.dark .dgup-recent-item { border-color: var(--line); } #dg.dark .dgup-action:hover { background: var(--card); } /* ── AVATAR DISPLAY ── */ .dgup-avatar-wrap { position: relative; width: 80px; height: 80px; flex-shrink: 0; } .dgup-avatar-layers { position: relative; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 4px solid var(--card); box-shadow: 0 2px 12px rgba(0,0,0,0.12); background: var(--faint); } .dgup-avatar-layers img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .dgup-avatar-edit-badge { position: absolute; bottom: -4px; right: -4px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--card); display: flex; align-items: center; justify-content: center; font-size: 11px; border: 2px solid var(--card); cursor: pointer; transition: transform 0.15s; } .dgup-avatar-edit-badge:hover { transform: scale(1.15); } /* Avatar full preview (modal) */ .dgup-avatar-preview { position: relative; width: 200px; height: 200px; margin: 0 auto 20px; border-radius: 20px; overflow: hidden; background: var(--faint); box-shadow: 0 8px 32px rgba(0,0,0,0.12); } .dgup-avatar-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Avatar editor modal */ .dgup-avatar-modal { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .dgup-avatar-modal.open { display: flex; align-items: center; justify-content: center; } .dgup-avatar-editor { background: var(--bg); border-radius: 20px; max-width: 480px; width: 90%; max-height: 85vh; overflow-y: auto; padding: 32px; position: relative; animation: dgAuthFadeIn 0.3s ease; } .dgup-editor-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--faint); display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; color: var(--muted); transition: all 0.15s; border: none; } .dgup-editor-close:hover { background: var(--line); color: var(--ink); } .dgup-editor-title { font-family: 'Bebas Neue', sans-serif !important; font-size: 24px; letter-spacing: 0.02em; color: var(--ink); margin-bottom: 8px; } .dgup-editor-sub { font-size: 12px; color: var(--muted); margin-bottom: 20px; } .dgup-editor-keys { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-b); padding: 4px 12px; border-radius: 20px; margin-bottom: 16px; } /* Layer tabs */ .dgup-layer-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 16px; -webkit-overflow-scrolling: touch; } .dgup-layer-tabs::-webkit-scrollbar { height: 2px; } .dgup-layer-tabs::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 2px; } .dgup-layer-tab { font-size: 11px; font-weight: 600; color: var(--muted); padding: 8px 12px; border-radius: 8px; white-space: nowrap; cursor: pointer; transition: all 0.15s; flex-shrink: 0; background: transparent; border: 1px solid transparent; font-family: 'DM Sans', sans-serif !important; } .dgup-layer-tab:hover { background: var(--faint); color: var(--ink); } .dgup-layer-tab.active { background: var(--ink); color: var(--card); border-color: var(--ink); } /* Asset grid */ .dgup-asset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .dgup-asset-item { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); cursor: pointer; transition: all 0.2s; background: var(--faint); line-height: 1.2; } .dgup-asset-item:hover { border-color: var(--ink); transform: scale(1.04); } .dgup-asset-item.equipped { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-b); } .dgup-asset-item.locked { opacity: 0.45; } .dgup-asset-item img { width: 100%; height: 100%; object-fit: cover; } .dgup-asset-item-info { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.7)); padding: 8px 8px; } .dgup-asset-item-name { font-size: 11px; font-weight: 700; color: #fff; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 4px rgba(0,0,0,0.4); } .dgup-asset-item-cost { font-size: 9px; color: rgba(255,255,255,0.7); } .dgup-asset-item-owned { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 2px 8px rgba(14,122,84,0.3); } .dgup-asset-rarity { position: absolute; top: 6px; left: 6px; font-size: 8px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; color: #fff; backdrop-filter: blur(4px); } .dgup-rarity-common { background: #6b6b6b; } .dgup-rarity-rare { background: #2563eb; } .dgup-rarity-epic { background: #7c3aed; } .dgup-rarity-legendary { background: #f59e0b; } /* Code redeem */ .dgup-redeem { display: flex; gap: 8px; margin-top: 16px; } .dgup-redeem-input { flex: 1; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font-size: 13px; font-family: 'DM Sans', sans-serif !important; outline: none; text-transform: uppercase; letter-spacing: 0.08em; } .dgup-redeem-input:focus { border-color: var(--ink); } .dgup-redeem-btn { padding: 12px 20px; background: var(--ink); color: var(--card); border: none; border-radius: 12px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif !important; transition: all 0.15s; white-space: nowrap; } .dgup-redeem-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } #dg.dark .dgup-avatar-editor { background: var(--bg); border: 1px solid var(--line); } #dg.dark .dgup-avatar-layers { border-color: var(--card); } @media (max-width: 480px) { .dgup-asset-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .dgup-avatar-preview { width: 160px; height: 160px; } .dgup-avatar-editor { padding: 20px; } } /* ── PROFILE: ACTIVITY STREAK ── */ .dgup-streak { display: flex; align-items: center; gap: 16px; padding: 18px 24px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-top: 16px; } .dgup-streak-fire { font-size: 28px; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); } .dgup-streak:hover .dgup-streak-fire { transform: scale(1.15) rotate(8deg); } .dgup-streak-info { flex: 1; } .dgup-streak-num { font-family: 'Bebas Neue', sans-serif !important; font-size: 24px; color: var(--ink); line-height: 1; } .dgup-streak-label { font-size: 11px; color: var(--muted); margin-top: 4px; letter-spacing: 0.04em; } .dgup-streak-bar { display: flex; gap: 4px; margin-top: 8px; } .dgup-streak-dot { width: 28px; height: 6px; border-radius: 3px; background: var(--line); } .dgup-streak-dot.active { background: var(--green); box-shadow: 0 0 6px rgba(14,122,84,0.3); } .dgup-streak-dot.today { background: var(--amber); animation: dgStampPulse 1.5s ease infinite; } /* ── PROFILE: ACHIEVEMENTS/MILESTONES ── */ .dgup-achievements { display: flex; gap: 12px; flex-wrap: wrap; } .dgup-achievement { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; flex: 1; min-width: 140px; } .dgup-achievement-icon { font-size: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .dgup-achievement-info { flex: 1; min-width: 0; } .dgup-achievement-name { font-size: 12px; font-weight: 700; color: var(--ink); } .dgup-achievement-desc { font-size: 10px; color: var(--muted); margin-top: 4px; } .dgup-achievement.locked { opacity: 0.35; filter: grayscale(1); } .dgup-achievement.earned { border-color: var(--green-b); background: var(--green-bg); } .dgup-achievement.claimable { border-color: var(--amber-b); background: var(--amber-bg); animation: dgNewPulse 2s ease infinite; cursor: pointer; } .dgup-achievement.claimable:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(178,115,0,0.15); } .dgup-claim-btn { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 12px; border-radius: 6px; background: var(--amber); color: #fff; border: none; cursor: pointer; margin-top: 4px; font-family: 'DM Sans', sans-serif !important; transition: all 0.15s; } .dgup-claim-btn:hover { filter: brightness(1.1); transform: translateY(-1px); } /* ── PROFILE: CATEGORY BREAKDOWN ── */ .dgup-cats { display: flex; flex-direction: column; gap: 8px; } .dgup-cat-row { display: flex; align-items: center; gap: 12px; } .dgup-cat-label { font-size: 12px; font-weight: 700; color: var(--ink); width: 100px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; } .dgup-cat-bar-wrap { flex: 1; height: 6px; background: var(--line); border-radius: 4px; overflow: hidden; } .dgup-cat-bar { height: 100%; border-radius: 4px; transition: width 0.6s cubic-bezier(0.22,1,0.36,1); } .dgup-cat-count { font-size: 11px; color: var(--muted); width: 20px; text-align: left; flex-shrink: 0; font-variant-numeric: tabular-nums; } /* ── PROFILE: QUICK ACTIONS ── */ .dgup-actions { display: flex; gap: 14px; margin-top: 28px; } .dgup-action { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; transition: all 0.2s; font-size: 12px; font-weight: 600; color: var(--muted); } .dgup-action:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .dgup-action-icon { font-size: 24px; } #dg.dark .dgup-action:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3); } /* ── PROFILE: MEMBER SINCE ── */ .dgup-member-since { font-size: 11px; color: var(--muted); text-align: center; margin-top: 16px; letter-spacing: 0.04em; } /* ── PROFILE: SECTION STAGGER ── */ #dg-user-profile .dgup-sec, #dg-user-profile .dgup-stats, #dg-user-profile .dgup-streak, #dg-user-profile .dgup-actions { animation: dgSectionIn 0.5s ease both; } #dg-user-profile .dgup-stats { animation-delay: 0.05s; } #dg-user-profile .dgup-streak { animation-delay: 0.1s; } #dg-user-profile .dgup-actions { animation-delay: 0.15s; } #dg-user-profile #dgup-favs-sec { animation-delay: 0.2s; } #dg-user-profile #dgup-cats-sec { animation-delay: 0.25s; } #dg-user-profile #dgup-achievements-sec { animation-delay: 0.3s; } #dg-user-profile #dgup-recent-sec { animation-delay: 0.35s; } #dg-user-profile #dgup-reactions-sec { animation-delay: 0.4s; } /* Mobile */ @media (max-width: 600px) { .dgup-stats { grid-template-columns: repeat(2, 1fr); } .dgup-fav-grid { grid-template-columns: 1fr; } .dgup-card { padding: 20px; gap: 16px; } .dgup-avatar { width: 52px; height: 52px; font-size: 24px; } .dgup-name { font-size: 18px; } .dgup-actions { flex-wrap: wrap; } .dgup-action { min-width: calc(50% - 5px); } .dgup-achievement { min-width: calc(50% - 6px); } .dgup-cat-label { width: 80px; font-size: 11px; } .dgup-streak-dot { width: 22px; } } /* Header profile avatar */ .dg-hdr-avatar { width: 28px; height: 28px; border-radius: 50%; background: #ffffff; color: var(--card); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s; flex-shrink: 0; font-family: 'Bebas Neue', sans-serif !important; } .dg-hdr-avatar:hover { transform: scale(1.1); box-shadow: 0 2px 8px rgba(0,0,0,0.15); } #dg.dark .dg-hdr-avatar { background: #ffffff; color: var(--bg); } /* ── QOL 1: USER PROFILE COVER GRADIENT ── */ .dgup-cover { height: 128px; border-radius: 18px; margin-top: 16px; background: linear-gradient(135deg, #111 0%, #333 50%, #111 100%); position: relative; overflow: hidden; } .dgup-cover::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 50%, rgba(14,122,84,0.2) 0%, transparent 60%), radial-gradient(circle at 70% 50%, rgba(178,115,0,0.15) 0%, transparent 60%); opacity: 0.8; } #dg.dark .dgup-cover { background: linear-gradient(135deg, #0f0f0f 0%, #1e1e1e 50%, #0f0f0f 100%); } #dg.dark .dgup-cover::before { opacity: 0.6; } .dgup-card { margin-top: -32px !important; position: relative; z-index: 1; } /* ── QOL 1: USER PROFILE AVATAR RING ── */ .dgup-avatar { border: 3px solid var(--card); box-shadow: 0 2px 8px rgba(0,0,0,0.1); } /* ── QOL 1: USER PROFILE EDIT NAME ── */ .dgup-name-edit { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .dgup-name-edit:hover .dgup-edit-icon { opacity: 1; } .dgup-edit-icon { font-size: 12px; color: var(--muted); opacity: 0; transition: opacity 0.2s; } /* ── QOL 1: STAT HOVER ── */ .dgup-stat { transition: all 0.2s ease; cursor: default; } .dgup-stat:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); } #dg.dark .dgup-stat:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3); } /* ── QOL 1: FAVORITES EMPTY CTA ── */ .dgup-empty-cta { display: inline-block; margin-top: 12px; padding: 10px 24px; font-size: 13px; font-weight: 600; color: var(--card); background: var(--ink); border-radius: 40px; transition: all 0.2s; } .dgup-empty-cta:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } /* ── QOL 1: GRID — OPEN NOW FILTER PILL DOT ── */ .dg-filter-pill[data-filter="Open Now"]::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 8px; vertical-align: middle; } .dg-filter-pill[data-filter="Open Now"].active::before { background: #fff; } /* ── QOL 1: PROFILE — COPY NAME TOOLTIP ── */ #dg #dg-name { position: relative; } #dg #dg-name::after { content: 'Click to copy'; position: absolute; bottom: -24px; left: 0; font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.6); letter-spacing: 0.04em; opacity: 0; transition: opacity 0.2s; pointer-events: none; font-family: 'DM Sans', sans-serif !important; text-transform: none; } #dg #dg-name:hover::after { opacity: 1; } /* ── QOL 1: PROFILE — LOCATION CARD IMPROVED ── */ #dg .dg-loc { position: relative; } .dg-copy-hint { font-size: 10px; color: var(--muted); opacity: 0.5; margin-left: 4px; transition: opacity 0.2s; } .dg-address-text:hover .dg-copy-hint { opacity: 1; } /* ── QOL 1: PROFILE — OFFER CARD BADGE ── */ .dg-offer-badge { display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 8px; margin-top: 6px; margin-left: 8px; vertical-align: middle; } .dg-offer-badge-active { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-b); } .dg-offer-badge-expired { background: rgba(192,57,43,0.08); color: var(--red); border: 1px solid rgba(192,57,43,0.2); } /* ── QOL 1: PROFILE — PRODUCT PRICE STYLING ── */ #dg .dg-product-price { background: var(--green-bg); padding: 2px 10px; border-radius: 20px; font-size: 13px; border: 1px solid var(--green-b); } /* ── QOL 1: GRID — DISTANCE SORT OPTION ── */ /* (handled in JS — adding "Nearest" option to sort dropdown) */ /* ── QOL 1: LIGHTBOX IMPROVEMENTS ── */ .dg-lightbox img { transition: transform 0.3s ease; } .dg-lightbox img:hover { transform: scale(1.02); } .dg-lightbox button { transition: all 0.2s; } .dg-lightbox button:hover { background: rgba(255,255,255,0.25) !important; transform: translateY(-50%) scale(1.1) !important; } /* ── QOL 1: AUTH — PASSWORD STRENGTH INDICATOR ── */ .dg-pass-strength { height: 3px; border-radius: 3px; margin-top: 6px; transition: all 0.3s; background: var(--line); overflow: hidden; } .dg-pass-strength-bar { height: 100%; border-radius: 3px; transition: all 0.25s ease; width: 0; } .dg-pass-strength-bar.weak { width: 33%; background: var(--red); } .dg-pass-strength-bar.medium { width: 66%; background: var(--amber); } .dg-pass-strength-bar.strong { width: 100%; background: var(--green); } .dg-pass-strength-text { font-size: 10px; margin-top: 3px; font-weight: 600; letter-spacing: 0.04em; transition: color 0.2s; } /* ── QOL 1: GRID — CARD IMAGE ERROR FALLBACK ── */ .dg-card-img.img-error { background-image: none !important; background: linear-gradient(135deg, var(--faint) 0%, rgba(178,115,0,0.06) 100%) !important; } .dg-card-img.img-error::before { content: attr(data-name); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif !important; font-size: 24px; color: var(--muted); opacity: 0.2; z-index: 0; } /* ── QOL 1: SHARE SHEET STYLES ── */ .dg-share-sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: var(--card); border-top: 1px solid var(--line); border-radius: 20px 20px 0 0; padding: 24px; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); box-shadow: 0 -8px 32px rgba(0,0,0,0.15); } .dg-share-sheet.open { transform: translateY(0); } .dg-share-sheet-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.3s; pointer-events: none; } .dg-share-sheet-overlay.open { opacity: 1; pointer-events: auto; } .dg-share-sheet-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 16px; text-align: center; } .dg-share-options { display: flex; justify-content: center; gap: 24px; } .dg-share-option { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: transform 0.15s; } .dg-share-option:hover { transform: translateY(-2px); } .dg-share-option-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--faint); display: flex; align-items: center; justify-content: center; font-size: 22px; } .dg-share-option-label { font-size: 11px; font-weight: 600; color: var(--muted); } /* ── QOL 1: MAP PAGE — SIDEBAR STATUS ── */ .dgm-sidebar-status { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; margin-top: 2px; } .dgm-sidebar-status-dot { width: 6px; height: 6px; border-radius: 50%; } /* ── POLISH 2: PROFILE SECTION STAGGER ── */ #dg #dg-offers-sec, #dg #dg-products-sec, #dg #dg-stamps-sec, #dg #dg-about-sec, #dg #dg-loc-sec, #dg #dg-hours-sec, #dg #dg-menu-sec, #dg #dg-photos-sec, #dg #dg-related-sec { animation: dgSectionIn 0.5s ease both; } #dg #dg-offers-sec { animation-delay: 0.05s; } #dg #dg-products-sec { animation-delay: 0.1s; } #dg #dg-stamps-sec { animation-delay: 0.15s; } #dg #dg-about-sec { animation-delay: 0.2s; } #dg #dg-loc-sec { animation-delay: 0.25s; } #dg #dg-hours-sec { animation-delay: 0.3s; } #dg #dg-menu-sec { animation-delay: 0.35s; } #dg #dg-photos-sec { animation-delay: 0.4s; } #dg #dg-related-sec { animation-delay: 0.45s; } @keyframes dgSectionIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ── FEATURE: OFFER COUNTDOWN ── */ .dg-offer-countdown { font-size: 11px; color: var(--amber); font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; } /* ── FEATURE: HOURS COUNTDOWN ── */ .dg-hours-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px; margin-top: 8px; } .dg-hours-live-open { color: var(--green); background: var(--green-bg); border: 1px solid var(--green-b); } .dg-hours-live-closed { color: var(--red); background: rgba(192,57,43,0.08); border: 1px solid rgba(192,57,43,0.2); } /* ── FEATURE: LEVEL UP CELEBRATION ── */ .dg-levelup-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: dgFadeIn 0.3s ease; } .dg-levelup-card { text-align: center; background: var(--card); border-radius: 24px; padding: 48px 40px; max-width: 340px; width: 90%; box-shadow: 0 16px 48px rgba(0,0,0,0.2); animation: dgLevelUpIn 0.5s cubic-bezier(0.34,1.56,0.64,1); } @keyframes dgLevelUpIn { from { transform: scale(0.8) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .dg-levelup-icon { font-size: 56px; margin-bottom: 16px; } .dg-levelup-title { font-family: 'Bebas Neue', sans-serif !important; font-size: 36px; letter-spacing: 0.02em; color: var(--ink); margin-bottom: 8px; } .dg-levelup-sub { font-size: 14px; color: var(--muted); margin-bottom: 24px; } .dg-levelup-btn { padding: 14px 32px; background: var(--ink); color: var(--card); border: none; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif !important; transition: all 0.2s; } .dg-levelup-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } /* ── FEATURE: RARITY FILTER TABS ── */ .dgup-rarity-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } .dgup-rarity-tab { font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 8px; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--muted); transition: all 0.15s; text-transform: uppercase; letter-spacing: 0.04em; } .dgup-rarity-tab:hover { border-color: var(--ink); color: var(--ink); } .dgup-rarity-tab.active { background: var(--ink); color: var(--card); border-color: var(--ink); } /* ── FEATURE: FRIENDS LIST ── */ .dgup-friends-grid { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; } .dgup-friend-card { flex-shrink: 0; width: 80px; text-align: center; cursor: pointer; transition: all 0.2s; } .dgup-friend-card:hover { transform: translateY(-2px); } .dgup-friend-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; position: relative; margin: 0 auto 6px; border: 2px solid var(--line); background: var(--faint); } .dgup-friend-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .dgup-friend-name { font-size: 10px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dgup-friend-level { font-size: 9px; color: var(--muted); } .dgup-friend-add { padding: 8px 20px; font-size: 12px; font-weight: 700; background: var(--ink); color: var(--card); border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-family: 'DM Sans', sans-serif !important; } .dgup-friend-add:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .dgup-friend-pending { padding: 8px 20px; font-size: 12px; font-weight: 600; color: var(--muted); border: 1.5px solid var(--line); border-radius: 8px; background: transparent; cursor: default; } .dgup-friend-req { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; } .dgup-friend-req-name { font-size: 13px; font-weight: 600; color: var(--ink); flex: 1; } .dgup-friend-req-btns { display: flex; gap: 6px; } .dgup-friend-req-btn { padding: 6px 14px; font-size: 11px; font-weight: 700; border-radius: 8px; cursor: pointer; border: none; transition: all 0.15s; font-family: 'DM Sans', sans-serif !important; } .dgup-friend-accept { background: var(--green); color: #fff; } .dgup-friend-decline { background: var(--faint); color: var(--muted); } /* ── FEATURE: LEADERBOARD ── */ .dgup-lb-list { display: flex; flex-direction: column; gap: 8px; } .dgup-lb-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: all 0.2s; } .dgup-lb-item:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .dgup-lb-rank { font-family: 'Bebas Neue', sans-serif !important; font-size: 20px; color: var(--muted); width: 28px; text-align: center; flex-shrink: 0; } .dgup-lb-rank-1 { color: #f59e0b; } .dgup-lb-rank-2 { color: #94a3b8; } .dgup-lb-rank-3 { color: #b45309; } .dgup-lb-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; position: relative; flex-shrink: 0; background: var(--faint); border: 2px solid var(--line); } .dgup-lb-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .dgup-lb-info { flex: 1; min-width: 0; } .dgup-lb-name { font-size: 14px; font-weight: 700; color: var(--ink); } .dgup-lb-xp { font-size: 11px; color: var(--muted); } .dgup-lb-level { font-size: 11px; font-weight: 700; color: var(--amber); padding: 2px 8px; background: var(--amber-bg); border-radius: 8px; flex-shrink: 0; } /* ── FEATURE: AVATAR DISPLAY LARGE ── */ .dgup-avatar-large { width: 160px; height: 160px; border-radius: 24px; overflow: hidden; position: relative; margin: 0 auto 16px; background: var(--faint); border: 3px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .dgup-avatar-large img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ── FEATURE: ACHIEVEMENT SHOWCASE ── */ .dgup-showcase { display: flex; gap: 8px; margin-top: 8px; } .dgup-showcase-item { padding: 6px 12px; background: var(--green-bg); border: 1px solid var(--green-b); border-radius: 20px; font-size: 11px; font-weight: 600; color: var(--green); } /* ── FEATURE: BUSINESS OF THE WEEK ── */ .dg-featured-card { background: linear-gradient(135deg, var(--card) 0%, rgba(178,115,0,0.04) 100%); border: 2px solid var(--amber-b); border-radius: 16px; padding: 20px; margin-bottom: 20px; display: flex; gap: 16px; align-items: center; cursor: pointer; transition: all 0.25s ease; } .dg-featured-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .dg-featured-img { width: 80px; height: 80px; border-radius: 12px; background-size: cover; background-position: center; background-color: var(--faint); flex-shrink: 0; } .dg-featured-info { flex: 1; min-width: 0; } .dg-featured-label { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); margin-bottom: 4px; } .dg-featured-name { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 2px; } .dg-featured-type { font-size: 12px; color: var(--muted); } /* ── FEATURE: USERNAME DISPLAY ── */ .dgup-username { font-size: 12px; color: var(--muted); margin-top: 2px; } /* ── FEATURE: HAS OFFERS FILTER ── */ .dg-filter-pill[data-filter="Has Offers"]::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-right: 5px; vertical-align: middle; } /* ── ROUND 15: DESIGN OVERHAUL ── */ /* 1. Featured Card */ #dg .dg-featured-card { display: flex !important; overflow: hidden !important; border-radius: 16px !important; border: 1px solid var(--line) !important; background: var(--card) !important; margin-bottom: 24px !important; cursor: pointer !important; transition: transform 0.2s, box-shadow 0.2s !important; padding: 0 !important; } #dg .dg-featured-card:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important; } #dg .dg-featured-img { width: 45% !important; min-height: 180px !important; background-size: cover !important; background-position: center !important; flex-shrink: 0 !important; border-radius: 0 !important; } #dg .dg-featured-info { padding: 24px 28px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } #dg .dg-featured-label { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--amber) !important; margin-bottom: 8px !important; } #dg .dg-featured-name { font-size: 22px !important; font-weight: 800 !important; color: var(--ink) !important; line-height: 1.2 !important; } #dg .dg-featured-type { font-size: 13px !important; color: var(--muted) !important; margin-top: 4px !important; } #dg.dark .dg-featured-card { background: var(--card) !important; border-color: var(--line) !important; } #dg.dark .dg-featured-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important; } @media (max-width: 480px) { #dg .dg-featured-card { flex-direction: column !important; } #dg .dg-featured-img { width: 100% !important; min-height: 140px !important; } #dg .dg-featured-info { padding: 16px 20px !important; } } /* 2. Card Status Badge (restore visible text) */ #dg .dg-card-status { position: absolute !important; top: 12px !important; right: 12px !important; width: auto !important; height: auto !important; padding: 4px 10px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; border-radius: 6px !important; line-height: 1.3 !important; white-space: nowrap !important; z-index: 3 !important; border: none !important; } #dg .dg-card-status-open { background: var(--green) !important; color: #fff !important; } #dg .dg-card-status-closed { background: rgba(0,0,0,0.5) !important; color: rgba(255,255,255,0.8) !important; } #dg.dark .dg-card-status-open { background: var(--green) !important; } #dg.dark .dg-card-status-closed { background: rgba(255,255,255,0.15) !important; color: rgba(255,255,255,0.7) !important; } /* New badge — canonical at Round 24 (10px, amber, 12px radius) */ /* 4. Fav Button */ #dg .dg-fav-btn { position: absolute !important; top: 12px !important; left: 12px !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; background: rgba(255,255,255,0.85) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; cursor: pointer !important; transition: all 0.15s !important; color: var(--muted) !important; z-index: 2 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; padding: 0 !important; } #dg .dg-fav-btn:hover { transform: scale(1.1) !important; } #dg .dg-fav-btn.saved { color: var(--red) !important; } #dg.dark .dg-fav-btn { background: rgba(0,0,0,0.5) !important; color: var(--muted) !important; } #dg.dark .dg-fav-btn.saved { color: var(--red) !important; } /* 5. Card Arrow */ #dg .dg-card-arrow { width: 34px !important; height: 34px !important; border-radius: 50% !important; border: 1.5px solid var(--line) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; color: var(--muted) !important; background: transparent !important; flex-shrink: 0 !important; transition: all 0.2s !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; } #dg .dg-card:hover .dg-card-arrow { background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink) !important; transform: none !important; } /* 6. Card Type Label Pill */ #dg .dg-card-type { display: inline-block !important; padding: 3px 10px !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: var(--muted) !important; background: var(--faint) !important; border-radius: 6px !important; margin-bottom: 6px !important; } #dg .dg-card-type::after { display: none !important; } #dg.dark .dg-card-type { background: var(--faint) !important; color: var(--muted) !important; } /* 7. Filter Bar */ #dg .dg-filter-bar { padding: 0 0 16px !important; border-bottom: 1px solid var(--line) !important; margin-bottom: 20px !important; gap: 14px !important; } #dg .dg-filter-pill { padding: 7px 14px !important; border-radius: 20px !important; font-size: 13px !important; font-weight: 500 !important; border: 1.5px solid var(--line) !important; background: transparent !important; color: var(--muted) !important; } #dg .dg-filter-pill:hover { border-color: var(--ink) !important; color: var(--ink) !important; } #dg .dg-filter-pill.active { background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink) !important; } /* 8. Recently Viewed */ #dg .dg-recent-strip { margin-bottom: 16px !important; } #dg .dg-recent-label { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--muted) !important; margin-bottom: 10px !important; } #dg .dg-recent-item { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 6px 14px 6px 6px !important; border-radius: 24px !important; border: 1px solid var(--line) !important; background: var(--card) !important; font-size: 13px !important; font-weight: 500 !important; color: var(--ink) !important; transition: border-color 0.15s, box-shadow 0.15s !important; } #dg .dg-recent-item:hover { border-color: var(--ink) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; } #dg .dg-recent-item img { width: 28px !important; height: 28px !important; border-radius: 50% !important; } /* 9. Info Bar */ #dg #dg-info-bar { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 10px 0 !important; font-size: 13px !important; color: var(--muted) !important; } /* 10. Reactions */ #dg .dg-reactions { display: flex !important; gap: 8px !important; padding: 8px 0 !important; } #dg .dg-reaction-btn { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 6px 12px !important; border-radius: 20px !important; border: 1px solid var(--line) !important; background: var(--card) !important; font-size: 14px !important; cursor: pointer !important; transition: all 0.15s !important; } #dg .dg-reaction-btn:hover { border-color: var(--ink) !important; background: var(--faint) !important; } #dg .dg-reaction-btn.reacted { border-color: var(--ink) !important; background: var(--faint) !important; } /* 11. Quicknav */ #dg #dg-quicknav { display: flex !important; gap: 4px !important; padding: 10px 0 !important; border-bottom: 1px solid var(--line) !important; position: sticky !important; top: 0 !important; background: var(--bg) !important; z-index: 50 !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; } #dg #dg-quicknav::-webkit-scrollbar { display: none !important; } #dg .dg-quicknav-pill { padding: 6px 14px !important; font-size: 13px !important; font-weight: 500 !important; color: var(--muted) !important; border-radius: 8px !important; white-space: nowrap !important; cursor: pointer !important; transition: all 0.15s !important; border: none !important; background: transparent !important; } #dg .dg-quicknav-pill:hover, #dg .dg-quicknav-pill.active { background: var(--faint) !important; color: var(--ink) !important; } #dg.dark #dg-quicknav { background: var(--bg) !important; } /* 12. FAB Bar */ #dg .dg-fab { position: sticky !important; bottom: 16px !important; display: flex !important; justify-content: center !important; gap: 8px !important; padding: 10px 16px !important; background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 24px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important; z-index: 40 !important; width: fit-content !important; margin: 16px auto !important; transform: none !important; left: auto !important; } #dg .dg-fab.visible { transform: none !important; } #dg .dg-fab-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 8px 16px !important; border-radius: 20px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--ink) !important; background: transparent !important; border: none !important; cursor: pointer !important; transition: background 0.15s !important; white-space: nowrap !important; } #dg .dg-fab-btn:hover { background: var(--faint) !important; } #dg.dark .dg-fab { background: var(--card) !important; border-color: var(--line) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important; } /* 13. Offer Items */ #dg .dg-offer-card { display: flex !important; align-items: center !important; gap: 14px !important; padding: 14px 18px !important; border: 1px solid var(--line) !important; border-radius: 12px !important; background: var(--card) !important; margin-bottom: 8px !important; transition: border-color 0.15s !important; } #dg .dg-offer-card:hover { border-color: var(--ink) !important; transform: none !important; box-shadow: none !important; } /* 14. Product Items */ #dg .dg-product-item { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 18px !important; border: 1px solid var(--line) !important; border-radius: 12px !important; background: var(--card) !important; margin-bottom: 8px !important; } /* 15. Location Buttons */ #dg .dg-directions-link { padding: 12px 16px !important; border: 1.5px solid var(--line) !important; border-radius: 10px !important; background: transparent !important; font-size: 13px !important; font-weight: 600 !important; color: var(--ink) !important; cursor: pointer !important; text-align: center !important; transition: all 0.15s !important; display: block !important; width: auto !important; } #dg .dg-directions-link:hover { border-color: var(--ink) !important; background: var(--faint) !important; transform: none !important; opacity: 1 !important; } /* 16. Mini Map */ #dg #dg-mini-map { border-radius: 12px !important; overflow: hidden !important; border: 1px solid var(--line) !important; margin-top: 12px !important; height: 200px !important; } /* 17. Section Headers */ #dg .dg-section { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 14px !important; margin-top: 28px !important; } #dg .dg-section-title { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; color: var(--muted) !important; white-space: nowrap !important; } #dg .dg-section-line { flex: 1 !important; height: 1px !important; background: var(--line) !important; display: block !important; } /* 18. Related Grid */ #dg .dg-related-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; } #dg .dg-related-card { border: 1px solid var(--line) !important; border-radius: 12px !important; background: var(--card) !important; cursor: pointer !important; transition: border-color 0.15s, transform 0.2s !important; overflow: hidden !important; } #dg .dg-related-card:hover { border-color: var(--ink) !important; transform: translateY(-2px) !important; } /* 20. Menu Image */ #dg .dg-menu-img { cursor: zoom-in !important; border-radius: 12px !important; transition: opacity 0.2s !important; width: 100% !important; } #dg .dg-menu-img:hover { opacity: 0.9 !important; transform: none !important; } /* 21. Photos Grid */ #dg .dg-prod-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } #dg .dg-prod-img { aspect-ratio: 1/1 !important; border-radius: 12px !important; cursor: pointer !important; transition: opacity 0.15s !important; border: 1px solid var(--line) !important; } #dg .dg-prod-img:hover { opacity: 0.85 !important; transform: none !important; box-shadow: none !important; } /* 22. Header Buttons */ #dg .dg-hdr-btn { padding: 6px 14px !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 600 !important; border: 1px solid var(--line) !important; background: transparent !important; color: var(--ink) !important; cursor: pointer !important; transition: all 0.15s !important; letter-spacing: 0.02em !important; text-transform: none !important; } #dg .dg-hdr-btn:hover { border-color: var(--ink) !important; } /* ── ROUND 15B: CONSISTENCY PASS ── */ /* Cards: standardize to 12px radius, consistent shadow, hover border */ #dg .dg-card { border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; transition: all 0.2s cubic-bezier(0.22,1,0.36,1) !important; } #dg .dg-card:hover { border-color: var(--ink) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important; } #dg .dg-card-img, #dg .dg-card-img-empty { height: 160px !important; } #dg .dg-card-body { padding: 14px 18px 16px !important; } /* Hero: 12px radius */ #dg .dg-hero { border-radius: 12px !important; } /* Content cards: consistent padding + radius */ #dg .dg-desc { padding: 20px 24px !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important; } #dg .dg-hrs-card { padding: 20px 24px !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important; } #dg .dg-logo-wrap { padding: 20px 24px !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important; } /* Gallery thumbs: 1px border, 8px radius */ #dg .dg-gimg { border: 1px solid var(--line) !important; border-radius: 8px !important; border-width: 1px !important; } #dg .dg-gimg:hover, #dg .dg-gimg.active { border-color: var(--ink) !important; } /* Menu image: 12px */ #dg .dg-menu-img { border-radius: 12px !important; border: 1px solid var(--line) !important; } /* Skeleton: 12px */ #dg .dg-skeleton-card { border-radius: 12px !important; } #dg .dg-skel-img { height: 160px !important; } /* Related cards: 12px */ #dg .dg-related-card { border-radius: 12px !important; } /* Today badge letter-spacing */ #dg .dg-today-badge { letter-spacing: 1.5px !important; } /* Card desc standardize */ #dg .dg-card-desc { font-size: 12px !important; } /* Toast: keep pill shape but 20px */ #dg .dg-toast { border-radius: 20px !important; } /* Dark mode: content cards */ #dg.dark .dg-desc { box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important; } #dg.dark .dg-hrs-card { box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important; } #dg.dark .dg-logo-wrap { box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important; } #dg.dark .dg-offer-card:hover { border-color: var(--ink) !important; } #dg.dark .dg-product-item { border-color: var(--line) !important; } #dg.dark .dg-product-item:hover { border-color: var(--ink) !important; } #dg.dark .dg-related-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important; } #dg.dark .dg-gimg { border-color: var(--line) !important; } #dg.dark .dg-gimg:hover, #dg.dark .dg-gimg.active { border-color: var(--ink) !important; } /* Mobile: tighter padding */ @media (max-width: 480px) { #dg .dg-card-img, #dg .dg-card-img-empty { height: 140px !important; } #dg .dg-card-body { padding: 12px 16px 14px !important; } #dg .dg-desc, #dg .dg-hrs-card, #dg .dg-logo-wrap { padding: 16px 20px !important; border-radius: 10px !important; } #dg .dg-hdr-btn { padding: 6px 12px !important; font-size: 11px !important; } #dg .dg-filter-pill { padding: 6px 12px !important; font-size: 12px !important; } #dg .dg-hero { border-radius: 10px !important; } #dg .dg-fab { padding: 8px 12px !important; gap: 4px !important; } #dg .dg-fab-btn { padding: 6px 12px !important; font-size: 12px !important; } #dg .dg-related-grid { grid-template-columns: 1fr 1fr !important; } #dg .dg-featured-card { flex-direction: column !important; } #dg .dg-featured-img { width: 100% !important; min-height: 140px !important; } #dg .dg-featured-info { padding: 16px 20px !important; } } /* Tablet: intermediate */ @media (max-width: 768px) and (min-width: 481px) { #dg .dg-card-img, #dg .dg-card-img-empty { height: 148px !important; } #dg .dg-desc, #dg .dg-hrs-card, #dg .dg-logo-wrap { padding: 20px 24px !important; } #dg .dg-related-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } } /* ── SHOP PAGE REDESIGN ── */ /* Rarity CSS vars */ #dg { --rarity-common: #8b8b8b; --rarity-rare: #2563eb; --rarity-epic: #a855f7; --rarity-legendary: #d97706; } #dg.dark { --rarity-common: #aaa; --rarity-rare: #60a5fa; --rarity-epic: #c084fc; --rarity-legendary: #fbbf24; } /* Modal */ .dgup-avatar-modal { display: none; position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .dgup-avatar-modal.open { display: block; } /* Shop container */ .dg-shop { background: var(--bg); max-width: 520px; margin: 32px auto; border-radius: 24px; border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.06); overflow: hidden; animation: dgShopSlideUp 0.35s cubic-bezier(0.34,1.56,0.64,1); } @keyframes dgShopSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* Header — sticky glass */ .dg-shop-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(250,249,247,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 11; transition: box-shadow 0.2s; } .dg-shop-header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.06); } .dg-shop-title { font-family: 'Bebas Neue', sans-serif !important; font-size: 24px; letter-spacing: 0.06em; color: var(--ink); line-height: 1; text-transform: uppercase; } .dg-shop-sub { font-size: 12px; color: var(--muted); margin-top: 4px; letter-spacing: 0.02em; } .dg-shop-keys { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 24px; background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(251,191,36,0.06)); border: 1px solid rgba(251,191,36,0.2); font-size: 14px; font-weight: 800; color: var(--amber); box-shadow: 0 0 16px rgba(251,191,36,0.1); font-variant-numeric: tabular-nums; } .dgup-editor-close { width: 36px; height: 36px; border-radius: 50%; background: var(--faint); display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; color: var(--muted); transition: all 0.15s; border: none; flex-shrink: 0; } .dgup-editor-close:hover { background: var(--line); color: var(--ink); } /* Preview row */ .dg-shop-preview-row { display: flex; align-items: center; gap: 20px; padding: 20px 24px; background: linear-gradient(135deg, var(--card) 0%, rgba(251,191,36,0.03) 100%); border-bottom: 1px solid var(--line); } .dg-shop-avatar { width: 100px; height: 100px; border-radius: 20px; overflow: hidden; position: relative; background: var(--faint); border: 2px solid var(--line); flex-shrink: 0; box-shadow: 0 8px 24px rgba(0,0,0,0.08); transition: box-shadow 0.3s; } .dg-shop-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .dg-shop-avatar-label { font-size: 14px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.04em; } .dg-shop-avatar-sub { font-size: 12px; color: var(--muted); margin-top: 4px; } #dg-shop-owned-count { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; background: var(--green-bg); color: var(--green); border: 1px solid var(--green-b); } /* Tabs */ .dg-shop-tabs { padding: 16px 24px 0; position: sticky; top: 56px; background: var(--bg); z-index: 10; } .dg-shop-tab-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .dg-shop-tab-row::-webkit-scrollbar { display: none; } .dg-shop-rarity-row { display: flex; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .dgup-layer-tab { font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 16px; border-radius: 20px; white-space: nowrap; cursor: pointer; transition: all 0.2s; flex-shrink: 0; background: transparent; border: 1.5px solid var(--line); font-family: 'DM Sans', sans-serif !important; } .dgup-layer-tab:hover { border-color: var(--ink); color: var(--ink); } .dgup-layer-tab.active { background: var(--ink); color: var(--card); border-color: var(--ink); } .dgup-rarity-tab { font-size: 10px; font-weight: 700; padding: 5px 12px; border-radius: 16px; cursor: pointer; border: 1.5px solid var(--line); background: transparent; color: var(--muted); transition: all 0.2s; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'DM Sans', sans-serif !important; } .dgup-rarity-tab:hover { border-color: var(--ink); color: var(--ink); } .dgup-rarity-tab.active { background: var(--ink); color: var(--card); border-color: var(--ink); } .dgup-rarity-tab.active[data-rarity="Rare"] { background: var(--rarity-rare); border-color: var(--rarity-rare); } .dgup-rarity-tab.active[data-rarity="Epic"] { background: var(--rarity-epic); border-color: var(--rarity-epic); } .dgup-rarity-tab.active[data-rarity="Legendary"] { background: var(--rarity-legendary); border-color: var(--rarity-legendary); } /* Asset grid */ .dg-shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px 24px; } .dgup-asset-item { position: relative; aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; border: 1.5px solid var(--line); cursor: pointer; transition: all 0.2s cubic-bezier(0.22,1,0.36,1); background: var(--faint); } .dgup-asset-item:hover { border-color: var(--ink); transform: translateY(-4px) scale(1.03); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } .dgup-asset-item:active { transform: scale(0.97); transition-duration: 0.1s; } .dgup-asset-item.equipped { border-color: var(--green); border-width: 2px; box-shadow: 0 0 0 2px rgba(14,122,84,0.15), 0 0 16px rgba(14,122,84,0.1); } .dgup-asset-item.locked { opacity: 0.45; filter: grayscale(80%) brightness(0.8); } .dgup-asset-item.locked:hover { opacity: 0.6; filter: grayscale(40%) brightness(0.9); } .dgup-asset-item[data-rarity="Rare"] { border-color: rgba(37,99,235,0.3); } .dgup-asset-item[data-rarity="Rare"]:hover { border-color: var(--rarity-rare); box-shadow: 0 8px 24px rgba(37,99,235,0.15); } .dgup-asset-item[data-rarity="Epic"] { border-color: rgba(168,85,247,0.3); } .dgup-asset-item[data-rarity="Epic"]:hover { border-color: var(--rarity-epic); box-shadow: 0 8px 24px rgba(168,85,247,0.15); } .dgup-asset-item[data-rarity="Legendary"] { border-color: rgba(217,119,6,0.3); } .dgup-asset-item[data-rarity="Legendary"]:hover { border-color: var(--rarity-legendary); box-shadow: 0 8px 24px rgba(217,119,6,0.15); } .dgup-asset-item img { width: 100%; height: 100%; object-fit: cover; background: linear-gradient(135deg, var(--faint), var(--line)); border-radius: 15px !important; } .dgup-asset-item-info { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%); padding: 24px 10px 10px; } .dgup-asset-item-name { font-size: 11px; font-weight: 800; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 4px rgba(0,0,0,0.4); letter-spacing: 0.3px; } .dgup-asset-item-cost { font-size: 10px; color: rgba(255,255,255,0.8); margin-top: 3px; font-weight: 700; letter-spacing: 0.3px; font-variant-numeric: tabular-nums; } .dgup-asset-item-owned { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 2px 8px rgba(14,122,84,0.3); } .dgup-asset-rarity { position: absolute; top: 8px; left: 8px; font-size: 8px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .dgup-rarity-common { background: rgba(139,139,139,0.8); } .dgup-rarity-rare { background: rgba(37,99,235,0.85); } .dgup-rarity-epic { background: rgba(168,85,247,0.85); } .dgup-rarity-legendary { background: rgba(217,119,6,0.85); } /* Rarity color strip at bottom of items */ .dgup-asset-item::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--line); z-index: 1; } .dgup-asset-item[data-rarity="Common"]::after { background: var(--rarity-common); } .dgup-asset-item[data-rarity="Rare"]::after { background: var(--rarity-rare); } .dgup-asset-item[data-rarity="Epic"]::after { background: var(--rarity-epic); } .dgup-asset-item[data-rarity="Legendary"]::after { background: var(--rarity-legendary); } /* Redeem */ .dg-shop-redeem { display: flex; gap: 8px; padding: 16px 24px 24px; border-top: 1px solid var(--line); background: var(--bg); position: sticky; bottom: 0; } .dg-shop-redeem-input { flex: 1; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font-size: 14px; font-family: 'DM Sans', sans-serif !important; outline: none; text-transform: uppercase; letter-spacing: 0.08em; transition: all 0.2s; font-weight: 600; } .dg-shop-redeem-input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17,17,17,0.06); } .dg-shop-redeem-input::placeholder { color: var(--muted); opacity: 0.5; font-weight: 500; text-transform: uppercase; } .dg-shop-redeem-btn { padding: 14px 24px; background: var(--ink); color: var(--card); border: none; border-radius: 12px; font-size: 14px; font-weight: 800; cursor: pointer; font-family: 'DM Sans', sans-serif !important; transition: all 0.2s; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px; } .dg-shop-redeem-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); } .dg-shop-redeem-btn:active { transform: scale(0.97); } .dg-shop-empty { text-align: center; padding: 48px 20px; color: var(--muted); font-size: 13px; grid-column: 1 / -1; line-height: 1.6; } /* Dark mode */ #dg.dark .dg-shop { background: var(--bg); border-color: var(--line); box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.2); } #dg.dark .dg-shop-header { background: rgba(15,15,15,0.9); } #dg.dark .dg-shop-header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.3); } #dg.dark .dg-shop-tabs { background: var(--bg); } #dg.dark .dg-shop-preview-row { background: linear-gradient(135deg, var(--card) 0%, rgba(251,191,36,0.04) 100%); } #dg.dark .dg-shop-avatar { border-color: var(--line); box-shadow: 0 8px 24px rgba(0,0,0,0.2); } #dg.dark .dgup-asset-item { border-color: var(--line); } #dg.dark .dgup-asset-item:hover { border-color: var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,0.3); } #dg.dark .dgup-asset-item.equipped { box-shadow: 0 0 0 2px rgba(52,211,153,0.2), 0 0 16px rgba(52,211,153,0.15); } #dg.dark .dg-shop-redeem { background: var(--bg); } #dg.dark .dg-shop-redeem-input { background: var(--card); border-color: var(--line); box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); } #dg.dark .dg-shop-redeem-input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(240,238,234,0.06); } #dg.dark .dg-shop-redeem-btn { background: var(--ink); color: var(--bg); } #dg.dark .dg-shop-keys { background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(251,191,36,0.08)); box-shadow: 0 0 16px rgba(251,191,36,0.15); } /* Mobile */ @media (max-width: 480px) { .dg-shop { margin: 0; border-radius: 20px 20px 0 0; min-height: 100vh; max-width: 100%; box-shadow: none; border: none; } .dg-shop-header { padding: 16px 20px 12px; } .dg-shop-title { font-size: 20px; } .dg-shop-keys { font-size: 13px; padding: 6px 14px; } .dg-shop-preview-row { padding: 16px 20px; gap: 16px; } .dg-shop-avatar { width: 80px; height: 80px; border-radius: 16px; } .dg-shop-tabs { padding: 12px 20px 0; top: 48px; } .dgup-layer-tab { padding: 6px 12px; font-size: 11px; } .dgup-rarity-tab { padding: 4px 10px; font-size: 9px; } .dg-shop-grid { padding: 16px 20px; gap: 10px; grid-template-columns: repeat(2, 1fr); } .dg-shop-redeem { padding: 12px 20px 20px; flex-direction: column; gap: 10px; } .dg-shop-redeem-input, .dg-shop-redeem-btn { width: 100%; } .dgup-asset-item:hover { transform: none; } .dgup-asset-item:active { transform: scale(0.97); } } @media (max-width: 390px) { .dg-shop-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .dg-shop-header { padding: 14px 16px 10px; } .dg-shop-preview-row { padding: 14px 16px; } .dg-shop-tabs { padding: 10px 16px 0; } .dg-shop-grid { padding: 14px 16px; } .dg-shop-redeem { padding: 10px 16px 16px; } .dg-shop-avatar { width: 64px; height: 64px; border-radius: 12px; } .dgup-layer-tab { padding: 5px 10px; font-size: 10px; } } /* ── ROUND 16: POLISH PASS ── */ /* 1-2. Card body + section spacing */ #dg .dg-card-body { padding: 16px 20px 20px !important; } #dg .dg-section { margin-bottom: 20px !important; } /* 3-4. Gallery + back link */ #dg .dg-gallery { padding: 16px 0 12px !important; } #dg .dg-back-link { padding: 12px 0 !important; } /* 5. Status badge breathing room */ /* card-status padding canonical at line ~1377 (4px 10px) */ /* 6-7. Footer + product grid */ #dg .dg-ftr { margin-top: 32px !important; } #dg .dg-prod-grid { gap: 12px !important; } /* 8. Toast above FAB */ #dg .dg-toast { bottom: 120px !important; } /* 9-12. Card text readability */ #dg .dg-card-name { line-height: 1.3 !important; } /* card-type font-size canonical at Round 24 (10px) */ #dg .dg-card-loc { font-size: 13px !important; } #dg .dg-card-desc { font-size: 13px !important; } /* 13-14. Empty + gallery hint */ .dg-empty-saved-icon { opacity: 0.6 !important; } .dg-gallery-hint { opacity: 0.7 !important; font-size: 12px !important; } /* 15-16. Hero text */ #dg .dg-hero-type { text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important; } #dg .dg-hero-name { text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important; } /* 17. Error page contrast */ #dg #dg-error p { color: #555 !important; } /* 18. Hours today highlight visible */ #dg .dg-hrs .today td, #dg .dg-hrs .dg-hrs-today td { background: rgba(178,115,0,0.1) !important; } /* 19. Card arrow visible */ #dg .dg-card-arrow { color: var(--muted) !important; } /* 20-22. Pill opacity fix */ #dg .dg-pill-open { background: var(--green) !important; } #dg .dg-pill-closed { background: var(--red) !important; } /* 23. Menu image border */ #dg .dg-menu-img { border-width: 1.5px !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; } /* 24. Skeleton shimmer */ #dg .dg-skel-img, #dg .dg-skel-line { background: linear-gradient(90deg, var(--faint) 25%, var(--bg) 50%, var(--faint) 75%) !important; background-size: 200% 100% !important; } /* 25. Hero pills max-width */ #dg .dg-pills { max-width: 85% !important; } /* 26. Related cards top margin */ #dg #dg-related-sec { margin-top: 8px !important; } /* 27. Dark logo shadow softer */ #dg.dark .dg-logo-wrap { box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important; } /* 28. Section line weight */ #dg .dg-section-line { height: 1.5px !important; opacity: 0.7 !important; } /* 29. Card img gradient softer */ #dg .dg-card-img::after { opacity: 0.6 !important; } /* 30. Hide arrow on mobile */ @media (max-width: 480px) { #dg .dg-card-arrow { display: none !important; } } /* 31. Gallery thumb 1px */ #dg .dg-gimg { border-width: 1px !important; } /* 32. Content cards: border only, no shadow */ #dg .dg-desc, #dg .dg-hrs-card, #dg .dg-logo-wrap { box-shadow: none !important; border: 1px solid var(--line) !important; } #dg.dark .dg-desc, #dg.dark .dg-hrs-card, #dg.dark .dg-logo-wrap { box-shadow: none !important; border-color: var(--line) !important; } /* 33. Photo/menu border normalize */ #dg .dg-prod-img { border-width: 1px !important; } /* 34. Load more matches pills */ #dg .dg-load-more { border-radius: 20px !important; border-width: 1.5px !important; font-size: 13px !important; padding: 10px 24px !important; } /* 35. Reactions match pills */ #dg .dg-reaction-btn { border-width: 1px !important; } /* 36. Back-to-top repositioned */ #dg .dg-back-top { bottom: 80px !important; right: 20px !important; } /* 37. Loading spinner bigger */ #dg #dg-loading .spin { width: 40px !important; height: 40px !important; border-width: 4px !important; } /* 38. Empty grid empty-state spacing (icon now provided inline, no ::before) */ #dg #dg-grid-empty { padding-top: 40px !important; } /* 39. No photos placeholder */ #dg .dg-prod-grid:empty::after { color: var(--ink) !important; font-weight: 600 !important; } /* ── ROUND 17: PREMIUM POLISH ── */ /* AUTH: card shadow + input focus + brand logo + submit disabled */ #dg .dg-auth-card { max-width: 420px; } #dg .dg-auth-input:focus { box-shadow: 0 0 0 3px rgba(14,122,84,0.1) !important; border-color: var(--green) !important; } #dg .dg-auth-brand-logo { transition: all 0.3s ease !important; } #dg .dg-auth-brand-logo:hover { transform: scale(1.05) rotate(2deg) !important; } #dg .dg-auth-submit:disabled { background: var(--faint) !important; color: var(--muted) !important; box-shadow: none !important; cursor: not-allowed !important; } /* PROFILE: cover shimmer + dark avatar border + username + stats hover */ #dg .dgup-cover { animation: dgCoverShimmer 3s ease 1 !important; } @keyframes dgCoverShimmer { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 1; } } #dg.dark .dgup-avatar-large { border-color: #2a2a2a !important; } #dg .dgup-username { letter-spacing: 0.05em !important; font-weight: 600 !important; } #dg .dgup-stat { cursor: default !important; transition: all 0.2s ease !important; } #dg .dgup-stat:hover { background: var(--faint) !important; transform: translateY(-2px) !important; } /* PROFILE: level gradient + streak fire + streak dot pulse + actions rounded */ #dg .dgup-level-fill { background: linear-gradient(90deg, var(--green) 0%, rgba(52,211,153,0.7) 100%) !important; } #dg .dgup-streak-fire { font-size: 32px !important; line-height: 1 !important; } #dg .dgup-streak-dot.active { animation: dgStreakPulse 2s ease-in-out infinite !important; } @keyframes dgStreakPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } } #dg .dgup-action { border-radius: 16px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; } /* PROFILE: member since icon + friend request bounce */ #dg .dgup-member-since::before { content: '\1F4C5 ' !important; } #dg .dgup-friend-req { animation: dgFriendReqIn 0.4s cubic-bezier(0.34,1.56,0.64,1) !important; } @keyframes dgFriendReqIn { from { transform: translateX(-12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* SHOP: rarity borders + equip pop + owned badge */ #dg .dgup-asset-item[data-rarity="Rare"] { border-color: #2563eb !important; } #dg .dgup-asset-item[data-rarity="Epic"] { border-color: #7c3aed !important; } #dg .dgup-asset-item[data-rarity="Legendary"] { border-color: #f59e0b !important; } #dg .dgup-asset-item.equipped { animation: dgEquipPop 0.3s ease !important; } @keyframes dgEquipPop { 0% { transform: scale(1); } 50% { transform: scale(0.95); } 100% { transform: scale(1); } } #dg .dg-shop-header { transition: box-shadow 0.2s !important; } #dg .dg-shop-header.scrolled { box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; } /* HERO: darker gradient + responsive pills + type pill + tighter shadow */ #dg .dg-hero-grad { background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%) !important; } #dg .dg-pills { gap: clamp(8px, 2vw, 12px) !important; } #dg .dg-hero-type { background: rgba(255,255,255,0.12) !important; padding: 4px 12px !important; border-radius: 20px !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; display: inline-block !important; } #dg .dg-hero-name { letter-spacing: -0.01em !important; } /* SECTIONS: about word-break + hours hover + hours tabular + stamps gradient */ #dg .dg-desc { word-break: break-word !important; overflow-wrap: break-word !important; hyphens: auto !important; } #dg .dg-hrs tr { transition: background 0.1s !important; } #dg .dg-hrs tr:hover { background: rgba(0,0,0,0.02) !important; } #dg .dg-hrs td:last-child { font-variant-numeric: tabular-nums !important; } #dg .dg-stamps-card { border-radius: 16px !important; border: 1px solid var(--line) !important; } #dg .dg-stamp-claim-btn { border-radius: 10px !important; } /* SEARCH: suggestion highlight + dropdown shadow + padding */ #dg .dg-suggestion.highlighted { border-left: 3px solid var(--green) !important; padding-left: 45px !important; background: var(--faint) !important; } #dg .dg-suggestions { box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important; border-radius: 0 0 12px 12px !important; } #dg .dg-suggestion { padding: 12px 16px 12px 48px !important; } /* LIGHTBOX: close button + counter pill */ .dg-lightbox button[style*="right:16px"], .dg-lightbox button[style*="left:16px"] { background: rgba(255,255,255,0.15) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; border: none !important; transition: all 0.2s !important; } .dg-lightbox button:hover { background: rgba(255,255,255,0.25) !important; } /* DARK: input inset shadow + card text contrast */ #dg.dark .dg-auth-input { box-shadow: inset 0 1px 3px rgba(0,0,0,0.2) !important; } #dg.dark .dgm-search { box-shadow: inset 0 1px 3px rgba(0,0,0,0.2) !important; } #dg.dark .dg-card-name { color: #f5f3ef !important; } #dg.dark .dgup-stat:hover { background: var(--card) !important; } #dg.dark .dgup-action { box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important; } #dg.dark .dg-shop-header.scrolled { box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } #dg.dark .dg-hero-type { background: rgba(255,255,255,0.1) !important; } /* ── ROUND 18: MICRO-INTERACTIONS & DEPTH ── */ /* 1. Scroll progress smooth */ #dg .dg-progress { will-change: width !important; transition: width 0.1s linear !important; } /* 2. Quicknav scroll shadow */ #dg #dg-quicknav { transition: box-shadow 0.2s ease !important; } /* 3-4. Gallery scroll + left fade */ #dg .dg-gallery { scroll-behavior: smooth !important; scroll-padding: 10px !important; } #dg .dg-gallery::before { content: '' !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 40px !important; background: linear-gradient(270deg, transparent, var(--bg)) !important; pointer-events: none !important; z-index: 1 !important; } /* 5. Back-to-top smooth fade */ #dg .dg-back-top { transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important; } #dg .dg-back-top:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important; } /* 7. Skeleton shimmer sweep */ @keyframes dgShimmerSweep { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } #dg .dg-skel-img, #dg .dg-skel-line { background: linear-gradient(90deg, var(--faint) 25%, var(--bg) 50%, var(--faint) 75%) !important; background-size: 200% 100% !important; animation: dgShimmerSweep 1.8s ease-in-out infinite !important; } /* 8. Profile skeleton match hero radius */ #dg .dg-prof-skel-hero { border-radius: 12px !important; overflow: hidden !important; } /* 9. Skeleton card stagger */ #dg .dg-skeleton-card:nth-child(1) { animation-delay: 0s !important; } #dg .dg-skeleton-card:nth-child(2) { animation-delay: 0.08s !important; } #dg .dg-skeleton-card:nth-child(3) { animation-delay: 0.16s !important; } #dg .dg-skeleton-card:nth-child(4) { animation-delay: 0.24s !important; } #dg .dg-skeleton-card:nth-child(5) { animation-delay: 0.32s !important; } #dg .dg-skeleton-card:nth-child(6) { animation-delay: 0.4s !important; } /* 13. Page transition slide-up */ @keyframes dgPageSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } #dg #dg-grid-view, #dg #dg-profile, #dg #dg-user-profile { animation: dgPageSlideIn 0.35s ease both !important; } /* 15. Favorite saved heart color transition */ #dg .dg-fav-btn { transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1) !important; } #dg .dg-fav-btn.saved { background: rgba(231,76,60,0.1) !important; color: var(--red) !important; } /* 16. Search bar subtle expand on focus */ #dg .dg-search { transition: all 0.2s ease, box-shadow 0.2s ease !important; } #dg .dg-search:focus { transform: scaleX(1.005) !important; } /* 18. Related card image overlay on hover */ #dg .dg-related-img { position: relative !important; } #dg .dg-related-img::after { content: '' !important; position: absolute !important; inset: 0 !important; background: rgba(0,0,0,0) !important; transition: background 0.2s !important; } #dg .dg-related-card:hover .dg-related-img::after { background: rgba(0,0,0,0.06) !important; } /* 19. Hours row hover left accent */ #dg .dg-hrs tr { transition: all 0.15s ease !important; border-left: 3px solid transparent !important; } #dg .dg-hrs tr:hover { border-left-color: var(--amber) !important; } /* 21-22. Input focus glow + error emphasis */ #dg .dg-auth-input:focus { box-shadow: 0 0 0 3px rgba(14,122,84,0.1), inset 0 0 0 1px rgba(14,122,84,0.2) !important; } #dg .dg-auth-input.error { box-shadow: inset 0 0 0 1.5px var(--red) !important; } /* 23. Placeholder softer */ #dg .dg-auth-input::placeholder { opacity: 0.5 !important; font-weight: 400 !important; } /* 24. Valid checkmark pop */ #dg .dg-auth-input-check { transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important; } #dg .dg-auth-input.valid ~ .dg-auth-input-check { transform: translateY(-50%) scale(1) !important; } /* 27. Image fade-in on load */ #dg .dg-card-img { transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1) !important; } /* 29. Logo image contained look */ #dg .dg-logo-img { background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--line) !important; } /* 33. Card active press state */ #dg .dg-card:active { transform: translateY(-2px) !important; transition-duration: 0.1s !important; } /* 34. Filter pill press state */ #dg .dg-filter-pill:active { transform: scale(0.97) !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.08) !important; } /* 37. Custom scrollbar styling */ #dg ::-webkit-scrollbar { width: 6px !important; height: 6px !important; } #dg ::-webkit-scrollbar-track { background: transparent !important; } #dg ::-webkit-scrollbar-thumb { background: var(--faint) !important; border-radius: 3px !important; } #dg ::-webkit-scrollbar-thumb:hover { background: var(--muted) !important; } #dg { scrollbar-width: thin !important; scrollbar-color: var(--faint) transparent !important; } /* 38. Search placeholder hierarchy */ #dg .dg-search::placeholder { font-weight: 400 !important; opacity: 0.5 !important; } /* 39. Selection color branded */ #dg ::selection { background: rgba(14,122,84,0.15) !important; color: var(--ink) !important; } #dg.dark ::selection { background: rgba(52,211,153,0.2) !important; } /* 40. Empty grid animation */ #dg .dg-grid-empty { animation: dgPageSlideIn 0.4s ease 0.2s both !important; } /* 41. Share button hover lift */ #dg .dg-share-btn:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important; transform: translateY(-1px) !important; } #dg .dg-profile-fav-btn:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important; transform: translateY(-1px) !important; } /* 44. Reaction reacted state */ #dg .dg-reaction-btn.reacted { background: var(--green-bg) !important; border-color: var(--green-b) !important; } /* 46. Gallery thumb aspect */ #dg .dg-gimg { aspect-ratio: 4/3 !important; height: auto !important; width: 80px !important; } /* 47. Related image aspect */ #dg .dg-related-img { aspect-ratio: 16/9 !important; height: auto !important; } /* 48. Recent item image */ #dg .dg-recent-img { aspect-ratio: 1/1 !important; object-fit: cover !important; } /* 50. Avatar pop shadow */ #dg .dgup-avatar-large { box-shadow: 0 0 0 3px var(--bg), 0 4px 16px rgba(0,0,0,0.1) !important; } #dg.dark .dgup-avatar-large { box-shadow: 0 0 0 3px var(--bg), 0 4px 16px rgba(0,0,0,0.3) !important; } /* Dark mode extras */ #dg.dark .dg-fav-btn.saved { background: rgba(192,57,43,0.1) !important; color: var(--red) !important; } #dg.dark .dg-gallery::before { background: linear-gradient(270deg, transparent, var(--bg)) !important; } #dg.dark .dg-related-card:hover .dg-related-img::after { background: rgba(255,255,255,0.03) !important; } #dg.dark .dg-hrs tr:hover { border-left-color: var(--amber) !important; } #dg.dark .dg-reaction-btn.reacted { background: rgba(52,211,153,0.1) !important; border-color: rgba(52,211,153,0.2) !important; } #dg.dark .dg-auth-input.error { box-shadow: inset 0 0 0 1.5px var(--red) !important; } #dg.dark .dg-back-top:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important; } /* ── ROUND 19: FINAL POLISH ── */ /* AUTH: dark mode brand panel + form polish */ #dg.dark .dg-auth-brand { border-right-color: var(--line) !important; } #dg.dark .dg-auth-brand-title em { -webkit-text-stroke-color: var(--ink) !important; } #dg.dark .dg-auth-brand-badge { background: var(--card) !important; border-color: var(--line) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; } #dg.dark .dg-auth-submit { background: var(--ink) !important; color: var(--bg) !important; } #dg.dark .dg-auth-submit:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important; } #dg .dg-auth-step-dot { transition: all 0.3s cubic-bezier(0.22,1,0.36,1) !important; } #dg .dg-pass-strength { margin-top: 8px !important; border-radius: 4px !important; overflow: hidden !important; } #dg .dg-pass-strength-bar { transition: width 0.3s ease, background 0.3s ease !important; } /* SORT + CATEGORY DROPDOWNS: consistent styling */ #dg .dg-sort, #dg #dg-cat-select { padding: 6px 12px !important; font-size: 12px !important; font-weight: 600 !important; border: 1.5px solid var(--line) !important; border-radius: 20px !important; background: var(--card) !important; color: var(--muted) !important; cursor: pointer !important; font-family: 'DM Sans', sans-serif !important; transition: all 0.2s !important; -webkit-appearance: none !important; appearance: none !important; outline: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; padding-right: 28px !important; } #dg .dg-sort:hover, #dg #dg-cat-select:hover { border-color: var(--ink) !important; color: var(--ink) !important; } #dg.dark .dg-sort, #dg.dark #dg-cat-select { background: var(--card) !important; border-color: var(--line) !important; color: var(--muted) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; } /* SAVED BUTTON: match dropdown style */ #dg .dg-saved-btn { border-radius: 20px !important; font-size: 12px !important; padding: 8px 16px !important; } /* PROFILE: breadcrumb */ #dg .dg-breadcrumb { font-size: 12px !important; color: var(--muted) !important; margin-bottom: 4px !important; letter-spacing: 0.02em !important; } #dg .dg-breadcrumb a { font-weight: 500 !important; } #dg .dg-breadcrumb-sep { margin: 0 4px !important; opacity: 0.4 !important; } /* PROFILE: visit counter */ #dg .dg-visit-count { font-size: 12px !important; color: var(--muted) !important; padding: 4px 0 !important; opacity: 0.7 !important; } /* PROFILE: gallery counter */ #dg .dg-gallery-counter { font-size: 12px !important; font-weight: 500 !important; color: var(--muted) !important; letter-spacing: 0.5px !important; } /* PROFILE: photo count badge on hero */ #dg .dg-photo-count { font-size: 11px !important; padding: 4px 10px !important; border-radius: 20px !important; background: rgba(0,0,0,0.5) !important; color: #fff !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; font-weight: 600 !important; letter-spacing: 0.02em !important; } /* PROFILE: report link */ #dg .dg-report-link { font-size: 11px !important; color: var(--muted) !important; text-align: center !important; margin-top: 24px !important; padding: 12px !important; opacity: 0.4 !important; transition: opacity 0.2s !important; cursor: pointer !important; letter-spacing: 0.02em !important; } #dg .dg-report-link:hover { opacity: 0.8 !important; } /* PROFILE: invite button in header */ #dg .dg-invite-btn { padding: 6px 14px !important; font-size: 12px !important; font-weight: 600 !important; border: 1px solid var(--line) !important; border-radius: 8px !important; background: transparent !important; color: var(--ink) !important; cursor: pointer !important; transition: all 0.15s !important; } #dg .dg-invite-btn:hover { border-color: var(--ink) !important; background: var(--faint) !important; } /* STAMP CIRCLES */ #dg .dg-stamp { width: 44px !important; height: 44px !important; border-radius: 50% !important; border: 2px solid var(--line) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; transition: all 0.25s ease !important; background: var(--bg) !important; } #dg .dg-stamp.collected { border-color: var(--green) !important; background: var(--green-bg) !important; transform: scale(1.05) !important; box-shadow: 0 0 8px rgba(14,122,84,0.2) !important; } #dg .dg-stamp.today { border-color: var(--amber) !important; border-style: dashed !important; } #dg .dg-stamps-grid { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; margin-bottom: 16px !important; } /* TYPED CURSOR */ #dg .dg-typed-cursor { width: 2px !important; height: 1.1em !important; background: var(--amber) !important; display: inline-block !important; margin-left: 2px !important; vertical-align: text-bottom !important; animation: dgBlink 0.8s step-end infinite !important; } /* HERO STAT PILLS */ #dg .dg-hero-stats { margin-top: 16px !important; } #dg .dg-hero-stat { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 20px !important; padding: 6px 14px !important; font-size: 12px !important; font-weight: 500 !important; color: var(--muted) !important; } #dg .dg-hero-stat-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; } #dg.dark .dg-hero-stat { background: var(--card) !important; border-color: var(--line) !important; } /* GRID COUNT STRONG */ #dg .dg-grid-count strong { color: var(--ink) !important; font-weight: 800 !important; } /* SAVED COUNT BADGE */ #dg .dg-saved-count { font-size: 10px !important; font-weight: 700 !important; background: var(--green) !important; color: #fff !important; padding: 2px 8px !important; border-radius: 10px !important; min-width: 18px !important; text-align: center !important; } /* CARD GLOW RING (remove — conflicts with Round 15 border system) */ #dg .dg-card::before { display: none !important; } /* Card type underline — removed at line ~1399 */ /* EXPLORE SUGGESTION CARDS */ #dg .dgup-explore-card { border: 1px solid var(--line) !important; border-radius: 12px !important; background: var(--card) !important; overflow: hidden !important; } #dg .dgup-explore-card:hover { border-color: var(--ink) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important; } #dg .dgup-explore-img { height: 100px !important; background-color: var(--faint) !important; } #dg .dgup-explore-name { font-size: 13px !important; font-weight: 700 !important; } #dg .dgup-explore-type { font-size: 10px !important; color: var(--muted) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } #dg.dark .dgup-explore-card { border-color: var(--line) !important; } #dg.dark .dgup-explore-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important; } /* USER PROFILE: sign out subtle */ #dg .dgup-signout { border-radius: 12px !important; font-size: 12px !important; padding: 12px !important; opacity: 0.6 !important; transition: all 0.2s !important; } #dg .dgup-signout:hover { opacity: 1 !important; border-color: var(--red) !important; background: rgba(192,57,43,0.04) !important; } /* MAP: popup card border in dark */ #dg.dark .leaflet-popup-content-wrapper { background: var(--card) !important; border: 1px solid var(--line) !important; } #dg.dark .leaflet-popup-tip { background: var(--card) !important; } /* ── ROUND 20: CLEANUP & FIXES ── */ /* Z-INDEX SYSTEM: header 99, quicknav 50, fab 45, toast 9999, modal 9998, progress 9997 */ #dg .dg-hdr { z-index: 99 !important; } #dg .dg-progress { z-index: 9997 !important; } /* FAB: keep sticky, raise z-index above quicknav */ #dg .dg-fab { z-index: 45 !important; } /* Shop header/tabs z-index fix */ #dg .dg-shop-header { z-index: 11 !important; } #dg .dg-shop-tabs { z-index: 10 !important; } /* Shop grid 2-col on mobile */ @media (max-width: 480px) { #dg .dg-shop-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* Shop rarity tab active colors match rarity */ #dg .dgup-rarity-tab.active[data-rarity="Rare"] { background: #2563eb !important; border-color: #2563eb !important; } #dg .dgup-rarity-tab.active[data-rarity="Epic"] { background: #7c3aed !important; border-color: #7c3aed !important; } #dg .dgup-rarity-tab.active[data-rarity="Legendary"] { background: #f59e0b !important; border-color: #f59e0b !important; } /* Map z-index: sidebar below header */ @media (max-width: 768px) { .dgm-sidebar { z-index: 1000 !important; } } /* Map popup img fix */ .dgm-popup-img { aspect-ratio: 16/9 !important; height: auto !important; max-height: 140px !important; object-fit: cover !important; } /* Map sidebar name calc fix */ .dgm-sidebar-item-name { max-width: calc(100% - 52px) !important; } /* Mobile: friends grid tighter */ @media (max-width: 480px) { #dg .dgup-friends-grid { gap: 8px !important; } #dg .dgup-lb-item { padding: 10px 12px !important; } #dg .dgup-lb-avatar { width: 32px !important; height: 32px !important; } #dg .dgup-lb-rank { font-size: 16px !important; width: 24px !important; } } /* Dark mode leaderboard rank colors */ #dg.dark .dgup-lb-rank-1 { color: #fbbf24 !important; } #dg.dark .dgup-lb-rank-2 { color: #cbd5e1 !important; } #dg.dark .dgup-lb-rank-3 { color: #d97706 !important; } /* Dark mode friends + leaderboard hover */ #dg.dark .dgup-friend-card:hover { background: var(--faint) !important; border-radius: 12px !important; } #dg.dark .dgup-lb-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; } #dg.dark .dgup-achievement { border-color: #262626 !important; } /* Level bar thinner */ #dg .dgup-level-bar { height: 6px !important; } /* Stat hover subtle */ #dg .dgup-stat:hover { transform: translateY(-1px) !important; } /* Report link underline on hover */ #dg .dg-report-link:hover { text-decoration: underline !important; } /* OTP input styling (removes inline style conflicts) */ #dg #dg-verify-code, #dg #dg-otp-code { text-align: center !important; font-size: 20px !important; letter-spacing: 8px !important; font-weight: 700 !important; } /* Visit count left border */ #dg .dg-visit-count { padding-left: 0 !important; border-left: none !important; } /* Breadcrumb hover */ #dg .dg-breadcrumb a:hover { text-decoration: underline !important; } /* Level gradient unified */ #dg .dgup-level-fill { background: linear-gradient(90deg, var(--green) 0%, rgba(52,211,153,0.6) 100%) !important; } #dg.dark .dgup-level-fill { background: linear-gradient(90deg, #34d399 0%, rgba(52,211,153,0.4) 100%) !important; } /* Cover shimmer once only */ #dg .dgup-cover { animation: dgCoverShimmer 2s ease 1 !important; } /* Friend add button focus */ #dg .dgup-friend-add:focus-visible { outline: 2px solid var(--ink) !important; outline-offset: 2px !important; } #dg .dgup-friend-pending { cursor: default !important; opacity: 0.6 !important; } /* Explore card dark */ #dg.dark .dgup-explore-card { background: var(--card) !important; } #dg.dark .dgup-explore-img { background-color: var(--faint) !important; } /* Hero stat dot CSS (remove inline style dependency) */ #dg .dg-hero-stat-dot { background: var(--green) !important; } /* Fix: remove old card glow ::before definition entirely */ #dg .dg-card::before { content: none !important; display: none !important; } /* Fix: gallery ::before left fade needs position context */ #dg .dg-gallery { position: relative !important; } /* Inline footer margin removal (CSS handles it) */ #dg #dg-user-profile .dg-ftr { margin-top: 24px !important; } /* Search suggestions natural z */ #dg .dg-suggestions { z-index: 200 !important; } /* Redeem btn hover shadow */ #dg .dg-shop-redeem-btn:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.1) !important; } /* Dark mode achievements border */ #dg.dark .dgup-achievement.earned { border-color: rgba(52,211,153,0.3) !important; background: rgba(52,211,153,0.06) !important; } #dg.dark .dgup-achievement.claimable { border-color: rgba(251,191,36,0.3) !important; background: rgba(251,191,36,0.06) !important; } /* ── ROUND 21: BASE CLEANUP ── */ /* Transition standardization: all cards/interactive 0.2s cubic-bezier */ #dg .dg-card { transition: all 0.2s cubic-bezier(0.22,1,0.36,1) !important; } #dg .dg-related-card { transition: all 0.2s cubic-bezier(0.22,1,0.36,1) !important; } #dg .dg-hrs-chevron { transition: transform 0.2s cubic-bezier(0.22,1,0.36,1) !important; } /* Shadow system: base = 0 2px 8px 0.04, hover = 0 4px 16px 0.06 */ #dg .dg-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important; } #dg .dg-prod-img:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important; transform: scale(1.02) !important; } #dg.dark .dg-card { box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important; } #dg.dark .dg-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important; } #dg.dark .dg-desc, #dg.dark .dg-hrs-card, #dg.dark .dg-logo-wrap { box-shadow: none !important; } #dg.dark .dg-related-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important; } #dg.dark .dg-gallery::after { background: linear-gradient(90deg, transparent 0%, rgba(15,15,15,0.6) 100%) !important; } #dg.dark .dg-hrs .today td { background: rgba(251,191,36,0.08) !important; } /* Border-radius: enforce 12px system on base elements */ #dg .dg-card { border-radius: 12px !important; } #dg .dg-hero { border-radius: 12px !important; } #dg .dg-desc { border-radius: 12px !important; } #dg .dg-hrs-card { border-radius: 12px !important; } #dg .dg-logo-wrap { border-radius: 12px !important; } #dg .dg-menu-img { border-radius: 12px !important; } #dg .dg-skeleton-card { border-radius: 12px !important; } /* Mobile card image height: 140px */ @media (max-width: 480px) { #dg .dg-card-img, #dg .dg-card-img-empty { height: 140px !important; } #dg .dg-hero { border-radius: 10px !important; } #dg .dg-desc, #dg .dg-hrs-card, #dg .dg-logo-wrap { border-radius: 10px !important; } } /* Pill solid colors (no rgba) */ #dg .dg-pill-open { background: var(--green) !important; color: #fff !important; } #dg .dg-pill-closed { background: var(--red) !important; color: #fff !important; } /* Section line consolidated */ #dg .dg-section-line { height: 1px !important; opacity: 0.5 !important; background: var(--line) !important; } /* Map page fixes */ .dgm-sidebar-item { transition: all 0.2s ease !important; } .dgm-sidebar-item img { transition: transform 0.2s ease !important; } .dgm-search { box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important; transition: all 0.2s ease !important; } .dgm-popup-link { transition: all 0.2s cubic-bezier(0.22,1,0.36,1) !important; font-weight: 600 !important; } .dgm-overlay { padding: 10px 18px !important; } .dgm-popup-img { height: auto !important; aspect-ratio: 16/9 !important; max-height: 130px !important; object-fit: cover !important; width: 100% !important; border-radius: 10px !important; } .dgm-nearme { width: 48px !important; height: 48px !important; } .dgm-sidebar-item-name { max-width: calc(100% - 50px) !important; } #dgm .leaflet-control-zoom a { transition: background 0.15s !important; } #dgm .leaflet-control-zoom a:hover { background: var(--faint) !important; } /* Dark map fixes */ #dgm.dark .dgm-sidebar-item:hover { background: var(--faint) !important; } #dgm.dark .dgm-popup-link:hover { background: var(--ink) !important; color: var(--bg) !important; } /* ── ROUND 22: FINAL CONSOLIDATION ── */ /* Card image: always visible, no fade-in */ #dg .dg-card-img { opacity: 1 !important; animation: none !important; } /* Remove all ::before glow on cards */ #dg .dg-card::before { content: none !important; } /* Card type underline — removed at line ~1399 */ /* Skeleton grid class fix */ @media (max-width: 480px) { #dg #dg-skeleton { grid-template-columns: 1fr !important; } } /* Consolidate hours row classes */ #dg .dg-hrs tr.today td, #dg .dg-hrs tr.dg-hrs-today td { font-weight: 600 !important; } /* Muted color WCAG fix for important text */ #dg .dg-card-loc { color: #555 !important; } #dg .dg-card-desc { color: #666 !important; } #dg.dark .dg-card-loc { color: #aaa !important; } #dg.dark .dg-card-desc { color: #999 !important; } /* Spinner visibility */ #dg #dg-loading .spin { border-color: var(--line) !important; border-top-color: var(--amber) !important; } /* Header button hover stronger */ #dg .dg-hdr-btn:hover { background: var(--faint) !important; border-color: var(--ink) !important; } /* Auth brand panel dark separator */ #dg.dark .dg-auth-brand { border-right-color: var(--line) !important; } /* Error state layout preservation */ #dg #dg-error[style*="display: block"] { display: flex !important; min-height: 50vh !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } /* Toast prevent overlap with content */ #dg .dg-toast { max-width: 320px !important; } /* Profile photo count badge responsive */ @media (max-width: 480px) { #dg .dg-photo-count { font-size: 10px !important; padding: 3px 8px !important; } } /* Profile gallery hint dismiss */ #dg .dg-gallery-hint { pointer-events: none !important; } /* Map dark mode popup tip */ #dgm.dark .leaflet-popup-tip { background: var(--card) !important; } #dgm.dark .leaflet-popup-content-wrapper { background: var(--card) !important; color: var(--ink) !important; } /* Prevent layout shift from hidden elements */ #dg #dg-grid-view[style*="display: none"], #dg #dg-profile[style*="display: none"], #dg #dg-user-profile[style*="display: none"] { position: absolute !important; visibility: hidden !important; } /* ── ROUND 23: MOBILE 390px POLISH ── */ @media (max-width: 390px) { /* Auth */ #dg .dg-auth-brand { padding: 20px 16px 16px !important; } #dg .dg-auth-brand-title { margin-bottom: 12px !important; } #dg .dg-auth-brand-badge { font-size: 12px !important; padding: 8px 14px !important; } #dg .dg-auth-input { padding-left: 44px !important; min-height: 52px !important; font-size: 16px !important; } #dg .dg-auth-submit { font-size: 16px !important; } #dg .dg-auth-forgot { text-align: center !important; } #dg .dg-pass-strength { height: 6px !important; } /* Grid hero */ #dg .dg-grid-hero { padding: 28px 16px 20px !important; } #dg .dg-grid-headline { font-size: clamp(28px, 8vw, 40px) !important; white-space: normal !important; } #dg .dg-hero-stats { gap: 6px !important; flex-wrap: wrap !important; } #dg .dg-hero-stat { padding: 5px 10px !important; font-size: 10px !important; } /* Search & filters */ #dg .dg-search { padding: 14px 14px 14px 40px !important; } #dg .dg-filter-pills { overflow-x: auto !important; flex-wrap: nowrap !important; padding-bottom: 6px !important; -webkit-overflow-scrolling: touch !important; } #dg .dg-filter-pill { flex-shrink: 0 !important; padding: 6px 12px !important; font-size: 12px !important; } #dg .dg-filter-bar { gap: 10px !important; margin-bottom: 20px !important; } /* Cards */ #dg .dg-card-img, #dg .dg-card-img-empty { height: 136px !important; } #dg .dg-card-body { padding: 12px 14px 14px !important; gap: 8px !important; } #dg .dg-card-arrow { width: 30px !important; height: 30px !important; } #dg .dg-card-name { font-size: 15px !important; } /* Featured card */ #dg .dg-featured-info { padding: 14px 16px !important; } #dg .dg-featured-name { font-size: 18px !important; } /* Business profile hero */ #dg .dg-hero { height: 220px !important; } #dg .dg-hero-content { padding: 14px 16px !important; } #dg .dg-hero-name { font-size: clamp(20px, 6vw, 36px) !important; } #dg .dg-pills { gap: 6px !important; } #dg .dg-pill { padding: 4px 10px !important; font-size: 10px !important; } /* FAB */ #dg .dg-fab { bottom: 10px !important; padding: 8px 10px !important; gap: 4px !important; border-radius: 20px !important; } #dg .dg-fab-btn { padding: 7px 12px !important; font-size: 11px !important; } /* Gallery */ #dg .dg-gimg { width: 68px !important; height: 51px !important; } /* Hours */ #dg .dg-hrs-toggle { padding: 12px 14px !important; } #dg .dg-hrs td { padding: 10px 0 !important; font-size: 12px !important; } #dg .dg-hrs td:first-child { width: 88px !important; } /* Mini map */ #dg #dg-mini-map { height: 160px !important; } /* Products */ #dg .dg-prod-grid { gap: 8px !important; } /* User profile */ #dg .dgup-cover { height: 88px !important; } #dg .dgup-card { margin-top: -24px !important; padding: 16px !important; } #dg .dgup-name { font-size: clamp(16px, 5vw, 20px) !important; } #dg .dgup-stat { padding: 16px 12px !important; } #dg .dgup-stat-num { font-size: 26px !important; } #dg .dgup-actions { gap: 8px !important; } #dg .dgup-action { min-width: calc(50% - 4px) !important; padding: 16px 10px !important; font-size: 11px !important; } #dg .dgup-achievement { min-width: calc(50% - 6px) !important; padding: 10px 12px !important; } #dg .dgup-achievement-icon { font-size: 20px !important; } #dg .dgup-streak-dot { width: 18px !important; } #dg .dgup-streak-bar { gap: 3px !important; } #dg .dgup-cat-label { width: 70px !important; font-size: 11px !important; } /* Shop */ #dg .dg-shop-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } #dg .dg-shop-header { padding: 16px 16px 12px !important; } #dg .dg-shop-preview-row { padding: 14px 16px !important; } #dg .dg-shop-tabs { padding: 12px 16px 0 !important; } #dg .dg-shop-grid { padding: 14px 16px !important; } #dg .dg-shop-redeem { padding: 12px 16px 16px !important; } #dg .dgup-layer-tab { padding: 6px 10px !important; font-size: 10px !important; } #dg .dgup-asset-rarity { font-size: 7px !important; padding: 2px 5px !important; } #dg .dgup-asset-item-owned { width: 16px !important; height: 16px !important; font-size: 8px !important; } #dg .dgup-asset-item:hover { transform: none !important; } #dg .dg-shop-redeem { flex-direction: column !important; gap: 8px !important; } #dg .dg-shop-redeem-input, #dg .dg-shop-redeem-btn { width: 100% !important; } } /* ── SHOP POLISH PASS ── */ /* Rarity pulse on Legendary items */ @keyframes dgRarityPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(217,119,6,0.3); } 50% { box-shadow: 0 0 0 8px rgba(217,119,6,0); } } #dg .dgup-asset-item[data-rarity="Legendary"] { animation: dgRarityPulse 2.5s ease infinite; } /* Item entrance stagger */ @keyframes dgItemSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } #dg .dgup-asset-item { animation: dgItemSlideIn 0.3s ease both; } #dg .dgup-asset-item:nth-child(1) { animation-delay: 0s; } #dg .dgup-asset-item:nth-child(2) { animation-delay: 0.03s; } #dg .dgup-asset-item:nth-child(3) { animation-delay: 0.06s; } #dg .dgup-asset-item:nth-child(4) { animation-delay: 0.09s; } #dg .dgup-asset-item:nth-child(5) { animation-delay: 0.12s; } #dg .dgup-asset-item:nth-child(6) { animation-delay: 0.15s; } #dg .dgup-asset-item:nth-child(7) { animation-delay: 0.18s; } #dg .dgup-asset-item:nth-child(8) { animation-delay: 0.21s; } #dg .dgup-asset-item:nth-child(9) { animation-delay: 0.24s; } /* Layer tabs with icons */ #dg .dgup-layer-tab[data-layer="All"]::before { content: '✦ '; } #dg .dgup-layer-tab[data-layer="Wallpaper"]::before { content: '🎨 '; } #dg .dgup-layer-tab[data-layer="Skin Color"]::before { content: '🎭 '; } #dg .dgup-layer-tab[data-layer="Shoes"]::before { content: '👟 '; } #dg .dgup-layer-tab[data-layer="Pants"]::before { content: '👖 '; } #dg .dgup-layer-tab[data-layer="Shirt"]::before { content: '👕 '; } #dg .dgup-layer-tab[data-layer="Eyes"]::before { content: '👁 '; } #dg .dgup-layer-tab[data-layer="Eyebrows"]::before { content: '〰 '; } #dg .dgup-layer-tab[data-layer="Nose"]::before { content: '👃 '; } #dg .dgup-layer-tab[data-layer="Mouth"]::before { content: '👄 '; } #dg .dgup-layer-tab[data-layer="Hair"]::before { content: '💇 '; } #dg .dgup-layer-tab[data-layer="Hat"]::before { content: '🎩 '; } /* Equipped glow animation */ @keyframes dgEquipGlow { 0%,100% { box-shadow: 0 0 0 2px rgba(14,122,84,0.2), 0 0 12px rgba(14,122,84,0.1); } 50% { box-shadow: 0 0 0 2px rgba(14,122,84,0.3), 0 0 20px rgba(14,122,84,0.2); } } #dg .dgup-asset-item.equipped { animation: dgEquipGlow 2s ease infinite !important; } /* Owned checkmark bounce */ @keyframes dgCheckBounce { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } } #dg .dgup-asset-item-owned { animation: dgCheckBounce 0.4s cubic-bezier(0.34,1.56,0.64,1) both; } /* Shop avatar equip glow */ @keyframes dgAvatarGlow { 0% { box-shadow: 0 8px 24px rgba(0,0,0,0.08); } 50% { box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 0 24px rgba(14,122,84,0.2); } 100% { box-shadow: 0 8px 24px rgba(0,0,0,0.08); } } #dg .dg-shop-avatar.just-equipped { animation: dgAvatarGlow 1s ease; } /* Keys badge pulse on purchase */ @keyframes dgKeysPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } #dg .dg-shop-keys.just-purchased { animation: dgKeysPulse 0.5s ease; } /* Item focus state for keyboard nav */ #dg .dgup-asset-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } #dg .dgup-asset-item[tabindex] { outline: none; } /* Rarity gradient tint on hover */ #dg .dgup-asset-item[data-rarity="Rare"]:hover img { filter: brightness(1.05) saturate(1.1); } #dg .dgup-asset-item[data-rarity="Epic"]:hover img { filter: brightness(1.05) saturate(1.15); } #dg .dgup-asset-item[data-rarity="Legendary"]:hover img { filter: brightness(1.1) saturate(1.2); } /* Locked item lock icon overlay */ #dg .dgup-asset-item.locked::before { content: '🔒'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; z-index: 2; opacity: 0.6; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); } /* Grid empty state icon */ #dg .dg-shop-empty::before { content: '🔍'; display: block; font-size: 32px; margin-bottom: 12px; opacity: 0.4; } /* Tab switch fade */ #dg .dg-shop-grid { transition: opacity 0.15s ease; } #dg .dg-shop-grid.fading { opacity: 0.4; } /* Redeem input valid state */ #dg .dg-shop-redeem-input:valid:not(:placeholder-shown) { border-color: var(--green); } /* Redeem success animation */ @keyframes dgRedeemSuccess { 0% { background: var(--green); } 100% { background: var(--ink); } } #dg .dg-shop-redeem-btn.success { animation: dgRedeemSuccess 1s ease; background: var(--green) !important; } /* Shop scrollbar */ #dg .dg-shop { scrollbar-width: thin; scrollbar-color: var(--faint) transparent; } #dg .dg-shop::-webkit-scrollbar { width: 6px; } #dg .dg-shop::-webkit-scrollbar-track { background: transparent; } #dg .dg-shop::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 3px; } #dg .dg-shop::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* Preview row separator */ #dg .dg-shop-preview-row::after { content: ''; position: absolute; bottom: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } #dg .dg-shop-preview-row { position: relative; } /* Keys icon styling */ #dg .dg-shop-keys::before { content: '🔑'; margin-right: 4px; } /* Tab section subtle gradient */ #dg .dg-shop-tabs::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } #dg .dg-shop-tabs { position: relative; } /* Dark mode extras */ #dg.dark .dgup-asset-item.locked::before { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); } #dg.dark .dg-shop-preview-row::after { background: linear-gradient(90deg, transparent, var(--line), transparent); } #dg.dark .dgup-asset-item[data-rarity="Legendary"] { animation: dgRarityPulse 2.5s ease infinite; } #dg.dark .dgup-asset-item[data-rarity="Rare"]:hover { box-shadow: 0 8px 24px rgba(37,99,235,0.2); } #dg.dark .dgup-asset-item[data-rarity="Epic"]:hover { box-shadow: 0 8px 24px rgba(168,85,247,0.2); } #dg.dark .dgup-asset-item[data-rarity="Legendary"]:hover { box-shadow: 0 8px 24px rgba(217,119,6,0.25); } /* ── LOADING STATES ── */ #dg-initial-loader { position: fixed; inset: 0; z-index: 99999; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; transition: opacity 0.3s ease; } #dg-initial-loader.hiding { opacity: 0; pointer-events: none; } #dg-initial-loader .loader-spinner { width: 36px; height: 36px; border: 3px solid var(--line); border-top-color: var(--amber); border-radius: 50%; animation: dgSpin 0.8s linear infinite; } #dg-initial-loader .loader-text { font-size: 13px; color: var(--muted); font-family: 'DM Sans', sans-serif; letter-spacing: 0.02em; } #dg-initial-loader .loader-brand { font-family: 'Bebas Neue', sans-serif; font-size: 20px; color: var(--ink); letter-spacing: 0.06em; opacity: 0.5; } #dg.dark #dg-initial-loader { background: var(--bg); } .dg-shop-loader { display: flex; align-items: center; justify-content: center; padding: 60px 20px; grid-column: 1 / -1; } .dg-shop-loader .spin { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--amber); border-radius: 50%; animation: dgSpin 0.8s linear infinite; } .dgup-loading { display: flex; align-items: center; justify-content: center; padding: 40px; flex-direction: column; gap: 12px; } .dgup-loading .spin { width: 24px; height: 24px; border: 2px solid var(--line); border-top-color: var(--amber); border-radius: 50%; animation: dgSpin 0.8s linear infinite; } .dgup-loading-text { font-size: 12px; color: var(--muted); } #dg .dg-grid-sub { min-height: 24px; } #dg #dg-skeleton { opacity: 1; transition: opacity 0.3s ease; } #dg #dg-skeleton.hidden { opacity: 0; pointer-events: none; } /* ── SHOP ROUND 2: 100 IMPROVEMENTS ── */ /* 1. Header title — DM Sans + icon */ #dg .dg-shop-title { font-family: 'DM Sans', sans-serif !important; font-weight: 800 !important; font-size: 20px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; display: flex !important; align-items: center !important; gap: 8px !important; } #dg .dg-shop-title::before { content: ''; display: inline-block; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 01-8 0'/%3E%3C/svg%3E") no-repeat center; background-size: contain; flex-shrink: 0; } /* 2. Subtitle */ #dg .dg-shop-sub { font-size: 13px !important; opacity: 0.7 !important; } /* 3. Keys badge — premium gold */ #dg .dg-shop-keys { background: var(--ink) !important; color: var(--card) !important; border: 1px solid rgba(251,191,36,0.3) !important; font-size: 13px !important; font-weight: 700 !important; padding: 7px 16px !important; border-radius: 24px !important; box-shadow: 0 0 12px rgba(251,191,36,0.1) !important; } #dg .dg-shop-keys::before { content: '🔑' !important; margin-right: 6px !important; } #dg.dark .dg-shop-keys { background: rgba(251,191,36,0.15) !important; color: var(--amber) !important; border-color: rgba(251,191,36,0.25) !important; } /* 5. Close button */ #dg .dgup-editor-close { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: var(--faint) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; cursor: pointer !important; color: var(--muted) !important; transition: all 0.15s !important; border: none !important; } #dg .dgup-editor-close:hover { background: var(--line) !important; color: var(--ink) !important; } /* 8. Collection progress bar */ .dg-shop-progress { height: 3px; background: var(--line); border-radius: 2px; margin-top: 8px; overflow: hidden; } .dg-shop-progress-fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--amber)); border-radius: 2px; transition: width 0.5s ease; } .dg-shop-progress-text { font-size: 10px; color: var(--muted); margin-top: 4px; text-align: right; font-variant-numeric: tabular-nums; } /* 13. Avatar preview bigger + container */ #dg .dg-shop-preview-row { padding: 24px !important; background: var(--card) !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; } #dg .dg-shop-avatar { width: 140px !important; height: 140px !important; border-radius: 24px !important; border: 2px solid var(--line) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important; background: linear-gradient(135deg, var(--faint) 0%, rgba(178,115,0,0.06) 100%) !important; } /* 20. Avatar idle float */ @keyframes dgAvatarFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } #dg .dg-shop-avatar { animation: dgAvatarFloat 3s ease-in-out infinite !important; } /* 19. Avatar label styled */ #dg .dg-shop-avatar-label { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--muted) !important; } /* 24. Wallpaper as avatar bg */ #dg .dg-shop-avatar[data-has-wallpaper="true"] { background: none !important; } /* 25-26. Category tabs bigger + fade edges */ #dg .dgup-layer-tab { font-size: 13px !important; padding: 8px 16px !important; border-radius: 20px !important; border: 1.5px solid var(--line) !important; } #dg .dgup-layer-tab::before { font-size: 15px !important; } #dg .dg-shop-tab-row { position: relative !important; mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%) !important; -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%) !important; scroll-snap-type: x mandatory !important; } #dg .dgup-layer-tab { scroll-snap-align: start !important; } /* 28. Active tab filled */ #dg .dgup-layer-tab.active { background: var(--ink) !important; color: var(--card) !important; border-color: var(--ink) !important; } /* 30. Tabs sticky */ #dg .dg-shop-tabs { position: sticky !important; top: 56px !important; z-index: 10 !important; background: var(--bg) !important; padding: 16px 24px 0 !important; } /* 36. Divider between tab rows */ #dg .dg-shop-tab-row { margin-bottom: 12px !important; padding-bottom: 12px !important; border-bottom: 1px solid var(--line) !important; } #dg .dg-shop-rarity-row { margin-bottom: 0 !important; padding-bottom: 16px !important; } /* 37-38. Rarity tabs colored */ #dg .dgup-rarity-tab { font-size: 11px !important; padding: 6px 14px !important; border-radius: 20px !important; border: 1.5px solid var(--line) !important; font-weight: 600 !important; } #dg .dgup-rarity-tab::before { content: '●'; margin-right: 5px; font-size: 7px; vertical-align: middle; } #dg .dgup-rarity-tab[data-rarity="Starter"]::before { color: #8b8b8b; } #dg .dgup-rarity-tab[data-rarity="Common"]::before { color: #22c55e; } #dg .dgup-rarity-tab[data-rarity="Uncommon"]::before { color: #3b82f6; } #dg .dgup-rarity-tab[data-rarity="Rare"]::before { color: #a855f7; } #dg .dgup-rarity-tab[data-rarity="Special"]::before { color: #f59e0b; } #dg .dgup-rarity-tab[data-rarity="Exclusive"]::before { color: #ef4444; } #dg .dgup-rarity-tab[data-rarity="Costume"]::before { color: #f97316; } #dg .dgup-rarity-tab.active[data-rarity="Starter"] { background: rgba(139,139,139,0.1) !important; color: #8b8b8b !important; border-color: rgba(139,139,139,0.3) !important; } #dg .dgup-rarity-tab.active[data-rarity="Common"] { background: rgba(34,197,94,0.1) !important; color: #22c55e !important; border-color: rgba(34,197,94,0.3) !important; } #dg .dgup-rarity-tab.active[data-rarity="Uncommon"] { background: rgba(59,130,246,0.1) !important; color: #3b82f6 !important; border-color: rgba(59,130,246,0.3) !important; } #dg .dgup-rarity-tab.active[data-rarity="Rare"] { background: rgba(168,85,247,0.1) !important; color: #a855f7 !important; border-color: rgba(168,85,247,0.3) !important; } #dg .dgup-rarity-tab.active[data-rarity="Special"] { background: rgba(245,158,11,0.1) !important; color: #f59e0b !important; border-color: rgba(245,158,11,0.3) !important; } #dg .dgup-rarity-tab.active[data-rarity="Exclusive"] { background: rgba(239,68,68,0.1) !important; color: #ef4444 !important; border-color: rgba(239,68,68,0.3) !important; } #dg .dgup-rarity-tab.active[data-rarity="Costume"] { background: rgba(249,115,22,0.1) !important; color: #f97316 !important; border-color: rgba(249,115,22,0.3) !important; } /* 42. Active filter summary */ .dg-shop-filter-summary { font-size: 11px; color: var(--muted); padding: 0 24px 12px; display: none; } .dg-shop-filter-summary.visible { display: flex; align-items: center; gap: 8px; } .dg-shop-filter-clear { color: var(--red); font-weight: 600; cursor: pointer; font-size: 11px; } /* 47. Card background gradient */ #dg .dgup-asset-item { background: linear-gradient(180deg, var(--faint) 0%, rgba(0,0,0,0.02) 100%) !important; min-height: 180px !important; } #dg.dark .dgup-asset-item { background: linear-gradient(180deg, var(--faint) 0%, rgba(255,255,255,0.02) 100%) !important; } /* 49. Lock icon — SVG instead of emoji */ #dg .dgup-asset-item.locked::before { content: '' !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E") no-repeat center !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; background-color: rgba(0,0,0,0.3) !important; background-size: 18px 18px !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; z-index: 2 !important; font-size: 0 !important; opacity: 0.7 !important; } /* 50. Stronger name gradient */ #dg .dgup-asset-item-info { background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, transparent 100%) !important; padding: 28px 10px 10px !important; } /* 51. Rarity badge bigger */ #dg .dgup-asset-rarity { font-size: 9px !important; padding: 3px 8px !important; border-radius: 6px !important; font-weight: 800 !important; letter-spacing: 0.5px !important; } /* New rarity colors */ .dgup-rarity-starter { background: rgba(139,139,139,0.85) !important; } .dgup-rarity-uncommon { background: rgba(59,130,246,0.85) !important; } .dgup-rarity-special { background: rgba(245,158,11,0.85) !important; } .dgup-rarity-exclusive { background: rgba(239,68,68,0.85) !important; } .dgup-rarity-costume { background: rgba(249,115,22,0.85) !important; } /* 52. Price badge on every card */ .dgup-asset-price { position: absolute; bottom: 8px; right: 8px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 3px 8px; border-radius: 12px; z-index: 3; display: flex; align-items: center; gap: 3px; } .dgup-asset-price-free { background: var(--green) !important; } /* 53. Hover action overlay */ #dg .dgup-asset-item::before { transition: all 0.2s !important; } #dg .dgup-asset-item:not(.locked):hover::after { content: 'TAP TO PREVIEW'; position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); font-size: 8px; font-weight: 700; letter-spacing: 0.8px; color: rgba(255,255,255,0.8); text-transform: uppercase; z-index: 5; pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,0.5); } /* 56. Owned items distinct */ #dg .dgup-asset-item.equipped { background: linear-gradient(180deg, rgba(14,122,84,0.06) 0%, rgba(14,122,84,0.02) 100%) !important; } /* 58. NEW badge on recent items */ .dgup-asset-new { position: absolute; top: 8px; left: 8px; font-size: 7px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: var(--green); color: #fff; z-index: 3; animation: dgNewPulse 2s ease infinite; } /* 61. Grid gap + columns */ #dg .dg-shop-grid { gap: 14px !important; grid-auto-rows: auto !important; grid-template-rows: unset !important; } /* 62. Rarity accent stripe */ #dg .dgup-asset-item[data-rarity="Starter"]::after { background: #8b8b8b !important; } #dg .dgup-asset-item[data-rarity="Uncommon"]::after { background: #3b82f6 !important; } #dg .dgup-asset-item[data-rarity="Special"]::after { background: #f59e0b !important; } #dg .dgup-asset-item[data-rarity="Exclusive"]::after { background: #ef4444 !important; } #dg .dgup-asset-item[data-rarity="Costume"]::after { background: #f97316 !important; } /* 64. Tap feedback */ #dg .dgup-asset-item:active { transform: scale(0.96) !important; transition-duration: 0.08s !important; } /* 65. Exclusive shimmer */ @keyframes dgExclusiveShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } #dg .dgup-asset-item[data-rarity="Exclusive"] { border-image: linear-gradient(135deg, #ef4444, #fbbf24, #ef4444) 1 !important; } #dg .dgup-asset-item[data-rarity="Exclusive"]::after { height: 4px !important; background: linear-gradient(90deg, #ef4444, #fbbf24, #ef4444) !important; background-size: 200% auto !important; animation: dgExclusiveShimmer 3s linear infinite !important; } /* 68. Can't afford dim */ #dg .dgup-asset-item.cant-afford { filter: saturate(0.6) brightness(0.85) !important; } #dg .dgup-asset-item.cant-afford .dgup-asset-price { background: rgba(192,57,43,0.7) !important; } /* 71. Grid scroll container */ #dg .dg-shop-grid { max-height: calc(100vh - 380px) !important; overflow-y: auto !important; scrollbar-width: thin !important; scrollbar-color: var(--faint) transparent !important; scroll-behavior: smooth !important; } #dg .dg-shop-grid::-webkit-scrollbar { width: 4px !important; } #dg .dg-shop-grid::-webkit-scrollbar-thumb { background: var(--faint) !important; border-radius: 2px !important; } /* 75. Empty state improved */ #dg .dg-shop-empty { padding: 48px 24px !important; } #dg .dg-shop-empty::before { font-size: 36px !important; margin-bottom: 16px !important; opacity: 0.3 !important; } .dg-shop-empty-sub { font-size: 12px; color: var(--muted); margin-top: 8px; opacity: 0.6; } /* 79-81. Redeem section styled */ #dg .dg-shop-redeem { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; margin: 16px 24px 24px !important; padding: 16px !important; position: relative !important; } .dg-shop-redeem-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 12px; } #dg .dg-shop-redeem-input { border-radius: 10px !important; font-size: 14px !important; padding: 12px 16px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-weight: 600 !important; } #dg .dg-shop-redeem-input::placeholder { text-transform: none !important; font-weight: 400 !important; opacity: 0.4 !important; } #dg .dg-shop-redeem-btn { border-radius: 10px !important; font-size: 14px !important; font-weight: 700 !important; padding: 12px 20px !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; } /* 92. Dark header glass */ #dg.dark .dg-shop-header { background: rgba(24,24,24,0.92) !important; } #dg.dark .dg-shop-tabs { background: var(--bg) !important; } #dg.dark .dg-shop-redeem { background: var(--card) !important; border-color: var(--line) !important; } #dg.dark .dgup-asset-item.locked::before { background-color: rgba(0,0,0,0.5) !important; } /* 97. Reduced motion */ @media (prefers-reduced-motion: reduce) { #dg .dgup-asset-item { animation: none !important; } #dg .dg-shop-avatar { animation: none !important; } #dg .dgup-asset-item.equipped { animation: none !important; } #dg .dgup-asset-item[data-rarity="Legendary"] { animation: none !important; } #dg .dgup-asset-item[data-rarity="Exclusive"]::after { animation: none !important; } #dg .dgup-asset-item-owned { animation: none !important; } .dg-shop { animation: none !important; } } /* Mobile */ @media (max-width: 480px) { #dg .dg-shop-avatar { width: 100px !important; height: 100px !important; border-radius: 20px !important; } #dg .dg-shop-preview-row { padding: 20px !important; gap: 16px !important; } #dg .dgup-layer-tab { font-size: 12px !important; padding: 7px 12px !important; } #dg .dgup-rarity-tab { font-size: 10px !important; padding: 5px 10px !important; } #dg .dg-shop-grid { gap: 10px !important; max-height: 50vh !important; } #dg .dg-shop-redeem { margin: 12px 16px 16px !important; padding: 14px !important; } #dg .dgup-asset-item:not(.locked):hover::after { display: none !important; } } /* ── SHOP BATCH 2: FIXES & POLISH ── */ /* 101. Grid rows fix — force auto sizing */ #dg .dg-shop-grid { grid-auto-rows: auto !important; grid-template-rows: none !important; align-content: start !important; } /* 105. Tab row scroll indicator */ #dg .dg-shop-tab-row { mask-image: linear-gradient(90deg, black 0%, black 85%, transparent 100%) !important; -webkit-mask-image: linear-gradient(90deg, black 0%, black 85%, transparent 100%) !important; padding-right: 32px !important; } /* 106. Active rarity tab visible */ #dg .dgup-rarity-tab.active { font-weight: 700 !important; } /* 107. Header breathing room */ #dg .dg-shop-header { padding: 16px 24px 12px !important; min-height: 56px !important; } /* 113. Close button spacing */ #dg .dgup-editor-close { margin-left: 12px !important; } /* 115. Grid scroll shadow detection */ #dg .dg-shop-grid { position: relative !important; } /* 133. Inactive tabs background */ #dg .dgup-layer-tab:not(.active) { background: var(--card) !important; } #dg .dgup-rarity-tab:not(.active) { background: var(--card) !important; } /* 139. Rarity tabs single row */ #dg .dg-shop-rarity-row { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; padding-right: 24px !important; } #dg .dg-shop-rarity-row::-webkit-scrollbar { display: none !important; } #dg .dg-shop-rarity-row { mask-image: linear-gradient(90deg, black 0%, black 85%, transparent 100%) !important; -webkit-mask-image: linear-gradient(90deg, black 0%, black 85%, transparent 100%) !important; } /* 140. Bigger rarity dots */ #dg .dgup-rarity-tab::before { font-size: 8px !important; } /* 149. Card background lighter */ #dg .dgup-asset-item { background: linear-gradient(180deg, #f0efec 0%, #e8e7e3 100%) !important; } #dg.dark .dgup-asset-item { background: linear-gradient(180deg, #2a2a28 0%, #222220 100%) !important; } /* 150. FREE badge bigger */ #dg .dgup-asset-price { font-size: 11px !important; padding: 3px 10px !important; border-radius: 14px !important; } /* 151. Price tier colors */ .dgup-asset-price[data-cost="1"], .dgup-asset-price[data-cost="2"] { background: rgba(34,197,94,0.7) !important; } .dgup-asset-price[data-cost="3"], .dgup-asset-price[data-cost="4"], .dgup-asset-price[data-cost="5"] { background: rgba(59,130,246,0.7) !important; } .dgup-asset-price[data-cost="7"], .dgup-asset-price[data-cost="8"], .dgup-asset-price[data-cost="10"] { background: rgba(168,85,247,0.7) !important; } .dgup-asset-price[data-cost="99"] { background: linear-gradient(135deg, rgba(245,158,11,0.8), rgba(239,68,68,0.8)) !important; } /* 162. Rarity badge bigger */ #dg .dgup-asset-rarity { font-size: 10px !important; padding: 3px 8px !important; font-weight: 700 !important; } /* 163. Inner shadow for text readability */ #dg .dgup-asset-item { box-shadow: inset 0 -60px 40px -20px rgba(0,0,0,0.15) !important; } #dg .dgup-asset-item:hover { box-shadow: inset 0 -60px 40px -20px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.1) !important; } /* 165. Image border radius match card */ #dg .dgup-asset-item img { border-radius: 15px !important; } /* 168. Rarity shadows */ #dg .dgup-asset-item[data-rarity="Rare"] { box-shadow: inset 0 -60px 40px -20px rgba(0,0,0,0.15), 0 2px 8px rgba(168,85,247,0.1) !important; } #dg .dgup-asset-item[data-rarity="Special"] { box-shadow: inset 0 -60px 40px -20px rgba(0,0,0,0.15), 0 2px 8px rgba(245,158,11,0.1) !important; } #dg .dgup-asset-item[data-rarity="Exclusive"] { box-shadow: inset 0 -60px 40px -20px rgba(0,0,0,0.15), 0 2px 8px rgba(239,68,68,0.15) !important; } /* 177. Dark card background fix */ #dg.dark .dgup-asset-item img { background: linear-gradient(135deg, #333, #2a2a2a) !important; } /* 180. Dark keys badge */ #dg.dark .dg-shop-keys { background: rgba(255,255,255,0.08) !important; color: var(--amber) !important; border: 1px solid rgba(255,255,255,0.12) !important; } /* 189. Exclusive idle glow */ @keyframes dgExclusiveGlow { 0%,100% { box-shadow: inset 0 -60px 40px -20px rgba(0,0,0,0.15), 0 0 8px rgba(239,68,68,0.2), 0 0 0 1px rgba(239,68,68,0.1); } 50% { box-shadow: inset 0 -60px 40px -20px rgba(0,0,0,0.15), 0 0 16px rgba(239,68,68,0.3), 0 0 0 1px rgba(239,68,68,0.2); } } #dg .dgup-asset-item[data-rarity="Exclusive"]:not(.locked) { animation: dgExclusiveGlow 3s ease infinite !important; } /* 192. Grid scroll snap */ #dg .dg-shop-grid { scroll-snap-type: y proximity !important; } /* 193. Skeleton shimmer for images */ @keyframes dgCardShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } #dg .dgup-asset-item img[src=""], #dg .dgup-asset-item img:not([src]) { background: linear-gradient(90deg, var(--faint) 25%, var(--bg) 50%, var(--faint) 75%) !important; background-size: 200% 100% !important; animation: dgCardShimmer 1.5s ease infinite !important; } /* 195. Mobile full-screen */ @media (max-width: 520px) { #dg .dg-shop { max-width: 100% !important; margin: 0 !important; border-radius: 20px 20px 0 0 !important; min-height: 100vh !important; box-shadow: none !important; border: none !important; border-top: 1px solid var(--line) !important; } } /* 196. 2-col grid under 400px */ @media (max-width: 400px) { #dg .dg-shop-grid { grid-template-columns: repeat(2, 1fr) !important; } #dg .dgup-asset-item { min-height: 200px !important; } } /* 199. Tab touch targets */ #dg .dgup-layer-tab { min-height: 40px !important; display: inline-flex !important; align-items: center !important; } #dg .dgup-rarity-tab { min-height: 36px !important; display: inline-flex !important; align-items: center !important; } /* ── SHOP BATCH 2B: REMAINING ITEMS ── */ /* 109. Shop icon matches gem theme */ #dg .dg-shop-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E") !important; } /* 114. Keys earn shimmer */ @keyframes dgKeysShimmer { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } } #dg .dg-shop-keys.earned { background-image: linear-gradient(90deg, transparent 0%, rgba(251,191,36,0.3) 50%, transparent 100%) !important; background-size: 200% 100% !important; animation: dgKeysShimmer 0.8s ease 1 !important; } /* 117. Compact header on scroll */ #dg .dg-shop-header { transition: padding 0.2s ease, box-shadow 0.2s ease !important; } #dg .dg-shop-header.scrolled { padding-top: 10px !important; padding-bottom: 8px !important; } #dg .dg-shop-header.scrolled .dg-shop-sub { display: none !important; } /* 120. Collection progress bar proper */ #dg .dg-shop-progress { height: 4px !important; margin-top: 10px !important; width: 100% !important; } #dg #dg-shop-owned-count { font-size: 12px !important; font-weight: 600 !important; color: var(--muted) !important; margin-top: 4px !important; display: block !important; background: none !important; border: none !important; padding: 0 !important; } /* 122. Collapsible preview */ #dg .dg-shop-preview-row { transition: all 0.25s ease !important; overflow: hidden !important; } #dg .dg-shop-preview-row.collapsed { padding: 12px 24px !important; } #dg .dg-shop-preview-row.collapsed .dg-shop-avatar { width: 40px !important; height: 40px !important; border-radius: 12px !important; animation: none !important; } #dg .dg-shop-preview-row.collapsed .dg-shop-avatar-info { display: none !important; } #dg .dg-shop-preview-row.collapsed #dg-shop-owned-count { display: none !important; } /* 125. Wallpaper as avatar bg via JS class */ #dg .dg-shop-avatar.has-wallpaper { background: none !important; } /* 126. Collector rank badges */ .dg-collector-rank { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 12px; display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; } .dg-collector-bronze { background: rgba(180,140,80,0.1); color: #b48c50; border: 1px solid rgba(180,140,80,0.2); } .dg-collector-silver { background: rgba(148,163,184,0.1); color: #94a3b8; border: 1px solid rgba(148,163,184,0.2); } .dg-collector-gold { background: rgba(245,158,11,0.1); color: #f59e0b; border: 1px solid rgba(245,158,11,0.2); } .dg-collector-diamond { background: rgba(59,130,246,0.1); color: #3b82f6; border: 1px solid rgba(59,130,246,0.2); } /* 134. Tab switch animation */ #dg .dgup-layer-tab { transition: all 0.2s ease !important; } #dg .dgup-rarity-tab { transition: all 0.2s ease !important; } /* 136. Prevent tab truncation */ #dg .dgup-layer-tab { white-space: nowrap !important; flex-shrink: 0 !important; } /* 143. Filter info line */ .dg-shop-filter-info { font-size: 11px; color: var(--muted); padding: 0 24px 8px; display: none; font-variant-numeric: tabular-nums; } .dg-shop-filter-info.visible { display: block; } /* 147. Zero results rarity dim */ #dg .dgup-rarity-tab.empty { opacity: 0.4 !important; } /* 155. Scroll-reveal cards */ @keyframes dgCardReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* 156. Category group headers in All view */ .dg-shop-group-header { grid-column: 1 / -1; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 16px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .dg-shop-group-header:first-child { padding-top: 0; } /* 157. Can't afford items more distinct */ #dg .dgup-asset-item.cant-afford { filter: saturate(0.5) brightness(0.8) !important; opacity: 0.7 !important; } #dg .dgup-asset-item.cant-afford:hover { filter: saturate(0.7) brightness(0.9) !important; opacity: 0.85 !important; } #dg .dgup-asset-item.cant-afford .dgup-asset-price { color: #fca5a5 !important; } /* 159. Exclusive animated border */ @keyframes dgExclusiveBorder { 0% { border-color: #ef4444; } 33% { border-color: #fbbf24; } 66% { border-color: #a855f7; } 100% { border-color: #ef4444; } } #dg .dgup-asset-item[data-rarity="Exclusive"]:not(.locked) { animation: dgExclusiveBorder 4s linear infinite, dgExclusiveGlow 3s ease infinite !important; border-width: 2px !important; } /* 169. Redeem layout fix */ #dg .dg-shop-redeem { display: flex !important; flex-direction: column !important; gap: 12px !important; } #dg .dg-shop-redeem > div { display: flex !important; gap: 8px !important; } #dg .dg-shop-redeem-title { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--muted) !important; margin-bottom: 0 !important; } /* 170. Redeem button styled */ #dg .dg-shop-redeem-btn { background: var(--ink) !important; color: var(--card) !important; border: none !important; border-radius: 10px !important; padding: 12px 20px !important; font-weight: 700 !important; cursor: pointer !important; transition: all 0.2s !important; } #dg .dg-shop-redeem-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important; } #dg .dg-shop-redeem-btn:active { transform: scale(0.97) !important; } /* 171. Input icon hint */ #dg .dg-shop-redeem-input { padding-left: 36px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 12px center !important; background-size: 16px !important; } #dg .dg-shop-redeem-input::placeholder { text-transform: none !important; font-weight: 400 !important; letter-spacing: normal !important; } /* 174. Redeem validation states */ #dg .dg-shop-redeem-input:valid:not(:placeholder-shown) { border-color: var(--green) !important; } #dg .dg-shop-redeem-btn.loading { opacity: 0.6 !important; pointer-events: none !important; } @keyframes dgRedeemShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } #dg .dg-shop-redeem-input.error { border-color: var(--red) !important; animation: dgRedeemShake 0.3s ease !important; } #dg .dg-shop-redeem-input.success { border-color: var(--green) !important; } /* 178. Dark mode collection badge */ #dg.dark #dg-shop-owned-count { color: var(--muted) !important; } #dg.dark .dg-shop-progress { background: var(--line) !important; } /* 182. Dark card item visibility */ #dg.dark .dgup-asset-item { border-color: rgba(255,255,255,0.08) !important; } #dg.dark .dgup-asset-item:hover { border-color: rgba(255,255,255,0.15) !important; } /* 183. Dark redeem card */ #dg.dark .dg-shop-redeem { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.08) !important; } /* 186. Tab switch grid fade */ #dg .dg-shop-grid.switching { opacity: 0.3 !important; transition: opacity 0.1s !important; } /* 190. Card hover lift (desktop only) */ @media (hover: hover) { #dg .dgup-asset-item:hover { transform: translateY(-3px) scale(1.02) !important; } } /* 197. Reduced motion for all shop */ @media (prefers-reduced-motion: reduce) { #dg .dg-shop-avatar { animation: none !important; } #dg .dgup-asset-item { animation: none !important; } #dg .dgup-asset-item[data-rarity="Exclusive"]:not(.locked) { animation: none !important; } #dg .dg-shop-keys.earned { animation: none !important; } #dg .dg-shop { animation: none !important; } #dg .dgup-asset-item-owned { animation: none !important; } } /* 198. Long-press mobile hint */ @media (hover: none) { #dg .dgup-asset-item:not(.locked):hover::after { display: none !important; } #dg .dgup-asset-item:active { transform: scale(0.95) !important; transition-duration: 0.1s !important; } } /* ── SHOP BATCH 3: SEARCH, SORT, FILTERS ── */ /* Search input */ .dg-shop-search { width: 100%; padding: 10px 14px 10px 36px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 13px; font-family: 'DM Sans', sans-serif !important; outline: none; transition: border-color 0.15s; margin-bottom: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; background-size: 14px; } .dg-shop-search:focus { border-color: var(--ink); } .dg-shop-search::placeholder { color: var(--muted); opacity: 0.5; } #dg.dark .dg-shop-search { background-color: var(--card); border-color: var(--line); color: var(--ink); } /* Controls row */ .dg-shop-controls { padding: 0 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .dg-shop-toggles { display: flex; gap: 6px; align-items: center; margin-top: 8px; } /* Toggle buttons */ .dg-shop-toggle { font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; transition: all 0.15s; font-family: 'DM Sans', sans-serif !important; } .dg-shop-toggle:hover { border-color: var(--ink); color: var(--ink); } .dg-shop-toggle.active { background: var(--ink); color: var(--card); border-color: var(--ink); } #dg.dark .dg-shop-toggle.active { color: var(--bg); } /* Sort dropdown */ .dg-shop-sort { font-size: 11px; font-weight: 600; padding: 5px 28px 5px 12px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; transition: all 0.15s; font-family: 'DM Sans', sans-serif !important; -webkit-appearance: none; appearance: none; outline: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; margin-left: auto; } .dg-shop-sort:hover { border-color: var(--ink); color: var(--ink); } #dg.dark .dg-shop-sort { background-color: var(--card); border-color: var(--line); color: var(--muted); } /* Filter info */ .dg-shop-filter-info { font-size: 11px; color: var(--muted); padding: 8px 0 4px; display: none; } .dg-shop-filter-info.visible { display: flex; align-items: center; justify-content: space-between; } .dg-shop-filter-clear { color: var(--red); font-weight: 600; cursor: pointer; font-size: 11px; background: none; border: none; font-family: inherit; } /* Results count */ .dg-shop-results-count { font-size: 11px; color: var(--muted); padding: 0 24px 8px; } @media (max-width: 480px) { .dg-shop-search { font-size: 14px; padding: 12px 14px 12px 36px; } .dg-shop-toggles { flex-wrap: wrap; } } /* ── SHOP BATCH 3C: PURCHASE MODAL & ANIMATIONS ── */ /* Purchase confirmation modal */ .dg-purchase-modal { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); align-items: center; justify-content: center; } .dg-purchase-modal.open { display: flex; } .dg-purchase-card { background: var(--bg); border-radius: 20px; max-width: 320px; width: 90%; padding: 28px 24px; text-align: center; animation: dgShopSlideUp 0.3s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 20px 60px rgba(0,0,0,0.2); } .dg-purchase-img { width: 140px; height: 175px; border-radius: 14px; object-fit: cover; margin: 0 auto 16px; display: block; background: var(--faint); } .dg-purchase-name { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 4px; } .dg-purchase-rarity { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; } .dg-purchase-price { font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 20px; } .dg-purchase-btns { display: flex; gap: 10px; } .dg-purchase-buy { flex: 1; padding: 14px; background: var(--ink); color: var(--card); border: none; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif !important; transition: all 0.2s; } .dg-purchase-buy:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); } .dg-purchase-buy:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .dg-purchase-cancel { flex: 1; padding: 14px; background: transparent; color: var(--muted); border: 1.5px solid var(--line); border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif !important; transition: all 0.2s; } .dg-purchase-cancel:hover { border-color: var(--ink); color: var(--ink); } .dg-purchase-success { text-align: center; animation: dgShopSlideUp 0.3s ease; } .dg-purchase-success-icon { font-size: 48px; margin-bottom: 12px; } .dg-purchase-success-text { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 4px; } .dg-purchase-success-sub { font-size: 13px; color: var(--muted); margin-bottom: 20px; } .dg-purchase-equip { width: 100%; padding: 14px; background: var(--green); color: #fff; border: none; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif !important; transition: all 0.2s; } .dg-purchase-equip:hover { filter: brightness(1.1); } .dg-purchase-insufficient { color: var(--red); font-size: 13px; margin-bottom: 16px; line-height: 1.5; } /* Dark mode */ #dg.dark .dg-purchase-card { background: var(--bg); border: 1px solid var(--line); } #dg.dark .dg-purchase-cancel { border-color: var(--line); } /* Item name tooltip */ #dg .dgup-asset-item { position: relative !important; } #dg .dgup-asset-item[title]:hover::after { content: none !important; } /* Card stagger entrance per render */ #dg .dg-shop-grid .dgup-asset-item { animation: dgItemSlideIn 0.25s ease both; } /* Tab item counts */ .dgup-tab-count { font-size: 9px; opacity: 0.5; margin-left: 3px; } /* ── SHOP BATCH 3D: WISHLIST, ANIMATIONS, A11Y ── */ /* Wishlist heart on cards */ .dgup-asset-wishlist { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; z-index: 4; transition: all 0.15s; border: none; color: rgba(255,255,255,0.7); padding: 0; } .dgup-asset-wishlist:hover { transform: scale(1.15); color: #fff; } .dgup-asset-wishlist.wishlisted { color: var(--red); background: rgba(248,113,113,0.2); } /* Card confetti on purchase */ @keyframes dgConfettiFall { 0% { transform: translateY(-10px) rotate(0deg); opacity: 1; } 100% { transform: translateY(40px) rotate(360deg); opacity: 0; } } .dg-purchase-confetti { position: absolute; width: 6px; height: 6px; border-radius: 50%; animation: dgConfettiFall 1s ease forwards; pointer-events: none; z-index: 10; } /* Keys bounce animation */ @keyframes dgKeysBounce { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } } #dg .dg-shop-keys.bouncing { animation: dgKeysBounce 0.4s ease; } /* Card purchase flash */ @keyframes dgCardFlash { 0% { box-shadow: 0 0 0 0 rgba(14,122,84,0.4); } 50% { box-shadow: 0 0 20px 4px rgba(14,122,84,0.3); } 100% { box-shadow: 0 0 0 0 rgba(14,122,84,0); } } #dg .dgup-asset-item.just-purchased { animation: dgCardFlash 1s ease !important; } /* Lock breathing */ @keyframes dgLockBreathe { 0%,100% { opacity: 0.5; } 50% { opacity: 0.7; } } #dg .dgup-asset-item.locked::before { animation: dgLockBreathe 3s ease infinite !important; } /* Scroll-to-top in shop */ .dg-shop-scroll-top { position: absolute; bottom: 80px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--card); border: none; font-size: 16px; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: all 0.2s; z-index: 12; } .dg-shop-scroll-top.visible { display: flex; } .dg-shop-scroll-top:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } /* ARIA live region */ .dg-shop-sr-announce { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* Tab role styles */ .dgup-layer-tab[aria-selected="true"] { background: var(--ink) !important; color: var(--card) !important; border-color: var(--ink) !important; } .dgup-rarity-tab[aria-selected="true"] { font-weight: 700 !important; } /* Keyboard grid nav focus */ #dg .dgup-asset-item:focus { outline: 2px solid var(--ink); outline-offset: 2px; z-index: 5; } #dg .dgup-asset-item:focus:not(:focus-visible) { outline: none; } /* Noscript fallback */ .dg-shop-noscript { padding: 40px 24px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.6; } /* ── PROFILE FIXES ── */ /* Avatar layers fill parent */ #dg .dgup-avatar-large .dgup-avatar-layers { width: 100% !important; height: 100% !important; border-radius: 24px !important; } #dg .dgup-avatar-large .dgup-avatar { width: 100% !important; height: 100% !important; } /* Cover banner enabled */ #dg .dgup-cover { display: block !important; height: 128px !important; border-radius: 18px !important; background: linear-gradient(135deg, #111 0%, #333 50%, #111 100%) !important; position: relative !important; overflow: hidden !important; margin-top: 16px !important; } #dg .dgup-cover::before { content: '' !important; position: absolute !important; inset: 0 !important; background: radial-gradient(circle at 30% 50%, rgba(14,122,84,0.15) 0%, transparent 60%), radial-gradient(circle at 70% 50%, rgba(178,115,0,0.1) 0%, transparent 60%) !important; display: block !important; } #dg.dark .dgup-cover { background: linear-gradient(135deg, #0f0f0f 0%, #1e1e1e 50%, #0f0f0f 100%) !important; } /* Profile card vertical centered layout */ #dg .dgup-card { flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 28px 24px !important; gap: 16px !important; border-radius: 20px !important; margin-top: -32px !important; position: relative !important; z-index: 1 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important; } /* Avatar edit button */ .dgup-avatar-edit { position: absolute; bottom: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--card); border: 2px solid var(--card); display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; transition: all 0.15s; z-index: 2; } .dgup-avatar-edit:hover { transform: scale(1.1); } /* Profile name styling */ #dg .dgup-name { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: var(--ink) !important; line-height: 1.2 !important; } /* Email masked/hidden */ #dg .dgup-email { font-size: 12px !important; color: var(--muted) !important; opacity: 0.6 !important; } /* Username clickable */ #dg .dgup-username { font-size: 13px !important; color: var(--muted) !important; cursor: pointer !important; transition: color 0.15s !important; } #dg .dgup-username:hover { color: var(--ink) !important; } /* Badge tiers */ #dg .dgup-badge { font-size: 10px !important; font-weight: 700 !important; padding: 4px 12px !important; border-radius: 20px !important; } /* Stats row */ #dg .dgup-stats { gap: 12px !important; margin-top: 24px !important; } #dg .dgup-stat { cursor: pointer !important; transition: all 0.2s !important; border-radius: 14px !important; padding: 18px 14px !important; } #dg .dgup-stat:hover { background: var(--faint) !important; transform: translateY(-2px) !important; } #dg .dgup-stat-num { font-size: 28px !important; font-weight: 700 !important; color: var(--ink) !important; } #dg .dgup-stat-label { font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--muted) !important; margin-top: 4px !important; } /* Level display fix */ #dg .dgup-level { margin-top: 20px !important; padding: 20px 24px !important; border-radius: 16px !important; } #dg .dgup-level-name { font-size: 15px !important; font-weight: 700 !important; } #dg .dgup-level-sub { font-size: 12px !important; } #dg .dgup-level-bar { height: 8px !important; border-radius: 4px !important; margin-top: 10px !important; } /* Streak section */ #dg .dgup-streak { margin-top: 16px !important; padding: 18px 24px !important; border-radius: 16px !important; } /* Actions */ #dg .dgup-actions { margin-top: 24px !important; gap: 12px !important; } #dg .dgup-action { border-radius: 16px !important; padding: 20px 16px !important; } /* Favorites cards with images */ #dg .dgup-fav-card { border-radius: 14px !important; padding: 14px 16px !important; gap: 12px !important; } #dg .dgup-fav-img { width: 48px !important; height: 48px !important; border-radius: 10px !important; flex-shrink: 0 !important; } /* Achievement cards bigger */ #dg .dgup-achievement { min-height: 64px !important; padding: 14px 16px !important; border-radius: 14px !important; } #dg .dgup-achievement-icon { font-size: 22px !important; } #dg .dgup-achievement-name { font-size: 12px !important; font-weight: 700 !important; } #dg .dgup-achievement-desc { font-size: 10px !important; line-height: 1.4 !important; } /* Leaderboard avatars */ #dg .dgup-lb-avatar { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: var(--faint) !important; } #dg .dgup-lb-item { border-radius: 14px !important; } /* Recently viewed as proper cards */ #dg .dgup-recent-item { border-radius: 12px !important; padding: 12px 16px !important; gap: 12px !important; min-height: 56px !important; } #dg .dgup-recent-img { width: 40px !important; height: 40px !important; border-radius: 10px !important; } /* Explore cards */ #dg .dgup-explore-card { border-radius: 14px !important; } #dg .dgup-explore-img { height: 100px !important; border-radius: 14px 14px 0 0 !important; } /* Sign out subtle */ #dg .dgup-signout { margin-top: 40px !important; opacity: 0.5 !important; border-radius: 12px !important; } #dg .dgup-signout:hover { opacity: 1 !important; } /* Member since moved up */ #dg .dgup-member-since { margin-top: 12px !important; font-size: 11px !important; opacity: 0.4 !important; } /* Section spacing */ #dg .dgup-sec { margin-top: 32px !important; } #dg .dgup-sec-title { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } /* Profile max width tighter */ #dg #dg-user-profile { max-width: 560px !important; } /* Mobile profile */ @media (max-width: 480px) { #dg .dgup-card { padding: 20px 16px !important; } #dg .dgup-avatar-large { width: 120px !important; height: 120px !important; } #dg .dgup-name { font-size: 20px !important; } #dg .dgup-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } #dg .dgup-stat { padding: 14px 12px !important; } #dg .dgup-stat-num { font-size: 24px !important; } #dg .dgup-actions { flex-wrap: wrap !important; } #dg .dgup-action { min-width: calc(50% - 6px) !important; } #dg .dgup-achievement { min-width: calc(50% - 6px) !important; } #dg .dgup-cover { height: 100px !important; } #dg .dgup-fav-grid { grid-template-columns: 1fr !important; } } /* ── PROFILE BATCH 2 ── */ /* Stat accent borders */ #dg .dgup-stat:nth-child(1) { border-top: 2px solid var(--red) !important; } #dg .dgup-stat:nth-child(2) { border-top: 2px solid #3b82f6 !important; } #dg .dgup-stat:nth-child(3) { border-top: 2px solid var(--green) !important; } #dg .dgup-stat:nth-child(4) { border-top: 2px solid var(--amber) !important; } /* Streak calendar dots */ .dgup-streak-calendar { display: flex; gap: 6px; margin-top: 12px; } .dgup-streak-day { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; border: 1.5px solid var(--line); color: var(--muted); background: var(--card); transition: all 0.2s; } .dgup-streak-day.active { background: var(--amber); border-color: var(--amber); color: #fff; } .dgup-streak-day.today { border-color: var(--ink); font-weight: 800; } /* Friends empty state */ .dgup-friends-empty { text-align: center; padding: 32px 20px; } .dgup-friends-empty-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.4; } .dgup-friends-empty-text { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; } .dgup-friends-empty-btn { display: inline-block; padding: 10px 24px; background: var(--ink); color: var(--card); border-radius: 12px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s; border: none; font-family: 'DM Sans', sans-serif !important; } .dgup-friends-empty-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } /* Achievement progress bar */ .dgup-ach-progress { height: 3px; background: var(--line); border-radius: 2px; margin-top: 6px; overflow: hidden; } .dgup-ach-progress-fill { height: 100%; border-radius: 2px; background: var(--green); } /* Achievement count header */ .dgup-ach-count { font-size: 11px; color: var(--muted); font-weight: 500; } /* Leaderboard highlight current user */ #dg .dgup-lb-item.is-me { background: rgba(14,122,84,0.04) !important; border-left: 3px solid var(--green) !important; } #dg.dark .dgup-lb-item.is-me { background: rgba(52,211,153,0.06) !important; } /* Leaderboard rank medals */ #dg .dgup-lb-rank-1 { color: #f59e0b !important; font-size: 22px !important; } #dg .dgup-lb-rank-2 { color: #94a3b8 !important; font-size: 22px !important; } #dg .dgup-lb-rank-3 { color: #b45309 !important; font-size: 22px !important; } #dg .dgup-lb-rank-1::before { content: '🥇'; font-size: 16px; } #dg .dgup-lb-rank-2::before { content: '🥈'; font-size: 16px; } #dg .dgup-lb-rank-3::before { content: '🥉'; font-size: 16px; } /* Level badges colored */ .dgup-lb-level { border-radius: 12px !important; } .dgup-lb-level[data-level="1"], .dgup-lb-level[data-level="2"] { background: var(--faint) !important; color: var(--muted) !important; } .dgup-lb-level[data-level="3"], .dgup-lb-level[data-level="4"] { background: rgba(59,130,246,0.1) !important; color: #3b82f6 !important; } .dgup-lb-level[data-level="5"], .dgup-lb-level[data-level="6"] { background: rgba(168,85,247,0.1) !important; color: #a855f7 !important; } /* Recently viewed cards styled */ #dg .dgup-recent-item { border: 1px solid var(--line) !important; background: var(--card) !important; } #dg .dgup-recent-item:hover { border-color: var(--ink) !important; } /* Explore cards with images */ #dg .dgup-explore-card { background: var(--card) !important; border: 1px solid var(--line) !important; } #dg .dgup-explore-img { background-color: var(--faint) !important; background-size: cover !important; background-position: center !important; } /* Reactions row */ #dg .dgup-react-pill { border: 1px solid var(--line) !important; border-radius: 20px !important; padding: 6px 14px !important; background: var(--card) !important; cursor: default !important; } /* Section collapse toggle */ .dgup-sec-toggle { font-size: 11px; color: var(--muted); cursor: pointer; font-weight: 500; transition: color 0.15s; background: none; border: none; font-family: inherit; } .dgup-sec-toggle:hover { color: var(--ink); } /* Profile completeness ring */ .dgup-completeness { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 11px; color: var(--muted); } .dgup-completeness-ring { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--line); position: relative; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--ink); } .dgup-completeness-ring.good { border-color: var(--green); } /* Joined date in card */ .dgup-joined { font-size: 11px; color: var(--muted); opacity: 0.5; margin-top: 4px; } /* ── PROFILE BATCH 3 ── */ /* Stat click scroll targets */ #dg .dgup-stat { cursor: pointer !important; } /* Level name fix — remove double "Level" */ #dg .dgup-level-name { font-size: 16px !important; } /* Streak best display */ .dgup-streak-best { font-size: 11px; color: var(--muted); margin-top: 8px; opacity: 0.6; } /* Friends cards horizontal scroll */ #dg .dgup-friends-grid { padding-bottom: 8px !important; } #dg .dgup-friend-card { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; padding: 12px 8px !important; width: 88px !important; } #dg .dgup-friend-card:hover { border-color: var(--ink) !important; } #dg .dgup-friend-avatar { border: 2px solid var(--line) !important; } /* Action buttons with hover */ #dg .dgup-action { transition: all 0.2s ease !important; } #dg .dgup-action:hover { transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important; border-color: var(--ink) !important; } #dg .dgup-action:active { transform: scale(0.97) !important; } /* Favorites with remove button */ #dg .dgup-fav-remove { opacity: 0 !important; transition: opacity 0.15s !important; font-size: 14px !important; color: var(--muted) !important; cursor: pointer !important; } #dg .dgup-fav-card:hover .dgup-fav-remove { opacity: 1 !important; } #dg .dgup-fav-remove:hover { color: var(--red) !important; } /* Fav card clickable */ #dg .dgup-fav-card { cursor: pointer !important; transition: all 0.2s ease !important; } #dg .dgup-fav-card:hover { border-color: var(--ink) !important; transform: translateY(-1px) !important; } /* Achievement locked vs unlocked visual */ #dg .dgup-achievement.earned { border-color: rgba(14,122,84,0.2) !important; background: rgba(14,122,84,0.03) !important; } #dg .dgup-achievement.earned .dgup-achievement-icon { filter: none !important; } #dg .dgup-achievement.locked .dgup-achievement-icon { filter: grayscale(1) opacity(0.4) !important; } /* Achievement show/hide toggle */ .dgup-ach-toggle { display: flex; align-items: center; justify-content: center; padding: 10px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; border: 1px solid var(--line); border-radius: 10px; background: var(--card); margin-top: 12px; transition: all 0.15s; } .dgup-ach-toggle:hover { border-color: var(--ink); color: var(--ink); } /* Leaderboard clickable rows */ #dg .dgup-lb-item { cursor: pointer !important; } /* Recently viewed better spacing */ #dg .dgup-recent-list { gap: 8px !important; } #dg .dgup-recent-name { font-size: 14px !important; font-weight: 600 !important; } /* Explore cards clickable */ #dg .dgup-explore-card { cursor: pointer !important; } #dg .dgup-explore-name { font-size: 13px !important; font-weight: 700 !important; } #dg .dgup-explore-type { font-size: 10px !important; } /* Footer spacing */ #dg #dg-user-profile .dg-ftr { margin-top: 40px !important; padding: 20px 0 !important; } /* Dark mode profile */ #dg.dark .dgup-friend-card { background: var(--card) !important; border-color: var(--line) !important; } #dg.dark .dgup-friend-card:hover { border-color: var(--ink) !important; } #dg.dark .dgup-achievement.earned { background: rgba(52,211,153,0.04) !important; border-color: rgba(52,211,153,0.15) !important; } #dg.dark .dgup-fav-card:hover { border-color: var(--ink) !important; } #dg.dark .dgup-ach-toggle { background: var(--card) !important; border-color: var(--line) !important; } /* ── PROFILE BATCH 5: CRITICAL VISIBILITY FIXES ── */ /* Force level elements visible */ #dg .dgup-level-badge, #dg .dgup-level-name, #dg .dgup-level-sub, #dg .dgup-level-xp, #dg .dgup-level-fill { display: block !important; } #dg .dgup-level-badge { display: flex !important; } #dg .dgup-level-bar { display: block !important; } /* Force achievements visible */ #dg .dgup-achievements { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; } /* Force friends section visible */ #dg #dgup-friends-sec { display: block !important; } #dg .dgup-friends-grid { display: flex !important; } /* Force leaderboard visible */ #dg #dgup-lb-sec { display: block !important; } #dg .dgup-lb-list { display: flex !important; flex-direction: column !important; } /* Member since visible */ #dg .dgup-member-since { display: block !important; } /* Sign out full opacity */ #dg .dgup-signout { opacity: 0.7 !important; } #dg .dgup-signout:hover { opacity: 1 !important; } /* Back link styling */ #dg .dg-back-link { font-size: 13px !important; font-weight: 600 !important; color: var(--muted) !important; } #dg .dg-back-link:hover { color: var(--ink) !important; text-decoration: underline !important; } /* Cover height */ #dg .dgup-cover { height: 120px !important; } /* Profile card shadow */ #dg .dgup-card { box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; } #dg.dark .dgup-card { box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important; } /* Dark mode streak dots */ #dg.dark .dgup-streak-day:not(.active) { border-color: rgba(255,255,255,0.15) !important; color: rgba(255,255,255,0.3) !important; } /* Dark mode sign out */ #dg.dark .dgup-signout { opacity: 0.6 !important; } /* ── PROFILE BATCH 5B ── */ /* 409. Cover uses rank gradient */ #dg .dgup-cover.rank-bronze { background: linear-gradient(135deg, #92400e 0%, #78350f 50%, #92400e 100%) !important; } #dg .dgup-cover.rank-silver { background: linear-gradient(135deg, #64748b 0%, #475569 50%, #64748b 100%) !important; } #dg .dgup-cover.rank-gold { background: linear-gradient(135deg, #b45309 0%, #92400e 50%, #b45309 100%) !important; } #dg .dgup-cover.rank-diamond { background: linear-gradient(135deg, #1e40af 0%, #7c3aed 50%, #1e40af 100%) !important; } /* 410. Edit avatar button bigger */ #dg .dgup-avatar-edit { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: var(--ink) !important; color: var(--card) !important; border: 2px solid var(--card) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important; font-size: 14px !important; bottom: 4px !important; right: 4px !important; } /* 411. Avatar placeholder when empty */ #dg .dgup-avatar-large:empty::after, #dg .dgup-avatar-layers:empty::after { content: '👤'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 48px; opacity: 0.2; } /* 413. Name overflow */ #dg .dgup-name { text-overflow: ellipsis !important; overflow: hidden !important; white-space: nowrap !important; max-width: 400px !important; } /* 419. Profile responsive width */ #dg #dg-user-profile { width: 100% !important; max-width: 560px !important; margin: 0 auto !important; } /* 422-423. Cover gradient blend */ #dg .dgup-cover::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 40px !important; background: linear-gradient(transparent, var(--bg)) !important; display: block !important; } #dg.dark .dgup-cover::after { background: linear-gradient(transparent, var(--bg)) !important; } /* 426. Thicker stat accents */ #dg .dgup-stat:nth-child(1) { border-top-width: 3px !important; } #dg .dgup-stat:nth-child(2) { border-top-width: 3px !important; } #dg .dgup-stat:nth-child(3) { border-top-width: 3px !important; } #dg .dgup-stat:nth-child(4) { border-top-width: 3px !important; } /* 436. Level bar gradient by rank */ #dg .dgup-level-fill { background: linear-gradient(90deg, var(--green), var(--amber)) !important; border-radius: 4px !important; } /* 440. Level bar shimmer */ @keyframes dgLevelShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } #dg .dgup-level-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%); background-size: 200% 100%; animation: dgLevelShimmer 3s ease infinite; border-radius: 4px; } #dg .dgup-level-bar { position: relative !important; overflow: hidden !important; } /* 445. Today streak dot pulse */ @keyframes dgTodayPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(178,115,0,0.3); } 50% { box-shadow: 0 0 0 4px rgba(178,115,0,0); } } #dg .dgup-streak-day.today.active { animation: dgTodayPulse 2s ease infinite !important; } /* 446. Best streak prominent */ .dgup-streak-best { font-size: 12px !important; color: var(--muted) !important; opacity: 0.7 !important; } .dgup-streak-best::before { content: '\uD83C\uDFC5 '; } /* 448. Streak warm background */ #dg .dgup-streak[data-streak="high"] { background: linear-gradient(135deg, var(--card), rgba(178,115,0,0.04)) !important; border-color: rgba(178,115,0,0.15) !important; } /* 450. Day labels clearer */ #dg .dgup-streak-day { font-size: 9px !important; font-weight: 600 !important; } /* 453. Action hover effects */ #dg .dgup-action { transition: all 0.2s ease !important; } #dg .dgup-action:hover { transform: translateY(-3px) !important; box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important; } /* 461. Fav images */ #dg .dgup-fav-img { background-size: cover !important; background-position: center !important; background-color: var(--faint) !important; } /* 464. Fav card clickable */ #dg .dgup-fav-card { text-decoration: none !important; color: inherit !important; } /* 471-473. Recently viewed with arrow */ #dg .dgup-recent-item { text-decoration: none !important; color: inherit !important; } #dg .dgup-recent-item::after { content: '→'; color: var(--muted); font-size: 14px; flex-shrink: 0; transition: transform 0.15s; } #dg .dgup-recent-item:hover::after { transform: translateX(3px); color: var(--ink); } /* 479. Reactions row enhanced */ #dg .dgup-reactions { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; } /* 490. Back link hover */ #dg .dg-back-link { transition: all 0.15s !important; } #dg .dg-back-link:hover { transform: translateX(-3px) !important; } /* 492. Dark stat accents brighter */ #dg.dark .dgup-stat:nth-child(1) { border-top-color: var(--red) !important; } #dg.dark .dgup-stat:nth-child(2) { border-top-color: #60a5fa !important; } #dg.dark .dgup-stat:nth-child(3) { border-top-color: #34d399 !important; } #dg.dark .dgup-stat:nth-child(4) { border-top-color: #fbbf24 !important; } /* 494. Dark cards use var */ #dg.dark .dgup-recent-item { background: var(--card) !important; border-color: var(--line) !important; } #dg.dark .dgup-fav-card { border-color: var(--line) !important; } /* 496. Page transition */ #dg #dg-user-profile { animation: dgPageSlideIn 0.3s ease both !important; } /* 498. Section loading skeletons */ .dgup-sec-skeleton { padding: 20px; } .dgup-sec-skeleton-bar { height: 12px; background: var(--faint); border-radius: 6px; margin-bottom: 10px; animation: dgShimmerSweep 1.8s ease infinite; } .dgup-sec-skeleton-bar.w40 { width: 40%; } .dgup-sec-skeleton-bar.w70 { width: 70%; } .dgup-sec-skeleton-bar.w90 { width: 90%; } /* Reset avatar button */ .dg-shop-reset-btn { display: inline-block; margin-top: 8px; padding: 6px 14px; font-size: 11px; font-weight: 600; color: var(--muted); background: transparent; border: 1.5px solid var(--line); border-radius: 8px; cursor: pointer; font-family: 'DM Sans', sans-serif !important; transition: all 0.15s; } .dg-shop-reset-btn:hover { border-color: var(--ink); color: var(--ink); } #dg.dark .dg-shop-reset-btn { border-color: var(--line); color: var(--muted); } #dg.dark .dg-shop-reset-btn:hover { border-color: var(--ink); color: var(--ink); } /* ── ACCESSIBILITY: FOCUS VISIBLE ── */ #dg .dg-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } #dg .dg-filter-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } #dg .dg-fav-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } #dg .dg-sort:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; } #dg .dg-reaction-btn:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; } #dg .dg-gimg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } #dg .dg-quicknav-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } #dg .dg-hdr-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } #dg .dg-back-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } #dg .dg-load-more:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } #dg .dg-auth-submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } #dg .dg-auth-input:focus-visible { outline: none; } #dg .dgup-action:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } #dg .dgup-signout:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } /* ─── Round 24: Listing Page Overhaul (100 improvements) ─── */ /* 501/505: Focus outlines for ALL interactive elements */ #dg *:focus-visible { outline: 2px solid var(--amber) !important; outline-offset: 2px; } #dg input:focus-visible, #dg .dg-auth-input:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(178,115,0,0.15); } /* 507-515: Gem of the Week */ #dg .dg-featured-card { display: flex !important; min-height: 200px; border-left: 3px solid var(--amber); border-radius: 14px; overflow: hidden; animation: dgFadeIn 0.6s ease; position: relative; margin-bottom: 24px; } #dg .dg-featured-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(178,115,0,0.12); } #dg .dg-featured-img { display: block !important; width: 45% !important; min-height: 200px !important; border-radius: 0 !important; background-size: cover !important; background-position: center !important; flex-shrink: 0; } #dg .dg-featured-info { padding: 24px 28px !important; display: flex; flex-direction: column; justify-content: center; flex: 1; } #dg .dg-featured-label { font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase; font-weight: 700; color: var(--amber); margin-bottom: 8px; } #dg .dg-featured-label::before { content: '\2726 '; } #dg .dg-featured-name { font-size: 26px !important; font-weight: 800 !important; color: var(--ink); line-height: 1.2; } #dg .dg-featured-type { font-size: 13px; color: #8a8a8a; margin-top: 4px; } #dg .dg-featured-card::after { content: '\2192 View This Week\2019s Gem'; position: absolute; bottom: 16px; right: 20px; font-size: 12px; font-weight: 600; color: var(--amber); opacity: 0; transform: translateX(-8px); transition: all 0.3s ease; pointer-events: none; } #dg .dg-featured-card:hover::after { opacity: 1; transform: translateX(0); } #dg.dark .dg-featured-card { border-color: rgba(240,238,234,0.08) !important; background: rgba(255,255,255,0.02); box-shadow: 0 2px 12px rgba(0,0,0,0.3); } #dg.dark .dg-featured-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.4); } @media (max-width: 480px) { #dg .dg-featured-card { flex-direction: column; min-height: auto; } #dg .dg-featured-img { width: 100% !important; min-height: 140px !important; border-radius: 0 !important; } #dg .dg-featured-info { padding: 16px 20px !important; } #dg .dg-featured-name { font-size: 20px !important; } } /* dgFadeIn keyframes defined at base level (~line 491) */ /* 516-521: Hero section */ #dg .dg-grid-headline em { -webkit-text-stroke-width: 2px; } #dg .dg-grid-sub { margin-bottom: 24px !important; } #dg .dg-grid-hero { padding-top: 16px !important; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #F8F6F2 0%, #FFFFFF 100%); } #dg.dark .dg-grid-hero { background: linear-gradient(180deg, rgba(20,20,20,1) 0%, var(--bg) 100%); border-bottom-color: rgba(255,255,255,0.06); } #dg .dg-grid-count strong { font-weight: 700; color: var(--ink); } /* 522-527: Hero stat pills */ #dg .dg-hero-stat { font-size: 13px !important; padding: 8px 16px !important; cursor: pointer; transition: all 0.2s ease; } #dg .dg-hero-stat:hover { background: var(--faint); border-color: var(--line); } #dg .dg-hero-stats { flex-wrap: wrap; justify-content: center; } #dg .dg-hero-stat-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #0E7A54; margin-right: 10px; vertical-align: middle; } #dg.dark .dg-hero-stat-dot { background: #2ECC71 !important; } /* 528-536: Recently viewed strip */ #dg .dg-recent-label { font-size: 11px !important; letter-spacing: 1px !important; font-weight: 600 !important; } #dg .dg-recent-img { width: 36px !important; height: 36px !important; border-radius: 50% !important; } #dg .dg-recent-item { padding: 6px 14px 6px 8px !important; border: 1px solid var(--line); transition: background 0.2s ease; } #dg .dg-recent-item:hover { background: var(--faint); } #dg.dark .dg-recent-item { border-color: rgba(255,255,255,0.06); } #dg .dg-recent-list { scrollbar-width: thin; scrollbar-color: #D4D3CE transparent; -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%); } #dg .dg-recent-strip { margin-bottom: 24px !important; } /* 537-542: Search bar */ #dg .dg-search { border: 1px solid var(--line) !important; border-radius: 12px !important; padding: 14px 48px 14px 44px !important; background: var(--bg) !important; transition: all 0.2s ease; } #dg .dg-search:focus { box-shadow: 0 0 0 3px rgba(178,115,0,0.1); border-color: var(--amber) !important; } #dg.dark .dg-search { border-color: var(--line) !important; background: var(--card) !important; color: var(--muted) !important; } #dg.dark .dg-search:focus { box-shadow: 0 0 0 3px rgba(178,115,0,0.15); border-color: var(--amber) !important; } #dg .dg-search-icon { left: 16px !important; top: 50% !important; transform: translateY(-50%); } /* 543-552: Filter bar */ #dg .dg-filter-bar { position: sticky !important; top: 33px; z-index: 50; background: rgba(250,249,247,0.92) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 12px 0 16px !important; border-top: 1px solid var(--line); } #dg.dark .dg-filter-bar { background: rgba(15,15,15,0.92) !important; border-top-color: rgba(255,255,255,0.06); } #dg .dg-pill { padding: 8px 18px !important; transition: all 0.2s ease; } #dg .dg-pill:hover:not(.active) { background: #F0EDE8; border-color: #C4C3BE; } #dg.dark .dg-pill:hover:not(.active) { background: rgba(255,255,255,0.06); } #dg .dg-sort { border: 1px solid var(--line) !important; border-radius: 20px !important; -webkit-appearance: none !important; appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; padding-right: 32px !important; } #dg.dark .dg-sort { border-color: #333 !important; background-color: #1A1A1A !important; color: #ccc !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important; } #dg .dg-saved-btn.active { color: var(--red) !important; border-color: var(--red) !important; } /* Location button uses the same pill style but green-on-white instead of red */ #dg #dg-location-btn.active { color: #ffffff !important; background: #2e7d32 !important; border-color: #2e7d32 !important; } /* 553-568: Card grid */ #dg .dg-grid { grid-template-columns: repeat(2, 1fr) !important; } @media (max-width: 768px) { #dg .dg-grid { grid-template-columns: 1fr !important; } } #dg .dg-card { min-height: 300px; transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s ease !important; } #dg .dg-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08) !important; } #dg.dark .dg-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.25) !important; } #dg .dg-card-img { aspect-ratio: 16/9; height: auto !important; min-height: 160px; } #dg .dg-card-body { padding: 16px 20px 24px !important; } #dg .dg-card-type { background: var(--faint); padding: 3px 10px; border-radius: 4px; font-size: 10px !important; text-transform: uppercase; letter-spacing: 0.5px; display: inline-block; } #dg.dark .dg-card-type { background: rgba(255,255,255,0.06); } #dg .dg-card-name { font-size: 17px !important; line-height: 1.3 !important; } #dg .dg-new-badge { font-size: 10px !important; border-radius: 12px !important; background: var(--amber) !important; color: #fff !important; padding: 2px 8px !important; } #dg .dg-card-status-open { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(14,122,84,0.9) !important; } #dg .dg-card-loc::before { content: '\1F4CD'; font-size: 11px; margin-right: 3px; } #dg .dg-card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #dg .dg-card-arrow { width: 34px !important; height: 34px !important; background: var(--faint) !important; border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center; transition: all 0.2s ease !important; border: none !important; } #dg .dg-card:hover .dg-card-arrow { background: var(--ink) !important; color: #fff !important; transform: translateX(4px); } #dg.dark .dg-card:hover .dg-card-arrow { background: var(--faint) !important; color: var(--ink) !important; } #dg .dg-fav-btn { transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1) !important; } #dg .dg-fav-btn.saved { transform: scale(1.15); } @keyframes dgHeartPop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } /* 573-579: Header */ #dg .dg-hdr { backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; background: rgba(255,255,255,0.85) !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; } #dg.dark .dg-hdr { background: rgba(15,15,15,0.85) !important; border-bottom-color: rgba(255,255,255,0.06) !important; } #dg .dg-hdr-actions { gap: 8px; } #dg #dg-hdr-avatar { width: 32px !important; height: 32px !important; border: 2px solid var(--line) !important; margin-right: 8px !important; } #dg .dg-invite-btn { border-color: var(--amber) !important; color: var(--amber) !important; } /* 580-583: Show more button */ #dg .dg-load-more { padding: 12px 32px !important; border: 1px solid var(--line) !important; border-radius: 24px !important; background: transparent !important; font-size: 14px !important; font-weight: 600; cursor: pointer; transition: all 0.2s ease !important; } #dg .dg-load-more:hover { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; } #dg.dark .dg-load-more:hover { background: var(--faint) !important; color: var(--ink) !important; } @keyframes dgFadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } #dg .dg-card.dg-reveal-in { animation: dgFadeInUp 0.3s ease forwards; } /* 584-591: Dark mode fixes */ #dg.dark .dg-pill.active { background: rgba(240,238,234,0.92) !important; color: #111 !important; } #dg.dark .dg-card { border-color: var(--line) !important; } #dg.dark .dg-back-top { background: #F0EDE8 !important; color: #111 !important; } /* 592-595: Footer */ #dg .dg-ftr { padding: 32px 0 !important; margin-top: 48px !important; } #dg .dg-ftr-text { font-size: 12px !important; color: #999 !important; } /* 596-599: Back to top */ #dg .dg-back-top { bottom: 24px !important; } #dg .dg-back-top:hover { box-shadow: 0 0 0 4px rgba(17,17,17,0.1); } /* 600: Pulse animation for skeleton */ @keyframes dgPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } /* ─── End Round 24 ─── */ /* ─── Round 25: 100 Polish Fixes (Spacing, Radius, Shadows, Transitions) ─── */ /* 701-710: Spacing consistency (8px grid) */ #dg .dg-hdr { padding: 16px 0 !important; } #dg .dg-grid { gap: 24px !important; } #dg .dg-ftr { padding: 32px 0 24px !important; } /* 711-718: Border-radius normalization */ #dg .dg-desc-card { border-radius: 14px !important; } #dg .dg-hrs-card { border-radius: 14px !important; } #dg .dg-menu-img { border-radius: 12px !important; } #dg .dg-logo-img-wrap { border-radius: 10px !important; } #dg .dg-suggestions { border-radius: 0 0 12px 12px !important; } #dg .dg-mini-map { border-radius: 10px !important; } /* 719-725: Font hierarchy */ #dg .dg-error-title { line-height: 1.1 !important; } #dg .dg-grid-count { font-weight: 600 !important; } #dg .dg-card-body { line-height: 1.5; } #dg .dg-search::placeholder { font-style: italic; opacity: 0.6; } /* 726-733: Box-shadow depth */ #dg .dg-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important; } #dg .dg-fav-btn { box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; } #dg .dg-toast { box-shadow: 0 12px 32px rgba(0,0,0,0.2) !important; } #dg .dg-suggestions { box-shadow: 0 12px 32px rgba(0,0,0,0.15) !important; } /* 734-739: Color consistency */ #dg .dg-fav-btn.saved { color: var(--red) !important; } #dg .dg-card-img-empty { opacity: 0.5 !important; } /* 740-743: Z-index normalization */ #dg .dg-card-status { z-index: 5 !important; } #dg .dg-progress { z-index: 1000 !important; } #dg .dg-toast { z-index: 1001 !important; } /* 744-750: Transition timing normalization */ #dg .dg-hdr-btn { transition: all 0.2s ease-out !important; } #dg .dg-card-arrow { transition: color 0.2s ease-out, transform 0.2s cubic-bezier(0.22,1,0.36,1) !important; } #dg .dg-menu-img { transition: transform 0.3s cubic-bezier(0.22,1,0.36,1) !important; } #dg .dg-chevron { transition: transform 0.2s ease-out !important; } #dg .dg-reveal { transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.22,1,0.36,1) !important; } /* 796: Dark mode toggle transition */ #dg { transition: background-color 0.3s ease-out, color 0.3s ease-out; } #dg * { transition-property: background-color, color, border-color, box-shadow, opacity; } #dg .dg-card, #dg .dg-card *, #dg .dg-featured-card, #dg .dg-hdr, #dg .dg-filter-bar { transition-duration: 0.3s; transition-timing-function: ease-out; } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { #dg *, #dg *::before, #dg *::after { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; transition-duration: 0.01s !important; } } /* 671: Card type text overflow */ #dg .dg-card-type { max-width: 200px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } /* 666: Card name truncation */ #dg .dg-card-name { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100%; } /* 675: Card location no-wrap */ #dg .dg-card-loc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* 799: Lightbox loading pulse */ #dg .dg-lightbox img { transition: opacity 0.3s ease; } /* ─── End Round 25 ─── */ /* ─── Round 26: Business Profile Overhaul (1000 improvements) ─── */ /* ══════ HERO SECTION ══════ */ #dg .dg-hero { height: 320px !important; border-radius: 16px !important; box-shadow: 0 4px 24px rgba(0,0,0,0.08); position: relative; } #dg .dg-hero-grad { background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.75) 100%) !important; } #dg .dg-hero-content { padding: 32px 36px 28px !important; } #dg .dg-hero-type { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.15em !important; color: rgba(255,255,255,0.85) !important; margin-bottom: 10px; text-shadow: 0 1px 8px rgba(0,0,0,0.5) !important; display: inline-flex; align-items: center; gap: 6px; } #dg .dg-hero-name { font-size: clamp(36px, 5.5vw, 60px) !important; letter-spacing: 0.02em; line-height: 0.95 !important; color: #fff; margin-bottom: 16px; text-shadow: 0 2px 20px rgba(0,0,0,0.6), 0 0 60px rgba(0,0,0,0.2) !important; word-break: break-word; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } #dg .dg-hero::after { content: ''; position: absolute; inset: 0; border-radius: 16px; box-shadow: inset 0 0 60px rgba(0,0,0,0.2); pointer-events: none; } #dg .dg-hero .dg-photo-count { position: absolute; top: 16px; right: 16px; bottom: auto; background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: rgba(255,255,255,0.9); font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 20px; cursor: pointer; transition: all 0.2s; } #dg .dg-hero .dg-photo-count:hover { background: rgba(0,0,0,0.7); } #dg .dg-hero { cursor: zoom-in; } /* Hero pills (Open/Closed, type badges) */ #dg .dg-pills { gap: 10px !important; } #dg .dg-pills .dg-pill-open { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(14,122,84,0.85) !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; padding: 6px 14px !important; border-radius: 20px !important; border: none !important; letter-spacing: 0.04em; text-shadow: 0 1px 4px rgba(0,0,0,0.2); } #dg .dg-pills .dg-pill-closed { backdrop-filter: blur(10px); background: rgba(220,53,69,0.85) !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; padding: 6px 14px !important; border-radius: 20px !important; border: none !important; } #dg .dg-pills .dg-pill-type { backdrop-filter: blur(10px); background: rgba(255,255,255,0.15) !important; color: rgba(255,255,255,0.9) !important; font-size: 11px !important; font-weight: 600 !important; padding: 5px 12px !important; border-radius: 16px !important; border: 1px solid rgba(255,255,255,0.15) !important; letter-spacing: 0.03em; } /* Hero fade-in on load */ #dg .dg-hero { animation: dgProfileHeroIn 0.6s ease both; } @keyframes dgProfileHeroIn { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } } /* ══════ BREADCRUMB & BACK LINK ══════ */ #dg .dg-breadcrumb { font-size: 12px !important; margin-bottom: 6px !important; gap: 8px !important; } #dg .dg-breadcrumb a { font-weight: 500; } #dg .dg-breadcrumb a:hover { color: var(--amber) !important; } #dg .dg-breadcrumb-sep { font-size: 10px; opacity: 0.4; } #dg #dg-breadcrumb-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; } #dg .dg-back-link { font-size: 13px !important; font-weight: 600 !important; color: var(--muted) !important; padding: 8px 12px !important; border-radius: 8px; transition: all 0.2s !important; min-height: 44px; } #dg .dg-back-link:hover { color: var(--ink) !important; background: var(--faint); } #dg .dg-back-link:active { background: var(--line); transform: scale(0.98); } /* ══════ PROFILE TOP BAR (Actions) ══════ */ #dg .dg-profile-top { margin-top: 20px !important; margin-bottom: 8px !important; } #dg .dg-profile-fav-btn { font-size: 13px !important; font-weight: 600 !important; padding: 10px 20px !important; border-radius: 12px !important; transition: all 0.25s cubic-bezier(0.22,1,0.36,1) !important; } #dg .dg-profile-fav-btn:hover { border-color: var(--ink) !important; color: var(--ink) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } #dg .dg-profile-fav-btn:active { transform: scale(0.97); } #dg .dg-profile-fav-btn.saved { border-color: var(--red) !important; color: var(--red) !important; background: rgba(231,76,60,0.04) !important; } #dg .dg-share-btn { font-size: 13px !important; font-weight: 600 !important; padding: 10px 20px !important; border: 1px solid var(--line) !important; border-radius: 12px !important; background: var(--card) !important; color: var(--muted) !important; cursor: pointer; transition: all 0.25s cubic-bezier(0.22,1,0.36,1) !important; min-height: 44px; display: flex; align-items: center; gap: 6px; font-family: 'DM Sans', sans-serif !important; } #dg .dg-share-btn:hover { border-color: var(--ink) !important; color: var(--ink) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } /* ══════ SECTION HEADERS ══════ */ #dg .dg-section { margin-top: 32px !important; margin-bottom: 16px !important; gap: 14px !important; } #dg .dg-section-title { font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.16em !important; color: var(--ink) !important; opacity: 0.7; } #dg .dg-section-line { background: var(--line) !important; opacity: 0.6; } /* ══════ INFO BAR ══════ */ #dg .dg-info-bar { padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-top: 16px; display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); } /* ══════ REACTIONS ══════ */ #dg .dg-reactions { margin-top: 16px !important; gap: 8px !important; } #dg .dg-reaction-btn { padding: 10px 18px !important; border-radius: 24px !important; font-size: 15px !important; gap: 6px !important; transition: all 0.2s cubic-bezier(0.22,1,0.36,1) !important; } #dg .dg-reaction-btn:hover { transform: scale(1.08) !important; border-color: var(--ink) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } #dg .dg-reaction-btn:active { transform: scale(0.95) !important; } #dg .dg-reaction-btn.reacted { border-color: var(--amber) !important; background: rgba(178,115,0,0.06) !important; box-shadow: 0 0 0 2px rgba(178,115,0,0.08); } #dg .dg-reaction-count { font-size: 12px !important; font-weight: 700 !important; color: var(--ink) !important; min-width: 16px; text-align: center; } #dg .dg-reactions-info { font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: 0.02em; align-self: center; white-space: nowrap; } /* ══════ VISIT COUNT ══════ */ #dg .dg-visit-count { font-size: 12px; color: var(--muted); margin-top: 8px; display: flex; align-items: center; gap: 6px; } #dg .dg-visit-count:empty { display: none !important; } /* ══════ QUICK NAVIGATION ══════ */ #dg .dg-quicknav { gap: 8px !important; padding: 12px 0 !important; margin-bottom: 8px !important; scrollbar-width: none; -ms-overflow-style: none; } #dg .dg-quicknav::-webkit-scrollbar { display: none; } #dg .dg-quicknav-pill { font-size: 12px !important; font-weight: 600 !important; padding: 8px 16px !important; border-radius: 24px !important; transition: all 0.2s ease !important; } #dg .dg-quicknav-pill:hover { background: var(--faint) !important; border-color: var(--ink) !important; color: var(--ink) !important; } #dg .dg-quicknav-pill.active { background: var(--ink) !important; color: var(--card) !important; border-color: var(--ink) !important; } #dg .dg-quicknav { -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%); mask-image: linear-gradient(to right, black 90%, transparent 100%); } /* ══════ GALLERY ══════ */ #dg .dg-gallery { gap: 10px !important; padding: 16px 0 8px !important; scrollbar-width: none; } #dg .dg-gallery::-webkit-scrollbar { display: none; } #dg .dg-gimg { width: 88px !important; height: 66px !important; border-radius: 10px !important; border-width: 2.5px !important; transition: all 0.2s ease !important; opacity: 0.5 !important; } #dg .dg-gimg:hover { opacity: 0.8 !important; transform: scale(1.05); } #dg .dg-gimg.active { opacity: 1 !important; border-color: var(--amber) !important; box-shadow: 0 0 0 3px rgba(178,115,0,0.15); transform: scale(1.05); } #dg .dg-gallery-counter { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.08em; } #dg .dg-gallery-hint { font-size: 11px; opacity: 0.4; } /* ══════ LOGO SECTION ══════ */ #dg .dg-logo-wrap { border-radius: 14px !important; padding: 20px 24px !important; border: 1px solid var(--line) !important; transition: all 0.2s ease !important; } #dg .dg-logo-wrap:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important; transform: translateY(-1px); } #dg .dg-logo-img { border-radius: 12px !important; width: 56px !important; height: 56px !important; } #dg .dg-logo-name { font-size: 18px !important; font-weight: 800 !important; line-height: 1.2; } #dg .dg-logo-type { font-size: 12px !important; color: var(--muted); margin-top: 2px; letter-spacing: 0.03em; } /* ══════ ABOUT / DESCRIPTION ══════ */ #dg .dg-desc { border-radius: 14px !important; padding: 24px 28px !important; font-size: 15px !important; line-height: 1.8 !important; color: var(--ink) !important; border: 1px solid var(--line) !important; word-break: break-word; hyphens: auto; } /* ══════ OFFERS SECTION ══════ */ #dg .dg-offers-list { gap: 10px !important; } #dg .dg-offer-card { border-radius: 14px !important; padding: 18px 22px !important; transition: all 0.2s ease !important; gap: 16px !important; } #dg .dg-offer-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); border-color: var(--amber) !important; } #dg .dg-offer-icon { font-size: 28px !important; } #dg .dg-offer-name { font-size: 15px !important; font-weight: 800 !important; line-height: 1.3; } #dg .dg-offer-desc { font-size: 13px !important; line-height: 1.6 !important; } #dg .dg-offer-expires { font-size: 11px !important; font-weight: 700 !important; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: rgba(220,53,69,0.06); border-radius: 6px; margin-top: 6px !important; } #dg .dg-offer-expired { opacity: 0.4 !important; text-decoration: line-through; } #dg .dg-offer-countdown { font-size: 11px; color: var(--amber); font-weight: 700; font-variant-numeric: tabular-nums; } /* ══════ PRODUCTS LIST ══════ */ #dg .dg-products-list { gap: 8px !important; } #dg .dg-product-item { border-radius: 12px !important; padding: 14px 20px !important; transition: all 0.15s ease !important; } #dg .dg-product-item:hover { background: var(--faint) !important; transform: translateX(4px); } #dg .dg-product-name { font-size: 14px !important; font-weight: 700 !important; } #dg .dg-product-price { font-size: 14px !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; } /* ══════ LOYALTY STAMPS ══════ */ #dg .dg-stamps-card { border-radius: 16px !important; padding: 24px 28px !important; } #dg .dg-stamps-title { font-size: 17px !important; font-weight: 800 !important; } #dg .dg-stamps-sub { font-size: 13px !important; line-height: 1.5; } #dg .dg-stamps-grid { gap: 10px !important; } #dg .dg-stamp { width: 48px !important; height: 48px !important; font-size: 20px !important; border-width: 2.5px !important; transition: all 0.3s cubic-bezier(0.22,1,0.36,1) !important; } #dg .dg-stamp.collected { border-color: var(--green) !important; background: rgba(14,122,84,0.1) !important; box-shadow: 0 0 12px rgba(14,122,84,0.2) !important; transform: scale(1.05); } #dg .dg-stamp.today { border-style: dotted !important; border-color: var(--amber) !important; animation: dgStampPulse 1.5s ease infinite !important; } @keyframes dgStampPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(178,115,0,0.2); } 50% { box-shadow: 0 0 0 8px rgba(178,115,0,0); } } #dg .dg-stamp-claim-btn { border-radius: 14px !important; padding: 16px !important; font-size: 15px !important; font-weight: 800 !important; animation: none !important; transition: all 0.2s !important; } #dg .dg-stamp-claim-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(14,122,84,0.25); } #dg .dg-stamp-claim-btn:active:not(:disabled) { transform: scale(0.98); } #dg .dg-stamps-progress { font-size: 12px !important; color: var(--muted); margin-top: 12px; text-align: center; font-weight: 600; } #dg .dg-stamp-complete-icon { font-size: 48px; animation: dgStampBounce 0.6s cubic-bezier(0.34,1.56,0.64,1); } @keyframes dgStampBounce { from { transform: scale(0); } to { transform: scale(1); } } /* ══════ HOURS TABLE ══════ */ #dg .dg-hrs-card { border-radius: 14px !important; padding: 24px 28px !important; border: 1px solid var(--line) !important; } #dg .dg-hrs td { padding: 14px 0 !important; font-size: 14px !important; transition: background 0.15s; } #dg .dg-hrs tr:hover td { background: rgba(0,0,0,0.015); } #dg .dg-hrs .today td { background: rgba(178,115,0,0.06) !important; font-weight: 700 !important; } #dg .dg-hrs .today td:first-child { color: var(--amber) !important; font-weight: 800 !important; } #dg .dg-today-badge { font-size: 10px !important; font-weight: 800 !important; padding: 4px 10px !important; border-radius: 10px !important; } #dg .dg-hrs .closed-day td { opacity: 0.4; } #dg .dg-hrs-live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 6px; animation: dgLivePulse 1.5s ease infinite; vertical-align: middle; } @keyframes dgLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ══════ LOCATION & MINI MAP ══════ */ #dg .dg-loc { border-radius: 14px !important; padding: 20px 24px !important; border: 1px solid var(--line) !important; font-size: 14px !important; line-height: 1.6; color: var(--ink) !important; transition: all 0.2s; display: block !important; } #dg .dg-loc::before { display: none !important; } #dg #dg-mini-map { border-radius: 14px !important; overflow: hidden; margin-top: 12px; height: 220px; border: 1px solid var(--line); box-shadow: 0 2px 12px rgba(0,0,0,0.06); } #dg .dg-directions-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--amber); margin-top: 10px; transition: color 0.15s; } #dg .dg-directions-link:hover { color: var(--ink); } /* ══════ MENU IMAGE ══════ */ #dg .dg-menu-img { border-radius: 14px !important; border: 1px solid var(--line) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important; transition: all 0.3s cubic-bezier(0.22,1,0.36,1) !important; max-height: 300px !important; object-fit: contain !important; } #dg .dg-menu-img:hover { transform: scale(1.01) !important; box-shadow: 0 12px 32px rgba(0,0,0,0.1) !important; } /* ══════ PRODUCT PHOTOS GRID ══════ */ #dg .dg-prod-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 14px !important; } #dg .dg-prod-img { border-radius: 12px !important; border: 1px solid var(--line) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; transition: all 0.25s cubic-bezier(0.22,1,0.36,1) !important; } #dg .dg-prod-img:hover { transform: scale(1.04) !important; box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important; } /* ══════ RELATED BUSINESSES ══════ */ #dg .dg-related-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; gap: 16px !important; } #dg .dg-related-card { border-radius: 14px !important; transition: all 0.25s cubic-bezier(0.22,1,0.36,1) !important; overflow: hidden; } #dg .dg-related-card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 32px rgba(0,0,0,0.1) !important; } #dg .dg-related-img { height: 130px !important; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); } #dg .dg-related-card:hover .dg-related-img { transform: scale(1.05); } #dg .dg-related-body { padding: 14px 18px !important; } #dg .dg-related-name { font-size: 14px !important; font-weight: 800 !important; line-height: 1.3 !important; } #dg .dg-related-type { font-size: 11px !important; letter-spacing: 0.06em !important; margin-top: 3px; } /* ══════ FAB (Floating Action Bar) ══════ */ #dg .dg-fab { border-radius: 52px !important; padding: 10px 16px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.15) !important; gap: 6px !important; } #dg .dg-fab-btn { font-size: 13px !important; font-weight: 700 !important; padding: 10px 16px !important; border-radius: 28px !important; transition: all 0.2s ease !important; } #dg .dg-fab-btn:hover { background: rgba(255,255,255,0.12) !important; color: #fff !important; } #dg .dg-fab-btn:active { transform: scale(0.95); } /* ══════ STICKY BACK BAR ══════ */ #dg .dg-sticky-back { font-size: 12px !important; font-weight: 600 !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; } /* ══════ REPORT LINK ══════ */ #dg .dg-report-link { font-size: 12px !important; color: var(--muted) !important; text-align: center; padding: 32px 0 16px !important; cursor: pointer; transition: color 0.15s; opacity: 0.5; } #dg .dg-report-link:hover { color: var(--red) !important; opacity: 1; text-decoration: underline; } /* ══════ PROFILE SKELETON ══════ */ #dg .dg-prof-skeleton { padding: 0 !important; } #dg .dg-prof-skel-hero { height: 380px; border-radius: 16px; background: var(--faint); animation: dgShimmer 1.5s ease-in-out infinite; } #dg .dg-prof-skel-row { height: 20px; border-radius: 8px; background: var(--faint); margin-top: 16px; animation: dgShimmer 1.5s ease-in-out infinite; } #dg .dg-prof-skel-row.w50 { width: 50%; } #dg .dg-prof-skel-row.w70 { width: 70%; } #dg .dg-prof-skel-row.w40 { width: 40%; } /* dgShimmer keyframes defined at base level (~line 350) */ /* ══════ PROFILE STAGGERED SECTION ENTRY ══════ */ #dg #dg-profile .dg-section { animation: dgSectionIn 0.4s ease both; } #dg #dg-offers-sec { animation-delay: 0.1s; } #dg #dg-about-sec { animation-delay: 0.15s; } #dg #dg-loc-sec { animation-delay: 0.2s; } #dg #dg-hours-sec { animation-delay: 0.25s; } #dg #dg-menu-sec { animation-delay: 0.3s; } #dg #dg-photos-sec { animation-delay: 0.35s; } #dg #dg-stamps-sec { animation-delay: 0.4s; } #dg #dg-related-sec { animation-delay: 0.45s; } /* dgSectionIn keyframes already defined at line ~1281 */ /* ══════ DARK MODE — PROFILE ══════ */ #dg.dark .dg-hero { box-shadow: 0 4px 24px rgba(0,0,0,0.3); } #dg.dark .dg-hero-grad { background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.85) 100%) !important; } #dg.dark .dg-hero::after { box-shadow: inset 0 0 60px rgba(0,0,0,0.4); } #dg.dark .dg-desc, #dg.dark .dg-hrs-card, #dg.dark .dg-logo-wrap, #dg.dark .dg-loc { box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important; border-color: rgba(255,255,255,0.06) !important; } #dg.dark .dg-offer-card { border-color: rgba(255,255,255,0.06) !important; } #dg.dark .dg-offer-card:hover { border-color: rgba(178,115,0,0.3) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.3); } #dg.dark .dg-stamps-card { border-color: rgba(255,255,255,0.06) !important; } #dg.dark .dg-product-item { border-color: rgba(255,255,255,0.06) !important; } #dg.dark .dg-product-item:hover { background: rgba(255,255,255,0.03) !important; } #dg.dark .dg-related-card { box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important; border-color: rgba(255,255,255,0.06) !important; } #dg.dark .dg-related-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.4) !important; } #dg.dark .dg-hrs tr:hover td { background: rgba(255,255,255,0.02); } #dg.dark .dg-hrs .today td { background: rgba(251,191,36,0.06) !important; } #dg.dark .dg-quicknav-pill:hover { background: rgba(255,255,255,0.06) !important; } #dg.dark .dg-quicknav-pill.active { background: var(--card) !important; color: var(--ink) !important; border-color: var(--line) !important; } #dg.dark .dg-reaction-btn.reacted { border-color: var(--amber) !important; background: rgba(178,115,0,0.08) !important; } #dg.dark .dg-loc:hover { background: rgba(255,255,255,0.03); } #dg.dark .dg-fab { background: #1a1a1a !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; } #dg.dark .dg-fab-btn:hover { background: rgba(255,255,255,0.08) !important; } #dg.dark .dg-menu-img { border-color: rgba(255,255,255,0.06) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important; } #dg.dark .dg-prod-img { border-color: rgba(255,255,255,0.06) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } #dg.dark .dg-prod-img:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.4) !important; } #dg.dark #dg-mini-map { border-color: rgba(255,255,255,0.06); box-shadow: 0 2px 12px rgba(0,0,0,0.3); } #dg.dark .dg-gimg { border-color: rgba(255,255,255,0.1) !important; } #dg.dark .dg-gimg.active { border-color: var(--amber) !important; } #dg.dark .dg-prof-skel-hero, #dg.dark .dg-prof-skel-row { background: rgba(255,255,255,0.04); } /* ══════ MOBILE — PROFILE ══════ */ @media (max-width: 768px) { #dg .dg-hero { height: 360px !important; border-radius: 14px !important; } #dg .dg-hero-content { padding: 24px 28px !important; } #dg .dg-related-grid { grid-template-columns: repeat(2, 1fr) !important; } #dg .dg-fab { padding: 8px 14px !important; gap: 4px !important; } #dg .dg-fab-btn { font-size: 12px !important; padding: 8px 14px !important; } } @media (max-width: 480px) { #dg .dg-hero { height: 300px !important; border-radius: 12px !important; } #dg .dg-hero-content { padding: 16px 20px 20px !important; } #dg .dg-hero-name { font-size: clamp(28px, 8vw, 40px) !important; } #dg .dg-desc, #dg .dg-hrs-card, #dg .dg-logo-wrap, #dg .dg-loc { padding: 18px 20px !important; border-radius: 12px !important; } #dg .dg-stamps-card { padding: 20px !important; border-radius: 12px !important; } #dg .dg-stamp { width: 40px !important; height: 40px !important; font-size: 16px !important; } #dg .dg-prod-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } #dg .dg-related-grid { grid-template-columns: 1fr !important; gap: 12px !important; } #dg .dg-related-img { height: 140px !important; } #dg .dg-offer-card { padding: 14px 18px !important; } #dg .dg-profile-top { flex-direction: column; align-items: flex-start; gap: 8px; } #dg .dg-profile-actions { width: 100%; } #dg .dg-profile-fav-btn, #dg .dg-share-btn { flex: 1; justify-content: center; } #dg .dg-gimg { width: 72px !important; height: 54px !important; } #dg .dg-logo-wrap { flex-direction: column !important; text-align: center !important; gap: 12px !important; } #dg .dg-quicknav-pill { font-size: 11px !important; padding: 6px 12px !important; } #dg .dg-fab { bottom: 16px !important; } #dg #dg-profile { padding: 0 16px !important; } #dg #dg-profile .dg-hero { margin-left: -16px !important; margin-right: -16px !important; width: calc(100% + 32px) !important; border-radius: 0 !important; } } @media (max-width: 360px) { #dg .dg-hero { height: 260px !important; } #dg .dg-desc, #dg .dg-hrs-card { padding: 16px !important; } #dg .dg-prod-grid { grid-template-columns: 1fr !important; } #dg .dg-fab-btn { font-size: 11px !important; padding: 6px 10px !important; } } /* ══════ PRINT STYLES ══════ */ @media print { #dg .dg-hdr, #dg .dg-fab, #dg .dg-back-top, #dg .dg-toast, #dg .dg-quicknav, #dg .dg-sticky-back, #dg .dg-reactions, #dg .dg-report-link { display: none !important; } #dg .dg-hero { height: 200px !important; border-radius: 0 !important; } #dg .dg-prod-grid { grid-template-columns: repeat(3, 1fr) !important; } #dg .dg-desc, #dg .dg-hrs-card, #dg .dg-logo-wrap, #dg .dg-loc { box-shadow: none !important; border: 1px solid var(--line) !important; } } /* ─── End Round 26 ─── */ /* ── GEMS UPGRADE MODAL ── */ .dg-upgrade-overlay { position: fixed; inset: 0; background: transparent; z-index: 9000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px 20px; overflow-y: auto; animation: dgFadeIn 0.18s ease; } .dg-upgrade-overlay .dg-upgrade-card { box-shadow: 0 24px 80px rgba(0,0,0,0.18), 0 4px 20px rgba(0,0,0,0.08); } @media (max-width: 480px) { .dg-upgrade-overlay { padding: 16px; } } .dg-upgrade-card { background: var(--bg); border-radius: 24px; padding: 72px 72px 52px; max-width: 600px; width: 100%; box-shadow: 0 40px 100px rgba(0,0,0,0.3); text-align: center; border: 1px solid var(--line); } #dg.dark .dg-upgrade-card { background: #141414; border-color: #2a2a2a; } .dg-upgrade-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); margin-bottom: 12px; text-align: center; } .dg-upgrade-title { font-family: 'Bebas Neue', sans-serif !important; font-size: 34px; letter-spacing: 0.02em; line-height: 1; color: var(--ink); margin-bottom: 14px; text-align: center; } .dg-upgrade-sub { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 auto 28px; max-width: none; text-align: center; } .dg-upgrade-plans { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } #dg .dg-upgrade-plan { width: 100%; padding: 18px 20px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card) !important; cursor: pointer; font-family: 'DM Sans', sans-serif; color: var(--ink) !important; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; text-align: left; display: block; } #dg .dg-upgrade-plan:hover { border-color: var(--ink); transform: translateY(-1px); } #dg .dg-upgrade-plan.primary { background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink); } .dg-upgrade-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .dg-upgrade-plan-price { font-size: 26px; font-weight: 800; line-height: 1.1; } /* Plain text label (no pill): black on the white monthly card, white on the black annual card */ .dg-upgrade-badge { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: transparent !important; color: #000 !important; border-radius: 0; padding: 0; flex-shrink: 0; line-height: 1; white-space: nowrap; } #dg .dg-upgrade-plan.primary .dg-upgrade-badge { color: #fff !important; } .dg-upgrade-plan-sub { font-size: 12px; margin-top: 6px; opacity: 0.65; line-height: 1.4; } #dg .dg-upgrade-dismiss { font-size: 13px; color: var(--muted); background: none !important; border: none; cursor: pointer; padding: 4px 0; letter-spacing: 0.01em; } #dg .dg-upgrade-dismiss:hover { color: var(--ink); } /* ── FREE TIER BANNER ── */ #dg .dg-free-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--amber-bg) !important; border: 1px solid var(--amber-b); border-left: 3px solid var(--amber); border-radius: 10px; padding: 11px 14px; margin-bottom: 24px; } #dg .dg-free-banner-text { font-size: 13px; color: var(--muted); line-height: 1.4; } #dg .dg-free-banner-text strong { color: var(--ink); font-weight: 700; } #dg .dg-free-banner-btn { flex-shrink: 0; background: var(--ink) !important; color: var(--bg) !important; border: none; border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; white-space: nowrap; letter-spacing: 0.01em; transition: opacity 0.15s; } #dg .dg-free-banner-btn:hover { opacity: 0.75; } #dg .dg-free-banner-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } #dg .dg-free-banner-refresh { background: transparent !important; color: var(--muted) !important; border: none; padding: 8px 4px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s; } #dg .dg-free-banner-refresh:hover { color: var(--ink) !important; } #dg .dg-free-banner-refresh[disabled] { opacity: 0.5; cursor: default; text-decoration: none; } /* ── LOCKED GEM CARDS ── */ .dg-card-locked { position: relative; cursor: pointer; overflow: hidden; } /* Day Pass previews are a look-ahead, not an upsell — no pointer/click affordance */ .dg-card-locked-pass { cursor: default; } #dg .dg-pass-nudge { grid-column: 1 / -1; text-align: center; font-size: 13px; line-height: 1.5; color: var(--muted); background: var(--amber-bg); border: 1px solid var(--amber-b); border-radius: 12px; padding: 12px 16px; margin: 8px 0 4px; } #dg .dg-pass-nudge strong { color: var(--ink); font-weight: 700; } .dg-card-locked .dg-card-img-empty { background: radial-gradient(ellipse at 25% 35%, rgba(90,70,50,0.85) 0%, transparent 45%), radial-gradient(ellipse at 75% 20%, rgba(210,190,160,0.9) 0%, transparent 40%), radial-gradient(ellipse at 60% 70%, rgba(60,80,90,0.8) 0%, transparent 42%), radial-gradient(ellipse at 15% 75%, rgba(200,180,150,0.75) 0%, transparent 38%), radial-gradient(ellipse at 85% 60%, rgba(80,100,70,0.7) 0%, transparent 35%), linear-gradient(160deg, #c8b89a 0%, #7a8c7e 30%, #d4c4a8 55%, #6a7a88 80%, #b8a888 100%) !important; filter: blur(10px) !important; transform: scale(1.18) !important; } .dg-card-locked .dg-card-img { filter: blur(10px); transform: scale(1.18); } .dg-card-locked .dg-card-body { filter: blur(3px); user-select: none; pointer-events: none; } .dg-card-lock-overlay { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(0,0,0,0.28); border-radius: 12px; } .dg-card-lock-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.6); border-radius: 20px; padding: 5px 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ── PAID MEMBER BANNER ── */ .dg-paid-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; font-size: 13px; color: var(--muted); } .dg-paid-banner-left { display: flex; align-items: center; gap: 8px; } .dg-paid-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--green-bg); color: var(--green); border: 1px solid var(--green-b); border-radius: 6px; padding: 2px 8px; } #dg .dg-paid-manage { font-size: 12px; color: var(--muted); background: none !important; border: 1px solid var(--line); border-radius: 8px; padding: 5px 12px; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.2s; } #dg .dg-paid-manage:hover { color: var(--ink); border-color: var(--ink); } @media (max-width: 480px) { .dg-upgrade-card { padding: 40px 32px 32px; } #dg .dg-free-banner { flex-wrap: wrap; } }