/* ============================================================================ GoPoint — semantic theme tokens ============================================================================ Two company-scoped presets. The theme belongs to the store (and its branches), not to the user or the device: `dark_gold_turquoise` is a commercial preset the platform owner turns on per store, NOT ThemeMode.dark following the OS. Everything downstream reads `--gp-*` only. The short legacy names (--g, --bg, --tx …) are kept as aliases so the ~1600 lines of existing CSS keep working unchanged; new code should use the semantic names. Applied by setting `data-gp-theme` on . Absent / unknown → Green Mint. ========================================================================== */ /* ── Green Mint — the default identity for every store ───────────────────── */ :root, :root[data-gp-theme="green_mint"] { /* Depth ladder — the page is the DARKEST mint and cards sit above it. It used to be the other way round: background-start was 0.894 luminance against a 0.855 surface, so every card sank into the page instead of floating and the whole screen read as one flat wash. page 0.84 → 0.77 cards 0.91 clarity 0.98 rows inside a card 0.86 */ --gp-background-start: #D8F2E9; /* 0.840 */ --gp-background-middle: #D2EEE4; /* 0.807 */ --gp-background-end: #CBEADF; /* 0.769 */ --gp-surface: #E9F8F3; /* 0.909 — the card itself */ --gp-surface-elevated: #FBFDFC; /* 0.978 — search field, primary card */ --gp-surface-strong: #DDF3EB; /* 0.855 — a row inside a card */ --gp-surface-selected: #CDEADE; /* 0.771 — selected row */ --gp-surface-clarity: #FBFDFC; --gp-border: #B8DDD1; --gp-primary: #4FB79E; --gp-on-primary: #0C2B26; --gp-secondary: #287D69; --gp-on-secondary: #FFFFFF; --gp-accent: #DFB623; /* gold — current status, scan, key CTA */ --gp-accent-pressed: #C59B12; /* Gold as a FILL is fine (on-accent reads 6.06:1 against it), but gold as TEXT on a light mint surface is 1.77:1 — unreadable. Foreground gold uses this darker mix instead; in Dark Premium the two are the same colour. */ --gp-accent-text: #7A5B08; --gp-accent-soft: #FFF3BF; --gp-on-accent: #293C34; --gp-text-primary: #153D37; --gp-text-secondary: #35665D; --gp-text-muted: #66877F; --gp-icon-primary: #287D69; --gp-icon-secondary: #3F9C84; --gp-icon-muted: #62998A; /* Status keeps its meaning in both themes; brand colour never overrides it. Darkened here so they stay legible on the light mint surfaces. */ --gp-success: #1B7A4F; --gp-warning: #8A5A00; --gp-error: #B3261E; --gp-info: #0F6E7B; --gp-status-delivered: var(--gp-success); --gp-status-delayed: var(--gp-warning); --gp-status-in-transit: var(--gp-info); --gp-status-cancelled: var(--gp-error); --gp-progress-track: #C8E9DE; --gp-progress-value: #4FB79E; --gp-scrim: rgba(21, 61, 55, .38); --gp-shadow: 0 2px 8px rgba(21, 61, 55, .07), 0 8px 24px rgba(21, 61, 55, .06); } /* ── Dark Premium — Black / Gold / Turquoise ─────────────────────────────── */ :root[data-gp-theme="dark_gold_turquoise"] { --gp-background-start: #080B0B; --gp-background-middle: #050807; --gp-background-end: #020403; /* Layered charcoals rather than repeated pure black. */ --gp-surface: #0D1514; --gp-surface-elevated: #111D1B; --gp-surface-strong: #18302C; --gp-surface-selected: #152522; --gp-surface-clarity: #111D1B; --gp-border: #24443F; --gp-primary: #28C7B7; --gp-on-primary: #04100E; --gp-secondary: #18A99D; --gp-on-secondary: #04100E; --gp-accent: #D8B03F; --gp-accent-pressed: #E1BC50; --gp-accent-text: #D8B03F; /* 8.99:1 on surface — no adjustment needed */ --gp-accent-soft: #2D2715; --gp-on-accent: #080B0B; --gp-text-primary: #F3F5F0; --gp-text-secondary: #B9CCC7; --gp-text-muted: #829A94; --gp-icon-primary: #28C7B7; --gp-icon-secondary: #67D8CB; --gp-icon-muted: #77AAA4; --gp-success: #3ED08C; --gp-warning: #FFB020; --gp-error: #FF6B6B; --gp-info: #67D8CB; --gp-status-delivered: var(--gp-success); --gp-status-delayed: var(--gp-warning); --gp-status-in-transit: var(--gp-info); --gp-status-cancelled: var(--gp-error); --gp-progress-track: #18302C; --gp-progress-value: #28C7B7; --gp-scrim: rgba(2, 4, 3, .62); --gp-shadow: 0 6px 18px rgba(0, 0, 0, .45); } /* ── Legacy aliases ────────────────────────────────────────────────────────── The existing stylesheet is written against these short names. Pointing them at the tokens means the whole interface re-themes without touching those rules. Do not add new ones. */ :root { --g: var(--gp-accent); --gold-soft: color-mix(in srgb, var(--gp-accent) 16%, transparent); --bg: var(--gp-background-middle); --bg-deep: var(--gp-background-end); --cd: var(--gp-surface); --cd2: var(--gp-surface-strong); --chip: var(--gp-surface-strong); --bd: var(--gp-border); --line: color-mix(in srgb, var(--gp-accent) 16%, transparent); --tx: var(--gp-text-primary); --mt: var(--gp-text-muted); --pr: var(--gp-primary); --pr-l: var(--gp-secondary); --ok: var(--gp-success); --wr: var(--gp-warning); --er: var(--gp-error); --in: var(--gp-info); --cy: var(--gp-info); --dr: var(--gp-primary); } /* ── The one background gradient ───────────────────────────────────────────── Owned centrally so no screen repeats it, and never used on buttons or cards. */ .gp-theme-scaffold { min-height: 100vh; background: linear-gradient(160deg, var(--gp-background-start) 0%, var(--gp-background-middle) 52%, var(--gp-background-end) 100%); background-attachment: fixed; } /* ============================================================================ Shared polish — applies to all eight interfaces ==========================================================================*/ /* ── Cards float ───────────────────────────────────────────────────────────── The token ladder does the colour work; the shadow and border make the step readable at a glance. Kept here so no interface re-invents it. */ .card, .panel, .login-box, .box, .modal, .modal-box, .stat-card, .order-card, .report-card, .table-wrap { background: var(--gp-surface); border: 1px solid var(--gp-border); box-shadow: var(--gp-shadow); } /* A row inside a card sits on the intermediate step, so each order reads as its own block rather than as text poured onto the card. */ .order-row, .list-row, .data-row, .row-item, .o-row, .order-card .row, .card .row { background: var(--gp-surface-strong); border: 1px solid var(--gp-border); border-radius: 12px; padding: 8px 10px; margin-bottom: 6px; } /* Search and the primary card get the brightest step — they are where the eye should land first. */ .search-box, .search-input, input[type="search"], .primary-card { background: var(--gp-surface-elevated); } /* ── Sidebar ───────────────────────────────────────────────────────────────── Menu labels were thin and washed out against the light palette. */ .sidebar .menu-label, .menu-label, .sidebar .menu a, .menu-item span { font-weight: 600; color: var(--gp-text-primary); } .sidebar .menu svg, .menu-item svg, .menu-icon svg { color: var(--gp-icon-primary); stroke: var(--gp-icon-primary); } .menu-item.active, .menu a.active { background: var(--gp-surface-selected); border: 1px solid var(--gp-accent); } .menu-item.active .menu-label, .menu a.active .menu-label { color: var(--gp-text-primary); font-weight: 700; } /* ── Language menu ─────────────────────────────────────────────────────────── One globe instead of three buttons. */ .gp-lang { position: relative; display: inline-flex; } .gp-lang-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; cursor: pointer; border-radius: 999px; border: 1px solid var(--gp-border); background: var(--gp-surface); color: var(--gp-icon-primary); } .gp-lang-btn:hover { background: var(--gp-surface-selected); } .gp-lang-menu { position: absolute; top: 36px; inset-inline-end: 0; z-index: 3000; min-width: 132px; padding: 5px; border-radius: 12px; background: var(--gp-surface-elevated); border: 1px solid var(--gp-border); box-shadow: var(--gp-shadow); } .gp-lang-menu button { display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px 9px; border: 0; border-radius: 8px; cursor: pointer; background: transparent; color: var(--gp-text-primary); font: inherit; font-size: 12px; text-align: start; } .gp-lang-menu button:hover { background: var(--gp-surface-strong); } .gp-lang-menu button[aria-checked="true"] { background: var(--gp-surface-selected); font-weight: 700; } .gp-lang-check { margin-inline-start: auto; color: var(--gp-accent-text); } /* ── Mobile ────────────────────────────────────────────────────────────────── Cards ran edge to edge and the type stayed desktop-sized, which made every screen feel heavy. Give them a margin so they read as cards, and step the type down. */ @media (max-width: 640px) { .card, .panel, .box, .modal-box, .stat-card, .order-card, .report-card { margin-inline: 10px; padding: 11px 12px; border-radius: 14px; } .login-box { margin-inline: 14px; padding: 20px 16px; } .order-row, .list-row, .data-row, .row-item, .o-row, .order-card .row, .card .row { padding: 7px 9px; border-radius: 10px; } body { font-size: 12px; } h1 { font-size: 17px; } h2, .page-title { font-size: 15px; } h3 { font-size: 13px; } .stat-card .num, .stat-value { font-size: 17px; } .stat-card .lbl, .stat-label { font-size: 9px; } .badge, .chip { font-size: 9px; padding: 2px 7px; } .btn, button { font-size: 12px; } /* grids collapse rather than squeeze */ .stats-grid, .cards-grid, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } .table-wrap { overflow-x: auto; } } @media (max-width: 380px) { .stats-grid, .cards-grid, .grid-3, .grid-4 { grid-template-columns: 1fr !important; } } /* ── Stat cards ────────────────────────────────────────────────────────────── The labels sat on textMuted at normal weight, which reads as a whisper in both themes, and the icon/label row hugged one edge while the number hugged the other — nothing lined up. Everything is centred on one axis now and the label carries enough weight to be read at a glance. */ .stat-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; } .stat-card .stat-top { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 0; } .stat-card .stat-label, .stat-label { color: var(--gp-text-secondary); font-weight: 600; font-size: 11px; letter-spacing: .1px; line-height: 1.4; } .stat-card .stat-value, .stat-value { font-weight: 800; line-height: 1.15; text-align: center; } .stat-card .stat-icon { /* the tinted square was reading heavier than the label beside it */ width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; } @media (max-width: 640px) { .stat-card { gap: 4px; } .stat-card .stat-icon { width: 24px; height: 24px; flex-basis: 24px; } .stat-card .stat-label { font-size: 10px; } } /* ── Tables ────────────────────────────────────────────────────────────────── A hairline between rows is not enough to track a line across twelve columns; the eye slides. Alternate the row background instead, and give the header its own step so it separates from the body. Both themes get this from the same tokens — the mint version is a light-on-lighter banding, the dark one a charcoal-on-charcoal banding. */ table { width: 100%; border-collapse: separate; border-spacing: 0; } thead th { position: sticky; top: 0; z-index: 2; /* Not surface-strong: that is also the even-row band, so in Dark Premium the header and every second row came out the same #183028 and the header stopped reading as one. A trace of gold separates it in both themes without introducing a new colour. */ background: color-mix(in srgb, var(--gp-accent) 9%, var(--gp-surface-strong)); color: var(--gp-text-primary); font-weight: 700; border-bottom: 2px solid color-mix(in srgb, var(--gp-accent) 35%, transparent); } tbody tr { background: var(--gp-surface); } /* the banded row — a step down towards the page, so it reads as a groove */ tbody tr:nth-child(even) { background: var(--gp-surface-strong); } tbody td { border-bottom: 1px solid var(--gp-border); color: var(--gp-text-primary); } /* Hover has to beat both bands, so it gets the selected step plus a gold edge on the leading side rather than a wash that half the rows would swallow. */ tbody tr:hover { background: var(--gp-surface-selected); } tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--gp-accent); } [dir="rtl"] tbody tr:hover td:first-child { box-shadow: inset -3px 0 0 var(--gp-accent); } tbody tr:first-child td { border-top: 0; } tbody tr:last-child td { border-bottom: 0; } /* Rounded ends so the table reads as one card rather than a floating grid. */ table thead tr:first-child th:first-child { border-start-start-radius: 12px; } table thead tr:first-child th:last-child { border-start-end-radius: 12px; } table tbody tr:last-child td:first-child { border-end-start-radius: 12px; } table tbody tr:last-child td:last-child { border-end-end-radius: 12px; } /* On a phone a twelve-column table cannot be read as a grid at all, so each row becomes its own card and the columns stack. */ @media (max-width: 640px) { thead th { font-size: 9px; padding: 6px 7px; } tbody td { font-size: 10px; padding: 6px 7px; } tbody tr, tbody tr:nth-child(even) { display: block; background: var(--gp-surface); border: 1px solid var(--gp-border); border-radius: 12px; margin-bottom: 8px; padding: 4px 2px; box-shadow: var(--gp-shadow); } tbody tr:hover td:first-child { box-shadow: none; } }