/* ========================================================================== Foodsey — Global Application Styles ========================================================================== This file provides the complete styling foundation for Foodsey: - CSS reset / base element styles - Typography scale - Bootstrap compatibility layer (for Identity pages) - Reusable component classes - Layout utilities Stylesheet load order (defined in App.razor): 1. theme-tokens.css — Theme color, spacing, radius, shadow tokens 2. app.css (this file) — Everything else 3. Foodsey.Web.styles.css — Component-scoped CSS bundle ========================================================================== */ /* -------------------------------------------------------------------------- CSS Reset & Base Element Styles Replaces Bootstrap's reboot.css with a minimal reset using theme tokens. -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background-color: var(--color-background); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { max-width: 100%; height: auto; vertical-align: middle; } table { border-collapse: collapse; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--color-primary); } a:hover { color: var(--color-primary-hover); } hr { border: none; border-top: 1px solid var(--color-border-subtle); margin: var(--space-4) 0; } code { font-size: 0.875em; color: var(--color-primary); background-color: var(--color-primary-subtle); padding: 0.125em 0.375em; border-radius: var(--radius-sm); } .content { padding-top: 1.1rem; } h1:focus { outline: none; } /* -------------------------------------------------------------------------- Typography Scale (Task 119) 1.25 ratio (Major Third). All sizes in rem for accessibility. Reference: Aesthetics Bible Sections 5.3, 5.4 -------------------------------------------------------------------------- */ html { font-size: 16px; /* Explicit base for rem calculations */ } body { /* Per-theme font family: set via CSS custom property. The font-family token is defined here; the actual Google Font is loaded dynamically by the theme-load script in . Fallback stack per Aesthetics Bible Section 5.5 */ font-family: var(--font-family), -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.6; } /* Display */ .text-display { font-size: 2.441rem; font-weight: 700; line-height: 1.2; } h1, .text-h1 { font-size: 1.953rem; font-weight: 700; line-height: 1.2; } h2, .text-h2 { font-size: 1.563rem; font-weight: 600; line-height: 1.2; } h3, .text-h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; } .text-body { font-size: 1rem; font-weight: 400; line-height: 1.6; } .text-body-sm { font-size: 0.875rem; font-weight: 400; line-height: 1.6; } .text-caption { font-size: 0.75rem; font-weight: 500; line-height: 1.4; } /* Paragraph spacing: tighter than default 1em for app-like feel */ p + p { margin-top: 0.75em; } /* -------------------------------------------------------------------------- Responsive Layout Foundation (Tasks 121, 122) Desktop-first breakpoints with max content width and centering. Reference: Aesthetics Bible Section 6.3, PRD-003 Section 3.8 -------------------------------------------------------------------------- */ /* Breakpoint reference (desktop-first): Desktop (default): 1280px+ Desktop narrow: 1024px - 1279px Tablet: 768px - 1023px Mobile: < 768px */ .content-container { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: var(--space-12); padding-right: var(--space-12); width: 100%; box-sizing: border-box; } /* Desktop narrow: reduce horizontal padding */ @media (max-width: 1279px) { .content-container { padding-left: var(--space-8); padding-right: var(--space-8); } } /* Tablet: further reduce padding */ @media (max-width: 1023px) { .content-container { padding-left: var(--space-6); padding-right: var(--space-6); } } /* Mobile: minimal padding */ @media (max-width: 767px) { .content-container { padding-left: var(--space-4); padding-right: var(--space-4); } } /* -------------------------------------------------------------------------- Form Validation (preserving existing Blazor styles) -------------------------------------------------------------------------- */ .valid.modified:not([type=checkbox]) { outline: 1px solid var(--color-success); } .invalid { outline: 1px solid var(--color-error); } .validation-message { color: var(--color-error); } /* -------------------------------------------------------------------------- Status Message Component Replaces Bootstrap alerts for Identity pages. -------------------------------------------------------------------------- */ .status-message { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4); font-size: 0.875rem; } .status-message--error { background-color: color-mix(in srgb, var(--color-error) 10%, transparent); color: var(--color-error); border: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent); } .status-message--success { background-color: color-mix(in srgb, var(--color-success) 10%, transparent); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent); } /* -------------------------------------------------------------------------- Blazor Error Boundary (preserving existing styles) -------------------------------------------------------------------------- */ .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } /* ========================================================================== Bootstrap Compatibility Layer (Task 143) ========================================================================== Minimal replacements for Bootstrap utility classes still used by ASP.NET Identity scaffolded pages. This avoids rewriting 20+ Identity pages while keeping them visually consistent with our design system. These shims can be removed if/when Identity pages are fully restyled. ========================================================================== */ /* --- Layout utilities --- */ .row { display: flex; flex-wrap: wrap; margin-left: calc(var(--space-3) * -1); margin-right: calc(var(--space-3) * -1); } .row > [class*="col-"] { padding-left: var(--space-3); padding-right: var(--space-3); flex: 0 0 100%; max-width: 100%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-8 { flex: 0 0 66.667%; max-width: 66.667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } @media (max-width: 767px) { .col-md-3, .col-md-4, .col-md-6, .col-md-8, .col-md-9 { flex: 0 0 100%; max-width: 100%; } } /* Hide the offset column (used for external login section) */ .col-md-6.col-md-offset-2 { display: none; } /* --- Display utilities --- */ .d-flex { display: flex; } .d-none { display: none; } .d-block { display: block; } .d-inline { display: inline; } /* --- Flex utilities --- */ .justify-content-between { justify-content: space-between; } .justify-content-center { justify-content: center; } .align-items-center { align-items: center; } .align-items-start { align-items: flex-start; } .flex-column { flex-direction: column; } .flex-grow-1 { flex-grow: 1; } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } /* --- Spacing utilities --- */ .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .me-1 { margin-right: var(--space-1); } .me-2 { margin-right: var(--space-2); } .ms-1 { margin-left: var(--space-1); } .ms-2 { margin-left: var(--space-2); } .py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } .py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); } .py-5 { padding-top: var(--space-10); padding-bottom: var(--space-10); } .p-2 { padding: var(--space-2); } /* --- Text utilities --- */ .text-center { text-align: center; } .text-end { text-align: right; } .text-muted { color: var(--color-text-secondary); } .text-danger { color: var(--color-error); } .text-nowrap { white-space: nowrap; } .text-decoration-none { text-decoration: none; } .text-decoration-line-through { text-decoration: line-through; } .fw-bold { font-weight: 600; } .small, small { font-size: 0.875rem; } .lead { font-size: 1.1rem; color: var(--color-text-secondary); line-height: 1.6; } /* --- Width utilities --- */ .w-100 { width: 100%; } /* --- Accessibility --- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Form elements (for Identity pages) --- */ .form-control { display: block; width: 100%; height: 40px; padding: var(--space-2) var(--space-3); background-color: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 1rem; font-family: inherit; transition: border-color 200ms ease, box-shadow 200ms ease; } .form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-subtle); } textarea.form-control { height: auto; min-height: 80px; } .form-select { display: block; width: 100%; height: 40px; padding: var(--space-2) var(--space-3); padding-right: 36px; background-color: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 1rem; font-family: inherit; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%237C7671' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 12px center; background-repeat: no-repeat; background-size: 16px; } .form-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--color-text); margin-bottom: var(--space-1); } .form-floating { position: relative; margin-bottom: var(--space-4); } .form-floating > .form-control { height: 56px; padding: 1.625rem var(--space-3) 0.625rem; } .form-floating > label { position: absolute; top: 0; left: 0; height: 100%; padding: 1rem var(--space-3); pointer-events: none; transform-origin: 0 0; transition: opacity 150ms ease, transform 150ms ease; color: var(--color-text-secondary); font-size: 1rem; } .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label { opacity: 0.65; transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); } .form-check { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } .form-check-input { width: 18px; height: 18px; accent-color: var(--color-primary); border-radius: var(--radius-sm); } .form-check-label { font-size: 0.875rem; } /* --- Buttons (for Identity pages) --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); font-weight: 500; font-size: 1rem; font-family: inherit; cursor: pointer; text-decoration: none; transition: background-color 200ms ease, border-color 200ms ease; } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn-primary { background-color: var(--color-primary); color: var(--color-text-on-primary); border-color: var(--color-primary); } .btn-primary:hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); } .btn-secondary { background-color: transparent; color: var(--color-text-secondary); border-color: var(--color-border); } .btn-secondary:hover { background-color: var(--color-primary-subtle); } .btn-danger { background-color: var(--color-error); color: #FFFFFF; border-color: var(--color-error); } .btn-danger:hover { opacity: 0.9; } .btn-link { background: none; border: none; color: var(--color-primary); padding: 0; text-decoration: underline; } .btn-link:hover { color: var(--color-primary-hover); } .btn-close { background: none; border: none; font-size: 1.25rem; cursor: pointer; opacity: 0.5; padding: var(--space-2); } .btn-close:hover { opacity: 1; } .btn-close::before { content: "\00d7"; } .btn-lg { height: 48px; padding: var(--space-3) var(--space-6); font-size: 1rem; font-weight: 600; } .btn-sm { height: 32px; padding: var(--space-1) var(--space-3); font-size: 0.8125rem; } /* --- Alerts (for Identity pages) --- */ .alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4); font-size: 0.875rem; } .alert-danger { background-color: color-mix(in srgb, var(--color-error) 10%, transparent); color: var(--color-error); border: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent); } .alert-success { background-color: color-mix(in srgb, var(--color-success) 10%, transparent); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent); } .alert-warning { background-color: color-mix(in srgb, var(--color-warning) 10%, transparent); color: var(--color-warning); border: 1px solid color-mix(in srgb, var(--color-warning) 25%, transparent); } .alert-info { background-color: var(--color-primary-subtle); color: var(--color-primary); border: 1px solid var(--color-border); } /* --- Nav pills (for ManageNavMenu legacy compat) --- */ .nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; } .nav-pills { gap: var(--space-1); } .nav-item { list-style: none; } .nav-pills .nav-link { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--color-text-secondary); text-decoration: none; font-size: 0.875rem; } .nav-pills .nav-link:hover { background-color: var(--color-primary-subtle); color: var(--color-text); } .nav-pills .nav-link.active { background-color: var(--color-primary-subtle); color: var(--color-primary); } /* --- Misc Bootstrap classes still referenced --- */ .list-unstyled { list-style: none; padding-left: 0; } .rounded { border-radius: var(--radius-md); } .border-bottom { border-bottom: 1px solid var(--color-border-subtle); } .spinner-border { display: inline-block; width: 1.5rem; height: 1.5rem; border: 2px solid var(--color-border); border-right-color: var(--color-primary); border-radius: 50%; animation: spin 0.75s linear infinite; } .spinner-border-sm { width: 1rem; height: 1rem; border-width: 1.5px; } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================================== Component Styles — Buttons (Task 130) 4 variants × 3 sizes with themed states. Reference: Aesthetics Bible Section 7.3 ========================================================================== */ .btn-foodsey { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: none; border-radius: var(--radius-md); font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color 200ms ease, transform 100ms ease, box-shadow 200ms ease; /* Default: medium size */ height: 40px; padding: var(--space-3) var(--space-5); font-size: 1rem; } .btn-foodsey:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn-foodsey:active { transform: scale(0.99); } .btn-foodsey:disabled, .btn-foodsey[disabled] { opacity: 0.5; pointer-events: none; } /* Primary */ .btn-foodsey--primary { background-color: var(--color-primary); color: var(--color-text-on-primary); } .btn-foodsey--primary:hover { background-color: var(--color-primary-hover); transform: scale(1.01); } /* Secondary */ .btn-foodsey--secondary { background-color: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); } .btn-foodsey--secondary:hover { background-color: var(--color-primary-subtle); transform: scale(1.01); } /* Ghost */ .btn-foodsey--ghost { background-color: transparent; color: var(--color-text-secondary); } .btn-foodsey--ghost:hover { background-color: var(--color-primary-subtle); color: var(--color-text); } /* Danger */ .btn-foodsey--danger { background-color: var(--color-error); color: #FFFFFF; } .btn-foodsey--danger:hover { opacity: 0.9; transform: scale(1.01); } /* Size: Small */ .btn-foodsey--sm { height: 32px; padding: var(--space-1) var(--space-3); font-size: 0.75rem; } /* Size: Large */ .btn-foodsey--lg { height: 48px; padding: var(--space-3) var(--space-6); font-size: 1rem; font-weight: 600; } /* ========================================================================== Component Styles — Form Inputs (Task 131) Reference: Aesthetics Bible Section 7.4 ========================================================================== */ .input-foodsey { height: 40px; padding: var(--space-2) var(--space-3); background-color: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 1rem; font-family: inherit; width: 100%; box-sizing: border-box; transition: border-color 200ms ease, box-shadow 200ms ease; } .input-foodsey:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-subtle); } .input-foodsey--error { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(196, 64, 64, 0.1); } .input-foodsey--error:focus { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(196, 64, 64, 0.15); } textarea.input-foodsey { height: auto; min-height: 80px; resize: vertical; } select.input-foodsey { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%237C7671' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 12px center; background-repeat: no-repeat; background-size: 16px; padding-right: 36px; } .label-foodsey { display: block; font-size: 0.875rem; font-weight: 500; color: var(--color-text); margin-bottom: var(--space-1); } .form-group-foodsey { margin-bottom: var(--space-5); } /* ========================================================================== Component Styles — Badges (Task 132) Reference: Aesthetics Bible Section 7.5 ========================================================================== */ .badge-foodsey { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); background-color: var(--color-primary-subtle); color: var(--color-primary); font-size: 0.75rem; font-weight: 500; line-height: 1.4; border-radius: var(--radius-full); white-space: nowrap; /* Non-interactive */ pointer-events: none; user-select: none; } .badge-foodsey--success { background-color: rgba(74, 155, 110, 0.12); color: var(--color-success); } .badge-foodsey--warning { background-color: rgba(192, 139, 26, 0.12); color: var(--color-warning); } .badge-foodsey--error { background-color: rgba(196, 64, 64, 0.12); color: var(--color-error); } /* ========================================================================== Component Styles — Cards (Task 133) Reference: Aesthetics Bible Section 7.1 ========================================================================== */ .card-foodsey { background-color: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: var(--space-6); transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out; } .card-foodsey--interactive { cursor: pointer; } .card-foodsey--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } /* Link card: entire card is clickable */ a.card-foodsey { display: block; text-decoration: none; color: inherit; } a.card-foodsey:hover { text-decoration: none; color: inherit; transform: translateY(-2px); box-shadow: var(--shadow-2); } /* ========================================================================== Accessibility — prefers-reduced-motion (Task 145) ========================================================================== When the user prefers reduced motion: - All transitions become instant (0ms) - Hover lifts/transforms are removed - Skeleton pulse animation stops (static gray) - Spinner animation stops - Button scale effects are removed Reference: Aesthetics Bible Section 13.3 ========================================================================== */ @media (prefers-reduced-motion: reduce) { /* Global: disable all transitions and animations */ *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } /* Buttons: no scale on active/hover */ .btn-foodsey:active { transform: none; } .btn-foodsey--primary:hover, .btn-foodsey--secondary:hover { transform: none; } /* Cards: no hover lift */ .card-foodsey--interactive:hover, a.card-foodsey:hover { transform: none; } /* Spinner: show static state */ .spinner-border { animation: none; opacity: 0.6; } }