/* Selfish POS — brand tokens. THE SINGLE SOURCE. (c) Demetri Gregorakis / SELFISH POS Lifted verbatim from brand/brand-guidelines.md v1.0 (Sept 2026). If this file and brand/guidelines-source.html disagree, THE HTML WINS. Every surface imports this. Nothing downstream declares a colour, a face or a measure. A hex code found elsewhere in this system is a bug, not a variation — the only exceptions are a and an inline SVG favicon, neither of which can read a variable. */ @import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@800&family=Instrument+Sans:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root{ /* ── Colour. SIX TOKENS. Nothing else exists. ─────────────────────────── */ --ink: #252821; /* text, borders, dark bands */ --sage: #747F64; /* THE signature. Primary buttons, active, arrow 2 */ --sage-light: #A6AF97; /* arrow 3 and tonal steps ON INK ONLY */ --paper: #F0F3ED; /* alternating band background */ --white: #FFFFFF; /* default ground */ --alert: #B03A28; /* SEMANTIC ONLY — errors, danger, 86'd */ --link: #5D6A50; /* link ink; sage carries the underline */ /* SAGE-LIGHT IS RESTRICTED. It never touches a white or paper ground — it is too close to the background and the element disappears. Two jobs only: the third arrow, and tonal steps on ink. Never type, never a rule, never an icon, never a button, never a fill on white or paper. No gradients. No tints outside this set. No second accent. Red is never decorative. Body copy is NEVER sage on white. */ --rule: 2px solid var(--ink); /* the single container device */ --hairline: 1px solid #E0E4DB; /* ── Type. Three faces, fixed jobs. ───────────────────────────────────── */ /* League Spartan 800 — logotype and EVERY heading. Always uppercase, letter-spacing .07em. NEVER body copy. Instrument Sans — everything read as prose. IBM Plex Mono — money, counts, timestamps, ticket numbers, labels. */ --font-display: 'League Spartan', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --track-logo: .07em; /* League Spartan logotype + headings */ --track-head: .05em; /* display and heading scale */ --track-label:.14em; /* mono uppercase labels */ --track-wide: .18em; /* ── Space ────────────────────────────────────────────────────────────── */ --s1: 8px; --s2:14px; --s3:20px; --s4:28px; --s5:40px; --s6:56px; --s7:72px; --s8:96px; --page: 1060px; --measure: 68ch; /* max line length. Hard rule. */ --tap: 48px; } /* ── The type scale ─────────────────────────────────────────────────────── */ .t-display{font-family:var(--font-display);font-weight:800;text-transform:uppercase; font-size:clamp(40px,7vw,56px);line-height:1;letter-spacing:var(--track-head)} .t-heading{font-family:var(--font-display);font-weight:800;text-transform:uppercase; font-size:26px;line-height:32px;letter-spacing:var(--track-head)} .t-subhead{font-size:17px;line-height:26px;font-weight:600} .t-body{font-size:15px;line-height:24px} .t-label{font-family:var(--font-mono);font-size:11px;line-height:18px; text-transform:uppercase;letter-spacing:var(--track-label)} /* ── The mark. No image files. ──────────────────────────────────────────── */ /* Three chevrons stepping forward, each lighter than the last. Remove one and the rhythm breaks. The lighter leading arrows imply motion WITHOUT a gradient, blur or shadow — that is the whole trick, and why it will not date. Scale by changing width/height ONLY; clip-path and gap ratio never change. Minimum width 90px digital. Below that, the app icon. */ .mark{display:flex; gap:3px} /* gap = arrow width ÷ 4 */ .arrow{width:13px; height:44px; clip-path:polygon(0 0,100% 50%,0 100%,0 68%,52% 50%,0 32%)} .arrow:nth-child(1){background:var(--ink)} .arrow:nth-child(2){background:var(--sage)} .arrow:nth-child(3){background:var(--sage-light)} /* Reversed, for ink grounds */ .mark--rev .arrow:nth-child(1){background:var(--white)} .mark--rev .arrow:nth-child(2){background:var(--sage)} .mark--rev .arrow:nth-child(3){background:var(--sage-light)} /* ── Motion. ONE idea: a quick pulse forward, then stillness. ───────────── */ /* Service is fast in bursts and calm between; the brand moves the same way. Nothing bounces. Nothing eases longer than 200ms on an entrance. */ @keyframes advance{ 0%{transform:translateX(0)} 9%{transform:translateX(9px)} 26%,100%{transform:translateX(0)} } .mark--live .arrow{animation:advance 1.8s cubic-bezier(.33,0,.15,1) infinite} .mark--live .arrow:nth-child(2){animation-delay:.05s} .mark--live .arrow:nth-child(3){animation-delay:.1s} @keyframes enter{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){ *{animation:none !important} } /* ── Layout: full-bleed band, centred column ────────────────────────────── */ .band{background:var(--white)} .band--alt{background:var(--paper)} .band--ink{background:var(--ink); color:var(--white)} .band > .inner{max-width:var(--page); margin:0 auto; padding:var(--s6) var(--s5)} .grid{display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} /* ── The card — THE ONLY CONTAINER ──────────────────────────────────────── */ /* Depth comes from the border and the band behind it. No elevation scale, no blur, no translucency. A card inside a card is a layout mistake — use a hairline divider. */ .card{background:var(--white); border:var(--rule); border-radius:0; padding:var(--s4); box-shadow:none} /* ── Buttons and links ──────────────────────────────────────────────────── */ .btn{background:var(--sage); color:var(--white); padding:12px 20px; font-weight:600; border:0; border-radius:0; font-family:var(--font-body); font-size:15px; cursor:pointer; display:inline-block; text-decoration:none; min-height:var(--tap); line-height:24px} .btn:hover,.btn:focus-visible{background:var(--ink)} .btn--alt{background:none; border:var(--rule); padding:10px 18px; color:var(--ink)} a{color:var(--link); text-decoration:none; border-bottom:2px solid var(--sage)} a:hover,a:focus-visible{color:var(--ink)}