/* =================================================================== Card Binder — structural + sleek UI (themes live in theme.css) Generic .cb-* classes; per-game accent comes from --accent (set inline on ) and --accent2 derives from it. =================================================================== */ :root { --card-scale: 1; --radius: 16px; --radius-sm: 11px; --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 10px 30px rgba(0,0,0,.45); --glass: color-mix(in srgb, var(--panel) 78%, transparent); --hairline: color-mix(in srgb, var(--accent) 16%, #fff 4%); --grad: linear-gradient(135deg, var(--accent2), var(--accent)); } * { scrollbar-color: color-mix(in srgb, var(--accent) 45%, #555) transparent; } *::-webkit-scrollbar { width: 11px; height: 11px; } *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 45%, #444); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } html { scroll-behavior: smooth; } body { min-height: 100vh; color: var(--ink, #e9edf6); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: .1px; background: radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, var(--tint) 12%, transparent), transparent 55%), linear-gradient(165deg, var(--bg1, #12131a), var(--bg2, #07080c)) !important; background-attachment: fixed; } a { color: var(--accent2); text-decoration: none; transition: color .15s; } a:hover { color: color-mix(in srgb, var(--accent2) 70%, #fff); } .text-accent { color: var(--accent2) !important; } .bg-accent { background: var(--accent) !important; color: #0c0e12 !important; } code { color: var(--accent2); background: rgba(255,255,255,.04); padding: .05em .35em; border-radius: 5px; } .text-muted, .form-text, .text-secondary { color: #9aa3b2 !important; } h1, h2, h3, h4, h5 { letter-spacing: -.2px; } .badge { font-weight: 600; } /* --- Navbar --- */ .cb-navbar { background: color-mix(in srgb, var(--bg2) 72%, transparent) !important; border-bottom: 1px solid var(--hairline); box-shadow: 0 6px 24px rgba(0,0,0,.35); backdrop-filter: saturate(1.4) blur(14px); position: relative; } .cb-navbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad); opacity: .9; } .cb-navbar .navbar-brand { color: #fff !important; font-weight: 800; letter-spacing: -.3px; } .cb-navbar .nav-link { color: #c7cedd !important; opacity: .92; border-radius: 9px; padding: .4rem .7rem; font-weight: 500; transition: background .15s, color .15s; } .cb-navbar .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.07); } .cb-navbar .nav-link.active { color: #fff !important; background: color-mix(in srgb, var(--accent) 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); } .cb-icon { width: 24px; height: 24px; display: inline-block; border-radius: 7px; background: var(--grad); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 55%, transparent); position: relative; } .cb-icon::after { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2.5px; border-radius: 2px; background: rgba(0,0,0,.35); } .btn-cb { background: var(--grad); border: none; color: #0c0e12; font-weight: 650; border-radius: 10px; box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 30%, transparent); } .btn-cb:hover { filter: brightness(1.07); color: #0c0e12; transform: translateY(-1px); } .btn-cb:active { transform: translateY(0); } /* --- Buttons / badges follow theme --- */ .btn { border-radius: 10px; transition: transform .12s, filter .12s, background .15s; } .btn-primary { background: var(--grad) !important; border-color: transparent !important; color: #0c0e12 !important; font-weight: 650; } .btn-outline-primary { color: var(--accent2) !important; border-color: color-mix(in srgb, var(--accent) 55%, #000) !important; } .btn-outline-primary:hover { background: var(--accent) !important; color: #0c0e12 !important; } .btn-outline-light { border-color: rgba(255,255,255,.18) !important; } .btn-outline-light:hover { background: rgba(255,255,255,.1) !important; } .btn-success { background: linear-gradient(135deg,#34d27b,#1ba85c) !important; border: none !important; color: #06140c !important; font-weight: 650; } .badge.bg-primary, .bg-primary { background-color: var(--accent) !important; color: #0c0e12 !important; } .badge.bg-accent { background: var(--accent) !important; color: #0c0e12 !important; } .badge.bg-info, .text-info { color: var(--accent2) !important; } .badge.bg-secondary { background: color-mix(in srgb, var(--panel2) 90%, #fff 6%) !important; color: #cfd6e4 !important; } /* --- Surfaces / glass --- */ .modal-content, .dropdown-menu { background: color-mix(in srgb, var(--panel) 92%, transparent) !important; color: var(--ink) !important; border: 1px solid var(--hairline) !important; border-radius: var(--radius) !important; backdrop-filter: blur(16px); box-shadow: var(--shadow-2); } .dropdown-menu { padding: .35rem; } .dropdown-item { color: #cfd6e4; border-radius: 8px; padding: .5rem .7rem; } .dropdown-item:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); color: #fff; } .dropdown-item.active, .dropdown-item:active { background: var(--accent); color: #0c0e12; } .modal-header, .modal-footer { border-color: var(--hairline) !important; } .modal-title { color: #fff !important; font-weight: 700; } /* card-detail modal scales with the card-size setting */ .modal-dialog.modal-lg { max-width: min(95vw, calc(540px + (var(--card-scale, 1) - 1) * 420px)); } #cardModalImg { width: 100%; height: auto; } .card { background: var(--glass); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-1); backdrop-filter: blur(8px); } .bg-body-tertiary { background: color-mix(in srgb, var(--panel2) 70%, transparent) !important; border: 1px solid var(--hairline); } .list-group-item { background: color-mix(in srgb, var(--panel) 72%, transparent); color: var(--ink); border-color: var(--hairline); } .list-group-item-action:hover { background: color-mix(in srgb, var(--accent) 18%, var(--panel)) !important; } .form-control, .form-select, .input-group-text { background: color-mix(in srgb, var(--bg2) 55%, var(--panel2)) !important; color: var(--ink) !important; border-color: var(--hairline) !important; border-radius: 10px; } .form-control::placeholder { color: color-mix(in srgb, var(--ink) 45%, transparent) !important; } .form-control:focus, .form-select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--accent) 28%, transparent) !important; } .nav-pills .nav-link.active, .nav-tabs .nav-link.active { background: var(--accent) !important; color: #0c0e12 !important; border-color: var(--accent) !important; } .nav-pills .nav-link, .nav-tabs .nav-link { color: var(--accent2); border-radius: 10px; } .form-range::-webkit-slider-thumb { background: var(--accent) !important; } .form-range::-moz-range-thumb { background: var(--accent) !important; } .alert { background: color-mix(in srgb, var(--panel) 80%, transparent); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--radius-sm); } .pagination .page-link { background: color-mix(in srgb, var(--panel) 70%, transparent); color: var(--accent2); border-color: var(--hairline); } .pagination .page-item.disabled .page-link { color: #6b7384; } .table-dark { --bs-table-bg: transparent; } /* --- Scalable card grid --- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(150px * var(--card-scale, 1))), 1fr)); gap: .8rem; } .card-grid.dense { gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(112px * var(--card-scale, 1))), 1fr)); } /* --- Card tiles --- */ .cb-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius-sm); overflow: hidden; position: relative; box-shadow: var(--shadow-1); transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, border-color .16s; } .cb-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--col, #888), color-mix(in srgb, var(--col, #888) 55%, #000)); z-index: 2; } .cb-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2), 0 0 0 1px var(--accent2); border-color: transparent; } .cb-card .card-img-top { aspect-ratio: 5 / 7; object-fit: contain; background: radial-gradient(120% 80% at 50% 0%, #14171f, #0a0c11); display: block; } .cb-card-img { position: relative; } .collect-toggle { position: absolute; top: 7px; right: 7px; width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(10,12,16,.66); color: #fff; cursor: pointer; backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; transition: background .14s, transform .14s; box-shadow: 0 2px 8px rgba(0,0,0,.4); } .collect-toggle:hover { background: rgba(0,0,0,.9); transform: scale(1.1); } .collect-toggle.active { background: var(--accent); color: #0c0e12; } .qty-badge { position: absolute; bottom: 7px; right: 7px; background: var(--accent); color: #0c0e12; font-weight: 800; padding: 1px 8px; border-radius: 10px; font-size: .8rem; box-shadow: var(--shadow-1); } .own-badge { position: absolute; bottom: 7px; right: 7px; background: linear-gradient(135deg,#34d27b,#1ba85c); color: #06140c; font-weight: 800; padding: 1px 8px; border-radius: 10px; font-size: .78rem; box-shadow: 0 2px 8px rgba(0,0,0,.45); } .cost-badge { position: absolute; top: 7px; left: 11px; background: rgba(10,12,16,.74); color: #fff; font-weight: 800; min-width: 25px; height: 25px; padding: 0 6px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: .82rem; backdrop-filter: blur(4px); border: 1px solid color-mix(in srgb, var(--accent2) 70%, transparent); box-shadow: var(--shadow-1); } .alt-badge { position: absolute; bottom: 7px; left: 11px; background: rgba(10,12,16,.74); color: #ffd86b; font-weight: 700; padding: 1px 8px; border-radius: 10px; font-size: .74rem; backdrop-filter: blur(4px); } .print-badge { position: absolute; top: 7px; right: 44px; background: rgba(10,12,16,.7); color: #cfd6e4; font-weight: 700; padding: 1px 7px; border-radius: 10px; font-size: .66rem; backdrop-filter: blur(4px); display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--hairline); } .custom-badge { position: absolute; top: 7px; left: 11px; background: var(--grad); color: #0c0e12; font-weight: 800; padding: 1px 8px; border-radius: 10px; font-size: .66rem; } .cb-pip { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: .62rem; font-weight: 800; color: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.3); vertical-align: middle; } .stat-pill { background: rgba(255,255,255,.05); border: 1px solid var(--hairline); border-radius: 8px; font-size: .72rem; padding: 1px 7px; color: #c7cedd; } .card-body.p-2 .small { color: #e8ecf5; } .card-rules { white-space: pre-wrap; line-height: 1.55; background: rgba(0,0,0,.32) !important; border: 1px solid var(--hairline); border-radius: 10px; font-size: .92rem; } /* qty stepper on tiles (shown on hover) */ .qty-stepper { position: absolute; left: 7px; right: 7px; bottom: 7px; display: none; gap: 4px; align-items: center; justify-content: center; } .cb-card-img:hover .qty-stepper { display: flex; } .qty-stepper button { width: 26px; height: 26px; border: none; border-radius: 8px; cursor: pointer; background: rgba(10,12,16,.85); color: #fff; font-weight: 800; backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-1); } .qty-stepper button:hover { background: var(--accent); color: #0c0e12; } .qty-stepper .qv { background: var(--accent); color: #0c0e12; font-weight: 800; padding: 0 9px; height: 26px; border-radius: 8px; display: flex; align-items: center; min-width: 30px; justify-content: center; } /* stat cards (dashboard) */ .stat-card { border: 1px solid var(--hairline); border-radius: var(--radius); color: #fff; box-shadow: var(--shadow-1); overflow: hidden; position: relative; transition: transform .15s, box-shadow .15s; } .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); } .stat-card .display-6 { font-weight: 800; letter-spacing: -1px; } .footer-bar { border-top: 1px solid var(--hairline); } /* ================================================================= Hub landing — "binder" tiles ================================================================= */ .binder-hero { text-align: center; padding: 2.2rem 1rem 1.4rem; } .binder-title { font-weight: 900; letter-spacing: -1.2px; font-size: clamp(2rem, 5vw, 3.1rem); background: linear-gradient(120deg, #fff, #aab4c7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-flex; align-items: center; gap: .6rem; } .binder-sub { color: #97a1b2; } .hub-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); } .hub-tile { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--g) 32%, var(--hairline)); border-radius: var(--radius); background: linear-gradient(160deg, color-mix(in srgb, var(--g) 16%, var(--panel)), color-mix(in srgb, var(--panel) 96%, #000)); box-shadow: var(--shadow-1); transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s; } .hub-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(var(--g), color-mix(in srgb, var(--g) 45%, #000)); } .hub-tile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(140% 90% at 85% -20%, color-mix(in srgb, var(--g) 30%, transparent), transparent 60%); opacity: .8; pointer-events: none; } .hub-tile:hover { transform: translateY(-6px); border-color: var(--g); box-shadow: var(--shadow-2), 0 0 0 1px color-mix(in srgb, var(--g) 70%, transparent); } .hub-tile .card-body { position: relative; z-index: 1; padding: 1.1rem 1.1rem 1.1rem 1.25rem; } .hub-tile h5 { color: #fff; font-weight: 750; letter-spacing: -.3px; } .hub-badge { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.45rem; color: #0c0e12; background: linear-gradient(160deg, color-mix(in srgb, var(--g) 78%, #fff), var(--g)); box-shadow: 0 6px 18px color-mix(in srgb, var(--g) 45%, transparent); } .hub-swatches { display: flex; gap: 5px; } .hub-swatches span { flex: 1; height: 9px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); } .hub-stat strong { color: #fff; } /* per-game dashboard hero band */ .game-hero { position: relative; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin-bottom: 1.4rem; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 22%, var(--panel)), color-mix(in srgb, var(--panel) 94%, #000)); } .game-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 140% at 92% -30%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 55%); } .game-hero > * { position: relative; z-index: 1; } .game-hero .gh-icon { width: 54px; height: 54px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.7rem; color: #0c0e12; background: var(--grad); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 45%, transparent); } .game-hero h1 { font-weight: 850; letter-spacing: -.5px; } .gh-swatches { display: inline-flex; gap: 5px; vertical-align: middle; } .gh-swatches span { width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); } /* ================================================================= Backgrounds: art slideshow OR animated symbol field ================================================================= */ #bgSlideshow, #bgSym { display: none; } html[data-bg="art"] #bgSlideshow { display: block; } html[data-bg^="sym"] #bgSym { display: block; } #bgSlideshow { position: fixed; inset: 0; z-index: -3; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: .85; transition: opacity 1.2s ease; } #bgSym { position: fixed; inset: -30%; z-index: -3; background-repeat: repeat; background-size: 300px auto; opacity: .5; transform-origin: center center; will-change: transform, background-position, filter; } #bgTint { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(160deg, color-mix(in srgb, var(--tint, #2e84c7) 14%, rgba(8,8,11,.28)), color-mix(in srgb, var(--bg2, #07080c) 55%, rgba(0,0,0,.42))); backdrop-filter: blur(1px); } html[data-bg="sym_drift"] #bgSym { animation: symDrift 90s linear infinite; } html[data-bg="sym_pulse"] #bgSym { animation: symDriftSlow 140s linear infinite, symHue 22s linear infinite; } html[data-bg="sym_kaleido"] #bgSym { animation: symSpin 120s linear infinite, symHue 30s linear infinite; } html[data-bg="sym_rain"] #bgSym { animation: symRain 26s linear infinite, symHue 40s linear infinite; } html[data-bg="sym_warp"] #bgSym { animation: symWarp 36s ease-in-out infinite, symHue 18s linear infinite; } @keyframes symDrift { to { background-position: 720px 480px; } } @keyframes symDriftSlow { to { background-position: 480px 320px; } } @keyframes symRain { to { background-position: 0 800px; } } @keyframes symHue { from { filter: hue-rotate(0deg) saturate(1.2); } to { filter: hue-rotate(360deg) saturate(1.45); } } @keyframes symSpin { from { transform: rotate(0deg) scale(1.25); } to { transform: rotate(360deg) scale(1.25); } } @keyframes symWarp { 0%,100% { transform: scale(1.15) rotate(0deg); } 50% { transform: scale(1.5) rotate(8deg); } } @media (prefers-reduced-motion: reduce) { #bgSym, .cb-card, .hub-tile, .btn { animation: none !important; transition: none !important; } } /* --- Print: hide app chrome (proxy sheet styling lives in proxy_tool.html) --- */ @media print { body { background: #fff !important; } body::before, .cb-navbar, .no-print, footer, #bgSlideshow, #bgSym, #bgTint { display: none !important; } }