/* =========================== assets/theme.css (LIGHT-ONLY, auto-dark disabled) Global design tokens (Your exact palette + Light Cream) Include this BEFORE header/sidebar/page CSS on every page. =========================== */ /* --- Force LIGHT everywhere --- */ :root, html { color-scheme: light; /* ब्राउज़र को बताता है: dark variant नहीं है */ } /* --- Core tokens (from your code) --- */ :root{ /* Base palette — premium golden theme */ --ring: #ffb649; /* vibrant golden ring */ --shadow: 0 8px 24px rgba(255, 182, 73, 0.12); --primary: #ff9500; /* rich orange primary */ --primary-light: #fff6e5; /* soft golden light */ --primary-border: #ffb649; /* bright gold border */ --text-primary: #1a1207; /* deep brown text */ --text-muted: #936c3c; /* warm gold text */ /* Layout sizes (used by header/sidebar) */ --topbar-height: 34px; --sidebar-width: 240px; /* Premium surface tokens */ --cream: #fff9e6; /* bright cream surface */ --cream-border: #ffb649; /* vibrant gold border */ --cream-text: #ff9500; /* bright orange accent */ /* Premium surfaces & layered backgrounds */ --surface: #fffaf5; /* neutral warm white base */ --surface-2: #fff6e5; /* warm golden surface */ --bg: linear-gradient(135deg, #fff9f0 0%, #fff0cc 50%, #ffe099 100%); /* premium golden gradient */ /* Radii & shadows */ --radius: 18px; --shadow-sm: 0 10px 22px -16px rgba(0,0,0,.12); --shadow-lg: 0 22px 55px -30px rgba(0,0,0,.22); /* Layout computed vars */ --header-h: var(--topbar-height); --sidebar-w: var(--sidebar-width); --sidebar-w-collapsed: 40px; /* Aliases (back-compat for existing CSS) */ --line: var(--ring); --text: var(--text-primary); --muted: var(--text-muted); --green: var(--primary); --green-2: var(--primary); --accent: var(--primary); } /* Optional: prefer cream accents globally (without changing components) Add [data-tone="cream"] on to softly bias to cream where used. */ html[data-tone="cream"]{ /* these are safe light tweaks; components using cream tokens will shine */ --surface-2: var(--cream); --bg: linear-gradient(180deg, #fff9ee 0%, #fff2da 55%, #fff7ef 100%); } /* 🚫 Auto-dark पूरी तरह बंद: पहले यहाँ prefers-color-scheme: dark media query थी — उसे हटाया गया है। अगर कभी future में manual dark चाहिए, तो अलग फ़ाइल/flag से जोड़ें, auto-detect से नहीं. */ /* ========== Minimal global base (safe across pages) ========== */ *{ box-sizing: border-box; } html,body{ height:100%; } body{ margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif; color: var(--text-primary); background: var(--bg); line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a{ color: inherit; text-decoration: none; } button{ font: inherit; cursor: pointer; } /* Scrollbars (subtle) */ *{ scrollbar-width: thin; scrollbar-color: var(--cream-border) transparent; } *::-webkit-scrollbar{ height: 10px; width: 10px; } *::-webkit-scrollbar-thumb{ background: var(--cream-border); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-track{ background: transparent; } /* Safe-area helpers */ :root{ --inset-b: env(safe-area-inset-bottom, 0px); --inset-t: env(safe-area-inset-top, 0px); --inset-l: env(safe-area-inset-left, 0px); --inset-r: env(safe-area-inset-right, 0px); } /* ========== Light utility layer (optional to use) ========== */ /* Container */ .container{ max-width: 1180px; margin: 0 auto; padding-inline: 0; } /* Cards — unified premium card style (use tokens for consistency) */ .card{ background: linear-gradient(135deg, var(--surface) 0%, var(--cream) 100%); border: 1px solid var(--cream-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); backdrop-filter: blur(8px); transition: all 0.28s cubic-bezier(.2,.9,.2,1); } .card.pad{ padding: 24px; } .card:hover{ transform: translateY(-4px); box-shadow: 0 12px 32px rgba(255, 182, 73, 0.18); border-color: var(--primary); background: linear-gradient(135deg, var(--surface), var(--primary-light)); } .card.soft{ background: linear-gradient(135deg, var(--surface) 0%, var(--cream) 100%); } /* Status colors */ .ok { color: #166b4e; font-weight: 800; } /* ACTIVE = green */ .bad { color: #e25555; font-weight: 800; } /* INACTIVE = red */ /* optional: pending/hold */ .warn{ color: #b45309; font-weight: 800; } /* PENDING = amber */ /* Buttons */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--ring); background: var(--surface); color:var(--text-primary); font-weight:700; box-shadow: var(--shadow-sm); transition: background .2s ease, border-color .2s ease, color .2s ease, transform .1s ease; } .btn:hover{ background: var(--cream); border-color: var(--cream-border); } .btn:active{ transform: translateY(1px); } .btn-primary{ background: linear-gradient(135deg, #ff9500 0%, #ffb649 100%); border-color: var(--primary-border); color:#fff; box-shadow: 0 8px 24px rgba(255, 149, 0, 0.2); transition: all 0.3s ease; } .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255, 149, 0, 0.3); filter: brightness(1.05); } .btn-cream{ background: linear-gradient(135deg, #fff5e6, #ffe9cc); border-color: var(--cream-border); color: var(--text-primary); } /* Premium buy button with enhanced gradient */ .btn-buy{ background: linear-gradient(135deg, #ff9500 0%, #ffb649 100%) !important; border-color: #ffb649 !important; color: #fff !important; box-shadow: 0 8px 24px rgba(255, 149, 0, 0.24) !important; transition: all 0.3s ease !important; } .btn-buy:hover { filter: brightness(1.05) !important; transform: translateY(-2px) !important; box-shadow: 0 12px 32px rgba(255, 149, 0, 0.32) !important; } /* single hover rule above; removed stray duplicate to avoid confusion */ /* Tags / Chips */ .tag{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--ring); border-radius:999px; background: var(--surface); font-size:12px; color:var(--text-muted); } /* Tables */ .table{ width:100%; border-collapse:collapse; font-size:14px; } .table th,.table td{ padding:10px 8px; border-bottom:1px solid var(--ring); text-align:left; } .table th{ text-transform:uppercase; letter-spacing:.06em; font-size:12px; color:var(--text-muted); } /* Basic grid helpers */ .grid{ display:grid; gap:16px; align-items:start; } .grid-12{ grid-template-columns: repeat(12, minmax(0,1fr)); } .col-12{ grid-column: span 12; } .col-6{ grid-column: span 6; } .col-4{ grid-column: span 4; } .col-3{ grid-column: span 3; } @media (max-width: 720px){ .grid-12{ grid-template-columns: repeat(6, 1fr); } .col-6,.col-4{ grid-column: span 6; } .col-3{ grid-column: span 3; } } @media (max-width: 480px){ .grid-12{ grid-template-columns: repeat(2, 1fr); } .col-12,.col-6,.col-4,.col-3{ grid-column: span 2; } } /* Form fields (light touch) */ .input{ width:100%; padding:10px 12px; border:1px solid var(--ring); border-radius:10px; background:var(--surface); color:var(--text-primary); } .input:focus{ outline:none; border-color: var(--cream-border); box-shadow: 0 0 0 4px rgba(242,221,182,.35); } /* Utilities */ .text-muted{ color: var(--text-muted); } /* header spacing helper for fixed header */ body{ padding-top: var(--header-h, var(--topbar-height, 64px)); } /* --- Safety overrides (if a dark class is accidentally applied) --- */ html.dark, .dark { background: initial !important; color: initial !important; filter: none !important; } /* Mobile sidebar behavior: support opening via .open / body.sidebar-open / .app.sidebar-open */ @media (max-width: 768px) { .app .sidebar { position: fixed !important; top: var(--header-h, 64px); left: 0; height: calc(100dvh - var(--header-h, 64px)); width: min(86vw, 320px); background: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,.15); transform: translateX(-100%); opacity: 0; pointer-events: none; transition: transform .2s ease, opacity .2s ease; z-index: 1000; } .app .sidebar.open, .app .sidebar.is-open, .app.sidebar-open .sidebar, body.sidebar-open .app .sidebar { transform: translateX(0); opacity: 1; pointer-events: auto; } /* Overlay (tap to close) */ .mobile-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 999; opacity: 0; pointer-events: none; transition: opacity .2s ease; } body.sidebar-open .mobile-overlay, .app.sidebar-open .mobile-overlay, .app .sidebar.open ~ .mobile-overlay, .app .sidebar.is-open ~ .mobile-overlay, .app .sidebar.opened ~ .mobile-overlay { opacity: 1; pointer-events: auto; } /* main/content full-width on small screens */ .app main, .app header, .main { margin-left: 0 !important; width: 100% !important; } } /* ===================== Golden / Light-Cream UI overrides Apply the primary/cream tokens site-wide for backgrounds, cards and controls ===================== */ /* Header: bright golden gradient */ .header { background: linear-gradient(135deg, #fff6e5 0%, #ffe099 100%); border-bottom: 1px solid var(--primary-border); color: var(--text-primary); box-shadow: 0 4px 20px rgba(255, 182, 73, 0.15); backdrop-filter: blur(8px); } .header .brand img { border-color: var(--primary); filter: drop-shadow(0 2px 4px rgba(179, 111, 31, 0.12)); } /* Cards: overrides removed (unified earlier). */ /* (Previously duplicated — consolidated above to avoid conflicting rules.) */ /* Buttons: primary accent (buy/add) already forced; ensure other primary buttons follow */ .btn-primary { background: var(--primary); border-color: var(--primary-border); color: #fff; } .btn-cream { background: var(--cream); border-color: var(--cream-border); color: var(--text-primary); } /* Sidebar: warm surface and golden divider */ #sidebar.sidebar { background: linear-gradient(135deg, #ffffff 0%, #fff6e5 100%); border-right: 1px solid var(--primary-border); box-shadow: 4px 0 20px rgba(255, 182, 73, 0.15); } #sidebar.sidebar .tab { background: linear-gradient(135deg, #ffffff 0%, #ffe099 100%); border: 1px solid var(--primary-border); transition: all 0.2s ease; } #sidebar.sidebar .tab:hover { background: linear-gradient(135deg, var(--primary-light), var(--cream)); transform: translateX(4px); } #sidebar.sidebar .tab.active { background: linear-gradient(135deg, var(--primary), var(--primary-border)); color: #fff; border-color: var(--primary-border); box-shadow: 0 4px 12px rgba(179, 111, 31, 0.16); } #sidebar.sidebar .tab .ico { background: linear-gradient(135deg, var(--primary-light), #fff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--primary); } /* Table headers use a soft cream header */ .table thead th { background: linear-gradient(135deg, var(--primary-light), var(--cream)); color: var(--text-primary); border-bottom-color: var(--primary-border); padding: 12px 16px; font-weight: 600; letter-spacing: 0.5px; } /* Minor helpers */ .badge, .tag { background: var(--surface); border:1px solid var(--cream-border); color: var(--text-muted); } .note { color: var(--text-muted); } /* Ensure buy buttons in pages (inline or local) get priority styling */ .card .btn-buy, .btn-buy { background: var(--primary) !important; border-color: var(--primary-border) !important; color: #fff !important; } /* ===== Layout helpers for footer push ===== */ .app { min-height: 100dvh; display: flex; flex-direction: column; } main { min-width: 0; display: flex; flex-direction: column; flex: 1 0 auto; } .main { flex: 1 0 auto; } /* Give containers gentle side padding on mobile */ @media (max-width: 780px){ .container{ padding-inline: max(12px, env(safe-area-inset-left, 12px)); } } /* ===== Global Site Footer (front) ===== */ #site-footer.site-footer{ margin-top: auto; /* stick to bottom when content is short */ background: linear-gradient(135deg, #fffdfa 0%, #fff6e8 100%); border-top: 1px solid rgba(242, 221, 182, .72); box-shadow: 0 -18px 38px -36px rgba(15, 23, 42, .20); color: var(--text-primary); } .site-footer .ft-wrap{ display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; padding: 14px 0; /* container controls side padding */ } .site-footer .ft-brand{ min-width: 0; } .site-footer .ft-name{ font-weight: 800; letter-spacing: .02em; } .site-footer .ft-tag{ font-size: 12px; color: var(--text-muted); } .site-footer .ft-links{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; } .site-footer .ft-links a{ padding: 6px 10px; border-radius: 10px; font-weight: 600; font-size: 13px; border: 1px solid transparent; background: transparent; } .site-footer .ft-links a:hover{ background: #fff; border-color: var(--cream-border); } .site-footer .ft-copy{ grid-column: 1 / -1; font-size: 12px; color: var(--text-muted); } @media (max-width: 720px){ .site-footer .ft-wrap{ grid-template-columns: 1fr; gap: 8px; padding: 12px 0; } .site-footer .ft-links{ justify-content:flex-start; } } /* Page specific, safer tweaks for mobile (avoid broad .row overrides) */ @media (max-width: 560px){ body.withdraw-page .row{ grid-template-columns: 1fr !important; } body.withdraw-page .btn{ width: 100%; } } /* Adjust container width and padding for mobile */ @media (max-width: 768px) { body, html { margin: 0; padding: 0; width: 100%; overflow-x: hidden; } .container { padding: 24px 8px; /* Adjust padding for mobile screens */ width: 100%; /* Ensure full width */ box-sizing: border-box; /* Prevent content from overflowing */ } .panel { padding: 20px; border-radius: 12px; box-shadow: 0 20px 48px -32px rgba(26,18,7,.28); } /* Ensure the table in the withdrawal history is scrollable */ table { display: block; overflow-x: auto; white-space: nowrap; width: 100%; } th, td { padding: 12px 10px; font-size: 14px; /* Adjust font size for smaller screens */ } .summary { margin-bottom: 10px; } /* Adjust the width of input fields and buttons */ input[type="number"], select, .btn { width: 100%; padding: 12px; font-size: 16px; } /* Fix the logo and layout for better mobile visibility */ .app { margin: 0 auto; max-width: 100%; padding: 0 20px; } } /* Mobile sidebar should sit UNDER the header; header always on top */ @media (max-width:1123.98px){ .header{ position: sticky; top: 0; z-index: 1200 !important; /* always above sidebar */ } #sidebar.sidebar, .app .sidebar{ position: fixed !important; top: var(--header-h, 64px) !important; /* header ki height ke hisaab se offset */ height: calc(100dvh - var(--header-h, 64px)) !important; z-index: 1000 !important; /* below header */ } .mobile-overlay{ z-index: 900 !important; } /* below sidebar */ /* off-canvas ke time main ko left space na de */ .app main{ margin-left: 0 !important; } } /* Safety: sidebar ke andar ka close/toggle button visible rahe */ .sidebar .close, .header .menu-btn{ z-index: 1300; position: relative; }