/* =========================================================== Global UI — Airbnb-inspired clean, flat system =========================================================== */ /* Base / Reset */ *{box-sizing:border-box} html,body{ margin:0; padding:0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* GO-like subtle gradient backdrop */ background: radial-gradient(1200px 600px at 50% -200px, rgba(30,144,255,.10), transparent 60%), linear-gradient(180deg, #f7fbff 0%, #ffffff 30%, #ffffff 100%); color:#222222; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Subtle background logo watermark on main */ main { position: relative; z-index: 0; } main::before { content: ""; position: absolute; top: 11%; left: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%); background: url("/images/logo.png") center / contain no-repeat; opacity: .055; pointer-events: none; filter: saturate(0.9) contrast(1.05); mix-blend-mode: multiply; z-index: -1; } @media (max-width: 720px) { main::before { width: 220px; height: 220px; opacity: .08; } } /* Mobile-only UI adjustments for Profile */ @media (max-width: 720px){ /* Circular icon-only Share buttons */ #shareTrades, #shareWants{ width:44px; height:44px; padding:0; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; } #shareTrades svg, #shareWants svg{ margin-right:0 !important; } /* Filters toggle: circular icon-only like FAB */ #toggleFiltersTrades, #toggleFiltersWants{ width:44px; height:44px; padding:0; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:0; /* hide label */ } #toggleFiltersTrades::before, #toggleFiltersWants::before{ content:""; width:22px; height:22px; background-color: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } } /* Design tokens */ :root{ --text:#222222; --muted:#717171; --border:#e5e7eb; --surface:#ffffff; --surface-2:#f7f7f7; --accent:#1e90ff; /* PG Blue default */ --accent-press:#1877d1; --accent-bg:#eff6ff; --accent-soft:rgba(30,144,255,0.16); /* Pokémon GO brand tokens */ --pg-blue:#1e90ff; --pg-blue-10:rgba(30,144,255,.10); --pg-yellow:#f6c90e; --pg-dark:#0a1b2e; /* GO-like gradients and effects */ --go-green-start:#27d3b0; /* action green (left) */ --go-green-end:#6ee7b7; /* action green (right) */ --go-green-press:#1bb89a; --go-pink-start:#ff6aa0; /* hot pink CTA (e.g., Use) */ --go-pink-end:#ff8ac0; --go-blue-start:#1e90ff; /* PG blue gradient */ --go-blue-end:#63b3ff; --go-outline:#0e8090; /* teal outline used across UI */ --go-card-tint:#e8f3ff; /* info tile background tint */ --go-divider:#dbe6ef; /* soft divider */ /* Team brand colors */ --team-valor:#ef4444; --team-mystic:#3b82f6; --team-instinct:#f59e0b; --radius-1:8px; --radius-2:12px; --radius-3:16px; --shadow-1:0 2px 10px rgba(10,27,46,.08); --shadow-2:0 10px 28px rgba(10,27,46,.12); --shadow-3:0 18px 48px rgba(10,27,46,.18); } /* Container */ .container{max-width:1100px;margin:0 auto;padding: 10px;} /* Hidden by default; shown in mobile restyle */ .pg-mobile-tabs{ display:none; } /* Headings */ h1,h2,h3{margin:0 0 8px;color:var(--text)} .subtitle{color:var(--muted);font-size:14px} /* Header (simple) */ .header{ display:flex;align-items:center;justify-content:space-between; padding:14px 0;border-bottom:1px solid var(--go-divider); } /* PG header/hero */ .pg-header{border-bottom:1px solid var(--go-divider); padding:10px 0} .pg-hero{height:44px;width:100%;margin:0 0 8px 0;border-radius:16px;background:linear-gradient(90deg,var(--pg-blue) 0%, #3aa0ff 60%, #7cc6ff 100%);box-shadow:0 6px 18px rgba(30,144,255,.25)} /* Inputs */ .input{ width:100%; padding:12px 14px; border:1px solid var(--go-divider); border-radius:14px; background:linear-gradient(180deg,#ffffff,#fafcff); color:var(--text); } .input:focus{outline:2px solid var(--pg-blue-10); border-color:var(--pg-blue); box-shadow:0 0 0 2px rgba(30,144,255,.12)} /* Buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center; padding:10px 16px; border:2px solid var(--go-divider); border-radius:999px; background:linear-gradient(180deg,#ffffff,#fbfdff); color:var(--text); cursor:pointer; text-decoration: none; transition:transform .05s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, filter .15s ease; } .btn:hover{box-shadow:var(--shadow-1);} .btn:active{transform:translateY(1px);} .btn.inline{padding:8px 12px;border-radius:999px; text-decoration: none;} /* GO green gradient primary */ .btn.primary{ border-color:transparent; color:#fff; background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)) top/100% 40% no-repeat, linear-gradient(90deg, var(--go-green-start), var(--go-green-end)); box-shadow:0 6px 18px rgba(19,170,140,.35), inset 0 -2px 0 rgba(0,0,0,.08); } .btn.primary:hover{ filter:brightness(0.98); box-shadow:0 10px 28px rgba(19,170,140,.45), inset 0 -2px 0 rgba(0,0,0,.08); } .btn.primary:active{ background:linear-gradient(90deg, var(--go-green-press), var(--go-green-end)); } /* Danger becomes warm orange/red gradient similar to alerts */ .btn.danger{ border-color:transparent; color:#fff; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)) top/100% 40% no-repeat, linear-gradient(90deg, #ff6b6b, #ff9040); box-shadow:0 6px 18px rgba(234,88,12,.35); } .btn.danger:hover{ filter:brightness(0.98) } /* Outline button (Share) */ .btn.outline{background:transparent!important;color:var(--pg-blue);border:2px solid var(--pg-blue); box-shadow:inset 0 -1px 0 rgba(0,0,0,.06);} .btn.outline:hover{background:rgba(30,144,255,.08)} #shareWants.btn.outline{ color:#ef4444; border-color:#ef4444; } #shareWants.btn.outline:hover{ background:rgba(239,68,68,.08); } /* Neutral cancel buttons — GO teal outline style */ .btn.cancel, .btn[data-action="cancel"], #confirmCancel.btn, #settingsCancel.btn{ color:var(--go-outline); background:#fff; border:2px solid var(--go-outline); } .btn.cancel:hover, .btn[data-action="cancel"]:hover, #confirmCancel.btn:hover, #settingsCancel.btn:hover{ background:rgba(14,128,144,.08); } /* Index hero CTA ("See Live Searches") — GO yellow gradient */ .hero a.btn:not(.primary):not(.outline){ color:#6b5300; border-color:transparent; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)) top/100% 40% no-repeat, linear-gradient(90deg, #ffd85a, var(--pg-yellow)); box-shadow:0 8px 20px rgba(246,201,14,.35), inset 0 -2px 0 rgba(0,0,0,.08); } .hero a.btn:not(.primary):not(.outline):hover{ filter:brightness(0.98); box-shadow:0 12px 28px rgba(246,201,14,.45), inset 0 -2px 0 rgba(0,0,0,.08); } /* Pills / Tabs */ .pill{ padding:8px 14px;border-radius:999px;border:1px solid var(--go-divider); cursor:pointer;background:linear-gradient(180deg,#ffffff,#f6fbff);color:#0b2b57; box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 4px 10px rgba(10,27,46,.06); } .tabs{display:flex;gap:10px;margin:12px 0} .tabs .pill.active{background:linear-gradient(180deg,#ffffff,#f0f7ff);border-color:var(--pg-blue);color:#0b2b57;box-shadow:0 8px 20px rgba(30,144,255,.18)} /* Profile sticky trade/wishlist tabs — stronger GO styling */ body .stickyTabs .pill{ background:linear-gradient(180deg,#ffffff,#f6fbff)!important; border:1.5px solid var(--go-divider)!important; box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 4px 10px rgba(10,27,46,.06)!important; font-weight:800!important; } body .stickyTabs .pill.active{ border-color:var(--pg-blue)!important; color:#0b2b57!important; background:linear-gradient(180deg,#ffffff,#f0f7ff)!important; box-shadow:0 8px 22px rgba(30,144,255,.20)!important; } /* Chips (filters, tags) */ .chip{ display:inline-flex; align-items:center; justify-content:center; border:0; color:#0b334f; background:linear-gradient(180deg,#eef6ff,#eaf4ff); border-radius:9999px; padding:6px 10px; font-size:12px; cursor:pointer; z-index:2; border:1px solid var(--go-divider); } .chip.tagchip { padding: 3px 6px; } .chip.active{ border-color:#16a34a; background:#dcfce7; color:#14532d } .chip.exclude{ border-color:#dc2626; background:#fee2e2; color:#7f1d1d; text-decoration:line-through; opacity:.95; } /* Taglines (pills) */ .taglineRow{display:flex;flex-wrap:wrap;gap:4px;justify-content:center} .taglinePill{ position:relative; display:inline-flex; align-items:center; justify-content:center; padding:5px 10px; font-size:14px; border-radius:999px; font-weight:600; color:#334155; background: linear-gradient(#f9fbff,#f9fbff) padding-box, linear-gradient(90deg, rgba(255,168,212,.65), rgba(134,239,172,.65), rgba(125,211,252,.65)) border-box; border:2px solid transparent; box-shadow:0 8px 20px rgba(15,23,42,.10); transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease; white-space:nowrap; margin:2px; } .chiprow.selectable .taglinePill{ opacity:.5 } .chiprow.selectable .taglinePill.active{ opacity:1; transform:translateY(-1px); box-shadow:0 10px 28px rgba(15,23,42,.18); background: linear-gradient(#ffffff,#ffffff) padding-box, linear-gradient(90deg, rgba(255,168,212,.9), rgba(134,239,172,.9), rgba(125,211,252,.9)) border-box; } .tagHighlight{font-weight:800} .th-costumes{color:#7c3aed} .th-regionals{color:#2563eb} .th-level1s{color:#16a34a} .th-shinies{color:#ffad00} .th-luckies{color:#f97316} .th-dex{color:#0ea5e9} .th-raid-partners{color:#ef4444} .th-challenges{color:#10b981} .th-friends{color:#e879f9} .th-battles{color:#8b5cf6} /* Badge */ .badge{ display:inline-block; padding: 3px 6px; border-radius:999px; background:linear-gradient(180deg,#ffffff,#f1f5fb); border:1px solid var(--go-divider); font-size: 11px; color:#444; margin: 1px; } /* Grid */ .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px; align-items:stretch; } @media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}} @media(min-width:1024px){.grid{grid-template-columns:repeat(6,1fr)}} /* Cards */ .card{ position:relative; border: 1.5px solid var(--go-divider); padding: 10px; background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%); transition:box-shadow .18s ease, transform .05s ease, border-color .15s ease, background .2s ease; box-sizing:border-box; border-radius: 18px; box-shadow: 0 2px 0 rgba(255,255,255,.6) inset, var(--shadow-1); } .card:hover{box-shadow:var(--shadow-2)} .card.selectable{cursor:pointer} .card.selected{border-color:var(--pg-blue); box-shadow:0 0 0 2px rgba(30,144,255,.18), 0 10px 24px rgba(30,144,255,.12)} .card .icon-del{ position:absolute; top:2px; right:2px; border:0; background:transparent; cursor:pointer; width:32px; height:32px; display:flex; align-items:center; justify-content:center; color: #b8c1d3; /* slate-500 */ font-size:0; line-height:0; /* hide any text like "×" */ } .card .icon-del::before{ content: ""; display: block; width: 22px; height: 22px; background-color: currentColor; /* allows tint via color */ /* SVG mask for a crisp, scalable trash can icon */ -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } .card .icon-del:hover{ opacity:1; color:#ef4444; } .card .center{text-align:center} .card .title{ word-break:break-word; font-weight:600 } .card .title.center{text-align:center;background: linear-gradient(180deg, #ffffff, #f7fbff);border-radius: 12px;padding: 10px 5px 5px;} .gmax,.dmax {color:#d12828;} /* === Card Styles Copied from profile.html for Consistency === */ .card.has-card-bg{ position:relative; } .card.has-card-bg::before { border-radius: 18px; content: ""; position: absolute; inset: 0px; background-image: var(--card-bg); background-size: cover; background-position: center; opacity: 0.33; z-index: 0; pointer-events: none; } .card.has-card-bg .center, .card.has-card-bg .title {position:relative;z-index:1;} .card.has-card-bg .sprite { position:relative; z-index:2; } /* Shiny badge overlay */ .card .gmax, .card .dmax { color: #ef4444; font-weight: 700; } .card .form-text { color: #64748b; font-weight: 600; } /* Dynamax visual */ .card[data-form="dynamax"] .sprite{ position:relative; z-index:2; } /* DYNAMAX: red stroke + glow on the sprite itself */ .card[data-form="dynamax"] .sprite{ /* 1px “stroke” via multi-direction zero-blur shadows */ filter: drop-shadow( 1px 0 0 rgba(255,0,0,.9)) drop-shadow(-1px 0 0 rgba(255,0,0,.9)) drop-shadow( 0 1px 0 rgba(255,0,0,.9)) drop-shadow( 0 -1px 0 rgba(255,0,0,.9)) /* soft outer glow */ drop-shadow(0 0 6px rgba(255,0,0,.55)) drop-shadow(0 0 12px rgba(255,0,0,.35)); } .trade-btn { position: absolute; top: 8px; right: 8px; background: none; color: #1e90ff; border: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: all 0.3s ease; z-index: 10; } .trade-btn:hover { color: #0066cc; transform: scale(1.1); } .trade-btn svg { width: 20px; height: 20px; } /* Expanded card editing */ .quickedit{display:none; margin-top:8px; padding-top:8px; border-top:1px dashed #e5e7eb} .card.expanded .quickedit{display:block} .quickchips{display:flex;flex-wrap:wrap;gap:6px} .quickchips label.chip{user-select:none} .qrow{display:flex;align-items:center;gap: 4px;margin-top:6px} .qrow .btn.inline{z-index:2;padding:4px;min-width:28px;text-align:center} .qrow .qty{min-width:28px;text-align:center} .card.expanded{ border-width:1px; outline:0; transform:none; box-shadow:0 0 0 2px rgba(30,144,255,.22), 0 10px 24px rgba(0,0,0,.10); } /* Sprite */ .sprite{ margin: -10px auto -9px; width: 100px; position: relative; z-index: 14; height: 100px; /* margin:6px auto; */ background-size:contain; background-repeat:no-repeat; background-position:center; background-image:url("/data/sprites/0000.png"); -webkit-filter: drop-shadow(5px 5px 5px rgba(15,23,42,.10)); filter: drop-shadow(5px 5px 5px rgba(15,23,42,.10)); } /* icons */ .card .icon-sparkle{ position:absolute; top:6px; left:6px; width:22px; height:22px; z-index:3; pointer-events:none; } .card .icon-costume{ position:absolute; left:6px; width:22px; height:22px; z-index:2; pointer-events:none; top:6px; /* default: no shiny present -> sits at top */ fill: #3f4a5f; } /* if shiny exists, push costume below it */ .card:has(.icon-sparkle) .icon-costume{ top:30px; } @media (max-width:720px){ .card .icon-sparkle{/* top:4px; *//* left:4px; *//* width:18px; *//* height:18px; */} .card .icon-costume{ left:4px; width:18px; height:18px; } .card:has(.icon-sparkle) .icon-costume{ top:26px; } } .card[data-shiny="1"] .icon-costume{ top:30px; } /* Background/Location badge */ .card .icon-bgloc{ position:absolute; left:6px; top:6px; width:22px; height:22px; z-index:1; pointer-events:none; fill: #3f4a5f; } @media (max-width:720px){ .card .icon-bgloc{/* left:4px; *//* top:4px; *//* width:18px; *//* height:18px; */} } /* Stack order: Sparkle > Costume > BG/Loc */ .card:has(.icon-sparkle) .icon-bgloc{ top:30px; } .card:has(.icon-costume) .icon-bgloc{ top:30px; } .card:has(.icon-sparkle):has(.icon-costume) .icon-bgloc{ top:54px; } @media (max-width:720px){ .card:has(.icon-sparkle) .icon-bgloc{ top:26px; } .card:has(.icon-costume) .icon-bgloc{ top:26px; } .card:has(.icon-sparkle):has(.icon-costume) .icon-bgloc{ top:48px; } } /* Fallback for browsers without :has() — rely on sibling order */ .icon-costume + .icon-bgloc{ top:30px; } .icon-sparkle + .icon-costume + .icon-bgloc{ top:54px; } @media (max-width:720px){ .icon-costume + .icon-bgloc{ top:26px; } .icon-sparkle + .icon-costume + .icon-bgloc{ top:48px; } } /* Shiny-only fallback still applies */ .card[data-shiny="1"] .icon-bgloc{/* top:54px; */} @media (max-width:720px){ .card[data-shiny="1"] .icon-bgloc{/* top:48px; */} } /* Utilities */ .row{display:flex;gap:12px;flex-wrap:wrap} .sticky{position:sticky;bottom:0;background:linear-gradient(180deg,#ffffff,#f7fbff);border-top:1px solid var(--go-divider);padding:10px} .small{font-size:12px;color:#444b57} hr{border:none;height:1px;background:var(--go-divider);margin:16px 0} .chiprow{display:flex; flex-wrap:wrap; gap:8px} /* Notice / Toast */ .toast{ position:fixed;bottom:16px;right:16px;background:#111;color:#fff;padding:10px 12px;border-radius:8px;opacity:.95; } .notice{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(.98); z-index:50000; pointer-events:none; margin:0; padding:16px 20px; border-radius:12px; border:1px solid var(--go-divider); background:#f0fdf4; color:#166534; font-weight:600; opacity:0; box-shadow:var(--shadow-2); transition:opacity .18s ease, transform .18s ease; text-align:center; max-width:80%; } .notice.bottom{ top:auto; bottom: calc(16px + var(--dock-h, 0px) + env(safe-area-inset-bottom,0px)); transform: translate(-50%, 0) scale(.98); } .notice.on{opacity:1; transform:translate(-50%,-50%) scale(1);} .notice.off{opacity:0; transform:translate(-50%,-50%) scale(.98);} .notice.on.bottom{ opacity:1; transform: translate(-50%, 0) scale(1); } .notice.off.bottom{ opacity:0; transform: translate(-50%, 0) scale(.98); } .notice.trades{ background:#eff6ff; color:#1e40af; border-color:#bfdbfe; box-shadow:0 12px 40px rgba(30,64,175,.20), 0 0 0 1px rgba(30,64,175,.08); } .notice.wants{ background:#fff7ed; color:#9a3412; border-color:#fed7aa; box-shadow:0 12px 40px rgba(234,88,12,.25), 0 0 0 1px rgba(234,88,12,.08); } .notice.success{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; box-shadow:0 12px 40px rgba(6,95,70,.25), 0 0 0 1px rgba(6,95,70,.08); } .notice.error{ background:#fef2f2; color:#991b1b; border-color:#fecaca; box-shadow:0 12px 40px rgba(185,28,28,.18), 0 0 0 1px rgba(185,28,28,.08); } /* Theming hooks (Trades/Wishlist) */ .theme-trades{ --accent:#2563eb; --accent-bg:#eff6ff; --accent-soft: rgba(37,99,235,0.13); } .theme-wants{ --accent:#ea580c; --accent-bg:#fff7ed; --accent-soft: rgba(234,88,12,0.13); } /* Settings dialog */ .settingsCard{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(720px,95vw); max-height:92vh; overflow-y:auto; background:linear-gradient(180deg,#ffffff,#f7fbff); border-radius:16px; border:1px solid var(--go-divider); box-shadow:var(--shadow-3); z-index:100201; } /* Nudge modal down a bit on mobile so it doesn't tuck under the fixed header */ @media (max-width: 720px){ .settingsCard{ top: calc(50% + 28px); } } .settingsOverlayFix{ z-index:100200 !important; } .settingsHead{ display:flex; justify-content:space-between; align-items:center; padding:10px 16px; border-bottom:1px solid var(--go-divider); } .settingsBody{ padding:16px; } .settingsBody .row{ display:flex; gap:8px; align-items:center } .settingsFoot{ display:flex; justify-content:flex-end; gap:8px; padding:12px; border-top:1px solid var(--go-divider); } .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px } /* Keep two columns even on mobile; allow inputs to shrink gracefully */ @media(max-width:720px){ .grid2{ grid-template-columns:1fr 1fr } } .settingsBody label{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:#374151; font-weight:700; } .formGrid{display:grid;grid-template-columns:1fr;gap:14px} .formGrid .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap} /* Section header */ .sectionHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0} .sectionHeader .small{ opacity:0.8 } /* Slot limits inline helper */ .sectionHeader .limit{ font-size:12px; color:var(--muted); font-weight:700 } .sectionHeader .limit .full{ color:#ef4444; font-weight:900 } @media (max-width: 720px){ .sectionHeader .limit{ display:none; } } /* Mobile tab FULL state */ @media (max-width: 720px){ .pg-mobile-tabs .m-tab.full{ position:relative; } .pg-mobile-tabs .m-tab.full .m-underline{ background:#ef4444 !important; height:3px; } .pg-mobile-tabs .m-tab.full .m-count{ color:#ef4444; font-weight:900; } } /* Notice-like card (inline) */ .card.notice-lite{ background: var(--accent-bg, #eff6ff); border: 1.5px solid var(--accent-soft, rgba(37,99,235,.18)); color: #0b2b57; font-weight: 800; text-align: center; box-shadow: 0 8px 22px rgba(30,144,255,.12); } /* Warning variant (low remaining slots) */ .card.notice-lite.warn{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; box-shadow:0 8px 22px rgba(234,88,12,.10); } /* Empty slot placeholders in grids */ .card.placeholder{ display:flex; align-items:center; justify-content:center; color:#64748b; background:#fafafa; border:1.5px dashed var(--go-divider); font-weight:800; text-transform:uppercase; letter-spacing:.05em; } .card.placeholder .inner{ display:flex; align-items:center; gap:8px; } .card.placeholder .plus{ width:18px; height:18px; background-color:#9ca3af; border-radius:4px; } .card.placeholder .plus{ -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/contain; mask: url('data:image/svg+xml;utf8,') no-repeat center/contain; } /* Full list grey notice card */ .card.full-note{ display:flex; align-items:center; justify-content:center; text-align:center; background:#f3f4f6; /* gray-100 */ color:#6b7280; /* gray-500 */ border:1.5px solid #e5e7eb; /* gray-200 */ font-weight:700; } span.match-count {color: #17a34a;} /* Drawer */ /* Drawer */ #drawer{ overflow:hidden; position:fixed; left:50%; transform:translateX(-50%); z-index:2501 !important; /* ensure above header */ } #drawerInner{min-height:0} #gallery{min-height:0; overflow:auto} /* Mobile drawer sizing: add breathing room from top/bottom */ @media (max-width: 720px){ #drawer{ width:94vw; max-height:78vh !important; top:52% !important; border-radius:16px; } } @media (max-width:420px){ #drawer{ width:94vw; max-height:76vh !important; top:52% !important; } } #gallery .card .badge{margin-right:4px; margin-top:4px; display:inline-block} /* Confirm */ .confirmCard{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(520px,92vw); background:linear-gradient(180deg,#ffffff,#f7fbff); border-radius:16px; border:1px solid var(--go-divider); box-shadow:var(--shadow-3); padding:16px; } .confirmMsg{ font-weight:600; font-size:16px; margin-bottom:12px; } .confirmActions{ display:flex; justify-content:flex-end; gap:8px; } /* Owner card & layout */ .ownerBanner{display:flex;gap:16px;align-items:center;justify-content:space-between} .ownerLeft{display:flex;flex-direction:column;gap:6px} .ownerTitle{font-size:20px;font-weight:800;color:#222} .ownerMeta{color:#717171} .codePill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#f7f7f7;color:#222;font-weight:600} .teamChip{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;color:#222;font-weight:700} .teamChip[data-team="valor"]{border-color:#ef4444} .teamChip[data-team="mystic"]{border-color:#3b82f6} .teamChip[data-team="instinct"]{border-color:#f59e0b} .ownerRow{ display:grid; grid-template-columns:260px 1fr; align-items:stretch; } @media (max-width: 900px){ .ownerRow{ grid-template-columns:1fr; } } .sideActions{ position:sticky; top:84px; display:flex; flex-direction:column; gap:12px; } .sideBtn{ display:flex; align-items:center; justify-content:center; gap:10px; border-radius:999px; padding:14px 16px; font-weight:900; font-size:16px; border:2px solid transparent; cursor:pointer; } .sideBtn svg{ width:20px; height:20px; } .sideTradeBtn{ color:#1e90ff; border-color:#1e90ff; background:rgba(30,144,255,.08); } .sideTradeBtn.active{ color:#fff; background:#1e90ff; } .sideWantBtn{ color:#ef4444; border-color:#ef4444; background:rgba(239,68,68,.08); } .sideWantBtn.active{ color:#fff; background:#ef4444; } .ownerCard{border:1.5px solid var(--go-divider);border-radius:20px;padding:18px;background:linear-gradient(180deg,#ffffff,#f7fbff);box-shadow:var(--shadow-2);display:flex;flex-direction:column;gap:12px} .ownerHeader{display:flex;align-items:center;gap:12px;padding-bottom:0;border-bottom:0} .levelBadge{display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 8px; border-radius:999px; background:linear-gradient(180deg,#0b2b57,#164b9a); color:#fff; font-weight:800; font-size:12px; letter-spacing:.3px; border:1px solid rgba(255,255,255,.25); box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)} .editBtn{margin-left:auto} .ownerMeta{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .teamChip{padding:6px 12px;border-radius:999px;font-weight:700;color:#fff;border:0;box-shadow:0 6px 14px rgba(0,0,0,.12)} .teamChip[data-team="valor"], .team-valor{background:#ef4444} .teamChip[data-team="mystic"], .team-mystic{background:#3b82f6} .teamChip[data-team="instinct"], .team-instinct{background:#f59e0b} .friendCode{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:2px solid var(--go-outline);border-radius:999px;background:#fff;color:#0b2b57;font-weight:800;cursor:pointer;margin:0 auto;box-shadow:0 8px 18px rgba(14,128,144,.12), inset 0 -1px 0 rgba(0,0,0,.06)} .friendCode:hover{background:rgba(14,128,144,.06)} .friendCode svg{width:18px;height:18px} .friendCode .btn{padding:6px 10px} .ownerCard .taglineRow{ max-width:60%; margin:8px auto 0; justify-content:center } @media (max-width:720px){ .ownerCard .taglineRow{ max-width:100%; } } /* Mobile: stack friend-code and location pills on separate lines */ @media (max-width:720px){ .ownerIdentity .pillRow{ flex-direction:column; align-items:center; } } /* Mobile-only: Remove border, shadow, and background for .ownerCard */ @media (max-width:720px){ .ownerCard { background: transparent !important; box-shadow: none !important; border: none !important; } } /* Owner card team accent ring */ .ownerCard:has(.teamIcons img[alt="Team Valor"]){ border-color: rgba(239,68,68,.35); box-shadow: 0 6px 18px rgba(239,68,68,.10), var(--shadow-1); } .ownerCard:has(.teamIcons img[alt="Team Mystic"]){ border-color: rgba(59,130,246,.35); box-shadow: 0 6px 18px rgba(59,130,246,.10), var(--shadow-1); } .ownerCard:has(.teamIcons img[alt="Team Instinct"]){ border-color: rgba(245,158,11,.40); box-shadow: 0 6px 18px rgba(245,158,11,.12), var(--shadow-1); } .ownerHeader{ display:grid; grid-template-columns:1fr auto 1fr; grid-template-areas:"tools identity level"; align-items:center; gap:12px } .levelStack{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; } .rightTools{grid-area:tools;display:flex;align-items:center;gap:8px} .ownerIdentity{ grid-area: identity; flex:1; text-align:center } .ownerIdentity .handle{font-size:1.6rem;font-weight:800} .ownerIdentity .ign{font-size:1.05rem;color:#6b7280;margin-top:2px;font-weight:600;} .levelTeamStack{ grid-area: level; /* place in the right-hand grid area */ justify-self: end; /* push to the far right edge */ display:flex; align-items:center; gap:8px; } .levelNum{font-size:56px;line-height:1;font-weight:900;color:#0b2b57} .levelLabel{font-size:13px;letter-spacing:.12em;color:#6b7280;margin-top:2px} .teamIcons{display:flex;align-items:center;gap:10px} .teamIcons img{width:56px;height:56px;object-fit:contain} .icon-btn{border:0;background:transparent;cursor:pointer;padding:6px;border-radius:8px} .icon-btn:hover{background:rgba(0,0,0,.04)} .editIcon svg{width:20px;height:20px;display:block} @media (max-width:720px){ .ownerHeader{ grid-template-columns:1fr; grid-template-areas:"level" "identity" "tools"; row-gap:10px; } .ownerIdentity .handle{font-size:1.3rem} .ownerIdentity .ign{font-size:1rem} .rightTools{justify-content:center} .levelNum{font-size:34px} .levelTeamStack{ justify-self: inherit; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:8px; } .teamIcons img{width:40px;height:40px} } /* Hero section styles */ #loggedOutHero h1 { background: linear-gradient(90deg, #1e90ff 0%, #ef4444 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* PG top site header (hidden trades/wishlist nav in header) */ .pg-site-header{ position:sticky; top:0; z-index: 2; color:white; background:#0f224a; border-bottom:1px solid var(--border); padding:0 0 8px 0; } .pg-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;} .pg-brand{display:flex;align-items:center;gap: 4px;font-weight:900;font-size:20px;color:#fff;text-decoration:none} .pg-right{display:flex;align-items:center;gap:8px} .pg-cta{border-color:var(--accent);} .pg-right .btn.inline.pg-cta{ padding: 8px 12px; font-weight:700; font-size:1rem; background:var(--pg-blue-10); color:#fff; border:1.5px solid var(--pg-blue); box-shadow:0 2px 8px rgba(30,144,255,.06); transition: background .15s, color .15s, border-color .15s; margin-left:4px; /* letter-spacing:.01em; */ display:inline-flex; align-items:center; text-decoration:none; } .pg-right .btn.inline svg{vertical-align:middle;margin-right: 4px;} .pg-right .btn.inline{ display:inline-flex; align-items:center; } .pg-menu .tradeTab.active{ border-color:#1e90ff; color:#1e90ff; background:rgba(30,144,255,.08); } .pg-menu .wantTab.active{ border-color:#ef4444; color:#ef4444; background:rgba(239,68,68,.08); } .pg-right .btn.inline.pg-cta:hover, .pg-right .btn.inline.pg-cta:focus { background: var(--pg-blue); color:#fff; border-color: var(--pg-blue); } @media (max-width:720px){ .pg-site-header{padding-bottom:4px;} .pg-right a#pgMyProfile.btn.inline.pg-cta{ font-size:.98rem; padding:8px 13px; } } /* Inbox notification count */ .inbox-count { background: linear-gradient(135deg, #dc2626, #ef4444); color: white; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 10px; margin-left: 4px; min-width: 16px; text-align: center; box-shadow: 0 1px 3px rgba(220, 38, 38, 0.4); animation: inbox-pulse 2s ease-in-out infinite; } @keyframes inbox-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* Controls (search/filters/sort) */ .controls{margin:8px 0 12px 0;} .controls-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap } .controls-chips{ margin-top:8px } #searchTrades,#searchWants{ min-width:220px; flex:1 } /* Mobile filters toggle */ .mobile-only { display: none; } @media (max-width:720px){ .mobile-only { display: inline-flex; } .controls .controls-chips { display: none; } .controls.show-filters .controls-chips { display: flex; } .controls .controls-row { gap: 8px; } .controls-row{ flex-wrap:nowrap; } #searchTrades, #searchWants{ flex:1 1 0%; min-width:0; } #sortTrades, #sortWants{ margin-left:auto; } .controls-row label.small{margin-bottom:0;} } @media (min-width:721px){ /* Drawer: on desktop always show filter chips; hide the Filters toggle button */ #toggleDrawerFilters{ display:none !important; } #filters{ display:block !important; } #tags{ display:block !important; } /* keep if you want Tags visible too */ } /* Compact icon-first side bar (#3) */ .sideIconBar{ position:sticky; top:84px; align-self:stretch; /* stretch to full grid track height */ display:flex; flex-direction:column; justify-content:center; /* center icons vertically */ align-items:center; gap:18px; height:100%; /* take full column height */ } .sideIconBtn{ display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:#64748b; /* INACTIVE = grey */ font-weight:900; font-size: 1.35rem; transition:color .15s ease, transform .12s ease; } .sideIconBtn .circle{ width:56px; height:56px; border-radius:999px; border:2px solid currentColor; display:grid; place-items:center; background:linear-gradient(180deg, #ffffff, #f6fbff); box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 4px 10px rgba(10,27,46,.08); transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease; position:relative; } .sideIconBtn svg{ width:24px; height:24px; stroke:currentColor; } .sideIconBtn.wants svg{ fill:currentColor; } /* heart uses fill */ /* glossy highlight */ .sideIconBtn .circle::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 40%); } /* Hover/active lift */ .sideIconBtn:hover .circle{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(10,27,46,.16); } .sideIconBtn:hover{ transform:translateY(-1px); } /* ACTIVE themes */ .sideIconBtn.trades.active{ color:#1e90ff; } /* blue */ .sideIconBtn.wants.active{ color:#ef4444; } /* red */ .sideIconBtn.active .circle{ border-color:transparent; color:#fff; /* makes SVG stroke/fill white via currentColor */ } .sideIconBtn.trades.active .circle{ background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)) top/100% 40% no-repeat, linear-gradient(180deg, #63b3ff, #1e90ff); box-shadow:0 10px 24px rgba(30,144,255,.35), inset 0 -2px 0 rgba(0,0,0,.08); } .sideIconBtn.wants.active .circle{ background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)) top/100% 40% no-repeat, linear-gradient(180deg, #ff8a6b, #ef4444); box-shadow:0 10px 24px rgba(239,68,68,.35), inset 0 -2px 0 rgba(0,0,0,.08); } /* Ensure circle background locks to theme color and icon turns solid white when active */ /* explicit color locks preserved by gradient styles above */ /* Make the swap (stroke) icon fully visible on active blue */ .sideIconBtn.trades.active svg{ stroke:#ffffff; fill:none; } /* Make the heart (filled) icon solid white on active red */ .sideIconBtn.wants.active svg{ fill:#ffffff; stroke:#ffffff; } /* Show icon as white when active for mobile bar too */ .sideIconBtn.trades.active .circle svg{ stroke:#fff; } .sideIconBtn.wants.active .circle svg{ fill:#fff; stroke:#fff; } /* Grey theme for inactive states (label + ring + icon) */ .sideIconBtn:not(.active){ color:#64748b; } .sideIconBtn:not(.active) .circle{ background:transparent; border-color:currentColor; } .sideIconBtn:not(.active) svg{ stroke:currentColor; fill:currentColor; } /* === Mobile menu + side icons responsive === */ @media (max-width: 720px){ #pgHamburger{ display:inline-flex !important; } .pg-right{ display:none; } .pg-menu{ display:none !important; } /* Stack owner card first, then the Trades/Wishlist bar on mobile */ .ownerRow{ display:flex; flex-direction:column; } .mainCol{ order:1; } /* Mobile SideIconBar: match OwnerCard radius/border */ body .sideIconBar{ position: sticky; z-index:45; width: calc(100% - 16px); margin: 6px 8px 0; padding: 10px 12px; background: linear-gradient(180deg,#ffffff,#f7fbff); border: 1.5px solid var(--go-divider); border-radius: 20px; box-shadow: var(--shadow-1); gap: 16px; } body .sideIconBar .sideIconBtn{ font-size:1.1rem; gap:6px; } body .sideIconBar .sideIconBtn .circle{ width:48px; height:48px; } } /* Trade Match Indicator */ .match-indicator { position: absolute; top: 6px; right: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; z-index: 2; width: max-content; box-shadow: 0 2px 8px rgba(0,0,0,.1); } .match-indicator.in-wants { background: #fff7ed; /* orange-100 */ color: #9a3412; /* orange-800 */ border: 1px solid #fed7aa; /* orange-200 */ } .match-indicator.in-trades { background: #eff6ff; /* blue-100 */ color: #1e40af; /* blue-800 */ border: 1px solid #bfdbfe; /* blue-300 */ } /* Drawer gallery: make every card in a row match that row's tallest card */ #drawer #gallery{ align-content:start; align-items:stretch; /* stretch items to track size */ grid-auto-rows:auto; /* row height = tallest item in that row */ } #drawer #gallery > *{ align-self:stretch; /* each card fills the row height */ } #drawer #gallery .card{ height:100%; display:flex; flex-direction:column } /* Center the Add Pokémon card content vertically (desktop) */ @media (min-width:721px){ .card.add-card { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; min-height:180px } } /* Mobile layout: line 1 = Search + Reset, line 2 = Filters + Sort */ @media (max-width: 720px){ .controls .controls-row{ display: grid; grid-template-columns: 1fr auto; column-gap: 8px; row-gap: 8px; align-items: center; } /* Search inputs occupy the left cell of row 1 */ #searchTrades, #searchWants{ grid-column: 1; } /* Reset buttons occupy the right cell of row 1 */ #resetTrades, #resetWants{ grid-column: 2; } /* Filters toggle now in right cell, sort select in left cell */ .controls .controls-row .filtersToggle{ grid-column: 2; } .controls .controls-row label{ grid-column: 1; } } /* === Trade Proposal Styles === */ .proposal-container { max-width: 800px; margin: 0 auto; padding: 20px; } .proposal-header { text-align: center; margin-bottom: 32px; } .trade-section { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; margin-bottom: 24px; } .section-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 16px; color: #1e293b; } .pokemon-selector { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 16px; align-items: stretch; } .message-section { margin-bottom: 24px; } .message-input { width: 100%; min-height: 80px; padding: 12px; border: 1px solid #d1d5db; border-radius: 8px; font-family: inherit; resize: vertical; } .proposal-actions { display: flex; gap: 12px; justify-content: flex-end; } #wantDisplay .card {width:170px;} #wantDisplay { display: flex; align-items: center; gap: 24px; justify-content: center; } #wantDisplay .title { font-weight: 600; text-align: center; margin-bottom: 8px; color: #1e293b; line-height: 1.3; } #wantDisplay .small { font-size: 12px; color: #444b57; text-align: center; margin-top: 4px; } #wantDisplay .user-info { color: #64748b; font-size: 0.875rem; flex-shrink: 0; } #wantDisplay .user-info .from { font-weight: 600; color: #374151; margin-bottom: 4px; } #wantDisplay .user-info .location { font-size: 0.8rem; } .message-tags { margin-bottom: 16px; } .tag-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .tag-chip { padding: 6px 12px; border: 1px solid #d1d5db; border-radius: 20px; background: white; color: #374151; font-size: 0.875rem; cursor: pointer; transition: all 0.2s ease; } .tag-chip:hover { background: #f3f4f6; border-color: #9ca3af; } .tag-chip.active { background: #3b82f6; border-color: #3b82f6; color: white; } .loading { text-align: center; padding: 40px; color: #64748b; } .error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; padding: 16px; border-radius: 8px; margin-bottom: 24px; } /* Proposal-specific controls styling */ .proposal-controls { margin: 8px 0 16px 0; } .proposal-controls-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .proposal-controls-chips { margin-top: 8px; } @media (max-width: 640px) { .proposal-container { padding: 16px; } .pokemon-selector { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .proposal-actions { flex-direction: column; margin-bottom: 60px; } .want-display { flex-direction: column; text-align: center; } .tag-chips { gap: 6px; } .tag-chip { font-size: 0.8rem; padding: 5px 10px; } /* Mobile filters for proposal page */ .proposal-controls .proposal-controls-chips { display: none; } .proposal-controls.show-filters .proposal-controls-chips { display: flex; } .proposal-controls-row { flex-wrap: nowrap; } #searchOffers { flex: 1 1 0%; min-width: 0; } } /* === Page Layout Styles (Preserved) === */ .searchHead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .results { margin-top: 12px; } .hit { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; } .hit .left { display: flex; flex-direction: column; gap: 8px; } .hit .meta { display: flex; align-items: center; gap: 12px; } .hit .matches-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-top: 8px; } @media (max-width:700px) { .hit { grid-template-columns: 1fr; } .hit .right { margin-top: 12px; } } .results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width:900px){ .results-grid { grid-template-columns: 1fr; } } .hero { position:relative; overflow:hidden; border-radius:16px; padding:24px; background:linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); color:#0b2b57; box-shadow:var(--shadow-2); border:1px solid var(--go-divider); } .hero::after{ content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(30,144,255,.18), rgba(30,144,255,0)); filter:blur(2px); } .hero-title{ font-size:28px; line-height:1.1; font-weight:900; letter-spacing:.2px; margin:0 0 8px 0; color:#0b2b57; } .hero-sub{ font-size:14px; color:#1f2937; opacity:.9; max-width:60ch; } .hero-cta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .btn.lg{ padding:12px 18px; font-weight:800; } .btn.ghost{ background:#fff; color:#0b2b57; border-color:#cfe8ff; } .btn.ghost:hover{ background:#f3f8ff; } .selectedWrap{ margin-top:12px; display:flex; align-items:flex-start; gap:16px; flex-wrap:nowrap; justify-content:space-between; } .selLeft{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex:1 1 0; max-width:none; } #selectedPreview .card{ display:inline-block; width:220px; } #searchActions{ display:flex; gap:14px; align-items:center; justify-content:center; width:100%; margin-top:4px; } #searchActions .btn{ padding:14px 22px; font-weight:900; font-size:1.05rem; } #searchActions .btn.active{ box-shadow:var(--shadow-1); outline:0; } .spinner{ width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; display:inline-block; animation:spin .8s linear infinite; vertical-align:-2px; margin-right:8px; } @keyframes spin{ to { transform: rotate(360deg); } } #empty{ display:none; margin-top:8px; text-align:center; padding:1.25rem; } .resultsWrap{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; text-align:left; justify-items:center; } #recentRow{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin-top:6px; } @media (max-width:900px){ .selectedWrap{ flex-wrap:wrap; } .selLeft, .selRight{ flex:0 0 100%; max-width:100%; } } @media (max-width:720px){ .selRight{ align-items:center; width:100%; } #recentRow{ justify-content:center; } } .countGreen{ color:#16a34a; font-weight:900; } /* === Team Profile Theming (no HTML/JS changes needed) === */ /* Apply GO-style team tint, side strokes, and watermark when a team icon is present */ /* Shared layer base for body overlays */ body::before, body::after{ pointer-events:none; } /* VALOR — red tint + side strokes */ body:has(.ownerCard .teamIcons img[alt="Team Valor"])::before{ content:""; position:fixed; inset:0; z-index:0; background: /* top tint */ linear-gradient(180deg, rgba(239,68,68,.14) 0%, rgba(239,68,68,.06) 40%, rgba(239,68,68,0) 70%), /* solid 4px side strokes */ linear-gradient(0deg, #ef4444, #ef4444) left/4px 100% no-repeat, linear-gradient(0deg, #ef4444, #ef4444) right/4px 100% no-repeat; } /* MYSTIC — blue tint + side strokes */ body:has(.ownerCard .teamIcons img[alt="Team Mystic"])::before{ content:""; position:fixed; inset:0; z-index:0; background: linear-gradient(180deg, rgba(59,130,246,.14) 0%, rgba(59,130,246,.06) 40%, rgba(59,130,246,0) 70%), linear-gradient(0deg, #3b82f6, #3b82f6) left/4px 100% no-repeat, linear-gradient(0deg, #3b82f6, #3b82f6) right/4px 100% no-repeat; } /* INSTINCT — amber tint + side strokes */ body:has(.ownerCard .teamIcons img[alt="Team Instinct"])::before{ content:""; position:fixed; inset:0; z-index:0; background: linear-gradient(180deg, rgba(245,158,11,.16) 0%, rgba(245,158,11,.08) 40%, rgba(245,158,11,0) 70%), linear-gradient(0deg, #f59e0b, #f59e0b) left/4px 100% no-repeat, linear-gradient(0deg, #f59e0b, #f59e0b) right/4px 100% no-repeat; } /* Team watermark behind content */ .container:has(.ownerCard .teamIcons img[alt="Team Valor"])::before, .container:has(.ownerCard .teamIcons img[alt="Team Mystic"])::before, .container:has(.ownerCard .teamIcons img[alt="Team Instinct"])::before{ content:""; position:fixed; left:0px; top:10vh; width:320px; height:320px; background-size:contain; background-repeat:no-repeat; opacity:.075; filter:saturate(.9) contrast(1.05); z-index:0; } .container:has(.ownerCard .teamIcons img[alt="Team Valor"])::before{ background-image:url('/sprites/valor.png'); } .container:has(.ownerCard .teamIcons img[alt="Team Mystic"])::before{ background-image:url('/sprites/mystic.png'); } .container:has(.ownerCard .teamIcons img[alt="Team Instinct"])::before{ background-image:url('/sprites/instinct.png'); } /* Ensure main content stacks above overlays */ .container, .ownerRow, .ownerCard{ position:relative; z-index:1; } /* ===================== Mobile Restyle Block ===================== */ /* Tokens for mobile theme (declared late to avoid specificity wars) */ :root{ --mobi-grad-top:#36d1c4; /* teal */ --mobi-grad-mid:#29bba9; /* teal-green midpoint */ --mobi-grad-bot:#1f9aa6; /* deeper teal */ --mobi-surface:#f6fffb; /* light mint surface */ --mobi-surface-2:#eefcf6; /* alternate mint */ --mobi-fab-ring:#2bd6b1; /* GO green ring */ --mobi-fab-ring-2:#12a98c; /* GO green inner */ } @media (max-width: 720px){ /* Background: light neutral like the Poké Box */ html, body{ background: linear-gradient(180deg, #fbfefe 0%, #ffffff 60%, #ffffff 100%) !important; color:#0b2b57; } .container:has(.ownerCard .teamIcons img[alt="Team Valor"])::before, .container:has(.ownerCard .teamIcons img[alt="Team Mystic"])::before, .container:has(.ownerCard .teamIcons img[alt="Team Instinct"])::before{ bottom:0; top: revert; } /* Keep team rails on mobile but remove the large page tint */ body:has(.ownerCard .teamIcons img[alt="Team Valor"])::before{ background: linear-gradient(0deg, #ef4444, #ef4444) left/4px 100% no-repeat, linear-gradient(0deg, #ef4444, #ef4444) right/4px 100% no-repeat !important; } body:has(.ownerCard .teamIcons img[alt="Team Mystic"])::before{ background: linear-gradient(0deg, #3b82f6, #3b82f6) left/4px 100% no-repeat, linear-gradient(0deg, #3b82f6, #3b82f6) right/4px 100% no-repeat !important; } body:has(.ownerCard .teamIcons img[alt="Team Instinct"])::before{ background: linear-gradient(0deg, #f59e0b, #f59e0b) left/4px 100% no-repeat, linear-gradient(0deg, #f59e0b, #f59e0b) right/4px 100% no-repeat !important; } /* Keep main watermark subtle over new gradient */ main::before{ opacity:.06; filter:saturate(.95) contrast(1.02); } /* Cards: rounder, softer elevation on mint surface */ .card{ border-radius:20px; padding:12px; background:linear-gradient(180deg, #ffffff 0%, var(--mobi-surface) 100%); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 26px rgba(10,27,46,.14); } .card.has-card-bg::before{ border-radius:20px; opacity:.33; } /* Search pill: centered, with left icon and mint surface */ #searchTrades, #searchWants{ border-radius:999px; background:linear-gradient(180deg,#ffffff, var(--mobi-surface)); border:1.5px solid rgba(255,255,255,.65); box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 6px 16px rgba(12,39,63,.10); padding-left:40px; color:#0b2b57; font-weight:700; } /* Tiny meta: heavier with tracking (small-caps vibe) */ .small{ font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#215d5f; } /* Owner card: remove border and shadow on mobile */ .ownerCard{ border:0 !important; box-shadow:none !important; background:none!important; } #searchTrades::placeholder, #searchWants::placeholder{ color:#286b6a; opacity:.9; } /* left search icon */ #searchTrades, #searchWants{ position:relative; background-image:url('data:image/svg+xml;utf8,'); background-repeat:no-repeat; background-position:12px center; background-size:18px 18px; } /* Hide side icon strip when real tabs are present */ /* When the mobile tabs are rendered above the main container, hide the side icon bar */ .pg-mobile-tabs + .container .sideIconBar{ display:none; } body .sideIconBar .sideIconBtn:focus-visible{ outline:3px solid rgba(255,255,255,.85); outline-offset:4px; border-radius:14px; } /* Mobile tab bar (Trainer | Trades | Wishlist) */ /* Place tabs flush under the sticky site header with no visible gap */ .pg-mobile-tabs{ position:sticky; top:60px; z-index:45; di; border-bottom: solid 3px #e6ebf7; justify-content:center; gap:18px; padding:6px 10px 8px; /* extra bottom space for underline */ background:linear-gradient(180deg,#ffffff,#f7fbff); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); /* slight section shadow */ } .pg-mobile-tabs .m-tab{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:8px 10px; min-width:84px; border-radius:10px; border:none; background:transparent; box-shadow:none; color:#0b2b57; font-weight:900; letter-spacing:.02em; text-transform:none; cursor:pointer; } .pg-mobile-tabs .m-tab .m-count{ display:block; font-size:11px; font-weight:800; letter-spacing:.05em; color:#286b6a; opacity:.9; } .pg-mobile-tabs .m-tab .m-underline{ position:absolute; left:50%; bottom: -11px; transform:translateX(-50%); display:block; width: 50px; height:3px; border-radius:3px; background:transparent; } .pg-mobile-tabs .m-tab.active .m-underline{ background:#16a34a; box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 3px 8px rgba(0,0,0,.08); } .pg-mobile-tabs .m-tab:focus-visible{ outline:3px solid rgba(124,198,255,.6); outline-offset:2px; } /* Visually rename tabs to match GO copy (no DOM changes) */ .sideIconBtn.trades span:last-child{ color:transparent; position:relative; } .sideIconBtn.trades span:last-child::before{ content:"For Trade"; color:#0b2b57; position:absolute; left:50%; transform:translateX(-50%); } .sideIconBtn.wants span:last-child{ color:transparent; position:relative; } .sideIconBtn.wants span:last-child::before{ content:"Wishlist"; color:#0b2b57; position:absolute; left:50%; transform:translateX(-50%); } /* Add Pokémon FAB: bottom-left GO green ring */ #fabAdd{ position:fixed !important; left:16px !important; right:auto !important; bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; width:62px; height:62px; padding:0; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%), linear-gradient(180deg, var(--go-green-start), var(--go-green-end)); box-shadow: 0 10px 28px rgba(19,170,140,.45), inset 0 -2px 0 rgba(0,0,0,.10); border:0; z-index:70; font-size:0; color:transparent; } #fabAdd::after{ content:""; width:28px; height:28px; background-color:#e5fffb; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/contain; mask: url('data:image/svg+xml;utf8,') no-repeat center/contain; } #fabAdd::before{ content:""; position:absolute; inset:-6px; border-radius:inherit; background: radial-gradient(circle at 50% 50%, rgba(43,214,177,.6), rgba(43,214,177,0) 70%); } #fabAdd:focus-visible{ outline:3px solid rgba(255,255,255,.8); outline-offset:2px; } #fabAdd:active{ transform: scale(.97); filter:brightness(.98); } /* FAB visibility per mobile tab */ body.tab-trainer #fabAdd{ display:none !important; } /* Sort FAB: match Add Pokémon FAB circular style */ .controls .sortWrap{ position:fixed; right:16px; bottom: calc(20px + var(--dock-h,72px) + env(safe-area-inset-bottom,0px)) !important; z-index:60; width:62px; height:62px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%), linear-gradient(180deg, var(--go-green-start), var(--go-green-end)); box-shadow: 0 10px 28px rgba(19,170,140,.45), inset 0 -2px 0 rgba(0,0,0,.10); border:0; } .controls .sortWrap select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; } /* Small directional arrow overlay (up/down) */ .controls .sortWrap .dir{ position:absolute; right:8px; bottom:8px; width:14px; height:14px; opacity:.9; background:#ffffff; pointer-events:none; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/contain; mask: url('data:image/svg+xml;utf8,') no-repeat center/contain; } /* Down for new & dex; up for old & dex-desc */ .controls .sortWrap[data-mode="new"] .dir, .controls .sortWrap[data-mode="dex"] .dir{ -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/contain; mask: url('data:image/svg+xml;utf8,') no-repeat center/contain; } .controls .sortWrap[data-mode="old"] .dir, .controls .sortWrap[data-mode="dex-desc"] .dir{ -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/contain; mask: url('data:image/svg+xml;utf8,') no-repeat center/contain; } /* Outer glow ring like Add FAB */ .controls .sortWrap::before{ content:""; position:absolute; inset:-6px; border-radius:inherit; background: radial-gradient(circle at 50% 50%, rgba(43,214,177,.6), rgba(43,214,177,0) 70%); } /* Force-hide Add FAB on desktop widths */ @media (min-width: 721px){ #fabAdd{ display:none !important; } } /* Icon glyph that updates based on selected option */ .controls .sortWrap::after{ content:""; position:absolute; left:50%; top:50%; width:28px; height:28px; transform:translate(-50%,-50%); background-color:#e5fffb; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/contain; mask: url('data:image/svg+xml;utf8,') no-repeat center/contain; } /* Show clock icon when sorting by recents (both directions) */ .controls .sortWrap:has(select option[value="new"]:checked)::after, .controls .sortWrap:has(select option[value="old"]:checked)::after{ -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/contain; mask: url('data:image/svg+xml;utf8,') no-repeat center/contain; } /* Hash icon for Pokédex sort */ .controls .sortWrap:has(select option[value="dex"]:checked)::after, .controls .sortWrap:has(select option[value="dex-desc"]:checked)::after{ content:""; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/contain; mask: url('data:image/svg+xml;utf8,') no-repeat center/contain; } /* Focus/active states for accessibility */ .controls .sortWrap:focus-within{ filter:brightness(1.02); box-shadow:0 12px 30px rgba(19,170,140,.52), inset 0 -2px 0 rgba(0,0,0,.12); } .controls .sortWrap:active{ transform:scale(.98); } /* Decorative expanded sheet hint (visual only; native select handles choices) */ .controls .sortWrap:focus-within::after{ opacity:1 } /* Section headers: 1-line with icon-only Share on the right */ .sectionHeader{ flex-direction:row; align-items:center; justify-content:space-between; gap:8px; } .sectionHeader strong{ font-weight:900; letter-spacing:.02em; color:#0b2b57; } .sectionHeader .small{ color:#256b6b; letter-spacing:.05em; text-transform:uppercase; font-weight:800; } #shareTrades, #shareWants{ font-size:0; padding:8px; width:40px; height:40px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; } #shareTrades svg, #shareWants svg{ width:18px; height:18px; } /* Controls row: Search + Reset + Filters in one line */ .controls .controls-row{ display:grid; grid-template-columns: 1fr auto auto; align-items:center; column-gap:8px; } #searchTrades, #searchWants{ grid-column:1; } #resetTrades, #resetWants{ grid-column:2; } .controls .controls-row .filtersToggle{ grid-column:3; } } /* Ensure drawer overlays above shared header and menus */ #overlay{ z-index: 2500 !important; } #drawer {z-index: 2501 !important;} /* --- XP + Level system --- */ .xpWrap{margin-top:8px} .xpBar{position:relative;height:10px;background:var(--muted-100,#e7e8ec);border-radius:999px;overflow:hidden} .xpFill{display:block;height:100%;width:0%;transition:width .4s ease;background:linear-gradient(90deg,#3b82f6,#60a5fa)} .xpText{font-size:12px;color:var(--muted,#6b7280);margin-top:4px} .demo{margin-top:6px;font-size:11px;color:#6b7280} .hidden{display:none !important} .levelUp{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.4);z-index:99999} .levelUp.show{display:grid} .levelUpCard{position:relative;background:#fff;border-radius:16px;padding:20px;width:min(92vw,420px);text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.25); z-index:100000} /* Level badge token */ .levelBadge{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:999px;background:linear-gradient(180deg,#ffffff,#f1f5f9);border:2px solid var(--go-divider);box-shadow:0 6px 16px rgba(2,6,23,.06)} .levelBadge .levelNum{font-weight:800;font-size:14px;} /* Owner card XP row */ /* --- XP Feature Styles (retained for future use) ------------------- */ .ownerXP{display:flex;align-items:center;gap:10px;justify-content:center;margin:10px auto 0;width: 90%;max-width:460px} .ownerXP .levelBadge{width:42px;height:42px;background:linear-gradient(180deg,#ffffff,#e9f2ff);border-color:#93c5fd} .ownerXP .levelBadge .levelNum{font-size:16px;color:#0b2b57} .ownerXP .xpWrap{flex:1;margin-top:0} .ownerXP .xpText{display:block;text-align:center;margin-top:4px} /* Rewards track (compact chips under XP) */ .rewardsTrack{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:12px auto 0; max-width:min(720px,92%); overflow-x:auto; scrollbar-width:thin } .rewardChip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--go-divider); background:linear-gradient(180deg,#ffffff,#f7fbff); color:#0b2b57; font-weight:800; font-size:12px; box-shadow:0 4px 14px rgba(15,23,42,.08); transition:transform .08s ease, box-shadow .18s ease } .rewardChip:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(15,23,42,.12) } .rewardChip .lvl{ display:inline-block; min-width:22px; height:22px; border-radius:999px; background:#eef2ff; color:#3730a3; font-weight:900; font-size:11px; text-align:center; line-height:22px; border:1px solid #c7d2fe } .rewardChip .label{ white-space:nowrap; letter-spacing:.02em } .rewardChip .icon{ width:16px; height:16px; background:#64748b; border-radius:4px; mask:no-repeat center / contain; -webkit-mask:no-repeat center / contain } /* Grey out locked (upcoming) rewards */ .rewardChip.locked{ opacity:.45; filter: grayscale(1); } /* Emphasize the next upcoming reward */ .rewardChip.next{ border-color:#93c5fd; background:#eff6ff; box-shadow:0 8px 22px rgba(59,130,246,.15); } .rewardChip.next .lvl{ background:#dbeafe; border-color:#bfdbfe; color:#1e3a8a } @keyframes breathe{0%{box-shadow:0 0 0 0 rgba(59,130,246,.25)}100%{box-shadow:0 0 0 10px rgba(59,130,246,0)}} .rewardChip.next{ animation:breathe 2.2s ease-out infinite } /* Rewards toggle */ .rewardsToggle{ display:block; margin:6px auto 0; font-size:12px; color:#2563eb; background:transparent; border:0; cursor:pointer; font-weight:800 } .rewardsToggle:hover{ text-decoration:underline } /* Optional icon masks */ .rewardChip .icon.slots{ mask-image:url('/icons/slots.svg'); -webkit-mask-image:url('/icons/slots.svg') } .rewardChip .icon.frame{ mask-image:url('/icons/frame.svg'); -webkit-mask-image:url('/icons/frame.svg') } .rewardChip .icon.pin{ mask-image:url('/icons/pin.svg'); -webkit-mask-image:url('/icons/pin.svg') } .rewardChip .icon.alert{ mask-image:url('/icons/bell.svg'); -webkit-mask-image:url('/icons/bell.svg') } .rewardChip .icon.friends{ mask-image:url('/icons/users.svg'); -webkit-mask-image:url('/icons/users.svg') } .rewardChip .icon.save{ mask-image:url('/icons/save.svg'); -webkit-mask-image:url('/icons/save.svg') } .rewardChip .icon.priority{ mask-image:url('/icons/bolt.svg'); -webkit-mask-image:url('/icons/bolt.svg') } .rewardChip .icon.star{ mask-image:url('/icons/star.svg'); -webkit-mask-image:url('/icons/star.svg') } /* Hide inline rewards track by default; shown in modal instead */ #rewardsTrack{ display:none } /* --- End XP Feature Styles ---------------------------------------- */ /* === Index Page Styles (migrated from inline) === */ /* Prevent flicker: during boot, hide list panels until tab is resolved */ body.booting #panelTrades, body.booting #panelWants{ display:none !important; } /* Mobile: also hide owner card during boot to avoid flash on list tabs */ @media (max-width: 720px){ body.booting #owner{ display:none !important; } } .ownerCard { position: relative; display:flex; flex-direction:column; } /* Tighten placement within grid on desktop */ .ownerHeader .rightTools{justify-self: start;min-width: 0;top: 10px;position: absolute;} .ownerHeader .ownerTools{ gap:10px; } /* Owner tools — professional, compact icon buttons */ .ownerTools{ display:flex; align-items:center; gap:8px; } .ownerTools .iconBtn{ display:inline-flex; align-items:center; justify-content:center; -webkit-appearance:none; appearance:none; background: transparent; border: 0; box-shadow: none; padding: 6px; border-radius:8px; cursor:pointer; color:inherit; transition: transform .08s ease, color .15s ease, box-shadow .15s ease; } .ownerTools .iconBtn svg{ width:22px; height:22px; stroke:currentColor; fill:none; } .ownerTools .iconBtn:active{ transform: scale(.96); } .ownerTools .iconBtn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(30,144,255,.25); } .ownerTools .iconBtn.is-blue{ color:#1e90ff; } .ownerTools .iconBtn.is-blue:hover{ color:#1879d6; } .ownerTools .iconBtn.is-gray{ color:#6b7280; } .ownerTools .iconBtn.is-gray:hover{ color:#4b5563; } .card.selectable{ cursor:pointer; } /* === Card background images behind sprite === */ .card.has-card-bg{ position:relative;} /* Shiny badge overlay */ /* Cross-match pills */ .badge.cross-pill{ margin-left:6px; font-weight:700; border-width:1px; border-style:solid; } .badge.cross-wants{ /* shown on Trades: in my Wishlist */ background:#fee2e2; /* red-100 */ color:#b91c1c; /* red-700 */ border-color:#fecaca;/* red-200 */ } .badge.cross-trades{ /* shown on Wishlist: in my Trades */ background:#dbeafe; /* blue-100 */ color:#1d4ed8; /* blue-700 */ border-color:#bfdbfe;/* blue-200 */ } /* Compact icon-first side bar (#3) */ .sideIconBar{ position:sticky; top:84px; align-self:stretch; /* stretch to full grid track height */ display:flex; flex-direction:column; justify-content:center; /* center icons vertically */ align-items:center; gap:14px; height:100%; /* take full column height */ } .sideIconBtn{ display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:#64748b; /* INACTIVE = grey */ font-weight:800; font-size: 1.3rem; transition:color .15s ease; } .sideIconBtn .circle{ width:48px; height:48px; border-radius:999px; border:2px solid currentColor; display:grid; place-items:center; background:transparent; transition:background .15s ease, border-color .15s ease; } .sideIconBtn svg{ width:22px; height:22px; stroke:currentColor; } .sideIconBtn.wants svg{ fill:currentColor; } /* heart uses fill */ /* ACTIVE themes */ .sideIconBtn.trades.active{ color:#1e90ff; } /* blue */ .sideIconBtn.wants.active{ color:#ef4444; } /* red */ .sideIconBtn.active .circle{ background:currentColor; /* blue/red pill */ border-color:currentColor; color:#fff; /* makes SVG stroke/fill white via currentColor */ } /* Ensure circle background locks to theme color and icon turns solid white when active */ .sideIconBtn.trades.active .circle{ background:#1e90ff; border-color:#1e90ff; } .sideIconBtn.wants.active .circle{ background:#ef4444; border-color:#ef4444; } /* Make the swap (stroke) icon fully visible on active blue */ .sideIconBtn.trades.active svg{ stroke:#ffffff; fill:none; } /* Make the heart (filled) icon solid white on active red */ .sideIconBtn.wants.active svg{ fill:#ffffff; stroke:#ffffff; } /* Show icon as white when active for mobile bar too */ .sideIconBtn.trades.active .circle svg{ stroke:#fff; } .sideIconBtn.wants.active .circle svg{ fill:#fff; stroke:#fff; } /* Grey theme for inactive states (label + ring + icon) */ .sideIconBtn:not(.active){ color:#64748b; } .sideIconBtn:not(.active) .circle{ background:transparent; border-color:currentColor; } .sideIconBtn:not(.active) svg{ stroke:currentColor; fill:currentColor; } /* === Mobile menu + side icons responsive === */ @media (max-width: 720px){ /* Mobile: hide picker Tags by default; toggle via Filters button */ #tags{ display:none; } } @media (min-width: 721px){ /* Desktop: show filters/tags by default and hide Filters toggle button */ #filters{ display:block !important; } #tags{ display:block !important; } #toggleDrawerFilters, #toggleFiltersTrades, #toggleFiltersWants{ display:none !important; } } @media (max-width: 720px){ /* Drawer: overlay above shared header, pinned to the very top, full viewport, high z-index */ #drawer{ left:50%; transform:translateX(-50%); width:100vw; max-width:100vw; top:0; height:100vh; z-index:200; } /* Drawer header actions as circular icon buttons */ #resetDrawer, #toggleDrawerFilters{ width:44px; height:44px; padding:0; border-radius:9999px; min-width:44px; aspect-ratio:1/1; line-height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:0; } #resetDrawer::before{ content:""; width:22px; height:22px; background-color: currentColor; display:block; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } #toggleDrawerFilters::before{ content:""; width:22px; height:22px; background-color: currentColor; display:block; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } /* Mobile-only subtitle under Trainer tab */ .pg-mobile-tabs .m-tab .m-sub{ display:block; font-size:11px; line-height:1; font-weight:700; letter-spacing:.06em; color:#6b7280; margin-top:2px; } #pgHamburger{ display:inline-flex !important; } .pg-right{ display:none; } .pg-menu{ display:none !important; } /* Mobile tabs: 3 buttons take equal width and uppercase text */ .pg-mobile-tabs { display: flex; justify-content: space-between; } .pg-mobile-tabs .m-tab { flex: 1 1 0; text-align: center; text-transform: uppercase; } /* SideIconBar: horizontal, sticky under header, light grey bg */ .ownerRow{ grid-template-columns:1fr; } .sideIconBar{ position: sticky; z-index: 45; width: 100%; flex-direction: row; justify-content: center; align-items: center; gap: 16px; padding: 8px 12px; background: #ffffff; border-bottom: 1px solid var(--border); } .sideIconBtn .circle{ width:44px; height:44px; } /* Mobile controls row uses a 5‑col grid: search | reset | sort | share | filter */ #tradesControls .controls-row, #wantsControls .controls-row{ display:grid; grid-template-columns: 1fr auto auto auto auto; gap:8px; align-items:center; } #tradesControls #searchTrades, #wantsControls #searchWants{ grid-column:1; min-width:0; } #tradesControls #resetTrades, #wantsControls #resetWants{ grid-column:2; } /* Compact sort in col 3 */ #tradesControls .sortWrap, #wantsControls .sortWrap{ grid-column:3; display:block; } #tradesControls .sortWrap > select, #wantsControls .sortWrap > select{ width:auto; max-width:110px; padding:6px 8px; font-size:.9rem; } /* Share in col 4; Filter in col 5 */ .mobileShareBtn{ grid-column:4; display:inline-flex; } #tradesControls #toggleFiltersTrades, #wantsControls #toggleFiltersWants{ grid-column:5; } /* Mobile: Reset button as circular icon-only */ #resetTrades, #resetWants{ width:44px; height:44px; padding:0; border-radius:9999px; min-width:44px; aspect-ratio:1/1; line-height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:0; } #resetTrades::before, #resetWants::before{ content:""; width:22px; height:22px; background-color: currentColor; display:block; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } /* Make Filters toggle a circular icon-only button */ #toggleFiltersTrades, #toggleFiltersWants{ width:44px; height:44px; padding:0; border-radius:9999px; min-width:44px; aspect-ratio:1/1; line-height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:0; } #toggleFiltersTrades::before, #toggleFiltersWants::before{ content:""; width:22px; height:22px; background-color: currentColor; display:block; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } /* Share buttons as circular icon-only on mobile (override inline icon spacing) */ #shareTrades, #shareWants{ width:44px; height:44px; padding:0; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; } #shareTrades svg, #shareWants svg{ margin-right:0 !important; } /* Default: cloned mobile share hidden on desktop */ .mobileShareBtn{ display:none; } #tradesControls .sortWrap > select, #wantsControls .sortWrap > select{ width:100%; } } #drawer #gallery{ align-items:stretch; grid-auto-rows:auto; } #drawer #gallery > *{ align-self:stretch; } #drawer #gallery .card{ height:100% !important; display:flex; flex-direction:column; } /* Dynamax visual */ .card[data-form="dynamax"] .sprite{ position:relative; z-index:2; } /* DYNAMAX: red stroke + glow on the sprite itself */ .card[data-form="dynamax"] .sprite{ /* 1px “stroke” via multi-direction zero-blur shadows */ filter: drop-shadow( 1px 0 0 rgba(255,0,0,.9)) drop-shadow(-1px 0 0 rgba(255,0,0,.9)) drop-shadow( 0 1px 0 rgba(255,0,0,.9)) drop-shadow( 0 -1px 0 rgba(255,0,0,.9)) /* soft outer glow */ drop-shadow(0 0 6px rgba(255,0,0,.55)) drop-shadow(0 0 12px rgba(255,0,0,.35)); } /* Sticky mobile tab bar */ .stickyTabs{ display:none; } @media (max-width: 720px){ .stickyTabs{ position:sticky; top:60px; z-index:40; background:#d1d5db; padding:8px 12px; border-bottom:1px solid #eee; display:flex; gap:8px; justify-content:center; } .stickyTabs .pill{ padding:8px 14px; border-radius:999px; border:1px solid var(--border); background:#fff; font-weight:700;font-size: 1rem; } .stickyTabs .pill.active{ border-color: var(--pg-blue); box-shadow: var(--shadow-1); } } /* Mobile Add FAB */ #fabAdd { z-index:11; position:fixed; right:16px; bottom:16px; border-radius:999px; padding:14px 18px; box-shadow:var(--shadow-2);transform: } #fabAdd.on{ animation: fabIn .25s ease-out forwards, fabPulse 2.6s ease-in-out 1.2s infinite; } @keyframes fabIn{ to { transform: translateY(0) scale(1); opacity:1; } } @keyframes fabPulse{ 0%{ transform: translateY(0) scale(1);} 50%{ transform: translateY(0) scale(1.06);} 100%{ transform: translateY(0) scale(1);} } /* Mobile-only: hide "+ Add Pokémon" multi-select card, show floating +Add */ /* Find Matches icon on card (below trash) */ .card .icon-find{ position:absolute; right:2px; top:36px; border:0; background:transparent; cursor:pointer; width:32px; height:32px; display:flex; align-items:center; justify-content:center; color:#3b82f6; opacity:.85; text-decoration:none; } .card .icon-find:hover{ opacity:1; } .card .icon-find::before{ content:""; display:block; width:20px; height:20px; background-color: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } @media (max-width: 720px){ .ownerTools .iconBtn svg{ width:20px; height:20px; } } /* Mobile: hide Trades/Wishlist titles and top-right share buttons; show share within controls row */ @media (max-width: 720px){ #tradesTitle, #wantsTitle{ display:none; } .sectionHeader .actions #shareTrades, .sectionHeader .actions #shareWants{ display:none !important; } /* Controls row: Search + Reset + Filter + Share on one line */ #tradesControls .controls-row, #wantsControls .controls-row{ display:grid; grid-template-columns: 1fr auto auto auto; align-items:center; gap:8px; } #tradesControls #searchTrades, #wantsControls #searchWants{ grid-column:1; min-width:0; } #tradesControls #resetTrades, #wantsControls #resetWants{ grid-column:2; } /* Place Share next to Reset (col 3) and Filter after it (col 4) */ .mobileShareBtn{ grid-column:3; display:inline-flex; } #tradesControls #toggleFiltersTrades, #wantsControls #toggleFiltersWants{ grid-column:4; } /* Icon-only share buttons */ #shareTrades, #shareWants, .mobileShareBtn{ width:44px; height:44px; padding:0; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; font-size:0; } #shareTrades svg, #shareWants svg, .mobileShareBtn svg{ margin-right:0 !important; } /* Show mobile Sort FAB (styled via global .controls .sortWrap) */ #tradesControls .sortWrap, #wantsControls .sortWrap{ display:block; } } /* Keep FAB above shared dock (global.css uses !important) */ @media (max-width: 720px){ body #fabAdd{ bottom: calc(20px + var(--dock-h,72px) + env(safe-area-inset-bottom,0px)) !important; z-index: 60 !important; } } /* Proposals: hide 'Sort by:' label inside the mobile circular FAB */ @media (max-width: 720px){ #proposalControls .sortWrap > span{ display:none !important; } } /* When a modal is open, remove mobile dock padding so overlays can center */ @media (max-width: 720px){ body.modal-open{ padding-bottom: 0 !important; } } /* === End Index Page Styles === */ /* === Logged-out Hero === */ #anonHero .heroWrap{ display:flex; flex-direction:column; gap:12px; } #anonHero .heroTitle{ margin:0; font-size:1.4rem; line-height:1.2; font-weight:900; color:#0b2b57; } #anonHero .heroSub{ margin:0; color:#475569; } #anonHero .heroCtas{ display:flex; gap:8px; flex-wrap:wrap; } #anonHero .heroFeatures{ margin:6px 0 0 0; padding-left:18px; color:#334155; } #anonHero .heroFeatures li{ margin:4px 0; } #anonHero .heroReassure{ color:#64748b; } @media (max-width: 720px){ #anonHero .heroTitle{ font-size:1.2rem; } } /* Hero V2 */ .heroV2{ border:1px solid var(--go-divider); border-radius:16px; box-shadow:var(--shadow-2); background:linear-gradient(180deg,#ffffff 0%, #f7fbff 100%); } .heroV2-wrap{ display:grid; grid-template-columns: 1fr; gap:18px; padding:22px; align-items:center; } .heroV2-copy{ display:flex; flex-direction:column; gap:12px; } .heroV2-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:linear-gradient(180deg,#fff,#f6fbff); border:1px solid var(--go-divider); color:#0b2b57; font-weight:700; width:max-content; } .heroV2-title{ margin:0; font-size:28px; line-height:1.1; font-weight:900; letter-spacing:.2px; background:linear-gradient(90deg, var(--go-blue-start), var(--go-blue-end)); -webkit-background-clip:text; background-clip:text; color:transparent; } .heroV2-sub{ margin:0; color:#1f2937; opacity:.95; max-width:60ch; } .heroV2-ctas{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; } .heroV2-primary{ padding:12px 18px; } .heroV2-benefits{ list-style:none; padding:0; margin:4px 0 0 0; display:grid; gap:10px; } .heroV2-benefits li{ display:grid; grid-template-columns: 22px 1fr; gap:10px; align-items:flex-start; color:#334155; } .heroV2-reassure{ color:#64748b; margin-top:2px; } /* Icons for benefits */ .heroV2 .ico{ width:22px; height:22px; background-color: currentColor; opacity:.9; } .heroV2 .ico.organize{ -webkit-mask:url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } .heroV2 .ico.share{ -webkit-mask:url('data:image/svg+xml;utf8,') no-repeat center / contain; mask:url('data:image/svg+xml;utf8,') no-repeat center / contain; } .heroV2 .ico.match{ -webkit-mask:url('data:image/svg+xml;utf8,') no-repeat center / contain; mask:url('data:image/svg+xml;utf8,') no-repeat center / contain; } /* Decorative art removed per feedback */ /* Responsive */ @media (max-width: 900px){ .heroV2-wrap{ grid-template-columns: 1fr; } .heroV2-art{ order:-1; height:120px; min-height:120px; } } @media (max-width: 720px){ .heroV2-title{ font-size:22px; } .heroV2-wrap{ padding:16px; } .heroV2-badge{ font-weight:800; } } /* Hide placeholder tiles for a cleaner grid */ .card.placeholder{ display:none !important; } /* Mobile: hide Add-card tile (use FAB) */ @media (max-width:720px){ .card.selectable.add-card{ display:none } } /* Drawer footer tweaks: smaller Cancel, dynamic Add label */ #selCount{ display:none } #drawerFooter #btnSecondary{ font-size:12px; padding:6px 10px } /* Rewards modal overlay + card */ .rewardsModal{ position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.55); z-index:100200; backdrop-filter:saturate(1.1) blur(2px); -webkit-backdrop-filter:saturate(1.1) blur(2px) } .rewardsModal.show{ display:grid } .rewardsCard{ position:relative; background:#fff; border-radius:16px; padding:16px; width:min(92vw,720px); max-height:82vh; overflow:auto; box-shadow:0 20px 50px rgba(0,0,0,.25); z-index:100201 } .rewardsHead{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px } .rewardsHead h3{ margin:0; font-size:16px } /* Inline link next to XP */ .linkRewards{ font-size:12px; color:#2563eb; background:transparent; border:0; cursor:pointer; font-weight:800; margin-left:10px; align-self:center } .linkRewards:hover{ text-decoration:underline } /* badge frames */ .badge-frame.bronze{outline:3px solid #b87333} .badge-frame.silver{outline:3px solid #c0c0c0} .badge-frame.gold{outline:3px solid #d4af37} .badge-frame.prism{outline:3px solid transparent;outline-offset:0;background: linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,#7dd3fc,#f0abfc,#fde047) border-box;border:3px solid transparent;border-radius:12px} /* Desktop add card disabled state */ @media (min-width: 721px){ .card.selectable.add-card.disabled{ opacity:.5; cursor:not-allowed; pointer-events:none; } .card.selectable.add-card .disabled-note{ position:absolute; inset:auto 12px 12px 12px; font-size:12px; color:#6b7280; text-align:center; } }