/* ═══════════════════════════════════════════════════════════════════ cobreOS — the public side's chassis. The staff tools have theme.css; this is its counterpart for the pages a customer sees. The two share a shape language and nothing else: · concentric radii — a child rounds one step tighter than its parent · no glass — depth is a hairline and a soft shadow, never a blur · capsules for anything that isn't a container What they deliberately do NOT share is identity. Colour and typeface here come from the restaurant, injected per tenant as --sf-* by functions/_middleware.js (see _lib/brandtheme.js). This file only ever reads those tokens — it must never name a colour of its own, or every cobreOS restaurant ends up looking like the same restaurant. Served by the middleware, prepended to so a page's own CSS still wins where it needs to. ══════════════════════════════════════════════════════════════════ */ :root { /* Softer than the operator side: a storefront is read at arm's length on a phone, not scanned across a counter. */ --sr-card: 22px; /* a panel, a section */ --sr-card-lg: 28px; /* a hero, a feature block */ --sr-row: 16px; /* a row inset into a card */ --sr-inset: 12px; /* a field, a tight tile */ --sr-pill: 999px; --sr-sh: 0 1px 2px rgba(30, 20, 10, 0.05), 0 8px 24px rgba(30, 20, 10, 0.05); --sr-sh-lift: 0 2px 4px rgba(30, 20, 10, 0.06), 0 16px 40px rgba(30, 20, 10, 0.09); --sr-hairline: rgba(30, 20, 10, 0.09); /* One measure for running text, so the legal pages and the marketing pages break lines in the same place. */ --sr-measure: 68ch; --sr-page: 1100px; } /* ── Base ──────────────────────────────────────────────────────────── */ .sf-body { background: var(--sf-canvas, #FAF8F5); color: var(--sf-ink, #2C1810); font-family: var(--sf-body, 'Nunito', sans-serif); -webkit-font-smoothing: antialiased; } .sf-wrap { max-width: var(--sr-page); margin: 0 auto; padding: 0 20px; } .sf-wrap--text { max-width: var(--sr-measure); } .sf-display { font-family: var(--sf-display, 'Fredoka One', sans-serif); font-weight: 700; } /* ── Card ──────────────────────────────────────────────────────────── */ .sf-card { background: #fff; border: 1px solid var(--sr-hairline); border-radius: var(--sr-card); box-shadow: var(--sr-sh); padding: 22px; } .sf-card--lg { border-radius: var(--sr-card-lg); padding: 28px; } /* A card that holds its own rows: the rows round one step tighter and the padding shrinks so they read as inset tiles. */ .sf-card--list { padding: 10px; } .sf-card--list > * { border-radius: var(--sr-row); } /* A card you can press — the whole thing is the target. */ .sf-card--action { display: block; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; } .sf-card--action:hover { transform: translateY(-2px); box-shadow: var(--sr-sh-lift); } .sf-card--action:active { transform: translateY(0); } /* ── Controls ──────────────────────────────────────────────────────── */ .sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; /* a thumb, not a cursor */ padding: 14px 26px; border: none; border-radius: var(--sr-pill); background: var(--sf-accent, #F5A623); color: var(--sf-on-accent, #2C1810); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; transition: filter .15s, transform .06s; } .sf-btn:hover { filter: brightness(1.06); } .sf-btn:active { transform: scale(0.98); } .sf-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; } .sf-btn--quiet { background: transparent; border: 1px solid var(--sr-hairline); color: var(--sf-ink, #2C1810); } .sf-btn--onHeader { background: var(--sf-accent, #F5A623); color: var(--sf-on-accent, #2C1810); } .sf-btn--block { width: 100%; } /* Selectable pill — a time slot, a party size, a filter. */ .sf-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 18px; border: 1px solid var(--sr-hairline); border-radius: var(--sr-pill); background: #fff; color: var(--sf-ink, #2C1810); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .sf-pill:hover { border-color: var(--sf-accent, #F5A623); } .sf-pill[aria-pressed="true"], .sf-pill.is-on { background: var(--sf-accent, #F5A623); border-color: var(--sf-accent, #F5A623); color: var(--sf-on-accent, #2C1810); } /* A quiet status marker — "Open now", "Closed", "Confirmed". */ .sf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--sr-pill); background: var(--sf-accent-soft, #FFF8E6); color: var(--sf-ink, #2C1810); font-size: 12px; font-weight: 700; } /* ── Fields ────────────────────────────────────────────────────────── */ .sf-field { width: 100%; min-height: 48px; background: #fff; border: 1px solid var(--sr-hairline); border-radius: var(--sr-inset); padding: 13px 16px; color: var(--sf-ink, #2C1810); font-family: inherit; /* 16px keeps iOS from zooming the page when a field takes focus. */ font-size: 16px; font-weight: 500; outline: none; transition: border-color .15s; } .sf-field:focus { border-color: var(--sf-accent, #F5A623); } .sf-field::placeholder { color: rgba(30, 20, 10, 0.38); } .sf-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; opacity: .55; margin-bottom: 7px; } /* ── Header ────────────────────────────────────────────────────────── */ /* The restaurant's colour, full-bleed. This is the one place the brand gets to fill the screen rather than accent it. */ .sf-header { background: var(--sf-header, #2C1810); color: var(--sf-on-header, #FFFFFF); padding: 32px 20px calc(32px + env(safe-area-inset-top, 0px)); text-align: center; } .sf-header a { color: var(--sf-accent-on-header, #F5A623); } /* ── Running text ──────────────────────────────────────────────────── */ /* The legal pages exist to be read by a carrier reviewer and by a customer who is worried about something. Both deserve a real measure. */ .sf-prose { font-size: 16px; line-height: 1.7; } .sf-prose h2 { font-family: var(--sf-display, 'Fredoka One', sans-serif); font-size: 22px; font-weight: 700; margin: 36px 0 10px; } .sf-prose h3 { font-size: 16px; font-weight: 700; margin: 24px 0 6px; } .sf-prose p, .sf-prose li { margin-bottom: 12px; } .sf-prose ul, .sf-prose ol { padding-left: 22px; } .sf-prose a { color: var(--sf-accent, #F5A623); font-weight: 700; } /* ── Shared behaviour ──────────────────────────────────────────────── */ .sf-focus:focus-visible, .sf-btn:focus-visible, .sf-pill:focus-visible, .sf-field:focus-visible { outline: 2px solid var(--sf-accent, #F5A623); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .sf-card--action, .sf-btn, .sf-pill { transition: none; } .sf-card--action:hover { transform: none; } }