/* One system, three surfaces. The direction is editorial: photography and air. A product photograph does the work that icons and colour usually pretend to do, hairlines separate things instead of boxes, and white space is the main material. The customer screen is read standing up at a metre; the staff consoles are read on a tablet held close. `data-surface` on swaps the scale, not the system. Three rules this file exists to hold: * A card must earn its border by needing elevation. Almost nothing does. Rules and space separate more quietly and survive being looked at from a distance. * Colour carries meaning or it is absent. Emerald means "go" — the pay button and an approval. Amber means a person is needed. Rose means the law or the money says no. There is no fourth colour. * The number a person acts on is the largest thing on screen: the total for a customer, the age for an attendant. Everything else steps down sharply. */ :root { /* Neutrals, tinted a few thousandths toward the brand hue so surfaces and accent feel related rather than assembled. Never pure white or black. */ --bg: oklch(97.6% 0.004 162); --surface: oklch(99.4% 0.002 162); --surface-2: oklch(96.2% 0.006 162); --surface-3: oklch(93.4% 0.008 162); --line: oklch(90.5% 0.007 162); --line-2: oklch(83% 0.011 162); --ink: oklch(23% 0.014 162); --ink-2: oklch(48% 0.014 162); --ink-3: oklch(64% 0.012 162); /* The single accent. */ --accent: oklch(48% 0.098 162); --accent-hi: oklch(41.5% 0.09 162); --accent-ink: oklch(99% 0.01 162); --accent-soft: oklch(95.5% 0.026 162); --accent-line: oklch(85% 0.055 162); /* A person is needed. */ --warn: oklch(52% 0.105 72); --warn-soft: oklch(96.5% 0.032 82); --warn-line: oklch(85% 0.075 80); /* The law, or the money, says no. */ --stop: oklch(48% 0.155 27); --stop-soft: oklch(96% 0.024 27); --stop-line: oklch(84% 0.07 27); /* 4pt scale, named for what it does rather than how many pixels it is. */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; --space-4xl: 64px; --space-5xl: 96px; --r-sm: 8px; --r: 14px; --r-lg: 20px; --r-xl: 28px; /* Tinted toward the surface hue rather than neutral black. */ --shadow-1: 0 1px 2px oklch(23% 0.014 162 / .05); --shadow-2: 0 16px 34px -14px oklch(23% 0.014 162 / .16); --shadow-3: 0 40px 80px -26px oklch(23% 0.014 162 / .3); /* Exponential deceleration: things arrive and settle, they do not bounce. */ --ease: cubic-bezier(.22, 1, .36, 1); --dur: .26s; --font: 'Golos Text', system-ui, sans-serif; --font-display: 'Unbounded', 'Golos Text', system-ui, sans-serif; /* Per-surface scale, overridden below. */ --step: 1.0625rem; --tap: 48px; } /* The customer screen: read standing, at a metre, once. */ body[data-surface="kiosk"] { --step: 1.125rem; --tap: 60px; } /* The staff consoles: read close, all shift, a hundred times. */ body[data-surface="console"] { --step: 0.9375rem; --tap: 42px; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 400 var(--step)/1.5 var(--font); font-feature-settings: "ss01"; -webkit-font-smoothing: antialiased; } body[data-surface="kiosk"] { /* A panel, not a page. The mouse cursor is deliberately left alone: hiding it breaks the machine the moment anyone plugs a mouse in. */ -webkit-user-select: none; user-select: none; overflow: hidden; } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.12; } p { margin: 0; } /* Display type is for the few moments that carry the screen: the greeting, the total, the age. Everywhere else would be shouting. */ .display { font-family: var(--font-display); font-weight: 700; letter-spacing: -.035em; } .num { font-variant-numeric: tabular-nums; } .eyebrow { font-size: .6875rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); } .prose { max-width: 68ch; line-height: 1.6; color: var(--ink-2); } /* --- icons ---------------------------------------------------------------- */ .i { width: 1.15em; height: 1.15em; flex: none; display: block; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; } .i.lg { width: 1.5em; height: 1.5em; } /* --- buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: var(--tap); padding: 0 var(--space-lg); border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .12s var(--ease), color var(--dur) var(--ease); } .btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line-2); } .btn:active:not(:disabled) { transform: scale(.985); } .btn:disabled { opacity: .38; cursor: not-allowed; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } .btn.primary:hover:not(:disabled) { background: var(--accent-hi); border-color: var(--accent-hi); } .btn.ink { background: var(--ink); border-color: var(--ink); color: var(--surface); } .btn.ink:hover:not(:disabled) { background: oklch(30% 0.014 162); } .btn.stop { background: var(--stop); border-color: var(--stop); color: #fff; font-weight: 600; } .btn.stop:hover:not(:disabled) { background: oklch(42% 0.155 27); } .btn.quiet { background: none; border-color: transparent; color: var(--ink-2); } .btn.quiet:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); } .btn.big { min-height: calc(var(--tap) + 16px); font-size: 1.1em; border-radius: var(--r-lg); } .btn.wide { width: 100%; } .btn.left { justify-content: flex-start; text-align: left; } /* --- tags ----------------------------------------------------------------- */ .tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink-2); font-size: .78em; font-weight: 500; white-space: nowrap; } .tag.age { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); font-variant-numeric: tabular-nums; font-weight: 600; } .tag.go { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-hi); } .tag.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); } .tag.stop { background: var(--stop-soft); border-color: var(--stop-line); color: var(--stop); } /* A status dot that breathes, so a live screen never looks frozen. */ .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: breathe 2.8s var(--ease) infinite; } .dot.warn { background: oklch(65% 0.13 72); } .dot.stop { background: var(--stop); } .dot.idle { background: var(--ink-3); animation: none; } @keyframes breathe { 50% { opacity: .35; } } /* --- notices -------------------------------------------------------------- */ /* A tinted block with a full hairline border, not a coloured stripe down one edge. The stripe is the most worn-out gesture in admin interfaces and it never reads as a decision — a tint that covers the whole message does. */ .notice { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-md) var(--space-lg); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface-2); line-height: 1.45; } .notice .i { margin-top: .2em; } .notice.info, .notice.success { background: var(--accent-soft); border-color: var(--accent-line); color: oklch(35% 0.07 162); } .notice.warn { background: var(--warn-soft); border-color: var(--warn-line); color: oklch(40% 0.09 72); } .notice.error { background: var(--stop-soft); border-color: var(--stop-line); color: oklch(40% 0.13 27); } /* --- surfaces ------------------------------------------------------------- */ .overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--space-2xl); background: oklch(23% 0.014 162 / .5); animation: fade .2s var(--ease); } @keyframes fade { from { opacity: 0; } } .sheet { width: min(100%, 680px); max-height: 100%; overflow: auto; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-3); padding: var(--space-2xl); animation: rise .34s var(--ease); } .sheet.wide { width: min(100%, 1060px); } @keyframes rise { from { opacity: 0; transform: translateY(12px); } } /* --- forms ---------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: var(--space-sm); } label { font-size: .8125rem; font-weight: 600; color: var(--ink-2); } .help { font-size: .78rem; color: var(--ink-3); } input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 12px; width: 100%; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--accent); } /* --- loading -------------------------------------------------------------- */ .skel { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 45%, var(--surface-2) 90%); background-size: 300% 100%; animation: shimmer 1.6s linear infinite; } .skel.line { height: 13px; } .skel.row { height: 44px; border-radius: var(--r); } .skel.tile { height: 190px; border-radius: var(--r-lg); } @keyframes shimmer { from { background-position: 120% 0; } to { background-position: -80% 0; } } /* --- staggered reveal ----------------------------------------------------- */ .enter { animation: enter .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); } @keyframes enter { from { opacity: 0; transform: translateY(6px); } } /* --- product imagery ------------------------------------------------------ */ /* A photograph where one exists; a monogram in the shelf group's colour where one does not. Never a pictogram pretending to be the product — a drawing of a generic bottle next to a real photograph of bread reads as a missing file, and that is exactly what it is. */ .shot { position: relative; overflow: hidden; border-radius: var(--r); background: var(--surface-2); flex: none; display: grid; place-items: center; } .shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .shot .mono { font-family: var(--font-display); font-weight: 700; letter-spacing: -.04em; font-size: .34em; } /* --- utility -------------------------------------------------------------- */ .row { display: flex; align-items: center; gap: var(--space-md); } .spacer { flex: 1; } .muted { color: var(--ink-2); } .dim { color: var(--ink-3); } .stack { display: flex; flex-direction: column; gap: var(--space-md); } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } .scroll-x { overflow-x: auto; } .offline-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: var(--space-md); text-align: center; background: var(--stop); color: #fff; font-weight: 600; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }