/* * Site-wide styles. Palette is the "Classic Bakery" theme from the iOS * sibling app (BakeryDemo1/ColorTheme.swift). Keep the look warm-earth- * tones consistent with the iOS app rather than introducing a separate * web identity. */ :root { --color-primary: #8B4513; /* Rich Brown */ --color-primary-hover: #6B340C; /* darker brown for :hover */ --color-secondary: #D2B48C; /* Tan */ --color-background: #FFF8DC; /* Cornsilk */ --color-accent: #F4A460; /* Sandy Brown */ --color-text: #2F1B14; /* Dark Brown */ --color-text-muted: #6B4A3A; /* Muted brown for less important text */ --color-card: #FFFFFF; --color-border: rgba(139, 69, 19, 0.18); --color-border-strong: rgba(139, 69, 19, 0.42); --color-notice-bg: #E8F4EA; --color-notice-text: #2C5F35; --color-alert-bg: #F8E1DA; --color-alert-text: #8A2B16; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --radius: 6px; --shadow-card: 0 1px 2px rgba(47, 27, 20, 0.06), 0 4px 12px rgba(47, 27, 20, 0.04); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--color-background); color: var(--color-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; } body > nav, body > .flash, body > h1, body > h2, body > section, body > p, body > table, body > form, body > ul, body > dl, body > div { /* Anything rendered straight into by yield -- give it the same * page-container treatment without forcing every view to wrap itself. */ max-width: 960px; margin-left: auto; margin-right: auto; padding-left: var(--space-4); padding-right: var(--space-4); } body > nav { background: var(--color-primary); color: var(--color-background); max-width: none; margin: 0 0 var(--space-6) 0; padding: var(--space-3) var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } body > nav a { color: var(--color-background); text-decoration: none; font-weight: 500; } body > nav a:hover { text-decoration: underline; } body > nav span { color: var(--color-secondary); font-size: 0.9rem; margin-left: auto; /* push email + sign-out to the right */ } /* Locale switcher — small, top-right, visible regardless of auth state. */ .locale-switcher { text-align: right; font-size: 0.85rem; padding: 0 var(--space-4); margin-bottom: var(--space-3); max-width: 960px; margin-left: auto; margin-right: auto; } .locale-switcher a, .locale-switcher strong { margin-left: var(--space-2); color: var(--color-text-muted); text-decoration: none; } .locale-switcher strong { color: var(--color-primary); } .locale-switcher a:hover { color: var(--color-primary); text-decoration: underline; } /* ---- Headings ---------------------------------------------------------- */ h1, h2, h3 { color: var(--color-primary); font-weight: 600; line-height: 1.25; } h1 { font-size: 1.75rem; margin-top: var(--space-2); } h2 { font-size: 1.25rem; margin-top: var(--space-8); } h3 { font-size: 1.05rem; margin-top: var(--space-6); } /* ---- Links ------------------------------------------------------------- */ a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--color-primary-hover); } /* ---- Flash messages ---------------------------------------------------- */ .flash { border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); border: 1px solid transparent; } .flash-notice { background: var(--color-notice-bg); color: var(--color-notice-text); border-color: rgba(44, 95, 53, 0.25); } .flash-alert { background: var(--color-alert-bg); color: var(--color-alert-text); border-color: rgba(138, 43, 22, 0.30); } /* ---- Error block (rendered alongside forms on validation failure) ------ */ .errors { background: var(--color-alert-bg); color: var(--color-alert-text); border: 1px solid rgba(138, 43, 22, 0.3); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); } .errors p { margin: 0 0 var(--space-2) 0; padding: 0; } .errors ul { margin: 0; padding-left: var(--space-6); } /* ---- Forms ------------------------------------------------------------- */ form fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); margin: 0 0 var(--space-4) 0; background: var(--color-card); } form fieldset legend { padding: 0 var(--space-2); font-weight: 600; color: var(--color-primary); } form > div, form fieldset > div { margin-bottom: var(--space-3); } form label { display: block; font-weight: 500; margin-bottom: var(--space-1); font-size: 0.95rem; } form input[type="text"], form input[type="email"], form input[type="password"], form input[type="number"], form input[type="datetime-local"], form select, form textarea { width: 100%; max-width: 420px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-card); color: var(--color-text); font: inherit; } form textarea { min-height: 5rem; } form input:focus, form select:focus, form textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-primary); } form input[type="checkbox"] { width: auto; margin-right: var(--space-2); accent-color: var(--color-primary); } /* ---- Buttons ----------------------------------------------------------- */ button, input[type="submit"], .button { background: var(--color-primary); color: var(--color-background); border: 1px solid var(--color-primary); border-radius: var(--radius); padding: var(--space-2) var(--space-4); font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-block; } button:hover, input[type="submit"]:hover, .button:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-background); } /* button_to renders a form wrapper -- don't let that form's default * margins push buttons onto their own line in inline contexts. */ form.button_to { display: inline-block; margin: 0 var(--space-1); padding: 0; max-width: none; } /* ---- Tables ------------------------------------------------------------ */ table { width: 100%; border-collapse: collapse; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-6); } table th, table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; } table thead th { background: var(--color-secondary); color: var(--color-text); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.03em; } table tbody tr:nth-child(even) { background: rgba(210, 180, 140, 0.07); } table tbody tr:last-child td { border-bottom: none; } table tfoot th, table tfoot td { background: rgba(210, 180, 140, 0.18); font-weight: 600; border-top: 2px solid var(--color-border-strong); } /* Inventory low-stock highlight */ table tr.low-stock td { background: rgba(220, 38, 38, 0.08) !important; } table tr.low-stock td:first-child { border-left: 3px solid #DC2626; } /* ---- Sections / cards -------------------------------------------------- */ section { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4) var(--space-6); margin-bottom: var(--space-6); box-shadow: var(--shadow-card); } section h2 { margin-top: 0; } /* ---- Menu list (customer menu) ----------------------------------------- */ section > ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } section > ul > li { background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } section > ul > li strong { color: var(--color-primary); font-size: 1.05rem; } section > ul > li p { margin: 0; font-size: 0.9rem; color: var(--color-text-muted); flex: 1; } /* ---- Definition lists (order detail, payment settings) ----------------- */ dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); } dl dt { font-weight: 600; color: var(--color-text-muted); } dl dd { margin: 0; } /* ---- Misc -------------------------------------------------------------- */ img.qr-code { max-width: 240px; height: auto; } img.qr-code-small { max-width: 120px; height: auto; } img.receipt { max-width: 400px; height: auto; } img.qr-code-checkout { max-width: 200px; height: auto; } hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; } /* ---- Responsive — phone-narrow tweaks --------------------------------- */ @media (max-width: 720px) { /* Nav stacks vertically; the email span and Sign out button get their * own lines instead of being pushed to the right of a wrapping flex row. */ body > nav { flex-direction: column; align-items: flex-start; gap: var(--space-1); } body > nav span { margin-left: 0; } /* Tighter side padding on the page container so more of the viewport * width is usable. */ body > nav, body > .flash, body > h1, body > h2, body > section, body > p, body > table, body > form, body > ul, body > dl, body > div { padding-left: var(--space-3); padding-right: var(--space-3); } /* Tables scroll horizontally rather than squeezing columns to * illegibility. `white-space: nowrap` keeps each cell on one line so * the columns retain their natural widths. */ table { display: block; overflow-x: auto; max-width: 100%; white-space: nowrap; -webkit-overflow-scrolling: touch; } table th, table td { padding: var(--space-2) var(--space-3); } /* Menu card grid collapses to a single column on phones. */ section > ul { grid-template-columns: 1fr; } }