/* DJRGAMES Public Theme (non-breaking, scoped) — v1.0 Scope: applies only when .theme-djr is present on Safe to include after your existing styles. */ :root { --djr-bg: #0d121c; --djr-surface: #131a26; --djr-surface-2: #0f1623; --djr-card: #151d2b; --djr-text: #e6edf3; --djr-muted: #8ea0b8; --djr-blue: #1f6feb; /* links/active tabs */ --djr-blue-2: #2b82ff; --djr-yellow: #ffd000; /* DJRGAMES yellow */ --djr-yellow-2: #ffea77; --djr-outline: #213147; --djr-glow: 0 0 0 rgba(0,0,0,0); } body.theme-djr { background: var(--djr-bg); color: var(--djr-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Layout container helpers */ body.theme-djr .container, body.theme-djr .wrap, body.theme-djr .content, body.theme-djr .page { max-width: 1200px; margin-inline: auto; padding-inline: clamp(12px, 3vw, 24px); } /* Top bar / header (keeps your existing HTML) */ body.theme-djr header, body.theme-djr .topbar, body.theme-djr .navbar { background: linear-gradient(180deg, #0e1522, #0b111b 55%); border-bottom: 1px solid #1a2536; position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(120%) blur(6px); } /* Tabs / Pills */ body.theme-djr .tabs, body.theme-djr .nav-tabs, body.theme-djr .pillbar { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 0; } body.theme-djr .tabs a, body.theme-djr .nav-tabs a, body.theme-djr .pillbar a, body.theme-djr .tab, body.theme-djr .pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: #0f1726; color: var(--djr-text); border: 1px solid var(--djr-outline); text-decoration: none; font-weight: 600; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } body.theme-djr .tabs a.active, body.theme-djr .nav-tabs a.active, body.theme-djr .pillbar a.active, body.theme-djr .tab.active, body.theme-djr .pill.active { background: #0f1d35; border-color: #2a4166; box-shadow: 0 0 0 2px rgba(31,111,235,.25) inset; } body.theme-djr .tabs a:hover, body.theme-djr .nav-tabs a:hover, body.theme-djr .pillbar a:hover, body.theme-djr .tab:hover, body.theme-djr .pill:hover { transform: translateY(-1px); } /* Buttons — unify to vibrant yellow */ body.theme-djr .btn, body.theme-djr button, body.theme-djr .button, body.theme-djr a.btn, body.theme-djr input[type="submit"], body.theme-djr .cta { --_bg: var(--djr-yellow); --_bg-hover: #ffdd33; --_txt: #1a1a1a; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 0; color: var(--_txt); background: var(--_bg); padding: 12px 16px; border-radius: 12px; font-weight: 800; text-decoration: none !important; box-shadow: 0 4px 14px rgba(255,208,0,.25), 0 1px 0 rgba(0,0,0,.25) inset; transition: transform .1s ease, box-shadow .15s ease, filter .15s ease, background .12s ease; } body.theme-djr .btn:hover, body.theme-djr button:hover, body.theme-djr .button:hover, body.theme-djr a.btn:hover, body.theme-djr input[type="submit"]:hover, body.theme-djr .cta:hover { background: var(--_bg-hover); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255,208,0,.35), 0 1px 0 rgba(255,255,255,.15) inset; } /* Secondary / ghost buttons */ body.theme-djr .btn.secondary, body.theme-djr .button.secondary, body.theme-djr .ghost { background: #0f1726; color: var(--djr-text); border: 1px solid var(--djr-outline); box-shadow: none; } body.theme-djr .btn.secondary:hover, body.theme-djr .button.secondary:hover, body.theme-djr .ghost:hover { border-color: #2b4163; background: #131e32; } /* Auction cards grid */ body.theme-djr .auction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin: 10px 0 28px; } body.theme-djr .auction-card, body.theme-djr .card, body.theme-djr .tile { background: var(--djr-card); border: 1px solid #1a2740; border-radius: 18px; padding: 18px; box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .12s ease, box-shadow .15s ease, border-color .12s ease; } body.theme-djr .auction-card:hover, body.theme-djr .card:hover, body.theme-djr .tile:hover { transform: translateY(-2px); border-color: #2a4166; box-shadow: 0 10px 30px rgba(0,0,0,.35); } body.theme-djr .auction-card h3, body.theme-djr .card h3 { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.3; } body.theme-djr .muted, body.theme-djr .meta, body.theme-djr .subtle { color: var(--djr-muted); font-size: .93rem; } /* Status badge (ex: FINALIZADO #85) */ body.theme-djr .status, body.theme-djr .badge { background: #0f223d; color: #8fb5ff; border: 1px solid #1d3866; border-radius: 999px; padding: 6px 10px; font-weight: 700; letter-spacing: .2px; } /* Search/filter row */ body.theme-djr .filters, body.theme-djr .filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 18px; } body.theme-djr input[type="text"], body.theme-djr input[type="search"], body.theme-djr select { background: #0f1726; color: var(--djr-text); border: 1px solid var(--djr-outline); border-radius: 12px; padding: 10px 12px; outline: none; } body.theme-djr input[type="text"]:focus, body.theme-djr input[type="search"]:focus, body.theme-djr select:focus { border-color: #2b4163; box-shadow: 0 0 0 3px rgba(31,111,235,.25); } /* Link colors */ body.theme-djr a { color: var(--djr-blue-2); } body.theme-djr a:hover { text-decoration: underline; } /* Page title area */ body.theme-djr .page-title, body.theme-djr h1.page, body.theme-djr .hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 14px; } body.theme-djr .page-title h1, body.theme-djr h1.page { font-size: clamp(1.25rem, 2.2vw, 1.6rem); } /* Footer */ body.theme-djr footer { border-top: 1px solid #1a2536; color: var(--djr-muted); padding: 24px 0; margin-top: 30px; background: linear-gradient(180deg, #0b111b, #0a1019); } /* Utility to place your logo if it exists */ body.theme-djr .brand-logo { height: 40px; display: inline-block; vertical-align: middle; } @media (max-width: 640px) { body.theme-djr .auction-grid { grid-template-columns: 1fr; } } /* Optional glow for primary actions like "Abrir" */ body.theme-djr .btn.primary, body.theme-djr .btn-open, body.theme-djr a[role="button"].primary { box-shadow: 0 8px 22px rgba(255,208,0,.35); }