/* 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: an error, a closed cafe or a cancelled order is weight, a border and its wording. cafe_order/tests_review_frontend.py fails the build if it creeps back. */ :root { --ink: #171412; --surface: #1E1A18; --surface-2: #211D1A; --raised: #262220; --line: #2C2724; --line-strong: #37312D; --cream: #FFF9EF; --body: #C9C0B7; --muted: #9E958C; /* Was #7E756D: 4.06:1 on --ink and 3.49 on --raised, under AA for the 11px hints, the placeholders and the 9px slot label it colours. Same hue, the smallest lift that clears 4.5:1 on all four grounds (4.53 on --raised, the lightest). --ghost stays low on purpose: it only marks slots that cannot be chosen. */ --faint: #918880; --ghost: #5C5550; /* The edge of an unticked checkbox or radio, which is all there is of the control until it is ticked. Was #4A433E: 1.62:1 on --raised, under WCAG 1.4.11's 3:1 for a control's boundary. Same hue and saturation, the smallest lift that clears 3:1 on all four grounds (3.04 on --raised, the lightest). */ --edge: #766B63; --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 */ --band: #1A1715; /* the tab bar's ground, a step under --surface */ --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 menu's header is held at --hdr-h by .top.pinned below, not by 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 beside "Open until 4:00 PM". */ .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); } /* --- the menu's frozen header --------------------------------------- Everything that says WHERE you are stays put while the list moves under it: the wordmark and opening time, the category strip, and the name and count of the category you are in. A long drinks list otherwise scrolls the chips off the top, and switching category means scrolling all the way back up first -- which is the whole reason the strip is there. Three separate sticky elements rather than one wrapper, because what sits between them -- an open order, a closed cafe -- is news rather than navigation and is meant to scroll away. Those rows pass behind the pinned ones, which is why each pinned row carries an opaque --ink background instead of letting the body show through. The offsets are the two rows' own heights, and both are fixed rather than content-driven: .top is held at 72px (it was 14px + a 44px account control + 14px, and the offsets below still count on that), and .chips is a 44px chip plus its 14px bottom padding. A taller logo (anything past --tap) or a chip that grows has to be reflected here -- the shortfall would show as a stripe of moving list wedged between two pinned rows. */ :root { --hdr-h: 72px; --chips-h: 58px; } .top.pinned, .chips, .section-head { position: -webkit-sticky; position: sticky; background: var(--ink); } /* Only where the class is applied: the same header is on the cart, checkout and confirmation pages, which are short forms with nothing to scroll past. Under .dock (20) so the cart bar still wins. */ .top.pinned { top: 0; z-index: 12; min-height: var(--hdr-h); } /* "Open until 4:00 PM" where the account control used to be: the menu says when the cafe stops taking orders, and the closed strip below says the rest. */ .open-until { margin-left: auto; font-size: 13px; color: var(--body); text-align: right; } .chips { top: var(--hdr-h); z-index: 11; } .section-head { top: calc(var(--hdr-h) + var(--chips-h)); z-index: 10; } /* A phone on its side has about 375px of height. Pinning 163px of header to the top of that, with the cart dock taking another 76 at the bottom, leaves less list than header. Below this, nothing is pinned. */ @media (max-height: 520px) { .top.pinned, .chips, .section-head { position: static; } } .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 var(--edge); } .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); } /* An input hidden with opacity:0 still takes keyboard focus, and the global :focus-visible ring is drawn on something nobody can see. So every such pattern here (.opt, .pill-choice, .consent) hands the ring to the element drawn in the input's place. Teal, never orange. */ .opt input:focus-visible + .box { outline: 2px solid var(--teal-bright); outline-offset: 2px; } .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); } /* Sans, not the serif display face. The label beside it is sans, so the pair read as two different typefaces arguing rather than one figure. */ .totals .grand span:last-child { font-size: 22px; font-weight: 700; color: var(--cream); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .totals .disc span { color: var(--amber) !important; } /* 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; } /* The neutral box is the default because only .error and .success were ever styled, and an info or warning message rendered as bare text. */ .msg { border-radius: var(--r-sm); padding: 11px 14px; font-size: 13px; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--body); } /* Something went wrong, said without orange: cream at weight and a rule down the leading edge, the way the register and Manager mark theirs. The wording does the rest. */ .msg.error, .msg.warning { color: var(--cream); font-weight: 600; border-left: 3px solid var(--body); } .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; } /* margin-bottom because on checkout this sits directly above the cart summary and read as one merged block on a phone. Every checkout blocker and the payment error use this box, and so do plain asides ("Slots fill fast"). It was orange, which spent the discount's colour on bad news. It stands out by a leading rule and cream text instead, and the wording says whether it is a problem. */ .notice { margin-bottom: 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line-strong); border-left: 3px solid var(--body); padding: 13px 14px; display: flex; gap: 11px; font-size: 12px; color: var(--cream); line-height: 1.45; } .notice .ico { color: var(--cream); flex-shrink: 0; margin-top: 1px; display: flex; } /* The closed notice on the menu, in the row the old "Pickup time not set" used to occupy. It has to out-read the ordinary context row, because it is telling somebody not to bother rather than describing state. That is the leading rule and a heavier headline, not orange. */ .context-closed { border-left: 3px solid var(--body); align-items: flex-start; padding: 12px 14px; } .context-closed .ico { color: var(--cream); display: flex; margin-top: 1px; } .context-closed strong { color: var(--cream); font-weight: 700; } .context-closed .hours { font-size: 12px; } /* Apple Pay sits above the card fields with a divider between, the conventional order: the one-tap route first, typing as the fallback. */ /* Height is CAPPED, not just floored. Clover mounts a cross-origin iframe and we cannot see inside it; on a browser where the wallet is unavailable it mounted something several hundred pixels tall and entirely blank, which pushed the card fields off the screen. A wallet button is ~48px in every design guideline either vendor publishes, so anything taller is a failure, not a big button. */ /* Clover exposes no styling for the Apple Pay button itself -- its appearance is fixed, and only this container is ours. The button is black, which on a near-black surface reads as a hole rather than a control, so the container carries the edge instead. Not a modification of the button: Apple's guidelines are about the asset, not what sits behind it. Height is CAPPED as well as floored. Clover's default is 40px with a 64px maximum, and on a browser where the wallet was unavailable it once mounted several hundred pixels of nothing and pushed the card fields off the screen. 48 clears the 44px touch target and nothing taller is legitimate. Full width is a choice, not a requirement -- Apple sets a ~100pt minimum and no maximum. It matches the card fields and the Pay button below, which is the whole argument for it. */ #payment-request-button, #googlepay-button { max-height: 48px; overflow: hidden; margin-bottom: 4px; border: 1px solid var(--line-strong); border-radius: 8px; box-sizing: border-box; } /* An iframe is inline by default, so it sits on a text baseline and leaves room underneath for descenders -- a few pixels of container visible below the button, which read as a misaligned border. display:block takes it out of inline layout entirely. */ #payment-request-button iframe, #googlepay-button iframe { display: block; width: 100%; } /* Google mounts a 150px iframe and, left alone, centres a ~48px button in it -- so the cap above showed 48px of empty chrome and nothing else, which is the whole history of this button looking like a black hole. An explicit height gives buttonSizeMode:'fill' something to fill, and the iframe is pinned to it so the button and its frame stay the same size. Apple is deliberately not included: its button has a fixed appearance we do not control and it already renders correctly. */ #googlepay-button { height: 48px; } #googlepay-button iframe { height: 100%; } #payment-request-button:empty, #googlepay-button:empty { display: none; } /* Visible but untappable until the details above are filled in. Hiding it instead meant a customer who wanted Apple Pay could not find it and had no way to learn what would reveal it. */ .wallet-locked { opacity: .4; pointer-events: none; } #wallet-hint { margin: 6px 0 0; } /* Google's brand guidelines set a 90x40 floor. Ours is 44 for the touch target, which clears it. */ #googlepay-button { min-width: 90px; } .paydivider { display: flex; align-items: center; gap: 12px; margin: 14px 0 16px; color: var(--faint); font-size: 12px; } .paydivider::before, .paydivider::after { content: ''; flex: 1; height: 1px; background: var(--line); } /* A saved order, or a past one, with its action beside it. The row is not a link: the whole point is the button, and a row that is both a link and a form is a row where a mis-tap orders something. */ .fav { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; min-height: var(--tap); padding: 10px 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); } .fav .grow { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .fav strong { font-size: 13px; font-weight: 600; } .fav small { font-size: 11px; color: var(--muted); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fav form { display: flex; } .fav .fav-go { min-height: 36px; padding: 0 14px; font-size: 13px; } /* Opening hours, rendered from BusinessHours rows rather than written out as prose in a template (Decision R). Used on the closed page and inside the checkout notice, so it has to read well on both. */ .hours { list-style: none; margin: 8px 0 0; padding: 0; } .hours li { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; } .hours-days { color: var(--muted); } .hours-time { color: var(--body); white-space: nowrap; } /* A one-off closure has to out-read the ordinary week sitting above it — the whole point is that today is not the usual Monday. Cream rather than --amber, which is reserved for discounts. */ .hours-exceptions { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); } .hours-exceptions .hours-days, .hours-exceptions .hours-time { color: var(--cream); } /* --- 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; } /* Inset: the pills sit 4px apart inside their track, and a ring drawn outside would run into the neighbouring pill and the track's edge. */ .pill-choice input:focus-visible + label { outline: 2px solid var(--teal-bright); outline-offset: -2px; } /* Three methods share the width two used to have. The labels are already shortened in the template; this buys the rest, and on a narrow phone the icons go rather than let a label wrap inside a 52px-tall pill. */ .pill-choice.three-up label { font-size: 12px; gap: 5px; } @media (max-width: 400px) { .pill-choice.three-up label { gap: 0; } .pill-choice.three-up label svg { display: none; } } /* --- 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; } /* Refunded, unconfirmed or declined: not the teal of an order that went through, and not orange either. A heavier neutral ring, and the headline under it says which. */ .hero-state.cancelled .ring, .hero-state.pending .ring, .hero-state.failed .ring { background: var(--raised); border: 2.5px solid var(--body); color: var(--cream); } .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); } /* Not a control, so not --edge: a step not reached yet keeps a ring as quiet as the line joining it, and a reached one says so with a fill and a tick beside its words. */ .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); } /* Django marks a field that failed with aria-invalid; the border says so to somebody who cannot hear it. Before :focus, so focus still wins. */ .formfield input[aria-invalid='true'] { border-color: var(--body); } .formfield input:focus { border-color: var(--teal-bright); outline: none; } /* Weight and a rule, the same mark as .msg.error. Was orange. */ .fielderror { margin: 0; font-size: 12px; font-weight: 600; color: var(--cream); border-left: 3px solid var(--body); padding-left: 8px; } .formfield .hint { margin: 0; } /* Django's password rules arrive as a