/* Poco's skin for the ordering surface; pushed after every page's own sheet so it wins ties. Extracted from templates/poco/_ordering.blade.php on 2026-09-22; it was inlined into every ordering page, and those pages are never cached. Linked with a content hash (App\Support\StaticAsset), so the browser keeps it for a week and fetches it again only when a deploy changes it. Nothing here may depend on the page: a value that differs per request stays inline in the template. */ /* ---------- the shell ---------- */ /* Green is the fill colour and passes nothing as text on cream: 2.8:1. The darkened stem of the same hue carries every green word - prices, counts, links - at 5.2:1 on white and 4.9:1 on the canvas. */ .ord-body{ --poco-green: var(--c-primary); --poco-green-ink: #55771f; --poco-yellow: var(--c-secondary); --poco-hair: #EDE6DA; /* The shell's own neutrals, pointed at the site's. Every rule no skin restates - a dish name in the basket, the options sheet's description, its quantity boxes, the order status heading - otherwise stays the shell's blue-black and slate on a warm cream page. The ratios hold: --ink-muted measures 6.2:1 on white and 5.6:1 on the canvas, and as the strong rule it clears the 3:1 an input edge needs. */ --ord-canvas: var(--canvas); --ord-card: var(--surface); --ord-ink: var(--ink); --ord-ink-muted: var(--ink-muted); --ord-rule: var(--border); --ord-rule-strong: var(--ink-muted); background: var(--canvas); color: var(--ink); font-family: var(--font-body); } .ord-body h1,.ord-body h2,.ord-body h3{ font-family: var(--font-heading); font-weight: 900; letter-spacing: -.02em; } /* The shell stops being a white card on a grey page: on this template the canvas IS the page, the way it is on every other poco surface. */ /* The page frame (poco/_skin.blade.php): the content between the navigation and the footer takes the same width and, from 1000px, the same gutter, so the brand, the menu's rail and the footer's first column share an edge. Below that the shell keeps its own tighter phone padding. */ .ord-shell{max-width:var(--poco-page)} @media (min-width:1000px){ .ord-shell{padding-inline:var(--poco-gutter)} } /* The phone checkout bar's row lines up with the same frame. */ .ord-checkout-inner{max-width:var(--poco-page);padding-inline:var(--poco-gutter)} .ord-card{ background:transparent;border:0;box-shadow:none;border-radius:0; padding:1rem 0 3rem;margin-top:0; } @media (min-width:1000px){ .ord-card{padding-block:1.5rem 4rem} } .ord-cart-badge{ background:var(--c-secondary);color:var(--c-secondary-ink);font-weight:900; } /* ---------- type ---------- A page title set the way the menu sets a category head: the heading face at 900, in capitals. .ord-body in front because the shell's own `.ord-body h1` resets text-transform and outranks a lone class. */ .ord-body .ord-page-title{ font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);font-weight:900;line-height:1.1; letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);margin:0 0 1.25rem; } .ord-body :is(.ost-section,.info-section,.legal-section) h2{ font-size:1.05rem;text-transform:uppercase;color:var(--ink); } /* The measure cart and checkout already keep, for the three pages that had none and ran their text across a 78rem shell. */ .ord-body :is(.info-sections,.legal-sections,.unsub-card), .ord-body .ord-page-title:has(+ :is(.info-sections,.legal-sections,.unsub-card)){ max-width:44rem;margin-inline:auto; } /* ---------- buttons ---------- Two, as on the menu: the filled pill that adds and orders, and the same pill outlined in green for everything that only navigates. */ .ord-body .ord-panel-cta,.ord-body .ord-cta,.ord-body .unsub-card button{ border-radius:999px;background:var(--c-primary);color:var(--c-primary-ink); font-family:var(--font-heading);font-weight:900; text-transform:uppercase;letter-spacing:.04em; } .ord-body .ord-panel-cta:hover,.ord-body .ord-cta:hover,.ord-body .unsub-card button:hover{background:var(--c-primary-hover)} .ord-body :is(.ord-btn-quiet,.ost-btn){ border-radius:999px;border:2px solid var(--c-primary);background:transparent; color:var(--poco-green-ink);font-family:var(--font-heading);font-weight:900; font-size:.82rem;letter-spacing:.04em;text-transform:uppercase; } .ord-body :is(.ord-btn-quiet,.ost-btn):hover{background:color-mix(in srgb,var(--c-primary) 12%,transparent)} /* Cancelling stays quiet: a right the customer must be able to reach, not the thing the page is for. */ .ord-body .ost-btn.ost-btn-quiet{ border:1px solid var(--border);color:var(--ink-muted); text-transform:none;letter-spacing:0;font-size:.875rem;font-weight:700; } /* ---------- panels ---------- The menu's basket pane is the one boxed thing on the menu, so it is the box: white, a warm hairline, 4px corners, no shadow. */ .ord-body :is(.ord-summary-card,.order-panel,.item-panel-standalone-wrap){ background:var(--surface);border:1px solid var(--border);border-radius:4px;box-shadow:none; } .ord-body :is(.ord-summary-card,.order-panel){padding:1.25rem} /* Checkout's order panel is the menu's basket pane: a title bar, the lines, the total, a way back to the menu. The lines carry their own block padding, so the panel's padding is on the inline axis only. */ .ord-body .order-panel{padding:0} .ord-body .order-panel-title{ display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .45rem; font-size:.78rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase; padding:.9rem 1.25rem;margin:0;border-bottom:1px solid var(--border); } /* The basket's title bar, shared by the menu's pane and checkout's panel so the two cannot drift apart: the count in the yellow pill the category heads use, and the total at the far end of the bar in the heading face. */ .ord-body .ord-cart-pane-count{ display:inline-grid;place-items:center;min-width:1.35rem;height:1.35rem;padding-inline:.3rem; border-radius:999px;background:var(--c-secondary);color:var(--c-secondary-ink); font-size:.68rem;font-weight:900;letter-spacing:0; } .ord-body .ord-cart-pane-total{ margin-left:auto;font-size:1.2rem;font-weight:900;letter-spacing:-.01em; text-transform:none;white-space:nowrap;font-variant-numeric:tabular-nums; } .ord-body .ord-checkout-summary{padding:0 1.25rem} .ord-body .order-panel .form-error{margin:1rem 0 0} .ord-body .order-panel-more{ display:block;margin:0;padding:.75rem 1.25rem;border-top:1px solid var(--border); color:var(--poco-green-ink);font-family:var(--font-heading);font-weight:800; font-size:.85rem;text-decoration:none; } /* Checkout's way back to the menu, in the green ink of the panel's link. */ .ord-body .ord-back{color:var(--poco-green-ink);font-family:var(--font-heading);font-weight:800} .cart-line + .cart-line{border-top-color:var(--poco-hair)} .cart-line-name{font-family:var(--font-heading);font-weight:800} .cart-line-total{font-family:var(--font-heading);font-weight:900} .ord-body :is(.form-error,.form-success,.ost-alert){border-radius:4px} .ord-body .ord-empty svg{color:var(--border)} .ord-body .ord-empty h2{font-size:1.25rem;text-transform:uppercase} .ord-body .ord-empty p{color:var(--ink-muted)} /* ---------- checkout ---------- */ .ord-body .checkout-label{font-family:var(--font-heading);font-weight:800;font-size:.875rem;color:var(--ink)} /* --ink-muted for the edge, not --border: an input as white as the panel behind it is identified by its border alone, and the warm hairline measures about 1.3:1 on white. #6B6257 clears 3:1 with room. */ .ord-body .checkout-form :is(input[type="text"],input[type="tel"],input[type="email"],textarea,select){ border:1px solid var(--ink-muted);border-radius:4px;background:var(--surface);color:var(--ink); } .ord-body :is(.checkout-hint,.ord-consent,.ord-hint){color:var(--ink-muted)} .ord-body .checkout-fieldset{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:1.25rem} .ord-body .checkout-fieldset legend{ font-family:var(--font-heading);font-size:.78rem;font-weight:900; letter-spacing:.13em;text-transform:uppercase; } .ord-body .stampomat-link-form{background:var(--surface-2);color:var(--ink);border:1px solid var(--border);border-radius:4px} /* The allergen notice (restaurant/_allergen_notice.blade.php) as quiet fine print in this skin's ink; at checkout it is an .ord-place-terms line and takes that rule. */ .ord-body .ord-allergen{color:var(--ink)} .ord-body .ord-place-terms a{color:var(--poco-green-ink)} /* Remember my details: the "Ordering as" card in the pickup fieldset's box, its label in the legends' tracked capitals, the name in the heading face, and Change and Clear in the green ink the order panel's own link uses. The box's tick takes that ink too: the fill green measures 2.8:1. */ .ord-body .checkout-identity{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:.9rem 1.25rem .6rem;color:var(--ink)} .ord-body .checkout-identity-label{font-family:var(--font-heading);font-size:.78rem;font-weight:900;letter-spacing:.13em;color:var(--ink)} .ord-body .checkout-identity-name{font-family:var(--font-heading);font-weight:900;font-size:1.15rem;letter-spacing:-.01em;color:var(--ink)} .ord-body :is(.checkout-identity-meta,.checkout-identity-foot){color:var(--ink-muted)} .ord-body .checkout-form :is(.checkout-identity-change,.checkout-identity-clear){color:var(--poco-green-ink);font-family:var(--font-heading);font-weight:800} .ord-body .checkout-remember .checkout-radio{font-family:var(--font-heading);font-weight:800;color:var(--ink)} .ord-body .checkout-remember input{accent-color:var(--poco-green-ink)} /* The total above the button in the site's heading voice: the label in the fieldset legends' small tracked capitals, the amount in the heavy face. */ .ord-body .ord-place-total{font-family:var(--font-heading);font-weight:900;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase} .ord-body .ord-place-total strong{font-size:1.6rem;letter-spacing:-.01em;text-transform:none} /* From 1000px the order sits beside the form, the way the basket sits beside the menu, and stays in view while the customer fills it in. Below that it stays where the markup puts it: first, above the form. Placed on the grid, never reordered in the markup, so a screen reader and the phone still meet the order before the fields. The title spans both columns; everything else auto-places into the first, and the summary takes the second. The span only has to outnumber the page's other children (flash lines, the form) - empty auto rows add no height. The way back to the menu takes row 1 and the title row 2, both across the page, so the summary starts at row 3, level with the form; the link keeps its own width rather than stretching into a full-width target. max-height and its own scroll keep a long order's total reachable, the same reason the menu's basket pane scrolls its lines. :has() scopes this to the checkout page, since .ord-narrow is also the cart's and the order status page's measure. A browser without :has() simply keeps the single column. */ @media (min-width:1000px){ .ord-body .ord-narrow:has(> .checkout-form){ max-width:80rem;display:grid;grid-template-columns:minmax(0,1fr) 24rem; column-gap:clamp(2.5rem,4vw,4rem);align-items:start; } .ord-body .ord-narrow:has(> .checkout-form) > *{grid-column:1} .ord-body .ord-narrow:has(> .checkout-form) > .ord-page-title{grid-column:1 / -1} .ord-body .ord-narrow:has(> .checkout-form) > .ord-back{grid-column:1 / -1;justify-self:start} .ord-body .ord-narrow:has(> .checkout-form) > .order-panel{ grid-column:2;grid-row:3 / span 8;margin:0; position:sticky;top:7rem;max-height:calc(100vh - 8rem);overflow-y:auto; } } /* ---------- order status ---------- */ .ord-body .ost-number{font-family:var(--font-heading);letter-spacing:.13em;color:var(--ink-muted)} .ord-body .ost-status{text-transform:uppercase} .ord-body :is(.ost-sub,.ost-note,.ost-where,.ost-when-label,.ost-when-note,.ost-line-qty,.ost-line-opts){color:var(--ink-muted)} .ord-body .ost-where a{color:var(--poco-green-ink);font-weight:800} .ord-body .ost-step{font-family:var(--font-heading);font-weight:800;color:var(--ink-muted)} .ord-body .ost-step::before,.ord-body .ost-step::after{background:var(--border)} .ord-body .ost-step.is-done,.ord-body .ost-step.is-current{color:var(--ink)} .ord-body .ost-step.is-done::before,.ord-body .ost-step.is-done::after{background:var(--poco-green-ink)} .ord-body .ost-step.is-current::before{background:var(--c-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-primary) 25%,transparent)} .ord-body .ost-when{border-top-color:var(--border)} .ord-body .ost-when-time{font-family:var(--font-heading);font-weight:900;color:var(--poco-green-ink)} .ord-body .ost-line{border-bottom-color:var(--poco-hair)} .ord-body .ost-line-name{font-family:var(--font-heading);font-weight:800} .ord-body .ost-line-total{font-family:var(--font-heading);font-weight:900;color:var(--poco-green-ink)} .ord-body .ost-total{border-top-color:var(--border);align-items:baseline;font-family:var(--font-heading);font-weight:900} .ord-body .ost-total span:last-child{font-size:1.35rem} .ord-body .ost-stamp{background:var(--surface-2);border-color:var(--border);border-radius:4px} .ord-body .ost-identity{border-top-color:var(--border)} /* The loyalty band as the menu's basket pane: white, a warm hairline, 4px corners, no shadow. Its cost chips take the yellow pill the category heads and the cart badge already use, so the one advertisement on this page is painted in the site's own two colours rather than in a third. */ .ord-body .ost-loyalty{background:var(--surface);border:1px solid var(--border);border-radius:4px;box-shadow:none} .ord-body .ost-loyalty-eyebrow{font-family:var(--font-heading);font-weight:900;letter-spacing:.13em;color:var(--ink-muted)} .ord-body .ost-loyalty-name{font-family:var(--font-heading);font-weight:900;text-transform:uppercase;color:var(--ink)} .ord-body :is(.ost-loyalty-intro,.ost-loyalty-note,.ost-loyalty-spend-heading,.ost-loyalty-foot){color:var(--ink-muted)} .ord-body :is(.ost-loyalty-spend-heading,.ost-loyalty-earn span){font-family:var(--font-heading);font-weight:800} .ord-body .ost-loyalty-foot a{color:var(--poco-green-ink);font-family:var(--font-heading);font-weight:800} .ord-body .ost-loyalty-photo{border-color:var(--poco-hair)} .ord-body .ost-loyalty-reward-label{font-family:var(--font-heading);font-weight:800} .ord-body .ost-loyalty-cost{background:var(--c-secondary);color:var(--c-secondary-ink);font-family:var(--font-heading);font-weight:900} .ord-body .ost-loyalty-tier{border-color:var(--border);border-radius:4px} /* Green is the fill colour and fails as text at 2.8:1; the darkened stem carries every green word on this template, the earn rate included - and the rate is now the largest thing in the band, so it is the one that had to be checked. */ .ord-body :is(.ost-loyalty-threshold,.ost-loyalty-earn strong){font-family:var(--font-heading);font-weight:900;color:var(--poco-green-ink)} /* ---------- info, legal, unsubscribe ---------- Sections on the canvas with a hairline between them, which is how the menu separates its categories. */ .ord-body :is(.info-sections,.legal-sections){gap:0} .ord-body :is(.info-section,.legal-section){padding-block:1.25rem;border-top:1px solid var(--border)} .ord-body :is(.info-section,.legal-section):first-child{padding-top:0;border-top:0} .ord-body :is(.info-section,.legal-section,.unsub-card) p{color:var(--ink-muted)} .ord-body :is(.info-section,.legal-section) a{color:var(--poco-green-ink);font-weight:800} .ord-body .unsub-card .unsub-email{color:var(--ink)} .ord-body .info-hours li{color:var(--ink-muted);border-bottom-color:var(--poco-hair)} .ord-body .info-hours li.is-today{color:var(--ink)} .ord-body .info-map{border-color:var(--border);border-radius:4px} /* On a desktop the info page reads as two columns - the week's hours beside pickup, payment and how to reach the shop - rather than one 44rem strip down the middle of a wide page. Columns rather than a grid: the sections are whatever the merchant filled in, so the browser balances them instead of this sheet guessing a count. A map, when there is one, spans both. Legal and order status keep their single reading measure. */ @media (min-width:1000px){ .ord-body .info-sections, .ord-body .ord-page-title:has(+ .info-sections){max-width:64rem} .ord-body .info-sections{display:block;columns:2;column-gap:4rem} .ord-body .info-section,.ord-body .info-section:first-child{break-inside:avoid;border-top:0;padding-block:0 2rem} .ord-body .info-section:has(.info-map){column-span:all} } /* ---------- the options panel ---------- The menu's dialog and the standalone item page draw the same partial. Every selector here is prefixed with .ord-body, and that is not a flourish: _item_panel.blade.php ships its own