/* Customer-facing order tracking app — standalone stylesheet. Structural language borrowed from the sibling Sanpi Sherwani project's customer app (dark, fixed, full-page gradient behind everything, a cream card floating up over the header, serif display type, gradient CTA) at the owner's own request — but in Gangh Fashon's OWN brand identity, not Sanpi's: the maroon/brass/dark-ground palette already established on admin/login.php's "house identity: dark ground, brass rule, paper card", and Gangh's own Fraunces/IBM Plex Sans fonts, not Sanpi's Cormorant Garamond/Poppins. Not core.css — that file is the admin sidebar/topbar shell's design system; this is a phone-first, WebView-first surface with its own vocabulary. IMPORTANT (12 Aug fix): the dark gradient lives on , not on .header. Putting it on .header only left a hard seam where plain --paper showed through below short pages — Sanpi avoids this by making the WHOLE page's backdrop the dark gradient (fixed, min-height:100vh) and letting .header sit on it with no background of its own; every .card is then a light panel floating over that permanent dark ground, never the other way around. */ :root{ --ink:#221B18; --ink-2:#5B5049; --ink-3:#8D7F72; --paper:#FAF7F2; --line:#EADFCE; --brand:#9B3947; --brand-2:#6E242E; --brand-800:#7A2E3A; --gold:#A87D2A; --gold-bright:#D4AF6A; --gold-soft:#B98F42; --ok:#3A7D5C; --warn:#B5772B; --danger:#B5342E; --cream:#F6E4CB; --font-display:'Fraunces',serif; --font-body:'IBM Plex Sans',sans-serif; } *{box-sizing:border-box} html, body{height:100%} body{ margin:0;min-height:100vh;color:var(--ink);font-family:var(--font-body);font-size:14.5px;line-height:1.5; display:flex;justify-content:center; background: radial-gradient(1200px 640px at 50% -10%, rgba(155,57,71,.30), transparent 60%), linear-gradient(175deg,#241D19,#15100E 55%, #0E0B09 100%); background-attachment:fixed; } .app{width:100%;max-width:420px;min-height:100vh;position:relative;padding-bottom:8px} /* ===== HEADER — no fill of its own, sits on the page's dark ground ===== */ .header{position:relative;padding:22px 18px 92px;text-align:center;overflow:hidden} .header::before{ content:"";position:absolute;top:-52px;left:50%;transform:translateX(-50%); width:340px;height:340px;border-radius:50%; background:radial-gradient(circle, rgba(212,175,106,.20) 0%, rgba(212,175,106,0) 65%); pointer-events:none; } .top-bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;min-height:36px;margin-bottom:22px} .top-link{ display:inline-flex;align-items:center;gap:7px; color:var(--cream);font-size:11.5px;letter-spacing:.4px;text-decoration:none; background:rgba(246,228,203,.08);border:1px solid rgba(168,125,42,.32); padding:8px 13px;border-radius:30px;transition:.2s; } .top-link:hover{background:rgba(168,125,42,.16);border-color:rgba(168,125,42,.55)} .top-link i{color:var(--gold-bright)} .bell-btn{ position:relative;display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:50%; background:rgba(246,228,203,.08);border:1px solid rgba(168,125,42,.32); color:var(--gold-bright);text-decoration:none;transition:.2s; } .bell-btn:hover{background:rgba(168,125,42,.16);border-color:rgba(168,125,42,.55)} .badge{ position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px; border-radius:20px;background:linear-gradient(135deg,#c94848,#7a1f1f);color:#fff; font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center; border:1px solid rgba(30,10,10,.5); } .brand{position:relative;z-index:2} .brand-mark{ width:68px;height:68px;border-radius:19px;margin:0 auto 15px;display:grid;place-items:center; background:linear-gradient(150deg,var(--brand),var(--brand-2)); font-family:var(--font-display);font-weight:700;font-size:31px;color:var(--cream); box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 16px 34px -10px rgba(0,0,0,.8); } .brand-name{ font-family:var(--font-display);font-size:28px;font-weight:600;letter-spacing:.2px; color:#F5EDE3;margin:0;text-shadow:0 2px 16px rgba(212,175,106,.2); } .brand-eyebrow{ font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#C9B79F; margin-top:6px;opacity:.85; } .brand-tagline{ display:inline-flex;align-items:center;gap:10px;margin-top:15px; font-size:10px;letter-spacing:.26em;color:var(--gold-soft);text-transform:uppercase; } .brand-tagline::before, .brand-tagline::after{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft))} .brand-tagline::after{transform:scaleX(-1)} /* ===== CARD — floats up over the header, permanently on the dark ground ===== */ .card{ position:relative;background:linear-gradient(180deg,#fffaf3 0%, #fdf6ec 100%); margin:-70px 16px 16px;padding:24px 20px;border-radius:22px; border:1px solid rgba(168,125,42,.3);box-shadow:0 24px 60px rgba(0,0,0,.4); } .card + .card{margin-top:0} h1{font-family:var(--font-display);font-size:24px;font-weight:600;margin:0 0 6px;color:var(--brand-800)} h2{font-family:var(--font-display);font-size:18px;font-weight:600;margin:0 0 10px;color:var(--brand-800)} p{margin:0 0 10px;color:var(--ink-2)} .subtitle{font-size:12.5px;color:var(--ink-3);margin:0 0 18px;display:flex;align-items:center;gap:7px} .subtitle i{color:var(--gold-soft)} .field{margin-bottom:14px} .field label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:5px} .field input{ width:100%;padding:12px 13px;border:1.5px solid var(--line);border-radius:12px; font-size:15px;font-family:inherit;background:#fffdf9;color:var(--ink); } .field input:focus{outline:none;border-color:var(--gold-soft);box-shadow:0 0 0 3px rgba(168,125,42,.15)} /* ===== BUTTONS ===== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 18px;border-radius:14px;border:1.5px solid rgba(168,125,42,.35); background:rgba(246,228,203,.08);color:var(--cream);font-size:13.5px;font-weight:600;letter-spacing:.3px; cursor:pointer;text-decoration:none;transition:.2s; } .btn:hover{border-color:rgba(168,125,42,.6);background:rgba(168,125,42,.16)} .btn-primary{ height:52px;background:linear-gradient(135deg,var(--brand-2),var(--brand)); border-color:rgba(168,125,42,.4);color:var(--cream);font-size:14px;letter-spacing:1.5px; box-shadow:0 12px 26px rgba(61,13,13,.28); } .btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(61,13,13,.36);background:linear-gradient(135deg,var(--brand-2),var(--brand))} .btn-primary:active{transform:scale(.98)} .btn-block{width:100%} .divider{display:flex;align-items:center;gap:12px;margin:18px 2px 2px;color:var(--ink-3);font-size:10px;letter-spacing:.18em} .divider::before, .divider::after{content:"";flex:1;height:1px;background:var(--line)} .alert{ display:flex;gap:9px;align-items:flex-start;padding:12px 14px;border-radius:12px; background:#FBEFEF;color:var(--danger);font-size:13px;margin-bottom:16px;border:1px solid rgba(181,52,46,.18); } .alert.ok{background:#EBF5F0;color:var(--ok);border-color:rgba(58,125,92,.2)} .alert i{margin-top:1px} .pill{ display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:99px; font-size:11px;font-weight:600;background:#F1ECE4;color:var(--ink-2);white-space:nowrap; } .pill.ready{background:#EBF5F0;color:var(--ok)} .pill.progress{background:#FBF1E4;color:var(--warn)} .pill.delivered{background:#E9EEF7;color:#3A5C9B} .steps{display:flex;gap:6px;margin:16px 0 4px} .step{flex:1;height:5px;border-radius:99px;background:var(--line)} .step.done{background:linear-gradient(90deg,var(--brand-2),var(--brand))} .step-label{font-size:11px;color:var(--ink-3);margin-top:8px} .piece-row{ display:flex;justify-content:space-between;align-items:center;gap:10px; padding:12px 0;border-top:1px solid var(--line); } .piece-row:first-child{border-top:none;padding-top:2px} .piece-row .pname{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;flex:1;min-width:0} .piece-icon{ width:32px;height:32px;min-width:32px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--gold-bright);font-size:13px; } /* ===== BILL VIEWER — Sanpi's "Order Copy" pill + zoomable modal pattern ===== */ .bill-view-btn{color:var(--brand-800);background:#fff;border-color:var(--line)} .bill-view-btn:hover{background:linear-gradient(180deg,#fff8ea,#fdf3e1);border-color:var(--gold-soft)} .bill-modal{ display:none;position:fixed;inset:0;z-index:999;background:rgba(14,11,9,.82); backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:18px; } .bill-modal.open{display:flex} .bill-modal-dialog{ width:100%;max-width:520px;max-height:92vh;background:#fdf6ec;border-radius:18px; overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.4);position:relative;border:1px solid rgba(168,125,42,.3); } .bill-modal-close{ position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%; border:1px solid var(--line);background:#fff;color:var(--ink-2);font-size:15px;cursor:pointer; } .bill-modal-body{padding:18px;display:flex;flex-direction:column;align-items:center;max-height:92vh;overflow:auto} .bill-zoom-controls{display:flex;gap:8px;align-self:flex-end;margin-bottom:10px} .zoom-btn{ border:none;border-radius:9px;padding:7px 12px;background:var(--brand-2);color:var(--cream); cursor:pointer;font-size:14px;font-weight:700; } .bill-modal-body img{ max-width:100%;max-height:72vh;border-radius:10px;background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.15);transform-origin:center center;transition:transform .2s ease; } .code-box{ text-align:center;padding:20px;border-radius:16px;margin:6px 0 16px; background:linear-gradient(180deg,#fff8ea,#fdf3e1);border:1.5px dashed var(--gold-soft); } .code-box .code{font-family:var(--font-display);font-size:34px;font-weight:700;letter-spacing:.14em;color:var(--brand-2)} .code-box .label{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.14em;margin-top:5px} /* ===== NOTIFICATIONS — individual floating cards, Sanpi's list pattern in Gangh's own palette rather than Sanpi's mismatched second colour scheme (its index.php and view-notification.php don't actually share one design system — this one stays consistent end to end). ===== */ .notif-card{ position:relative;display:flex;gap:13px;align-items:flex-start; background:linear-gradient(180deg,#fffaf3 0%, #fdf6ec 100%); margin:0 16px 12px;padding:16px 17px;border-radius:18px; border:1px solid rgba(168,125,42,.22);box-shadow:0 14px 34px rgba(0,0,0,.28); } .notif-icon{ width:38px;height:38px;min-width:38px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--gold-bright);font-size:15px;margin-top:1px; } .notif-body p{margin:0;font-size:13.5px;color:var(--ink);font-weight:500} .notif-when{font-size:11px;color:var(--ink-3);margin-top:5px} /* ===== PROMO CARD — global (marketing) notifications: full-bleed image banner over a cream body, distinct from the plain system-message rows above so a product update actually reads as one. ===== */ .promo-card{ margin:0 16px 14px;border-radius:20px;overflow:hidden;cursor:pointer; background:linear-gradient(180deg,#fffaf3 0%, #fdf6ec 100%); border:1px solid rgba(168,125,42,.24);box-shadow:0 16px 40px rgba(0,0,0,.32); transition:transform .15s ease, box-shadow .15s ease; } .promo-card:hover, .promo-card:focus-visible{transform:translateY(-2px);box-shadow:0 20px 46px rgba(0,0,0,.38)} .promo-card:active{transform:translateY(0)} .promo-card:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px} .promo-image{ display:block;width:100%;max-height:260px;object-fit:contain; background:linear-gradient(180deg,#fdf6ec,#f3e6cd); } .promo-image.no-photo{ display:flex;align-items:center;justify-content:center;height:170px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); } .promo-image.no-photo i{font-size:34px;color:var(--gold-bright)} .promo-body{padding:16px 18px 18px} .promo-tag{ display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600; letter-spacing:.13em;text-transform:uppercase;color:var(--brand-2); background:rgba(155,57,71,.09);border:1px solid rgba(155,57,71,.25); padding:4px 10px;border-radius:20px;margin-bottom:10px; } .promo-tag i{color:var(--gold)} .promo-title{font-family:var(--font-display);font-size:17.5px;font-weight:600;color:var(--ink);margin:0 0 6px;line-height:1.3} .promo-text{font-size:13px;color:var(--ink-2);margin:0;line-height:1.55;white-space:pre-wrap} .promo-text-clamp{ display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } .promo-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px} .promo-when{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3)} .promo-readmore{ display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700; color:var(--brand-2);white-space:nowrap; } .promo-readmore i{font-size:9px} /* ===== PROMO MODAL — full notification popup, dialog shell shared with the bill viewer (.bill-modal), content laid out for image + copy. ===== */ .promo-modal-body{padding:0 0 20px;align-items:stretch} .promo-modal-body #promoModalImg{ width:100%;max-width:none;max-height:60vh;object-fit:contain;border-radius:0;box-shadow:none; background:linear-gradient(180deg,#fdf6ec,#f3e6cd); } .promo-modal-nophoto{width:100%;height:140px;border-radius:0} .promo-modal-content{padding:20px 22px 0} .promo-modal-content .promo-title{font-size:19px} .promo-modal-content .promo-text{font-size:13.5px} .notif-card.unread{border-color:rgba(168,125,42,.5)} .notif-card.unread::after{ content:"";position:absolute;top:14px;right:14px;width:7px;height:7px;border-radius:99px;background:var(--brand); } .notif-empty{ text-align:center;color:var(--cream);opacity:.75;font-size:13px;padding:30px 20px; } .notif-empty i{display:block;font-size:26px;margin-bottom:10px;color:var(--gold-soft)} .nav-links{display:flex;gap:10px;margin:18px 16px 0} .nav-links .btn{flex:1} .app-footer{ text-align:center;color:rgba(246,228,203,.45);font-size:10.5px;letter-spacing:.18em; padding:22px 16px 30px;text-transform:uppercase; } .app-footer span{color:var(--gold-soft)}