/* ════════════════════════════════════════════════════════════════ The pull-up green (docs/merch/pullups) for the app's green surfaces. Linked last in index.php, so the app only (not the marketplace or website). A brighter green that runs from #13C176 at the top left down to #08704A, with a soft yellow glow at the top right, as on the "Your shop, open 24/7" banner. Cards use it two steps deeper (--pu-card1..4). Used for: · every green card: the dashboard (Brand banner .dbb-band, Today first .tdc-today, Classic's ATM card .dsz-hero and storefront card), the page banners (.sx-hero via --lp2-h* in pages-m2.css) and the POS register card. Teal, blue, purple and red page tones are unchanged. · the green buttons: .btn-primary on every page and pop-up, the top bar's + New, the round + and menu buttons, POS Checkout and the POS checkout bar on phones. ════════════════════════════════════════════════════════════════ */ :root { --pu-g1: #13C176; --pu-g2: #0FA864; --pu-g3: #0B8A55; --pu-g4: #08704A; --pu-yellow: #FFD23F; /* Every green card in the app (dashboard, page banners, POS, Classic's ATM card): the pull-up green two steps deeper. The bright start read as too bright on cards; the buttons keep the bright one. Other stylesheets read these with their old colour as the fallback. */ --pu-card1: #0D9A5D; --pu-card2: #0B8651; --pu-card3: #097146; --pu-card4: #075C3B; --pu-btn: linear-gradient(135deg, #13C176 0%, #0FA864 50%, #0B8A55 100%); --pu-btn-hover: linear-gradient(135deg, #18CB7E 0%, #11B16A 50%, #0C935A 100%); } /* ---- Dashboard green card ---------------------------------------------------- */ .dashx.dashx-brand .dbb-band, .dashx.dashx-counter .tdc-today { background: radial-gradient(70% 75% at 100% 0%, rgba(255, 210, 63, .14), rgba(255, 210, 63, 0) 65%), radial-gradient(90% 80% at 22% 30%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 70%), linear-gradient(160deg, var(--pu-card1) 0%, var(--pu-card2) 35%, var(--pu-card3) 70%, var(--pu-card4) 100%) !important; border-color: rgba(255, 255, 255, .28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), inset 0 -14px 28px -22px rgba(0, 0, 0, .30), 0 2px 6px -2px rgba(8, 112, 74, .22), 0 24px 46px -26px rgba(8, 112, 74, .62) !important; } /* the pinstripes stay, a touch lighter on the brighter green */ .dashx.dashx-brand .dbb-band::before, .dashx.dashx-counter .tdc-today::before { background: repeating-linear-gradient(112deg, rgba(255, 255, 255, .10) 0 1px, transparent 1px 10px) !important; } /* ---- Green buttons -------------------------------------------------------------- */ .btn-primary, body.lp2-app #page-content .btn-primary, body.lp2-app .modal .btn-primary, body:not(.lp2-app) .modal-overlay .modal .btn-primary, #main-app > header.topbar .topbar-quick-add, #main-app .btn-fab, #main-app .menu-fab:not([data-fab-color]), body[data-app-page="pos"] .pos-checkout-btn { background: var(--pu-btn) !important; border-color: var(--pu-g2) !important; color: #fff !important; box-shadow: 0 10px 20px -12px rgba(11, 138, 85, .9), inset 0 1px 0 rgba(255, 255, 255, .22) !important; } .btn-primary:hover:not(:disabled), body.lp2-app #page-content .btn-primary:hover:not(:disabled), body.lp2-app .modal .btn-primary:hover:not(:disabled), body:not(.lp2-app) .modal-overlay .modal .btn-primary:hover:not(:disabled), #main-app > header.topbar .topbar-quick-add:hover, #main-app .btn-fab:hover, #main-app .menu-fab:not([data-fab-color]):hover, body[data-app-page="pos"] .pos-checkout-btn:hover:not(:disabled) { background: var(--pu-btn-hover) !important; filter: none; } .btn-primary:disabled, body.lp2-app #page-content .btn-primary:disabled, body.lp2-app .modal .btn-primary:disabled { filter: saturate(.55) brightness(1.05); } /* POS on phones: the green "N items · Checkout" bar */ body[data-app-page="pos"] .pos-mobile-checkout { background: linear-gradient(135deg, var(--pu-g1) 0%, var(--pu-g2) 50%, var(--pu-g3) 100%) !important; box-shadow: 0 16px 32px -12px rgba(11, 138, 85, .65) !important; } /* ---- Classic's ATM card: the facets on the card greens -------------------------- */ .dsz-hero { background: linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 32%, rgba(2,44,34,.22) 66%, rgba(255,255,255,.08) 100%), linear-gradient(0deg, rgba(2,44,34,.14), rgba(2,44,34,.14)), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27130%27%20viewBox%3D%270%200%20200%20130%27%3E%3Crect%20width%3D%27200%27%20height%3D%27130%27%20fill%3D%27%230a6d44%27%2F%3E%3Cg%20stroke%3D%27%23ffffff%27%20stroke-width%3D%270.5%27%20stroke-opacity%3D%270.10%27%3E%3Cpolygon%20points%3D%270%2C0%2055%2C0%2020%2C40%27%20fill%3D%27%230f985e%27%2F%3E%3Cpolygon%20points%3D%2755%2C0%2020%2C40%2070%2C55%27%20fill%3D%27%23075436%27%2F%3E%3Cpolygon%20points%3D%2755%2C0%20120%2C0%2070%2C55%27%20fill%3D%27%230d8552%27%2F%3E%3Cpolygon%20points%3D%27120%2C0%2070%2C55%20140%2C45%27%20fill%3D%27%23075a39%27%2F%3E%3Cpolygon%20points%3D%27120%2C0%20200%2C0%20140%2C45%27%20fill%3D%27%2310a062%27%2F%3E%3Cpolygon%20points%3D%27200%2C0%20140%2C45%20200%2C70%27%20fill%3D%27%23075838%27%2F%3E%3Cpolygon%20points%3D%270%2C0%2020%2C40%200%2C75%27%20fill%3D%27%230a7348%27%2F%3E%3Cpolygon%20points%3D%2720%2C40%2070%2C55%2045%2C95%27%20fill%3D%27%230e9159%27%2F%3E%3Cpolygon%20points%3D%2720%2C40%200%2C75%2045%2C95%27%20fill%3D%27%23064f33%27%2F%3E%3Cpolygon%20points%3D%2770%2C55%20140%2C45%20110%2C90%27%20fill%3D%27%23096a43%27%2F%3E%3Cpolygon%20points%3D%2770%2C55%2045%2C95%20110%2C90%27%20fill%3D%27%230f985e%27%2F%3E%3Cpolygon%20points%3D%27140%2C45%20200%2C70%20170%2C100%27%20fill%3D%27%230c7d4e%27%2F%3E%3Cpolygon%20points%3D%27140%2C45%20110%2C90%20170%2C100%27%20fill%3D%27%23065235%27%2F%3E%3Cpolygon%20points%3D%270%2C75%2045%2C95%2015%2C130%27%20fill%3D%27%230d8552%27%2F%3E%3Cpolygon%20points%3D%2745%2C95%20110%2C90%2070%2C130%27%20fill%3D%27%23075637%27%2F%3E%3Cpolygon%20points%3D%2745%2C95%2015%2C130%2070%2C130%27%20fill%3D%27%230e9159%27%2F%3E%3Cpolygon%20points%3D%27110%2C90%20170%2C100%20130%2C130%27%20fill%3D%27%230d8552%27%2F%3E%3Cpolygon%20points%3D%27110%2C90%2070%2C130%20130%2C130%27%20fill%3D%27%2309643f%27%2F%3E%3Cpolygon%20points%3D%27170%2C100%20200%2C70%20200%2C130%27%20fill%3D%27%230e9159%27%2F%3E%3Cpolygon%20points%3D%27170%2C100%20130%2C130%20200%2C130%27%20fill%3D%27%23075537%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/cover no-repeat, linear-gradient(135deg, var(--pu-card1) 0%, var(--pu-card3) 50%, var(--pu-card2) 100%) !important; box-shadow: 0 24px 48px -20px rgba(7, 92, 59, .55), inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.12) !important; }