/* ============================================================ DokanBahi — Design System Signature: pages read like real ruled accounting-ledger paper. Red margin rule + pale blue horizontal ruling on warm paper. Debit = red ink, Credit = green ink (traditional bahi-khata convention), amounts set in tabular mono for scan-ability. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Tiro+Bangla:ital@0;1&family=Hind+Siliguri:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { --paper: #F3ECDA; --paper-card: #FBF8F0; --ink: #1E2A38; --ink-soft: #5B6B7A; --rule-blue: #B9CBDD; --rule-red: #A6352B; --credit: #1F7A5C; --debit: #A6352B; --gold: #A9791F; --gold-soft: #F1E3C2; --radius: 10px; --shadow: 0 2px 10px rgba(30, 42, 56, 0.08); } /* Dark mode — same ledger-paper structure, "night desk" palette. Toggled via [data-theme="dark"] on , persisted client-side (localStorage) since it's a per-device preference, not shop data. */ [data-theme="dark"] { --paper: #1A2029; --paper-card: #232B36; --ink: #ECE7D8; --ink-soft: #97A3AF; --rule-blue: #34404D; --rule-red: #C24B3D; --credit: #45B592; --debit: #E0765F; --gold: #D9AD5C; --gold-soft: #3A3220; --shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } /* Selector-specific dark-mode overrides live at the END of this file (see "DARK MODE OVERRIDES" section) — CSS gives equal-specificity rules to whichever comes LAST in the file, so overrides declared here (this early) would lose to the base component styles that follow later, e.g. input fields would silently stay white-on-white in dark mode. Keeping them at the end guarantees they win. */ .lang-select { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 20px; padding: 3px 10px 3px 8px; font-size: .82rem; cursor: pointer; font-family: 'Hind Siliguri', 'Segoe UI', sans-serif; appearance: none; -webkit-appearance: none; outline: none; } .lang-select:hover { background: rgba(255,255,255,.15); } .lang-select option { background: #1E2A38; color: #fff; } .theme-toggle { background: none; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 20px; padding: 3px 10px; font-size: .82rem; cursor: pointer; margin-left: 10px; } .theme-toggle:hover { background: rgba(255,255,255,.1); } .install-banner { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--ink); color: #fff; padding: 12px 16px; align-items: center; justify-content: space-between; gap: 12px; z-index: 1100; box-shadow: 0 -4px 14px rgba(0,0,0,.2); font-size: .85rem; } .install-banner span { flex: 1; } @media (max-width: 480px) { .install-banner { flex-direction: column; align-items: stretch; text-align: center; } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: 'Hind Siliguri', 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.5; } h1, h2, h3, .display { font-family: 'Tiro Bangla', serif; color: var(--ink); margin: 0 0 .4em; letter-spacing: 0.2px; } a { color: var(--ink); text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .amount { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-variant-numeric: tabular-nums; } .amount.debit { color: var(--debit); } .amount.credit { color: var(--credit); } /* ---------- Layout shell ---------- */ .topbar { background: var(--ink); color: var(--paper-card); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 3px solid var(--rule-red); } .topbar .brand { font-family: 'Tiro Bangla', serif; font-size: 1.25rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar nav a { color: var(--paper-card); margin-left: 16px; font-size: .92rem; opacity: .9; } .topbar nav a:hover { opacity: 1; text-decoration: underline; } /* Wraps nav + lang-switch as one right-hand group so the outer .topbar keeps a clean 2-slot (brand | rest) space-between layout, whether or not nav is present in the flow (it's position:fixed off-canvas below 780px, so on mobile this group effectively shows just lang-switch). */ .topbar-right { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 14px; flex-shrink: 0; } .topbar .lang-switch { display: flex; align-items: center; color: var(--paper-card); font-size: .82rem; } .topbar .lang-switch a { color: var(--paper-card); } .hamburger-btn { display: none; background: none; border: none; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 14px 0 0; flex-shrink: 0; } .nav-close { display: none; } .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(20, 26, 33, .5); z-index: 999; opacity: 0; transition: opacity .2s ease; } .nav-overlay.open { display: block; opacity: 1; } @media (max-width: 780px) { .hamburger-btn { display: inline-block; } .topbar .brand { flex: 1; min-width: 0; font-size: 1.05rem; } .site-nav { position: fixed; top: 0; left: 0; height: 100vh; width: 78vw; max-width: 300px; background: var(--ink); z-index: 1000; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 60px 22px 24px; transform: translateX(-105%); transition: transform .25s ease; border-right: 3px solid var(--rule-red); box-shadow: 6px 0 18px rgba(0,0,0,.25); } .site-nav.open { transform: translateX(0); } .site-nav a { margin-left: 0; padding: 10px 0; font-size: 1rem; width: 100%; } /* Compact so lang + theme fit next to the brand on narrow screens without needing the hamburger menu opened. */ .topbar-right { gap: 6px; } .lang-select { font-size: .74rem; padding: 2px 8px 2px 6px; } .theme-toggle { padding: 2px 7px; font-size: .75rem; margin-left: 4px; } .nav-close { display: block; position: absolute; top: 14px; right: 16px; background: none; border: none; color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 4px 8px; } } .wrap { max-width: 880px; margin: 0 auto; padding: 24px 16px 60px; } /* ---------- Ledger card: the signature element ---------- Ruled horizontal lines + a red margin rule on the left, like a physical accounting ledger page. */ .ledger-card { background: repeating-linear-gradient( var(--paper-card), var(--paper-card) 37px, var(--rule-blue) 38px ); border: 1px solid #E1D6B8; border-left: 4px solid var(--rule-red); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px 18px 26px; margin-bottom: 20px; } .ledger-card.plain { background: var(--paper-card); } /* ---------- Buttons ---------- */ .btn { display: inline-block; padding: 10px 18px; border-radius: 8px; border: 1px solid transparent; font-family: 'Hind Siliguri', sans-serif; font-weight: 600; font-size: .95rem; cursor: pointer; text-align: center; } .btn-primary { background: var(--ink); color: #fff; } .btn-primary:hover { background: #14202C; } .btn-credit { background: var(--credit); color: #fff; } .btn-debit { background: var(--debit); color: #fff; } .btn-gold { background: var(--gold); color: #fff; } .btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); } .btn-whatsapp { background: #1F7A5C; color: #fff; } .btn-sm { padding: 6px 12px; font-size: .82rem; } .btn-block { display: block; width: 100%; } /* ---------- Forms ---------- */ label { display: block; font-size: .85rem; color: var(--ink-soft); margin-bottom: 4px; font-weight: 600; } input[type=text], input[type=tel], input[type=number], input[type=date], input[type=email], input[type=file], select, textarea { width: 100%; padding: 10px 12px; border: 1px solid #D2C6A6; border-radius: 7px; background: #fff; font-family: inherit; font-size: .95rem; margin-bottom: 14px; } .field-row { display: flex; gap: 12px; } .field-row > div { flex: 1; } .error-box { background: #FBE6E2; border: 1px solid var(--debit); color: var(--debit); padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: .9rem; } /* ---------- Dashboard summary ---------- */ .summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; } .summary-tile { background: var(--paper-card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); text-align: center; } .summary-tile .label { font-size: .8rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .5px; } .summary-tile .value { font-family: 'JetBrains Mono', monospace; font-size: 1.6rem; font-weight: 700; margin-top: 4px; } /* ---------- Lists ---------- */ .row-list { list-style: none; margin: 0; padding: 0; } .row-list li { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule-blue); } .row-list li:last-child { border-bottom: none; } .row-meta { font-size: .8rem; color: var(--ink-soft); } /* ---------- Perforated header (notebook edge) ---------- */ .torn-edge { height: 10px; background: radial-gradient(circle at 8px 0, transparent 6px, var(--paper) 7px) repeat-x; background-size: 16px 10px; } /* ---------- Landing / donate ---------- */ .hero { text-align: center; padding: 50px 16px 30px; } .hero h1 { font-size: 2.1rem; } .hero p { color: var(--ink-soft); max-width: 520px; margin: 10px auto 26px; } .stamp { display: inline-block; border: 2px solid var(--gold); color: var(--gold); padding: 4px 12px; border-radius: 6px; font-weight: 700; font-size: .78rem; letter-spacing: 1px; text-transform: uppercase; transform: rotate(-3deg); } .support-box { background: var(--gold-soft); border: 1px dashed var(--gold); border-radius: var(--radius); padding: 18px; } footer.site-footer { text-align: center; color: var(--ink-soft); font-size: .82rem; padding: 30px 16px; } @media (max-width: 560px) { .summary-grid { grid-template-columns: 1fr; } .field-row { flex-direction: column; gap: 0; } } /* ============================================================ Guide / User Manual page ============================================================ */ .toc-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: #fff; border: none; border-radius: 20px; padding: 8px 16px; font-size: .85rem; font-weight: 600; cursor: pointer; margin-bottom: 16px; } .toc-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 78vw; max-width: 280px; background: var(--ink); z-index: 1000; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 60px 22px 24px; transform: translateX(105%); transition: transform .25s ease; border-left: 3px solid var(--gold); box-shadow: -6px 0 18px rgba(0,0,0,.25); } .toc-drawer.open { transform: translateX(0); } .toc-drawer a { color: var(--paper-card); padding: 10px 0; font-size: 1rem; width: 100%; opacity: .9; } .toc-drawer a:hover { opacity: 1; text-decoration: underline; } .toc-drawer .nav-close { position: absolute; top: 14px; right: 16px; } .guide-steps { padding-left: 22px; margin: 10px 0; } .guide-steps li { margin-bottom: 12px; line-height: 1.6; } .faq-item { border-bottom: 1px solid var(--rule-blue); padding: 12px 0; } .faq-item:last-child { border-bottom: none; } .faq-item summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::before { content: '▸ '; color: var(--gold); } .faq-item[open] summary::before { content: '▾ '; } .faq-item p { margin: 8px 0 0; color: var(--ink-soft); line-height: 1.6; } .dev-card { text-align: center; padding: 8px 0; } .dev-name { font-family: 'Tiro Bangla', serif; font-size: 1.3rem; color: var(--ink); } .dev-title { color: var(--ink-soft); font-size: .9rem; margin-bottom: 14px; } .dev-links { list-style: none; padding: 0; margin: 0 0 16px; } .dev-links li { padding: 5px 0; font-size: .95rem; } .dev-links a { color: var(--ink); font-weight: 600; } .dev-links a:hover { color: var(--gold); } .dev-social { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .dev-social a { background: var(--gold-soft); color: var(--gold); padding: 6px 14px; border-radius: 20px; font-size: .82rem; font-weight: 600; } .dev-social a:hover { background: var(--gold); color: #fff; } a.ledger-card:hover, a.ledger-card:focus-visible { box-shadow: 0 6px 16px rgba(30, 42, 56, .16); } .growth-chart { display: flex; align-items: flex-end; gap: 3px; height: 90px; padding: 4px 0; } .growth-bar-wrap { flex: 1; height: 100%; display: flex; align-items: flex-end; } .growth-bar { width: 100%; background: var(--gold); border-radius: 3px 3px 0 0; min-height: 3px; transition: opacity .15s ease; } .growth-bar-wrap:hover .growth-bar { background: var(--ink); } .code-block { background: var(--ink); color: #DCEFE6; font-family: 'JetBrains Mono', monospace; font-size: .82rem; padding: 14px 16px; border-radius: 8px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; line-height: 1.6; } /* ============================================================ Super Admin Panel — denser, dashboard-style chrome. Same token palette as the shop-facing app, but no ruled-ledger texture: this is a control room, not a notebook page. ============================================================ */ .admin-body { background: #EDE7D6; } .admin-topbar { background: var(--ink); color: #fff; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 3px solid var(--gold); } .admin-topbar .brand { font-family: 'Tiro Bangla', serif; font-size: 1.15rem; } .admin-topbar nav a { color: #fff; margin-left: 16px; font-size: .88rem; opacity: .85; } .admin-topbar nav a:hover { opacity: 1; text-decoration: underline; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 22px; } .stat-box { background: var(--paper-card); border-radius: var(--radius); border-top: 3px solid var(--gold); box-shadow: var(--shadow); padding: 14px 16px; display: block; color: inherit; transition: transform .15s ease, box-shadow .15s ease; } .stat-box .label { font-size: .75rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .4px; display: flex; align-items: center; justify-content: space-between; } .stat-box .value { font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 700; margin-top: 4px; } a.stat-box { cursor: pointer; } a.stat-box:hover, a.stat-box:focus-visible { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(30, 42, 56, .16); border-top-color: var(--ink); } a.stat-box .label .arrow { opacity: 0; transition: opacity .15s ease; color: var(--gold); } a.stat-box:hover .label .arrow { opacity: 1; } .data-table { width: 100%; border-collapse: collapse; background: var(--paper-card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); font-size: .88rem; } .data-table th, .data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--rule-blue); } .data-table th { background: #EEE6CC; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .3px; } .data-table tr:last-child td { border-bottom: none; } .badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .74rem; font-weight: 700; } .badge-free { background: #E4E9EF; color: var(--ink-soft); } .badge-premium { background: var(--gold-soft); color: var(--gold); } .badge-pending { background: #FBE6E2; color: var(--debit); } .badge-confirmed { background: #DCEFE6; color: var(--credit); } .badge-rejected { background: #E4E9EF; color: var(--ink-soft); } @media (max-width: 700px) { .data-table { display: block; overflow-x: auto; white-space: nowrap; } } /* ============================================================ DARK MODE OVERRIDES — intentionally the LAST rules in this file. Many base component rules above (inputs, badges, tables, etc.) have equal CSS specificity to a same-named override, and CSS resolves specificity ties by "whichever rule comes later wins" — so these must stay at the very end, or dark mode silently loses to the light-mode defaults (this exact bug caused input fields to render white-on-white text in dark mode before it was fixed). ============================================================ */ [data-theme="dark"] .btn-primary { background: #3A4655; color: #ECE7D8; } [data-theme="dark"] .btn-primary:hover { background: #48576A; } [data-theme="dark"] .btn-outline { border-color: var(--ink-soft); color: var(--ink); } [data-theme="dark"] .topbar, [data-theme="dark"] .admin-topbar { background: #10151C; } [data-theme="dark"] .site-nav { background: #10151C; } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #1F2732; color: var(--ink); border-color: #3A4653; } [data-theme="dark"] .data-table th { background: #2A3340; } [data-theme="dark"] .torn-edge { background: radial-gradient(circle at 8px 0, transparent 6px, var(--paper) 7px) repeat-x; } [data-theme="dark"] .error-box { background: #3A2622; } [data-theme="dark"] .admin-body { background: var(--paper); } [data-theme="dark"] .badge-free { background: #2A3340; color: var(--ink-soft); } [data-theme="dark"] .badge-pending { background: #3A2622; color: var(--debit); } [data-theme="dark"] .badge-confirmed { background: #1E3A30; color: var(--credit); } [data-theme="dark"] .badge-rejected { background: #2A3340; color: var(--ink-soft); } [data-theme="dark"] .ledger-card { border-color: #3A4653; } [data-theme="dark"] .stat-box { border-top-color: var(--gold); } /* Fixes menu/lang-switch text being unreadable in dark mode: these use var(--paper-card) for text color, which is correct in light mode but is repurposed as a DARK card-background token in dark mode — same class of bug as the badges/inputs above. var(--ink) is the correct light-on-dark text color here instead. */ [data-theme="dark"] .topbar nav a, [data-theme="dark"] .topbar .lang-switch { color: var(--ink); } [data-theme="dark"] .lang-select { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: var(--ink); } [data-theme="dark"] .lang-select option { background: #10151C; color: var(--ink); }