/* =============================================================================
SCHLIFF STYLESHEET — TABLE OF CONTENTS
-----------------------------------------------------------------------------
The old single schliff.css was split into per-area files (2026-06-22). They
are loaded together, in THIS order, by views/schliff/partials/head.ejs — the
load order IS the cascade order, so the rendered result is identical to the
old single file. When adding styles, put them in the file that owns the area:
base.css ← YOU ARE HERE. Global/shared: theme tokens, page
shell, forms/auth, buttons, cookie banner, legal &
spec pages, footer, profile dropdown, preferences,
danger button, brand wordmark, visited-link reset.
dashboard.css ← Overview: tabs, sub-tabs, cards, today snapshot,
sparkline, summaries, goals, password peek.
docs.css ← Doc pages (Spec, Roadmap) markdown rendering.
admin.css ← Tier badges + admin area + admin suspend modal.
weigh-in.css ← Dashboard weigh-in flash + modal inputs + warnings.
food.css ← Food tab: meal cards, search dialog, configure
panel, barcode scan.
dashboard-desktop.css ← Dashboard desktop polish (≥900px) + add-meal picker.
exercise.css ← Exercise tab: AI Workouts (session card, set rows,
timers, section auras, calorie burn).
NOTE: dashboard styles are spread across dashboard.css + weigh-in.css +
dashboard-desktop.css because they were authored in waves; they were kept in
source order so the cascade is unchanged. A future cleanup could regroup them
and load files per-page (see docs/PROGRESS-exercise.md — local-only, untracked).
============================================================================= */
/* =============================================================================
Nouri — base styles (theme tokens via CSS custom properties)
Light/dark switched via prefers-color-scheme + manual data-theme override
Palette: zesty yellow primary, lime accent
============================================================================= */
:root {
--nr-yellow: #FFD23F;
--nr-lime: #A8E10C;
--nr-bg: #FFFCF2; /* warm off-white */
--nr-surface: #FFFFFF;
--nr-text: #1F1F1F; /* charcoal, not pure black */
--nr-text-mute: #5A5A5A;
--nr-border: #EDE7D6;
--nr-radius: 14px;
--nr-font:
-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
:root {
--nr-yellow: #E8B800; /* muted on dark */
--nr-lime: #8FCB0A;
--nr-bg: #121212;
--nr-surface: #1C1C1C;
--nr-text: #ECECEC;
--nr-text-mute: #9A9A9A;
--nr-border: #2A2A2A;
}
}
[data-theme="light"] {
--nr-yellow: #FFD23F; --nr-lime: #A8E10C;
--nr-bg: #FFFCF2; --nr-surface: #FFFFFF; --nr-text: #1F1F1F;
--nr-text-mute: #5A5A5A; --nr-border: #EDE7D6;
}
[data-theme="dark"] {
--nr-yellow: #E8B800; --nr-lime: #8FCB0A;
--nr-bg: #121212; --nr-surface: #1C1C1C; --nr-text: #ECECEC;
--nr-text-mute: #9A9A9A; --nr-border: #2A2A2A;
}
* { box-sizing: border-box; }
/* Normalize date inputs — iOS Safari renders with native
styling that ignores CSS width/padding and overflows its container.
`appearance: none` makes it respect our form styles like every other input. */
input[type="date"] {
appearance: none;
-webkit-appearance: none;
}
/* Small, borderless icon button — used for close (×), delete, fav, etc. */
.icon-btn {
background: none;
border: none;
cursor: pointer;
color: var(--nr-text-mute);
font-size: 1.1rem;
padding: 0.2rem 0.4rem;
border-radius: 6px;
line-height: 1;
}
.icon-btn:hover { color: var(--nr-text); background: var(--nr-border); }
html, body {
margin: 0;
padding: 0;
background: var(--nr-bg);
color: var(--nr-text);
font-family: var(--nr-font);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden; /* prevent page-wide horizontal scroll */
min-height: 100dvh; /* short pages fill the viewport (no gap below footer) */
}
.splash {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 1.5rem;
}
.logo-img {
width: clamp(220px, 60vw, 480px);
height: auto;
margin: 0 0 0.75rem;
border-radius: 18px;
/* In dark mode the logo has a cream background; render it as an intentional
"plate" with subtle border so it sits cleanly on the dark surface. */
background: transparent;
}
@media (prefers-color-scheme: dark) {
.logo-img {
box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
}
}
[data-theme="dark"] .logo-img {
box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.tagline {
font-size: 1.15rem;
color: var(--nr-text-mute);
margin: 0 0 2rem;
}
.status {
font-size: 0.9rem;
color: var(--nr-text-mute);
border: 1px solid var(--nr-border);
border-radius: var(--nr-radius);
padding: 0.6rem 1rem;
background: var(--nr-surface);
}
.splash-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
text-align: center;
font-size: 0.8rem;
color: var(--nr-text-mute);
background: linear-gradient(to top, var(--nr-bg) 60%, transparent);
}
.splash-footer a {
color: var(--nr-text-mute);
text-decoration: none;
margin: 0 0.5rem;
}
.splash-footer a:hover { color: var(--nr-text); }
.splash-footer .dot { opacity: 0.5; }
/* =============================================================================
Page shell, forms, cookie banner, legal/spec pages
============================================================================= */
/* ----- Header ----- */
.site-header {
position: sticky; top: 0; z-index: 50;
display: flex; align-items: center; justify-content: space-between;
padding: 0.7rem 1rem;
background: var(--nr-bg);
border-bottom: 1px solid var(--nr-border);
backdrop-filter: saturate(160%) blur(10px);
}
.brand img { height: 30px; width: auto; display: block; border-radius: 6px; }
.site-nav { display: flex; align-items: center; gap: 0.5rem; }
.nav-link {
padding: 0.45rem 0.9rem;
border-radius: 999px;
text-decoration: none;
font-size: 0.9rem; font-weight: 500;
color: var(--nr-text);
}
.nav-link:hover { background: var(--nr-surface); }
.nav-cta { color: #1F1F1F; } /* fill + hover: shared action-button rule below */
.avatar {
width: 36px; height: 36px; border-radius: 50%;
background: linear-gradient(135deg, var(--nr-yellow), var(--nr-lime));
color: #1F1F1F; font-weight: 700; font-size: 0.9rem;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
/* ----- Splash ----- */
.splash { min-height: calc(100vh - 60px - 60px); }
.splash-cta { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; margin-top: 1.5rem; }
/* ----- Buttons ----- */
.btn-primary {
display: inline-block;
background: var(--nr-yellow); color: #1F1F1F;
padding: 0.75rem 1.4rem;
border: 0; border-radius: 12px;
font-weight: 600; font-size: 1rem;
text-decoration: none; cursor: pointer;
transition: background 0.15s, transform 0.05s;
}
.btn-primary:active { transform: translateY(1px); } /* fill + hover: shared action-button rule */
.btn-primary.btn-block { width: 100%; }
.btn-secondary {
background: transparent; color: var(--nr-text);
padding: 0.7rem 1.2rem;
border: 1px solid var(--nr-border); border-radius: 12px;
font-weight: 500; cursor: pointer;
}
.btn-secondary:hover { border-color: var(--nr-text-mute); }
.btn-link {
background: none; border: 0; color: var(--nr-text-mute);
text-decoration: none; font-size: 0.9rem;
padding: 0.4rem 0.6rem;
}
.btn-link:hover { color: var(--nr-text); }
/* ----- Forms (auth) ----- */
.auth-wrap {
max-width: 440px; margin: 0 auto; padding: 1.5rem 1.25rem 6rem;
}
.auth-title { font-size: 1.6rem; margin: 0.5rem 0 0.25rem; font-weight: 700; }
.auth-sub { color: var(--nr-text-mute); margin: 0 0 1.5rem; }
.auth-form label {
display: block; margin-top: 0.9rem; font-size: 0.85rem; color: var(--nr-text-mute);
}
.auth-form input,
.auth-form select {
display: block; width: 100%; box-sizing: border-box;
margin-top: 0.3rem;
padding: 0.65rem 0.85rem; font-size: 1rem;
background: var(--nr-surface); color: var(--nr-text);
border: 1px solid var(--nr-border); border-radius: 10px;
}
.auth-form input:focus,
.auth-form select:focus { outline: 2px solid var(--nr-yellow); outline-offset: 1px; }
.auth-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.auth-form .hint { display: block; font-size: 0.75rem; color: var(--nr-text-mute); margin-top: 0.25rem; }
.auth-form .check { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.85rem; color: var(--nr-text); }
.auth-form .check input { width: auto; margin-top: 0.2rem; }
.auth-form button { margin-top: 1.5rem; }
.auth-meta { text-align: center; color: var(--nr-text-mute); font-size: 0.9rem; margin-top: 1.25rem; }
.form-error {
background: #FEE2E2; color: #991B1B;
padding: 0.7rem 0.9rem; border-radius: 10px;
font-size: 0.9rem; margin: 0 0 1rem;
}
@media (prefers-color-scheme: dark) {
.form-error { background: #3B1414; color: #FCA5A5; }
}
/* ----- Legal pages ----- */
.legal-wrap { max-width: 720px; margin: 0 auto; padding: 1.5rem 1.25rem 6rem; }
.legal-wrap h1 { margin: 0.5rem 0 0.25rem; }
.legal-wrap h2 { margin-top: 2rem; font-size: 1.1rem; }
.legal-wrap p, .legal-wrap li { line-height: 1.55; }
.legal-meta { color: var(--nr-text-mute); font-size: 0.85rem; margin-bottom: 1.5rem; }
/* ----- Spec page ----- */
.spec-wrap { max-width: 880px; margin: 0 auto; padding: 1.5rem 1.25rem 6rem; }
.spec-back { color: var(--nr-text-mute); text-decoration: none; font-size: 0.85rem; }
.spec-back:hover { color: var(--nr-text); }
.spec-h { margin: 0.75rem 0 0.25rem; font-size: 1.4rem; }
.spec-meta { color: var(--nr-text-mute); font-size: 0.85rem; margin-bottom: 1.5rem; }
.spec-md {
background: var(--nr-surface);
border: 1px solid var(--nr-border);
border-radius: var(--nr-radius);
padding: 1.25rem 1.5rem;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.82rem; line-height: 1.55;
white-space: pre-wrap; word-wrap: break-word;
color: var(--nr-text); overflow-x: auto;
}
/* ----- Footer (replaces previous splash-only one) ----- */
.site-footer {
border-top: 1px solid var(--nr-border);
padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
background: var(--nr-bg);
}
.footer-inner {
max-width: 880px; margin: 0 auto;
text-align: center;
font-size: 0.8rem; color: var(--nr-text-mute);
}
.site-footer a { color: var(--nr-text-mute); text-decoration: none; margin: 0 0.5rem; }
.site-footer a:hover { color: var(--nr-text); }
.site-footer .dot { opacity: 0.5; }
/* Suppress the older fixed splash-only footer if it ever renders */
.splash-footer { display: none; }
/* ----- Cookie banner ----- */
.sf-cookie-banner {
position: fixed; left: 1rem; right: 1rem; bottom: 1rem;
z-index: 200;
background: var(--nr-surface);
border: 1px solid var(--nr-border);
border-radius: 16px;
box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
@media (min-width: 700px) {
.sf-cookie-banner { left: auto; right: 1rem; bottom: 1rem; max-width: 460px; }
}
.sf-cookie-inner { padding: 1rem 1.1rem 1.1rem; }
.sf-cookie-text strong { display: block; margin-bottom: 0.3rem; font-size: 0.95rem; }
.sf-cookie-text p { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--nr-text-mute); line-height: 1.5; }
.sf-cookie-detail summary { cursor: pointer; font-size: 0.8rem; color: var(--nr-text-mute); }
.sf-cookie-detail ul { padding-left: 1.2rem; margin: 0.5rem 0 0.6rem; font-size: 0.8rem; color: var(--nr-text-mute); }
.sf-cookie-actions {
display: flex; gap: 0.5rem; justify-content: flex-end;
margin-top: 0.4rem;
}
.sf-cookie-actions .btn-primary,
.sf-cookie-actions .btn-secondary { padding: 0.55rem 1rem; font-size: 0.9rem; }
/* Info / success banner used on auth pages */
.form-info {
background: rgba(168, 225, 12, 0.18);
color: #1F1F1F;
border: 1px solid rgba(168, 225, 12, 0.6);
padding: 0.7rem 0.9rem;
border-radius: 10px;
font-size: 0.9rem;
margin: 0 0 1rem;
}
@media (prefers-color-scheme: dark) {
.form-info { background: rgba(168, 225, 12, 0.10); color: #ECECEC; border-color: rgba(168, 225, 12, 0.35); }
}
/* =============================================================================
Profile dropdown + preferences page + danger button
============================================================================= */
.profile-wrap { position: relative; }
.avatar { border: 0; padding: 0; cursor: pointer; }
.profile-menu {
position: absolute; top: calc(100% + 8px); right: 0;
min-width: 240px;
background: var(--nr-surface);
border: 1px solid var(--nr-border);
border-radius: 14px;
box-shadow: 0 16px 48px rgba(0,0,0,0.18);
padding: 0.5rem;
z-index: 60;
}
.pm-section { padding: 0.4rem 0.5rem; }
.pm-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--nr-text-mute); margin-bottom: 0.35rem; }
.pm-toggle {
display: flex; gap: 4px; padding: 4px;
background: var(--nr-bg);
border-radius: 10px;
border: 1px solid var(--nr-border);
margin: 0;
}
.pm-toggle button {
flex: 1;
background: transparent; color: var(--nr-text);
border: 0; padding: 0.4rem 0.6rem;
border-radius: 8px; font-size: 0.8rem; cursor: pointer;
font-weight: 500;
}
.pm-toggle button.is-active { background: var(--nr-yellow); color: #1F1F1F; }
.pm-toggle button:hover:not(.is-active) { background: rgba(0,0,0,0.04); }
@media (prefers-color-scheme: dark) {
.pm-toggle button:hover:not(.is-active) { background: rgba(255,255,255,0.05); }
}
.pm-divider { height: 1px; background: var(--nr-border); margin: 0.4rem 0.4rem; }
.pm-item {
display: block; width: 100%; text-align: left;
background: transparent; border: 0; cursor: pointer;
padding: 0.55rem 0.85rem;
color: var(--nr-text); text-decoration: none; font-size: 0.9rem;
border-radius: 8px;
}
.pm-item:hover { background: var(--nr-bg); }
.pm-item-danger { color: #B91C1C; }
.pm-item-danger:hover { background: rgba(185, 28, 28, 0.08); }
@media (prefers-color-scheme: dark) {
.pm-item-danger { color: #F87171; }
.pm-item-danger:hover { background: rgba(248, 113, 113, 0.10); }
}
.pm-form { margin: 0; }
/* Preferences page */
.pref-h {
margin: 2.5rem 0 0.75rem;
padding-top: 1.25rem;
border-top: 1px solid var(--nr-border);
font-size: 1.05rem;
}
.pref-h.pref-danger { color: #B91C1C; }
@media (prefers-color-scheme: dark) {
.pref-h.pref-danger { color: #F87171; }
}
.pref-text { color: var(--nr-text-mute); font-size: 0.9rem; margin: 0.25rem 0 1rem; }
.btn-danger {
display: inline-block;
background: #B91C1C; color: #fff;
padding: 0.7rem 1.2rem;
border: 0; border-radius: 12px;
font-weight: 600; cursor: pointer;
margin-top: 1rem;
}
.btn-danger:hover { background: #991B1B; }
/* Small button variant — used for inline Edit / Abandon actions */
.btn-sm {
padding: 0.35rem 0.8rem;
font-size: 0.82rem;
border-radius: 8px;
margin-top: 0;
}
.btn-sm.btn-danger { margin-top: 0; }
/* Row of action buttons on a goal card */
.goal-actions {
display: flex;
gap: 0.6rem;
margin-top: 1rem;
flex-wrap: wrap;
}
/* Header action button (e.g. + Add goal) inside a .dash-greet header.
Keeps the button on one line and centred against the title block.
(Inline styles are blocked by our CSP, so this lives here.) */
.dash-greet .btn-sm {
align-self: center;
flex-shrink: 0;
white-space: nowrap;
}
/* Inline form (e.g. abandon-goal form sitting next to the Edit link). */
.goal-abandon-form { display: inline; }
/* Progress fill width is set by JS from data-pct (CSP blocks inline width). */
.goal-progress-fill { display: block; height: 100%; width: 0; }
/* Wider variant of the auth-wrap for forms with more content (e.g. goal builder). */
.auth-wrap--wide { max-width: 560px; }
/* Tight preference heading (no top border / padding) — used at top of a form. */
.pref-h--flush {
margin-top: 0.5rem;
border-top: 0;
padding-top: 0;
}
/* Transient success / info banner after a redirect */
.flash-banner {
background: var(--nr-yellow);
color: #1F1F1F;
padding: 0.65rem 1rem;
border-radius: 10px;
margin-bottom: 1rem;
font-size: 0.9rem;
font-weight: 500;
}
/* Disable the iOS double-tap-to-zoom gesture on interactive controls (pinch-zoom
stays available for accessibility). Stops the stray zoom on a quick tap. */
button, a, select, input, textarea, label,
[role="button"], .exercise-session-header {
touch-action: manipulation;
}
/* =============================================================================
Defeat user-agent default purple on visited links.
`a` plain rules have lower specificity than UA's `a:visited`, so we restate
colours for the visited state — class-styled links keep their colour, plain
inline links inherit from their parent's text colour.
============================================================================= */
a:visited { color: inherit; }
.brand:visited { color: inherit; }
.nav-link:visited { color: var(--nr-text); }
.nav-cta:visited { color: #1F1F1F; }
.btn-primary:visited { color: #1F1F1F; }
.btn-secondary:visited { color: var(--nr-text); }
.btn-link:visited { color: var(--nr-text-mute); }
.btn-danger:visited { color: #fff; }
.spec-back:visited { color: var(--nr-text-mute); }
.site-footer a:visited { color: var(--nr-text-mute); }
.splash-footer a:visited { color: var(--nr-text-mute); }
.pm-item:visited { color: var(--nr-text); }
.pm-item-danger:visited { color: #B91C1C; }
@media (prefers-color-scheme: dark) {
.pm-item-danger:visited { color: #F87171; }
}
/* Inline links in legal copy & message bodies — pick up parent colour */
.legal-wrap a:visited,
.auth-wrap a:visited,
.auth-meta a:visited,
.spec-md a:visited { color: inherit; }
/* =============================================================================
Header brand wordmark — yellow→lime gradient text with theme-aware outline
(light mode: black outline; dark mode: white outline).
The .webp logo continues to live on the splash + as favicon/PWA icon.
============================================================================= */
.brand { display: inline-flex; align-items: center; line-height: 1; text-decoration: none; }
.brand img { height: 30px; width: auto; display: block; border-radius: 6px; } /* legacy fallback */
.brand-text {
font-weight: 800;
font-size: 1.55rem;
letter-spacing: -0.04em;
line-height: 1;
background: linear-gradient(120deg, var(--nr-yellow) 0%, var(--nr-lime) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px #1F1F1F; /* light mode default — black outline */
paint-order: stroke fill;
user-select: none;
}
/* Dark mode (system) */
@media (prefers-color-scheme: dark) {
.brand-text { -webkit-text-stroke: 1px #FFFFFF; }
}
/* Manual theme overrides take precedence */
[data-theme="light"] .brand-text { -webkit-text-stroke: 1px #1F1F1F; }
[data-theme="dark"] .brand-text { -webkit-text-stroke: 1px #FFFFFF; }
/* Two-tone "sch" + "liff" wordmark (overrides the earlier single-tone version) */
.brand-text {
font-weight: 800;
font-size: 1.55rem;
letter-spacing: -0.04em;
line-height: 1;
background: none; /* reset the earlier gradient */
-webkit-background-clip: initial;
background-clip: initial;
color: inherit;
-webkit-text-fill-color: initial;
-webkit-text-stroke: 0;
user-select: none;
display: inline-flex;
}
/* "sch" — solid theme colour */
.brand-sch {
color: #1F1F1F; /* light mode default */
}
@media (prefers-color-scheme: dark) {
.brand-sch { color: #FFFFFF; }
}
[data-theme="light"] .brand-sch { color: #1F1F1F; }
[data-theme="dark"] .brand-sch { color: #FFFFFF; }
/* "liff" — yellow → lime gradient */
.brand-liff {
background: linear-gradient(120deg, var(--nr-yellow) 0%, var(--nr-lime) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* Prominent inline field alert (e.g. age violation) shown right under a form field */
.field-alert {
display: block;
margin-top: 0.5rem;
padding: 0.6rem 0.85rem;
background: #FEE2E2;
color: #991B1B;
border: 1px solid rgba(185, 28, 28, 0.35);
border-radius: 10px;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.4;
}
.field-alert[hidden] { display: none; }
@media (prefers-color-scheme: dark) {
.field-alert { background: #3B1414; color: #FCA5A5; border-color: rgba(248, 113, 113, 0.4); }
}
/* =============================================================================
Dialog scroll-lock
The native