/* LIGHT-ONLY, on purpose (2026-09-16). app.css - the original app - has no dark mode at all and hard-codes dark text colours (#0f172a, #334155, #64748b...). The first glass draft added dark tokens, so on a dark-mode phone the surfaces I restyled went dark while app.css text I had not touched stayed dark: dark text on a dark card, e.g. the purchase-history rows ("15/09 1.00 ctn RM 248.40") became unreadable. Half a dark mode is worse than none. If dark mode is ever wanted it has to cover app.css too, in one go. */ :root{ color-scheme:light } /* ============================================================================= GLASS V2 — liquid-glass skin for the Order App. Loaded AFTER app.css, so it only overrides; app.css is untouched. Boss's rule, 2026-09-16 (he caught the first draft on his phone): glass may sit over the BACKGROUND, never over TEXT. - item cards float over the colour arcs -> glass, translucent - header / cart bar / pop-up sheet sit over the list -> SOLID, opaque A translucent header let item names bleed through the title. Unreadable. ============================================================================= */ :root{ --gl-brand:#0B6157; --gl-brand-l:#17A896; --gl-brand-x:#5FE3CE; --gl-ink:#0E141B; --gl-ink2:rgba(14,20,27,.60); --gl-ink3:rgba(14,20,27,.42); --gl-glass:rgba(255,255,255,.42); --gl-hi:rgba(255,255,255,.96); --gl-lo:rgba(255,255,255,.16); --gl-edge:rgba(14,20,27,.07); --gl-chrome:#F2F5F8; --gl-line:rgba(14,20,27,.12); --gl-fill:rgba(118,118,128,.14); --gl-page:#E9EEF3; --gl-a1:rgba(127,230,212,.55); --gl-a2:rgba(158,193,255,.50); --gl-a3:rgba(255,201,168,.48); --gl-a4:rgba(215,180,255,.42); } /* ---------- colour arcs: STATIC, and they scroll WITH the page ---------- Boss, 2026-09-16: "the colours must not run - they must follow along" - the colours must not run. First draft: four huge blurred layers, position:fixed, slowly drifting. On the phone that meant (a) the colours wandered on their own, and (b) while scrolling, the colour under every glass card kept changing, because the cards moved and the background did not. Now: soft radial gradients painted on , repeating down the page and scrolling with the content - the colour under a card stays put. No live blur filter either: the gradients are already soft, and four 46px blurs were the most expensive thing on the screen. */ html{ background:var(--gl-page) } body{ color:var(--gl-ink); background-color:var(--gl-page) !important; background-image: radial-gradient(300px 230px at 8% 250px, var(--gl-a1), transparent 72%), radial-gradient(270px 250px at 96% 380px, var(--gl-a2), transparent 72%), radial-gradient(320px 210px at 28% 640px, var(--gl-a3), transparent 72%), radial-gradient(250px 230px at 88% 700px, var(--gl-a4), transparent 72%) !important; background-size:100% 940px !important; background-repeat:repeat-y !important; background-attachment:scroll !important; min-height:100vh; } /* ========================================================================= SOLID CHROME — anything that sits over text is opaque. No exceptions. ========================================================================= */ #hdr{ background:var(--gl-chrome) !important; color:var(--gl-ink) !important; border-bottom:.5px solid var(--gl-line); box-shadow:0 4px 14px -6px rgba(14,20,27,.22); } #hdr .ttl{ color:var(--gl-ink); letter-spacing:-.022em } #hdr .logo{ background:linear-gradient(155deg,var(--gl-brand-l),var(--gl-brand)); border-radius:9px; box-shadow:0 3px 9px rgba(11,97,87,.4), inset 0 1px 0 rgba(255,255,255,.4); } #hcust{ color:var(--gl-ink2) !important; opacity:1; background:var(--gl-fill); padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:650 } #hbar{ background:var(--gl-chrome) !important; color:var(--gl-ink2) !important; border-bottom:.5px solid var(--gl-line) } #hbar span{ color:var(--gl-ink2) !important } .search{ background:transparent } .search.stick{ background:var(--gl-chrome) !important; border-bottom:.5px solid var(--gl-line) } /* iPhone home-screen app: index.html asks for viewport-fit=cover and a black-translucent status bar, so the page is drawn UNDER the clock/battery. app.css only ever reserved the BOTTOM safe area, never the top, so the title sat on top of the clock. With the old dark-teal header it was hard to notice; the light glass header made it obvious (boss's iPhone screenshot, 2026-09-16). app.css: #hdr{padding:14px 16px} and .search.stick{top:59px}. */ #hdr{ padding-top:calc(14px + env(safe-area-inset-top)) !important } .search.stick{ top:calc(59px + env(safe-area-inset-top)) !important } .search input{ background:var(--gl-fill) !important; border:0 !important; color:var(--gl-ink) !important; border-radius:14px; /* left padding MUST stay 44px - app.css puts the magnifier at left:14px absolutely. My first draft wrote `padding:10px 13px` and the icon landed on top of the placeholder text. Caught on the phone, 2026-09-16. */ padding:10px 13px 10px 44px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .search input::placeholder{ color:var(--gl-ink3) } .search svg{ color:var(--gl-ink3) } /* ========================================================================= Long customer names. Boss on his phone, 2026-09-16: still eating the screen. BERDANG PLASTIC & FROZEN(ANIQ HUMAIRA ENTERPRISE)-201603126100(KT0390799-H) is 74 characters and wrapped to FOUR lines, pushing "Change" sideways and burying the search box below the fold. The part a salesperson reads is the front; the tail is a registration number. So: "Customer" becomes a small label on its own line, the name gets at most two lines and then ellipses. Tap the name to see all of it. ========================================================================= */ .bar{ align-items:flex-start } #curName{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; line-height:1.3; margin-top:2px; font-size:15px; letter-spacing:-.012em; cursor:pointer; } #curName.glFull{ -webkit-line-clamp:unset; display:block } #changeCust{ flex:0 0 auto; align-self:flex-start; margin-top:2px } .bar{ background:var(--gl-chrome) !important; border:.5px solid var(--gl-line); border-radius:16px; color:var(--gl-ink) } .sec{ color:var(--gl-ink2) } /* ========================================================================= GLASS — only the item cards. They float over the arcs; no text beneath. ========================================================================= */ #itemList .grp{ background:transparent !important; border-radius:0 !important; overflow:visible !important; box-shadow:none !important; display:flex; flex-direction:column; gap:9px; } #itemList .row{ position:relative; border-radius:19px !important; padding:12px 14px !important; min-height:56px; gap:9px; background:var(--gl-glass) !important; -webkit-backdrop-filter:blur(20px) saturate(190%) brightness(1.06); backdrop-filter:blur(20px) saturate(190%) brightness(1.06); box-shadow: inset 0 1px 0 var(--gl-hi), /* top edge highlight = thickness */ inset 0 -1px 0 var(--gl-lo), /* bottom edge shade */ 0 1px 2px rgba(14,20,27,.08), /* contact shadow */ 0 10px 28px -6px var(--gl-edge) /* ambient shadow */ !important; transition:transform 110ms cubic-bezier(.2,.8,.3,1); } /* the old hairline between rows is gone - each row is its own object now */ #itemList .row + .row::before{ content:none !important } /* specular rim: bright top-left, faint bottom-right */ #itemList .row::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; padding:1px; background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,255,255,.28) 38%, rgba(255,255,255,.06) 62%, rgba(255,255,255,.34)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.9; } /* press feedback fires on touch-down, not on release */ #itemList .row:active{ transform:scale(.975); background:var(--gl-glass) !important } #itemList .row.bought{ background:rgba(23,168,150,.20) !important; box-shadow: inset 0 1px 0 var(--gl-hi), inset 0 -1px 0 var(--gl-lo), 0 1px 2px rgba(11,97,87,.14), 0 10px 28px -6px rgba(11,97,87,.18) !important; } #itemList .nm{ color:var(--gl-ink); font-size:14.5px; font-weight:600; line-height:1.26; letter-spacing:-.011em } #itemList .sub{ color:var(--gl-ink3); font-size:10.5px; letter-spacing:.03em; margin-top:3px } #itemList .hls{ color:var(--gl-ink); font-size:14.5px; font-weight:700; letter-spacing:-.016em } #itemList .row.bought .hls{ color:var(--gl-brand) } #itemList .c2{ color:var(--gl-ink3); font-size:10px; line-height:1.3 } #itemList .cost{ max-width:41% } #itemList .row.bought .nm::before{ background:linear-gradient(160deg,var(--gl-brand-x),var(--gl-brand-l)); box-shadow:0 0 0 3px rgba(23,168,150,.18), 0 1px 3px rgba(11,97,87,.5); width:7px; height:7px; } /* customer list gets the same glass, it has the same shape */ #custList .row{ border-radius:19px !important; background:var(--gl-glass) !important; -webkit-backdrop-filter:blur(20px) saturate(190%) brightness(1.06); backdrop-filter:blur(20px) saturate(190%) brightness(1.06); box-shadow:inset 0 1px 0 var(--gl-hi), inset 0 -1px 0 var(--gl-lo), 0 1px 2px rgba(14,20,27,.08), 0 10px 28px -6px var(--gl-edge) !important; margin-bottom:9px; transition:transform 110ms cubic-bezier(.2,.8,.3,1); } #custList .row:active{ transform:scale(.975) } #custList .nm{ color:var(--gl-ink) } #custList .sub{ color:var(--gl-ink3) } /* ========================================================================= Pop-up sheet — SOLID. It covers the list; translucent would stack text. The tiles inside it may be glass: they sit on the sheet's own fill. ========================================================================= */ #modal .sheet, #oweModal .sheet{ background:var(--gl-chrome) !important; border-radius:26px 26px 0 0; box-shadow:inset 0 1px 0 var(--gl-hi), 0 -2px 8px rgba(14,20,27,.10), 0 -18px 46px -12px rgba(14,20,27,.40); color:var(--gl-ink); } #modal, #oweModal{ background:rgba(8,12,16,.46) !important; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px) } #modal .grab, #oweModal .grab{ background:var(--gl-ink3); opacity:.5 } #modal .nm, #oweModal .nm{ color:var(--gl-ink) } #modal .sub, #oweModal .sub{ color:var(--gl-ink3) } .ppanel .tile{ background:var(--gl-glass) !important; border-radius:15px; -webkit-backdrop-filter:blur(14px) saturate(170%); backdrop-filter:blur(14px) saturate(170%); box-shadow:inset 0 1px 0 var(--gl-hi), 0 1px 2px rgba(14,20,27,.06); } .ppanel .tile .k{ color:var(--gl-ink3); font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase } .ppanel .tile .v{ color:var(--gl-ink); font-weight:700; letter-spacing:-.018em } .grid2 .lab{ color:var(--gl-ink2) } .grid2 input, #mQty, #mSell{ background:var(--gl-fill) !important; border:0 !important; border-radius:14px; color:var(--gl-ink) !important; font-weight:700; letter-spacing:-.02em; } .histbox, .stkbox:not(.snap):not(.bad){ background:var(--gl-fill) !important; border:0 !important; border-radius:14px; color:var(--gl-ink2) } /* .stkbox.snap (amber = stock is a snapshot) and .stkbox.bad (red = could not load) are warnings - they keep app.css colours so they still look like warnings. */ .stkbox.snap, .stkbox.bad{ border-radius:14px } /* ========================================================================= The seven markup chips -> a price LADDER. Boss, 2026-09-16, twice: "arrange them nicer, make them easy on my eye". Second draft wrapped 3/3/1 in a grid; still a jumble of "+10% . 126.50". Now two rows, because they are two different things: row 1 cost + RINGGIT (+RM 8, +RM 10) 2 wide tiles row 2 cost + PERCENT (+10% .. +30%) 5 equal tiles Each tile: small label, the PRICE big - the price is what gets read. One teal ramp: more markup, stronger colour. The old blue/orange/cyan/ yellow came from the old app and meant nothing. ========================================================================= */ .mkrow{ display:grid !important; grid-template-columns:repeat(10,minmax(0,1fr)); gap:6px; padding:8px !important; border:0 !important; border-radius:18px; background:var(--gl-fill) !important; } /* .hide must still win - an item with no cost has no ladder */ .mkrow.hide{ display:none !important } .mkrow .mk{ grid-column:span 2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:54px; padding:6px 2px; margin:0 !important; border:0 !important; border-radius:13px; cursor:pointer; text-align:center; font-variant-numeric:tabular-nums; transition:transform 110ms cubic-bezier(.2,.8,.3,1); } .mkrow .mk:active{ transform:scale(.94) } .mkrow .mk b{ font-size:10.5px; font-weight:700; letter-spacing:.02em; opacity:.8; white-space:nowrap } /* a price is never cut off - it shrinks slightly on narrow phones instead */ .mkrow .mk i{ font-style:normal; font-size:clamp(11.5px,3.5vw,14px); font-weight:760; letter-spacing:-.02em; white-space:nowrap } .mkrow .mk:nth-child(1), .mkrow .mk:nth-child(2){ grid-column:span 5; flex-direction:row; gap:9px; min-height:46px; } .mkrow .mk:nth-child(1) i, .mkrow .mk:nth-child(2) i{ font-size:15px } /* row 1: plus ringgit - neutral */ .mkrow .mk:nth-child(1), .mkrow .mk:nth-child(2){ background:rgba(118,118,128,.16) !important; color:var(--gl-ink) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.45); } /* row 2: plus percent - one teal ramp */ .mkrow .mk:nth-child(3){ background:rgba(23,168,150,.10) !important; color:#0B6157 !important } .mkrow .mk:nth-child(4){ background:rgba(23,168,150,.19) !important; color:#0A5A51 !important } .mkrow .mk:nth-child(5){ background:rgba(23,168,150,.30) !important; color:#084A43 !important } .mkrow .mk:nth-child(6){ background:rgba(23,168,150,.46) !important; color:#05322D !important } .mkrow .mk:nth-child(7){ background:linear-gradient(165deg,#11897A,#0A554C) !important; color:#fff !important; box-shadow:0 4px 12px rgba(11,97,87,.32), inset 0 1px 0 rgba(255,255,255,.3); } /* ========================================================================= Buttons — the one place colour is allowed to be loud ========================================================================= */ .btn{ border-radius:17px !important; background:linear-gradient(165deg,var(--gl-brand-l),var(--gl-brand)) !important; box-shadow:0 8px 22px rgba(11,97,87,.34), inset 0 1px 0 rgba(255,255,255,.4) !important; letter-spacing:-.01em; transition:transform 110ms cubic-bezier(.2,.8,.3,1); } .btn:active{ transform:scale(.965) } .btn.gray{ background:var(--gl-fill) !important; color:var(--gl-ink) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.4) !important; } .chip{ background:var(--gl-fill) !important; color:var(--gl-ink2) !important; border:0 !important; border-radius:999px } /* Submit sticks to the bottom so the cart total is always one thumb away */ #submitBtn{ position:sticky; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:5; } /* cart lines get the glass treatment too */ #cart .row{ border-radius:16px !important; background:var(--gl-glass) !important; -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%); box-shadow:inset 0 1px 0 var(--gl-hi), 0 1px 2px rgba(14,20,27,.07) !important; margin-bottom:8px; } #total{ color:var(--gl-ink); font-weight:750; letter-spacing:-.02em } /* diagnostics page keeps the solid treatment - it is all text */ #scrDiag{ background:var(--gl-page) } #diagBody .row{ background:var(--gl-chrome) !important; border-radius:14px !important; margin-bottom:7px; box-shadow:0 1px 2px rgba(14,20,27,.07) !important; color:var(--gl-ink) } /* the price-list alarm must stay shouty - it stops staff quoting wrong prices */ #priceAlert{ border-radius:14px }