/* NorthPoint Cafe — Order Ahead Tokens are lifted from the brand guide one-pager: Pantone 7716 teal, 324 light teal, 714 orange, the cream, and Pantone Black C. The dark ground is a warm near-black derived from that black rather than a neutral grey, so the whole thing sits in the same temperature. Orange does exactly one job — the staff discount — per the brand's own 10% usage weighting. Do not spend it on anything else. */ :root { --ink: #171412; --surface: #1E1A18; --surface-2: #211D1A; --raised: #262220; --line: #2C2724; --line-strong: #37312D; --cream: #FFF9EF; --body: #C9C0B7; --muted: #9E958C; --faint: #7E756D; --ghost: #5C5550; --teal: #00968F; /* brand */ --teal-bright: #00B5AB; /* interactive fill, lifted for dark-mode contrast */ --mint: #9CDBD9; /* brand, accent text */ --on-teal: #10201E; --amber: #F68D2E; /* brand, discounts only */ --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif; --tap: 44px; /* never smaller, anywhere */ --r-sm: 12px; --r: 14px; --r-lg: 16px; --r-pill: 999px; } * { box-sizing: border-box; } /* Any class that sets `display` outranks the browser's own [hidden]{display:none}, because a class selector beats a UA rule. That is how the payment-error box sat open and orange on every checkout with nothing wrong. Global, so it cannot bite the next component either. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ink); color: var(--cream); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; } a { color: var(--mint); text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 2px; border-radius: 6px; } .shell { max-width: 460px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 96px; } /* header */ .top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; } /* The row's height comes from the 44px account control beside it, not from the logo, so anything up to --tap is free. Past that the header grows and eats into the menu. The wordmark is 2.69:1, so 36px reads as ~97px wide — comfortable even at 320px next to a 44px avatar. */ .top .logo { height: 36px; max-height: var(--tap); width: auto; display: block; } .back { width: var(--tap); height: var(--tap); margin-left: -10px; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--cream); } .title { font: 700 20px/1.2 var(--serif); flex: 1; } /* pickup context bar */ .context { margin: 0 16px 12px; min-height: 52px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line-strong); display: flex; align-items: center; gap: 10px; padding: 8px 14px; } .context .who { flex: 1; display: flex; flex-direction: column; gap: 1px; } .context strong { font-size: 13px; font-weight: 600; } .context small { font-size: 11px; color: var(--muted); } /* category chips */ .chips { display: flex; gap: 8px; padding: 0 16px 14px; overflow-x: auto; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { min-height: var(--tap); padding: 0 16px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--body); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0; } .chip[aria-current='true'] { background: var(--teal-bright); border-color: var(--teal-bright); color: var(--on-teal); font-weight: 600; } /* item rows */ .section-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 16px 10px; } .section-head h2 { font: 700 19px/1.2 var(--serif); margin: 0; } .section-head span { font-size: 12px; color: var(--muted); } .rows { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; } .row { display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); } .row .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; } .row .name { font: 700 16px/1.25 var(--serif); } .row .desc { font-size: 12px; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .row .price { font-size: 13px; font-weight: 600; color: var(--mint); } .row .add { width: 32px; height: 32px; flex-shrink: 0; border-radius: 16px; background: var(--raised); border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; } /* the tile that stands in for a photo — Clover exposes none over the API */ .tile { width: 64px; height: 64px; border-radius: var(--r-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #DFF4F2; background: linear-gradient(150deg, var(--teal) 0%, #075E5C 100%); } .tile.cold { background: linear-gradient(150deg, #1F6F6C 0%, #0C4442 100%); } .tile.food { background: linear-gradient(150deg, #6B4A2A 0%, #3C2917 100%); } .tile.snack { background: linear-gradient(150deg, #4A5A3A 0%, #2A331F 100%); } .tile.lg { width: 100%; height: 150px; border-radius: 18px; } .tile img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* item detail */ .detail { padding: 0 16px; display: flex; flex-direction: column; gap: 22px; } .detail h1 { font: 700 26px/1.15 var(--serif); margin: 0 0 6px; } .detail .lede { font-size: 13px; color: var(--muted); line-height: 1.45; margin: 0; } .detail .from { font-size: 17px; font-weight: 700; color: var(--mint); margin-top: 6px; display: block; } .group > .label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .group .label b { font-size: 13px; font-weight: 700; letter-spacing: .3px; } .group .label span { font-size: 11px; color: var(--muted); } .opt { min-height: 52px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); cursor: pointer; } .opt:last-child { border-bottom: 0; } .opt input { position: absolute; opacity: 0; pointer-events: none; } .opt .box { width: 20px; height: 20px; flex-shrink: 0; border: 1.5px solid #4A433E; } .opt .box.radio { border-radius: 10px; } .opt .box.check { border-radius: 6px; } .opt input:checked + .box { border-color: var(--teal-bright); background: var(--teal-bright); } .opt input:checked + .box.radio { background: var(--ink); border-width: 5.5px; } .opt input:checked + .box.check::after { content: ''; display: block; width: 6px; height: 11px; margin: 1px auto; border: solid var(--on-teal); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .opt .opt-name { flex: 1; font-size: 14px; color: var(--body); } .opt input:checked ~ .opt-name { color: var(--cream); font-weight: 500; } .opt .opt-price { font-size: 13px; font-weight: 600; color: var(--mint); } textarea.note { width: 100%; min-height: 76px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); padding: 14px; color: var(--cream); resize: vertical; font-size: 13px; } .hint { font-size: 11px; color: var(--faint); line-height: 1.4; } /* cart */ .cart-line { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); padding: 14px; } .cart-line .head { display: flex; align-items: baseline; gap: 10px; } .cart-line .head .name { flex: 1; font: 700 16px/1.25 var(--serif); } .cart-line .mods { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.4; } .cart-line .note { font-size: 12px; color: var(--mint); margin-top: 3px; } .cart-line .actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .stepper { height: var(--tap); border-radius: var(--r-sm); background: var(--raised); display: flex; align-items: center; gap: 2px; padding: 0 4px; } .stepper button { width: 36px; height: 36px; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); } .stepper button:last-of-type { color: var(--cream); } .stepper .q { font-size: 14px; font-weight: 700; min-width: 18px; text-align: center; } .totals { display: flex; flex-direction: column; gap: 11px; padding: 4px 0; } .totals .t { display: flex; align-items: baseline; } .totals .t span:first-child { flex: 1; font-size: 13px; color: var(--muted); } .totals .t span:last-child { font-size: 13px; color: var(--body); font-variant-numeric: tabular-nums; } .totals .rule { height: 1px; background: var(--line); } .totals .grand span:first-child { font-size: 16px; font-weight: 700; color: var(--cream); } .totals .grand span:last-child { font: 700 24px/1 var(--serif); color: var(--cream); } .totals .disc span { color: var(--amber) !important; } .badge-staff { height: 20px; padding: 0 7px; border-radius: 6px; background: rgba(246,141,46,.16); color: var(--amber); font-size: 10px; font-weight: 700; letter-spacing: .4px; display: inline-flex; align-items: center; } /* buttons */ .btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; border-radius: var(--r-lg); border: 0; width: 100%; font-size: 15px; font-weight: 700; cursor: pointer; text-align: center; } .btn-primary { background: var(--teal-bright); color: var(--on-teal); } .btn-ghost { background: none; border: 1px solid var(--line-strong); color: var(--body); font-weight: 600; } .btn-dashed { background: none; border: 1px dashed var(--line-strong); color: var(--mint); min-height: 50px; font-size: 13px; } .btn-icon { width: var(--tap); height: var(--tap); border-radius: var(--r-sm); border: 0; background: none; color: var(--faint); cursor: pointer; display: flex; align-items: center; justify-content: center; } /* sticky bottom */ .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: linear-gradient(180deg, rgba(23,20,18,0) 0%, var(--ink) 28%); padding: 18px 16px 16px; } .dock-inner { max-width: 460px; margin: 0 auto; display: flex; gap: 12px; align-items: center; } .cartbar { min-height: 54px; border-radius: var(--r-lg); background: var(--teal-bright); color: var(--on-teal); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; width: 100%; } .cartbar b { font-size: 15px; font-weight: 700; } .cartbar span { font-size: 14px; font-weight: 600; } .msgs { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 8px; } .msg { border-radius: var(--r-sm); padding: 11px 14px; font-size: 13px; } .msg.error { background: rgba(246,141,46,.1); border: 1px solid rgba(246,141,46,.35); color: #D9BFA3; } .msg.success { background: rgba(0,181,171,.09); border: 1px solid rgba(0,181,171,.3); color: var(--mint); } .empty { padding: 60px 24px; text-align: center; color: var(--muted); } .empty h2 { font: 700 22px/1.2 var(--serif); color: var(--cream); margin: 0 0 8px; } /* --- checkout: day tabs, ASAP card, slot grid --- */ .segmented { height: 48px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); padding: 4px; display: flex; gap: 4px; } .segmented .seg { flex: 1; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: var(--muted); } .segmented .seg.on { background: #35302C; color: var(--cream); font-weight: 700; } .asap { width: 100%; min-height: 74px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 0 16px; cursor: pointer; text-align: left; } .asap.on { border-color: var(--teal-bright); background: rgba(0,181,171,.1); } .asap .bolt { width: 40px; height: 40px; border-radius: 20px; flex-shrink: 0; background: rgba(0,181,171,.14); color: var(--teal-bright); display: flex; align-items: center; justify-content: center; } .asap-text { display: flex; flex-direction: column; gap: 2px; } .asap-text strong { font-size: 14px; font-weight: 600; } .asap-text small { font-size: 12px; color: var(--muted); } .slotgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .slot { min-height: 58px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; color: var(--cream); } .slot .t { font-size: 14px; font-weight: 600; } .slot .sub { font-size: 9px; color: var(--faint); } .slot.on { background: var(--teal-bright); border-color: var(--teal-bright); color: var(--on-teal); } .slot.on .t { font-weight: 700; } .slot.on .sub { color: var(--on-teal); font-weight: 700; letter-spacing: .5px; } .slot.off { background: #1A1715; border-color: transparent; color: var(--ghost); cursor: default; } .slot.off .t { color: var(--ghost); } .slot.off .sub { color: var(--ghost); font-weight: 700; letter-spacing: .5px; } .notice { border-radius: var(--r); background: rgba(246,141,46,.09); border: 1px solid rgba(246,141,46,.28); padding: 13px 14px; display: flex; gap: 11px; font-size: 12px; color: #D9BFA3; line-height: 1.45; } .notice .ico { color: var(--amber); flex-shrink: 0; margin-top: 1px; display: flex; } /* --- checkout page --- */ .field { min-height: 56px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); padding: 0 15px; width: 100%; font-size: 14px; } .field::placeholder { color: var(--faint); } .summary-row { min-height: 56px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 12px 14px; } .summary-row .grow { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .summary-row strong { font-size: 14px; font-weight: 600; } .summary-row small { font-size: 11px; color: var(--muted); } .pill-choice { display: flex; gap: 4px; padding: 4px; height: 52px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); } .pill-choice label { flex: 1; border-radius: 11px; display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; font-size: 13px; color: var(--muted); } .pill-choice input { position: absolute; opacity: 0; pointer-events: none; } .pill-choice input:checked + label { background: #35302C; color: var(--cream); font-weight: 700; } /* --- Clover hosted fields --- The iframes paint their own light background, so their text must be dark. Styling them to match the dark page makes the customer's typing invisible — a real bug from Phase 0, not a hypothetical. */ .fieldlabel { display: block; font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--faint); margin: 0 0 3px; font-weight: 700; } /* 44px is the floor, not a preference: it is the minimum touch target, and these are the fields somebody taps on a phone with a card in their other hand. Shorter would look tidier and be worse. Every other input on this page is 56px, so these are already the most compact thing on it. */ .ccfield { height: 44px; border-radius: 8px; border: 1px solid var(--line-strong); /* Matches the style object handed to Clover in checkout.html. If the iframe ignores `body.background` this stays visible behind a transparent frame and the digits are still legible against it — so a failure looks like light text on the right colour, not text on white. */ background: var(--surface); padding: 0 8px; overflow: hidden; } /* Clover may wrap its input, so constrain any descendant, not just a direct child — and the container clips regardless. */ .ccfield iframe, .ccfield > div { height: 42px !important; width: 100% !important; display: block; border: 0; } .ccrow { display: flex; gap: 8px; margin-top: 8px; } .ccrow > div { flex: 1; min-width: 0; } /* ZIP needs far less room than the other two. */ .ccrow > div:last-child { flex: 0 0 92px; } #card-fields > .fieldlabel:first-child { margin-top: 0; } .secure { display: flex; gap: 9px; margin-top: 12px; font-size: 11px; color: #7E8E8C; line-height: 1.45; } .secure .ico { color: #6E8E8B; flex-shrink: 0; margin-top: 1px; display: flex; } /* --- confirmation --- */ .hero-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 0; text-align: center; } .hero-state .ring { width: 68px; height: 68px; border-radius: 34px; background: rgba(0,181,171,.15); border: 1.5px solid var(--teal-bright); color: var(--teal-bright); display: flex; align-items: center; justify-content: center; } .hero-state.cancelled .ring { background: rgba(246,141,46,.13); border-color: var(--amber); color: var(--amber); } .hero-state h1 { font: 700 25px/1.15 var(--serif); margin: 0; } .hero-state .code { display: flex; align-items: center; gap: 8px; } .hero-state .code span { font-size: 13px; color: var(--muted); } .hero-state .code b { font-size: 17px; font-weight: 700; letter-spacing: 2px; color: var(--mint); } .panel-card { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); padding: 16px; } .pickup-head { display: flex; flex-direction: column; gap: 3px; } .eyebrow-sm { font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--muted); } .pickup-head strong { font: 700 21px/1.2 var(--serif); } .pickup-head small { font-size: 12px; color: var(--muted); } .timeline { list-style: none; margin: 0; padding: 0; } .timeline li { display: flex; gap: 12px; padding-bottom: 16px; position: relative; } .timeline li.last { padding-bottom: 0; } .timeline li:not(.last)::before { content: ''; position: absolute; left: 7px; top: 17px; bottom: 2px; width: 1.5px; background: var(--line-strong); } .timeline .dot { width: 15px; height: 15px; border-radius: 8px; flex-shrink: 0; border: 1.5px solid #4A433E; margin-top: 2px; } .timeline li.done .dot { background: var(--teal-bright); border-color: var(--teal-bright); color: var(--on-teal); display: flex; align-items: center; justify-content: center; } .timeline strong { display: block; font-size: 13px; font-weight: 600; } .timeline small { font-size: 11px; color: var(--muted); line-height: 1.4; } .timeline li:not(.done) strong { color: var(--body); } .recap { display: flex; gap: 10px; padding: 3px 0; } .recap .qty { font-size: 12px; color: var(--faint); width: 20px; flex-shrink: 0; } .recap .what { flex: 1; font-size: 12px; color: var(--body); line-height: 1.4; } .recap em { color: var(--mint); font-style: normal; } /* --- forms --- */ .formfield { display: flex; flex-direction: column; gap: 6px; } .formfield input { min-height: 56px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); padding: 0 15px; width: 100%; font-size: 16px; color: var(--cream); } .formfield input::placeholder { color: var(--faint); } .formfield input:focus { border-color: var(--teal-bright); outline: none; } .fielderror { margin: 0; font-size: 12px; color: var(--amber); } .formfield .hint { margin: 0; } .divider { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 11px; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); } .linkbtn { background: none; border: 0; padding: 0; color: var(--mint); font-size: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; } .accountlink { display: flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: 22px; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--muted); } .avatar { width: var(--tap); height: var(--tap); border-radius: 22px; background: var(--teal); color: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; } /* --- discount code + verify --- */ .qrcard { width: 268px; border-radius: 26px; background: var(--cream); padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .qrcard img { display: block; width: 220px; height: 220px; image-rendering: pixelated; } .qrrule { width: 100%; height: 1px; background: rgba(23,20,18,.12); } .qrtier { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #8A7F6E; } .qrpercent { font: 700 28px/1 var(--serif); color: var(--ink); margin-top: 3px; } .ttlbar { width: 180px; height: 4px; border-radius: 2px; background: var(--raised); overflow: hidden; } .ttlbar > div { height: 4px; border-radius: 2px; background: var(--teal-bright); width: 100%; transition: width 1s linear; } .verify { padding: 40px 24px 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .verify.good { background: var(--teal-bright); color: var(--on-teal); } .verify.bad { background: var(--amber); color: #221709; } .verify .mark { width: 84px; height: 84px; border-radius: 42px; background: rgba(16,32,30,.14); display: flex; align-items: center; justify-content: center; } .verify .word { font-size: 32px; font-weight: 700; letter-spacing: 2px; text-align: center; } .verify .when { font-size: 14px; font-weight: 600; opacity: .7; } .kv { min-height: 50px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); } .kv span { flex: 1; font-size: 13px; color: var(--muted); } .kv b { font-size: 13px; font-weight: 600; } /* --- the discount card: the only place orange leads --- */ .discount-card { border-radius: 18px; padding: 18px; background: linear-gradient(140deg, #35251A 0%, #241B16 100%); border: 1px solid rgba(246,141,46,.35); } .discount-card .tier { display: block; font-size: 10px; font-weight: 700; letter-spacing: .8px; color: var(--amber); } .discount-card .pct { display: block; font: 700 27px/1 var(--serif); margin: 5px 0; } .discount-card .blurb { display: block; font-size: 12px; color: #C0AC9A; line-height: 1.4; } /* --- grouped optional fields (birthday, consent) --- A bare