/* Project Food — base styles for the small set of "chrome" pages (login, home, invite accept/expired, 404) that use the shared header/footer instead of noChrome. Reskinned onto the shared design tokens (tokens.css/components.css) — --brand-color is the single accent source of truth here too, via local aliases so the rest of this file didn't need touching var() by var(). */ :root { --bg: var(--canvas); --accent: var(--brand-color); --accent-dark: color-mix(in srgb, var(--brand-color) 80%, black); --error-bg: var(--rust-soft); --error-text: var(--rust); --radius: var(--radius-card); --maxw: 40rem; } /* ---- Global baseline (prevents horizontal overflow on mobile) ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; margin: 0; max-width: 100%; overflow-x: hidden; /* html is the scroll container; safe for sticky */ } img { max-width: 100%; height: auto; } body { margin: 0; max-width: 100%; /* clip (not hidden) so a sticky header child is not turned into its own scroll container; still blocks horizontal overflow as a safety net. */ overflow-x: clip; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--bg); min-height: 100vh; } /* display:flex is what lets main.container grow (flex: 1 0 auto below) to push .site-footer to the bottom on short "chrome" pages — but it also turns a noChrome page's own top-level container (#sv-app, .pt-page, #kds-app, etc.) into a flex ITEM of body, which no longer stretches to fill the viewport width the way a normal block element would (confirmed live: a noChrome page's container measured ~266px wide inside a 375px viewport with this rule applied, vs. the full 375px with it removed) — noChrome pages have no footer to stick anyway, so they get none of this rule's benefit, only the bug. layout.php adds .no-chrome to for exactly these pages. */ body:not(.no-chrome) { display: flex; flex-direction: column; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1rem; } main.container { flex: 1 0 auto; padding-block: 2rem; } /* Header / footer */ .site-header { background: var(--surface); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 0.9rem; } .brand { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--accent); text-decoration: none; letter-spacing: 0.01em; } .admin-nav { display: flex; align-items: center; gap: 1rem; } .admin-nav a { color: var(--ink); text-decoration: none; } .admin-nav a:hover { text-decoration: underline; } .site-footer { border-top: 1px solid var(--border); padding-block: 1.25rem; } /* Typography */ h1 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin: 0 0 0.75rem; } .lead { font-size: 1.15rem; margin: 0 0 0.5rem; } .muted { color: var(--ink-muted); } /* Hero */ .hero { padding-block: 1.5rem; } /* Forms */ .form { display: flex; flex-direction: column; gap: 0.35rem; max-width: 22rem; } .form label { font-weight: 600; margin-top: 0.5rem; } .form input { padding: 0.7rem 0.8rem; font-size: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); } .form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .btn { margin-top: 1rem; padding: 0.75rem 1rem; font-size: 1rem; font-weight: 600; color: var(--brand-color-contrast); background: var(--accent); border: none; border-radius: var(--radius); cursor: pointer; } .btn:hover { background: var(--accent-dark); } .inline-form { display: inline; margin: 0; } .link-button { background: none; border: none; padding: 0; font: inherit; color: var(--ink); cursor: pointer; text-decoration: underline; } /* Alerts */ .alert { padding: 0.7rem 0.9rem; border-radius: var(--radius); margin: 0 0 1rem; max-width: 22rem; } .alert-error { background: var(--error-bg); color: var(--error-text); border: 1px solid var(--rust); } /* Auth / dashboard blocks */ .auth, .dashboard, .error-page { max-width: 30rem; }