/* ========================================================================== InfinityAPI — Panel Design System · "Ledger" -------------------------------------------------------------------------- A private bank statement, not a casino floor. Warm bone paper, ink-black type, hairline rules, and a deep ledger green drawn from accounting paper. Credits in green, debits in oxblood — the colours the subject has used for four hundred years. No gradients, no glow, no glass. The authority comes from typography, whitespace and precise rules. That is what makes documents from a private bank feel expensive, and it is the opposite of the dark-and-gold treatment every other iGaming panel uses. Set class="theme-dark" on for the dark variant. Class names are unchanged from the previous system, so every view keeps working without edits. ========================================================================== */ :root { /* Paper — warm, never pure white. Pure white reads as unfinished. */ --paper-0: #fdfcfa; /* raised card */ --paper-50: #f7f4ee; /* page */ --paper-100: #f0ece3; /* wells, inputs */ --paper-200: #e6e0d4; /* strong fill */ /* Ink */ --ink-900: #14120e; --ink-700: #3a362e; --ink-500: #6b655a; --ink-400: #928b7d; /* Ledger green — the accent */ --led-900: #0f2a1e; --led-700: #1b4332; --led-600: #24593f; --led-500: #2d6a4f; --led-100: #dfeae3; /* Debit */ --ox-700: #7a2823; --ox-600: #8c2f28; --ox-100: #f4e3e0; /* Rules — hairlines carry the whole structure */ --rule: rgba(20, 18, 14, .12); --rule-soft: rgba(20, 18, 14, .06); --rule-ink: rgba(20, 18, 14, .28); /* Paper sits on a desk. It does not glow. */ --lift-1: 0 1px 2px rgba(20,18,14,.04); --lift-2: 0 1px 2px rgba(20,18,14,.05), 0 10px 28px -18px rgba(20,18,14,.22); --lift-3: 0 1px 2px rgba(20,18,14,.06), 0 18px 44px -22px rgba(20,18,14,.28); --radius: 2px; --radius-lg: 3px; --ease: cubic-bezier(.22,.61,.36,1); /* Semantic aliases — views reference these */ --surface: var(--paper-0); --surface-sunk: var(--paper-100); --page: var(--paper-50); --text: var(--ink-900); --text-2: var(--ink-700); --text-3: var(--ink-500); --text-4: var(--ink-400); --accent: var(--led-700); --accent-soft: var(--led-100); --credit: var(--led-600); --debit: var(--ox-600); } /* Dark variant — same structure, inverted stock. */ .theme-dark { --paper-0: #17191a; --paper-50: #101213; --paper-100: #1e2122; --paper-200: #272b2c; --ink-900: #f2f0ea; --ink-700: #cfccc3; --ink-500: #9a968c; --ink-400: #6f6c64; --led-900: #0f2a1e; --led-700: #6fbf94; --led-600: #8ed3ae; --led-500: #a5dcc0; --led-100: #1b2f26; --ox-700: #e0918a; --ox-600: #e5a099; --ox-100: #2e1f1e; --rule: rgba(242, 240, 234, .14); --rule-soft: rgba(242, 240, 234, .07); --rule-ink: rgba(242, 240, 234, .34); --lift-1: 0 1px 2px rgba(0,0,0,.4); --lift-2: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.8); --lift-3: 0 1px 2px rgba(0,0,0,.5), 0 18px 44px -22px rgba(0,0,0,.9); } /* ========================================================================== Base ========================================================================== */ html { -webkit-text-size-adjust: 100%; } body.panel-body, body.auth-body { background-color: var(--page); color: var(--text-2); font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Faint ruled paper. Invisible until you look for it, which is the point. */ body.panel-body::before, body.auth-body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient( 180deg, transparent, transparent 31px, var(--rule-soft) 31px, var(--rule-soft) 32px ); opacity: .55; } .font-display, h1, h2, h3, h4, .panel-title, .auth-title { font-family: "Source Serif 4", Georgia, serif; font-weight: 400; color: var(--text); letter-spacing: -.01em; line-height: 1.25; } ::selection { background: var(--led-700); color: var(--paper-0); } :where(a,button,input,select,textarea,[tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 1px; } /* Every figure here is money or a count. Line them up. */ .tabular, .metric-value, .ledger-value, td, th, .font-mono, code, input { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Legacy hooks from the previous system, remapped so nothing breaks. */ .metal, .gold { color: var(--accent); background: none; -webkit-text-fill-color: currentColor; } .hairline { border: 0; height: 1px; background: var(--rule); } /* Small caps label — the workhorse of this system */ .metric-label, .ledger-label, .field-label, .nav-heading, .status, .badge { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; font-weight: 500; } /* ========================================================================== Plates (.glass-panel kept for backwards compatibility) ========================================================================== */ .glass-panel, .plate { position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--lift-1); transition: box-shadow .3s var(--ease), border-color .3s var(--ease); } .glass-panel:hover, .plate:hover { box-shadow: var(--lift-2); } .plate--flat:hover { box-shadow: var(--lift-1); } /* Hero plate: a full ink rule across the top, like a letterhead */ .plate--gilt { border-top: 2px solid var(--accent); box-shadow: var(--lift-2); } /* ========================================================================== The ledger — the balance is the subject of the page, so it is set like the total line on a statement: large, serif, ink, with a rule beneath it. ========================================================================== */ .ledger { display: grid; grid-template-columns: 1fr; background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--accent); border-radius: var(--radius); box-shadow: var(--lift-2); overflow: hidden; } @media (min-width: 768px) { .ledger { grid-template-columns: 1.4fr 1fr; } } .ledger-cell { padding: 1.9rem 1.75rem; } .ledger-cell + .ledger-cell { border-top: 1px solid var(--rule); } @media (min-width: 768px) { .ledger-cell + .ledger-cell { border-top: 0; border-inline-start: 1px solid var(--rule); } } .ledger-label { color: var(--text-4); margin-bottom: 1rem; } .ledger-value { font-family: "Source Serif 4", Georgia, serif; font-size: clamp(2.4rem, 7vw, 3.5rem); font-weight: 300; line-height: 1; letter-spacing: -.025em; color: var(--text); padding-bottom: .75rem; border-bottom: 1px solid var(--rule-ink); } .ledger-currency { font-family: "IBM Plex Sans", sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--text-4); margin-inline-start: .6rem; vertical-align: .85em; } .ledger-meta { margin-top: .85rem; font-size: 12px; color: var(--text-4); } .ledger-meta a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================== Telemetry — a ruled instrument scale, not more cards ========================================================================== */ .telemetry { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); background: var(--surface); border: 1px solid var(--rule); border-top: 0; } @media (min-width: 900px) { .telemetry { grid-template-columns: repeat(4, minmax(0,1fr)); } } .telemetry-cell { padding: 1.15rem 1.4rem; border-inline-start: 1px solid var(--rule); } .telemetry-cell:first-child { border-inline-start: 0; } @media (max-width: 899px) { .telemetry-cell:nth-child(odd) { border-inline-start: 0; } .telemetry-cell:nth-child(n+3) { border-top: 1px solid var(--rule); } } .metric-label { color: var(--text-4); margin-bottom: .45rem; } .metric-value { font-family: "Source Serif 4", Georgia, serif; font-size: 1.7rem; font-weight: 400; line-height: 1.05; letter-spacing: -.02em; color: var(--text); } .metric-unit { font-size: 12px; color: var(--text-4); margin-inline-start: .25rem; } .metric-value--up { color: var(--credit); } .metric-value--down { color: var(--debit); } /* ========================================================================== Controls ========================================================================== */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.35rem; background: var(--led-700); border: 1px solid var(--led-700); border-radius: var(--radius); color: var(--paper-0); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background .2s var(--ease), border-color .2s var(--ease), transform .1s var(--ease); } .theme-dark .btn-primary { color: var(--paper-50); } .btn-primary:hover { background: var(--led-900); border-color: var(--led-900); } .theme-dark .btn-primary:hover { background: var(--led-600); border-color: var(--led-600); } .btn-primary:active { transform: translateY(1px); } .btn-primary[disabled] { opacity: .4; cursor: not-allowed; } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1.15rem; background: transparent; border: 1px solid var(--rule-ink); border-radius: var(--radius); color: var(--text-2); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .btn-ghost:hover { background: var(--paper-100); border-color: var(--text); color: var(--text); } .btn-quiet { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .25rem; background: none; border: 0; cursor: pointer; color: var(--text-3); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule); transition: color .2s var(--ease), text-decoration-color .2s var(--ease); } .btn-quiet:hover { color: var(--text); text-decoration-color: var(--text); } .field { width: 100%; padding: .75rem .9rem; background: var(--paper-100); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--text); font-family: inherit; font-size: 14px; transition: background .2s var(--ease), border-color .2s var(--ease); } .field::placeholder { color: var(--text-4); } .field:focus { background: var(--surface); border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); outline: none; } .field-label { color: var(--text-4); display: block; margin-bottom: .5rem; } .field-hint { font-size: 12px; color: var(--text-4); margin-top: .45rem; } .field-error { font-size: 12px; color: var(--debit); margin-top: .45rem; } /* One-time code — six ruled boxes, like a form to be filled in by hand */ .otp { display: flex; gap: .45rem; justify-content: center; } .otp input { width: 2.9rem; height: 3.6rem; text-align: center; font-family: "Source Serif 4", Georgia, serif; font-size: 1.5rem; font-weight: 400; color: var(--text); background: var(--paper-100); border: 1px solid var(--rule); border-bottom: 2px solid var(--rule-ink); border-radius: var(--radius); transition: border-color .2s var(--ease), background .2s var(--ease); } .otp input:focus { background: var(--surface); border-bottom-color: var(--accent); outline: none; } .otp.is-invalid input { border-bottom-color: var(--debit); animation: nudge .35s var(--ease); } @keyframes nudge { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(3px); } } /* ========================================================================== Navigation ========================================================================== */ .nav-link { position: relative; display: flex; align-items: center; gap: .7rem; padding: .6rem .85rem; border-radius: var(--radius); color: var(--text-3); font-size: 13.5px; font-weight: 450; text-decoration: none; transition: color .2s var(--ease), background .2s var(--ease); } .nav-link::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 22%; width: 2px; background: var(--accent); transform: scaleY(0); transition: transform .25s var(--ease); } .nav-link:hover { color: var(--text); background: var(--paper-100); } .nav-link.active { color: var(--text); background: var(--paper-100); font-weight: 500; } .nav-link.active::before { transform: scaleY(1); } .nav-link.active .nav-icon { color: var(--accent); } .nav-icon { color: var(--text-4); font-size: 1.05rem; transition: color .2s var(--ease); } .nav-link:hover .nav-icon { color: var(--text-2); } .nav-heading { padding: 1.5rem .85rem .45rem; color: var(--text-4); } /* ========================================================================== Shell ========================================================================== */ .panel-shell { display: flex; min-height: 100vh; min-height: 100dvh; } .panel-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40; width: 16.5rem; display: flex; flex-direction: column; background: var(--surface); border-inline-end: 1px solid var(--rule); transform: translateX(-100%); transition: transform .35s var(--ease); } [dir="rtl"] .panel-sidebar { transform: translateX(100%); } .panel-sidebar.is-open, [dir="rtl"] .panel-sidebar.is-open { transform: translateX(0); } .panel-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .panel-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(20,18,14,.35); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease); } .panel-scrim.is-open { opacity: 1; visibility: visible; } @media (min-width: 1024px) { .panel-sidebar, [dir="rtl"] .panel-sidebar { transform: translateX(0); } .panel-main { margin-inline-start: 16.5rem; } .panel-scrim, .panel-burger { display: none; } } .panel-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.25rem; background: var(--surface); border-bottom: 1px solid var(--rule); } @media (min-width: 1024px) { .panel-topbar { padding-inline: 2.25rem; } } .panel-content { padding: 1.75rem 1.25rem 4rem; } @media (min-width: 1024px) { .panel-content { padding: 2.5rem 2.25rem 5rem; } } /* ========================================================================== Auth ========================================================================== */ .auth-shell { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; } .auth-card { width: 100%; max-width: 26rem; padding: 2.75rem 2.25rem; background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--accent); border-radius: var(--radius); box-shadow: var(--lift-3); } .auth-card--wide { max-width: 34rem; } .auth-title { font-size: 1.75rem; } .auth-sub { margin-top: .55rem; font-size: 13.5px; line-height: 1.6; color: var(--text-3); } .segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .segment button { padding: .65rem .5rem; border: 0; background: var(--paper-100); cursor: pointer; color: var(--text-3); font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; transition: background .2s var(--ease), color .2s var(--ease); } .segment button + button { border-inline-start: 1px solid var(--rule); } .segment button[aria-selected="true"] { background: var(--led-700); color: var(--paper-0); } .theme-dark .segment button[aria-selected="true"] { color: var(--paper-50); } /* QR stays dark-on-light in every theme — readers need it that way. */ .qr-plate { display: grid; place-items: center; padding: .75rem; background: #ffffff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--lift-1); } .qr-plate > * { display: block; } .secret-key { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .9rem; background: var(--paper-100); border: 1px solid var(--rule); border-radius: var(--radius); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .1em; color: var(--text); word-break: break-all; } .recovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .4rem; padding: 1rem; background: var(--paper-100); border: 1px solid var(--rule); border-radius: var(--radius); } .recovery-grid code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .06em; color: var(--text); } .steps { counter-reset: step; display: grid; gap: 1.5rem; } .step { position: relative; padding-inline-start: 2.5rem; counter-increment: step; } .step::before { content: counter(step); position: absolute; inset-inline-start: 0; top: 0; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; background: var(--led-700); color: var(--paper-0); border-radius: 50%; font-size: 11px; font-weight: 500; } .theme-dark .step::before { color: var(--paper-50); } .step h3 { font-size: 1rem; margin-bottom: .3rem; } .step p { font-size: 13px; color: var(--text-3); } /* ========================================================================== Status, badges, notices, tables ========================================================================== */ .status { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-4); } .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--credit); } .status-dot--warn { background: #b8860b; } .status-dot--down { background: var(--debit); } .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .5rem; border: 1px solid var(--rule-ink); border-radius: 1px; color: var(--text-3); text-decoration: none; } .badge--ok { color: var(--led-700); border-color: var(--led-700); background: var(--led-100); } .badge--fail { color: var(--ox-700); border-color: var(--ox-700); background: var(--ox-100); } .badge--gold { color: var(--led-700); border-color: var(--led-700); background: var(--led-100); } .notice { display: flex; gap: .7rem; padding: .9rem 1.1rem; background: var(--surface); border: 1px solid var(--rule); border-inline-start: 3px solid var(--accent); border-radius: var(--radius); font-size: 13px; line-height: 1.6; color: var(--text-2); } .notice--error { border-inline-start-color: var(--debit); background: var(--ox-100); color: var(--ox-700); } .lux-table { width: 100%; border-collapse: collapse; font-size: 13px; } .lux-table thead th { padding: .8rem 1.1rem; text-align: start; font-size: 10px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--text-4); border-bottom: 1px solid var(--rule-ink); } .lux-table tbody td { padding: .9rem 1.1rem; border-bottom: 1px solid var(--rule-soft); color: var(--text-2); } .lux-table tbody tr { transition: background .15s var(--ease); } .lux-table tbody tr:hover { background: var(--paper-100); } .lux-table tbody tr:last-child td { border-bottom: 0; } .empty-state { padding: 3.5rem 1.5rem; text-align: center; color: var(--text-4); font-size: 13.5px; } .kit { display: flex; align-items: center; gap: 1.1rem; padding: 1.15rem 1.3rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .kit:hover { border-color: var(--rule-ink); box-shadow: var(--lift-1); } .kit-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; background: var(--led-100); color: var(--led-700); border-radius: var(--radius); font-size: 1.1rem; } .kit-name { font-family: "Source Serif 4", Georgia, serif; font-size: 1rem; color: var(--text); } .kit-meta { margin-top: .15rem; font-size: 12px; color: var(--text-4); } /* ========================================================================== Scrollbars + motion ========================================================================== */ .custom-scrollbar { scrollbar-width: thin; scrollbar-color: var(--rule-ink) transparent; } .custom-scrollbar::-webkit-scrollbar { width: 7px; height: 7px; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--rule-ink); border-radius: 99px; } .reveal { opacity: 0; animation: reveal .5s var(--ease) forwards; } .reveal:nth-child(1) { animation-delay: .02s; } .reveal:nth-child(2) { animation-delay: .07s; } .reveal:nth-child(3) { animation-delay: .12s; } .reveal:nth-child(4) { animation-delay: .17s; } @keyframes reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } } @media print { body.panel-body::before { display: none; } .panel-sidebar, .panel-topbar, .btn-primary, .btn-ghost { display: none !important; } .panel-main { margin: 0 !important; } } /* ========================================================================== Back-compatibility aliases -------------------------------------------------------------------------- Views carry inline styles referencing the previous system's token names. Mapping them here is one edit instead of 170, and it means a future theme change is also a single file. ========================================================================== */ :root, .theme-dark { --ob-1000: var(--page); --ob-950: var(--page); --ob-900: var(--surface); --ob-850: var(--paper-100); --ob-800: var(--paper-100); --ob-700: var(--paper-200); --gold-200: var(--led-500); --gold-300: var(--led-600); --gold-400: var(--led-700); --gold-500: var(--led-700); --gold-600: var(--led-900); --gold-700: var(--led-900); --metal: var(--led-700); --ivory: var(--ink-900); --ivory-dim: var(--ink-700); --muted: var(--ink-500); --muted-dim: var(--ink-400); --line: var(--rule); --line-soft: var(--rule-soft); --line-gold: var(--rule-ink); --emerald: var(--credit); --ruby: var(--debit); --shadow-plate: var(--lift-1); --shadow-lift: var(--lift-2); --shadow-gold: var(--lift-2); } /* ========================================================================== Brand logo -------------------------------------------------------------------------- logo-main.png is ~1400px wide. The partial sizes it with Tailwind arbitrary values (h-8 w-[210px]), so on any page where Tailwind has not loaded — or has not finished compiling — the image renders at natural size and bursts out of whatever contains it. These rules hold it regardless. ========================================================================== */ .panel-sidebar img, .auth-card img, .auth-shell img[alt="Gaming API"] { max-width: 200px; max-height: 40px; width: auto; height: auto; object-fit: contain; } .auth-card img[alt="Gaming API"] { max-width: 180px; margin-inline: auto; } /* Nothing inside a card may exceed it, whatever the stylesheet state. */ .auth-card, .plate, .glass-panel, .ledger, .kit { max-width: 100%; } .auth-card img, .plate img, .glass-panel img { max-width: 100%; }