/* ============================================================ BuyMoreCards — Per-page bespoke redesigns Scoped under each page's so rules never leak across pages. Loaded after bmc-theme.css. CSS-only — no JavaScript or markup logic depends on anything here. ============================================================ */ /* ============================================================ AUTH PAGES — login & signup (shared treatment) Goal: a focused, premium single-card sign-in experience. ============================================================ */ .bmc-login main, .bmc-signup main{ min-height:calc(100vh - 70px); display:flex; align-items:center; justify-content:center; padding:var(--space-8) var(--space-4); background: radial-gradient(1200px 400px at 50% -10%, var(--blue-soft), transparent 70%), var(--bg); } /* the form wrapper is the first sizeable block inside main */ .bmc-login main > *, .bmc-signup main > *{ width:100%; max-width:440px; margin-left:auto; margin-right:auto; } .bmc-login h1, .bmc-signup h1{ font-family:var(--font-display); letter-spacing:var(--tracking-tight); font-size:var(--text-3xl); line-height:var(--lh-tight); margin-bottom:var(--space-2); } .bmc-login .subtitle, .bmc-signup .subtitle{ color:var(--text-secondary); font-size:var(--text-base); margin-bottom:var(--space-6); } .bmc-login .form-group, .bmc-signup .form-group{ margin-bottom:var(--space-4); } .bmc-login label, .bmc-signup label{ display:block; font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--text); margin-bottom:var(--space-2); letter-spacing:0.01em; } .bmc-login input, .bmc-signup input, .bmc-signup select{ width:100%; min-height:48px; padding:0 var(--space-4); border:1px solid var(--border); border-radius:var(--radius-md); font-size:var(--text-base); background:var(--bg); color:var(--text); transition:border-color var(--duration) var(--ease-standard), box-shadow var(--duration) var(--ease-standard); } .bmc-login input:focus, .bmc-signup input:focus, .bmc-signup select:focus{ outline:none; border-color:var(--blue); box-shadow:var(--shadow-focus); } .bmc-login .btn, .bmc-signup .btn, .bmc-login button[type="submit"], .bmc-signup button[type="submit"]{ width:100%; min-height:50px; font-size:var(--text-base); margin-top:var(--space-2); } .bmc-login .signup-prompt, .bmc-signup .signup-prompt, .bmc-login .field-error, .bmc-signup .field-error{ font-size:var(--text-sm); } .bmc-login .field-error, .bmc-signup .field-error{ color:var(--error); margin-top:var(--space-1); } .bmc-signup .password-strength{ margin-top:var(--space-2); } .bmc-signup .strength-bar{ border-radius:var(--radius-full); overflow:hidden; } /* pending-approval view */ .bmc-login .pending-view, .bmc-signup .success-message{ background:var(--bg); border:1px solid var(--border-light); border-radius:var(--radius-lg); padding:var(--space-7); box-shadow:var(--shadow-md); text-align:center; } /* ============================================================ ACCOUNT — dashboard, order history, progress, badges ============================================================ */ .bmc-account .section-title{ font-family:var(--font-display); letter-spacing:var(--tracking-tight); font-size:var(--text-xl); margin-bottom:var(--space-4); } .bmc-account .btn-small{ min-height:40px; padding:8px 16px; border-radius:var(--radius-full); font-weight:var(--fw-semibold); } /* accessible status badges (was color-only / tiny) */ .bmc-account .status-badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:var(--fw-bold); letter-spacing:0.02em; text-transform:uppercase; border:1px solid transparent; } .bmc-account .status-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; } /* order progress tracker polish */ .bmc-account .order-progress{ gap:var(--space-2); } .bmc-account .progress-dot{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:var(--text-sm); font-weight:var(--fw-bold); } .bmc-account .progress-label{ font-size:var(--text-xs); color:var(--text-secondary); } /* toggle switch accessible focus */ .bmc-account .toggle-switch input:focus-visible + .toggle-slider{ box-shadow:var(--shadow-focus); } /* order cards: give them a clean elevated surface */ .bmc-account .tracking-number{ font-family:var(--font-body); font-variant-numeric:tabular-nums; background:var(--bg-alt); padding:2px 8px; border-radius:var(--radius-sm); } /* ============================================================ CALENDAR — release schedule as a "drops" board ============================================================ */ .bmc-calendar .filter-btn{ min-height:40px; padding:8px 16px; border-radius:var(--radius-full); border:1px solid var(--border); background:var(--bg); color:var(--text-secondary); font-weight:var(--fw-semibold); font-size:var(--text-sm); transition:all var(--duration) var(--ease-standard); } .bmc-calendar .filter-btn:hover{ border-color:var(--blue); color:var(--blue); } .bmc-calendar .filter-btn.active{ background:var(--blue); border-color:var(--blue); color:#fff; } .bmc-calendar .month-header{ display:flex; align-items:baseline; gap:var(--space-3); border-bottom:2px solid var(--border-light); padding-bottom:var(--space-2); margin-bottom:var(--space-5); } .bmc-calendar .month-name{ font-family:var(--font-display); font-size:var(--text-2xl); letter-spacing:var(--tracking-tight); } .bmc-calendar .month-count{ color:var(--text-muted); font-size:var(--text-sm); font-weight:var(--fw-semibold); } .bmc-calendar .releases-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--space-4); } .bmc-calendar .release-card{ background:var(--bg); border:1px solid var(--border-light); border-left:4px solid var(--blue); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); transition:transform var(--duration) var(--ease-standard), box-shadow var(--duration) var(--ease-standard); } .bmc-calendar .release-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); } .bmc-calendar .release-date{ font-weight:var(--fw-bold); color:var(--blue); font-size:var(--text-sm); } .bmc-calendar .release-title{ font-family:var(--font-display); font-size:var(--text-lg); line-height:var(--lh-snug); margin:var(--space-2) 0; } .bmc-calendar .release-category, .bmc-calendar .release-type{ display:inline-block; padding:2px 10px; border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:var(--fw-semibold); background:var(--bg-alt); color:var(--text-secondary); } /* ============================================================ ADMIN — CSS-only structural fixes (no JS touched) #2 mobile-friendly tables · #3 unified surfaces · #4 a11y badges ============================================================ */ .bmc-admin .stat-card, .bmc-admin .section, .bmc-admin .empty-state{ border-radius:var(--radius-lg); border:1px solid var(--border-light); background:var(--bg); } .bmc-admin .stat-card{ box-shadow:var(--shadow-sm); padding:var(--space-5); } .bmc-admin .stat-value{ font-family:var(--font-display); font-size:var(--text-3xl); letter-spacing:var(--tracking-tight); } .bmc-admin .stat-label{ color:var(--text-secondary); font-size:var(--text-sm); } .bmc-admin .section-header{ font-family:var(--font-display); letter-spacing:var(--tracking-tight); } /* tabs + filter buttons: real tap targets + clear active state */ .bmc-admin .tab-btn, .bmc-admin .filter-btn{ min-height:40px; padding:8px 16px; border-radius:var(--radius-full); font-weight:var(--fw-semibold); font-size:var(--text-sm); transition:all var(--duration) var(--ease-standard); } .bmc-admin .tab-btn.active, .bmc-admin .filter-btn.active{ background:var(--blue); color:#fff; } .bmc-admin .filter-badge{ background:var(--bg-alt); color:var(--text-secondary); border-radius:var(--radius-full); padding:1px 8px; font-size:var(--text-xs); font-weight:var(--fw-bold); } .bmc-admin .btn-action, .bmc-admin .inline-button, .bmc-admin .orders-toolbar-btn{ min-height:40px; border-radius:var(--radius-md); font-weight:var(--fw-semibold); } /* #4 accessible status pills — text + dot, never color alone */ .bmc-admin [class*="status-"]{ font-weight:var(--fw-bold); } /* #2 the user/orders table: make it usable on phones */ .bmc-admin table{ width:100%; border-collapse:collapse; } .bmc-admin th, .bmc-admin td{ padding:12px 14px; } /* bigger tap/scan targets */ .bmc-admin th{ position:sticky; top:0; background:var(--bg-alt); z-index:1; font-size:var(--text-xs); text-transform:uppercase; letter-spacing:0.04em; color:var(--text-secondary); } .bmc-admin tbody tr{ border-bottom:1px solid var(--border-light); } .bmc-admin tbody tr:hover{ background:var(--bg-alt); } @media (max-width:768px){ /* keep the table scrollable but freeze the first column so rows stay legible */ .bmc-admin .users-table-wrapper, .bmc-admin .orders-table-wrapper, .bmc-admin .table-wrapper{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border-light); border-radius:var(--radius-md); } .bmc-admin table{ min-width:640px; } .bmc-admin th:first-child, .bmc-admin td:first-child{ position:sticky; left:0; background:var(--bg); box-shadow:1px 0 0 var(--border-light); } .bmc-admin th:first-child{ background:var(--bg-alt); } .bmc-admin .stat-card{ padding:var(--space-4); } } /* ============================================================ IMPORT INVENTORY — clean upload/utility UI ============================================================ */ .bmc-import{ background:var(--bg-alt); } .bmc-import h1, .bmc-import h2{ font-family:var(--font-display); letter-spacing:var(--tracking-tight); } .bmc-import .status, .bmc-import .warn{ border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); font-size:var(--text-sm); } .bmc-import .warn{ background:var(--warning-soft); color:var(--warning); border:1px solid #EAD9AE; } .bmc-import .status{ background:var(--blue-soft); color:#0059B3; border:1px solid #C7E0FB; } .bmc-import textarea, .bmc-import input[type="file"], .bmc-import input[type="text"]{ border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-3); width:100%; } .bmc-import button{ min-height:44px; }