/* ============================================================================
NM-APP-V2 — "House" design system for all No More apps.
One stylesheet, two modes, shared by every app on the server.
Chosen 07/23/26 (see /var/www/shared/nm-app-v2/TEMPLATE.md for the spec).
Direction: quiet luxury, iOS-native feel. Warm plaster ground, white cards
with real shadows (never hairline-bordered boxes), big tap targets, bottom
tab bar on phones / left rail on desktop. Serif only where it earns its
place: greetings, mastheads, big numerals, a guest's name.
Mode contract: or .
Default (no attribute) = light. The existing nm-theme-toggle.js pattern
persists the choice; point it at instead of .
============================================================================ */
/* ---------------------------------------------------------------- tokens -- */
:root {
/* ground */
--nm-bg: #F5F2EC; /* warm plaster page */
--nm-surface: #FFFFFF; /* cards */
--nm-surface-2: rgba(255, 255, 255, 0.6); /* quiet cards (minis) */
--nm-ink: #211C15; /* primary text */
--nm-text: #46403A; /* body text */
--nm-sub: #9A9184; /* secondary text */
--nm-faint: #C5BCAD; /* chevrons, disabled */
--nm-line: rgba(38, 33, 27, 0.08);
/* brand */
--nm-gold: #9C7A1E; /* gold on light ground (AA against #F5F2EC) */
--nm-gold-bright: #D8B35A; /* gold on dark surfaces, buttons */
--nm-gold-soft: rgba(156, 122, 30, 0.14);
--nm-espresso: #211C15; /* dark buttons, dark hero cards */
--nm-on-gold: #17120B; /* text sitting on solid gold */
/* accent roles — see TEMPLATE.md; accents mean something or don't appear */
--nm-sage: #5F8757; --nm-sage-soft: rgba(151, 190, 143, 0.16);
--nm-coral: #C06A5E; --nm-coral-soft: rgba(224, 138, 126, 0.16);
--nm-teal: #4F8273; --nm-teal-soft: rgba(127, 175, 160, 0.16);
--nm-plum: #8E62A0; --nm-plum-soft: rgba(176, 124, 195, 0.16);
--nm-amber: #A9701E; --nm-amber-soft: rgba(224, 164, 72, 0.16);
--nm-ruby: #B9484E; --nm-ruby-soft: rgba(185, 72, 78, 0.12);
--nm-slate: #5A7E8E; --nm-slate-soft: rgba(143, 180, 194, 0.18);
/* dot variants (saturated, for 7-8px metric dots on any ground) */
--nm-dot-gold: #D8B35A; --nm-dot-sage: #8FBC8F; --nm-dot-coral: #E08A7E;
--nm-dot-teal: #7FAFA0; --nm-dot-plum: #B07CC3; --nm-dot-amber: #E0A448;
--nm-dot-ruby: #C25E5E; --nm-dot-slate: #8FB4C2;
/* type */
--nm-serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
--nm-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
Roboto, "Helvetica Neue", sans-serif;
/* shape + depth */
--nm-r-card: 19px;
--nm-r-hero: 24px;
--nm-r-ic: 12px;
--nm-r-pill: 100px;
--nm-shadow-card: 0 8px 22px -12px rgba(60, 48, 30, 0.16),
0 1px 3px rgba(60, 48, 30, 0.05);
--nm-shadow-hero: 0 18px 34px -16px rgba(30, 22, 10, 0.55);
--nm-shadow-float: 0 14px 30px -14px rgba(60, 48, 30, 0.3);
/* layout */
--nm-pad: 20px; /* screen gutter on phones */
--nm-tabbar-h: 76px;
--nm-rail-w: 224px; /* desktop left rail */
}
[data-mode="dark"] {
--nm-bg: #161210;
--nm-surface: #211B16;
--nm-surface-2: #1C1712;
--nm-ink: #EFE9DE;
--nm-text: #CFC7B8;
--nm-sub: #8F8778;
--nm-faint: #5C554B;
--nm-line: rgba(239, 233, 222, 0.07);
--nm-gold: #D8B35A;
--nm-gold-soft: rgba(216, 179, 90, 0.13);
--nm-sage: #97BE8F; --nm-sage-soft: rgba(151, 190, 143, 0.12);
--nm-coral: #DE9A8C; --nm-coral-soft: rgba(224, 138, 126, 0.13);
--nm-teal: #8FBBAD; --nm-teal-soft: rgba(127, 175, 160, 0.13);
--nm-plum: #C49AD3; --nm-plum-soft: rgba(176, 124, 195, 0.13);
--nm-amber: #E0B168; --nm-amber-soft: rgba(224, 164, 72, 0.13);
--nm-ruby: #D3767C; --nm-ruby-soft: rgba(195, 94, 94, 0.13);
--nm-slate: #9DBCCB; --nm-slate-soft: rgba(143, 180, 194, 0.13);
--nm-shadow-card: 0 10px 26px -14px rgba(0, 0, 0, 0.6);
--nm-shadow-float: 0 14px 30px -14px rgba(0, 0, 0, 0.55);
}
/* ------------------------------------------------------------------ base -- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body.nm {
font-family: var(--nm-sans);
background: var(--nm-bg);
color: var(--nm-text);
font-size: 15px; /* never below 13px anywhere; 15px body */
line-height: 1.5;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overscroll-behavior-x: none;
}
.nm h1, .nm h2, .nm h3 { color: var(--nm-ink); font-weight: 600; }
.nm a { color: inherit; text-decoration: none; }
.nm img { max-width: 100%; display: block; }
.nm ul, .nm ol { list-style: none; }
.nm ::selection { background: rgba(216, 179, 90, 0.3); }
.nm :focus-visible { outline: 2px solid var(--nm-gold); outline-offset: 2px; }
.nm [data-numeric] { font-variant-numeric: tabular-nums; }
/* --------------------------------------------------------------- layout -- */
.nm-page {
padding: 0 var(--nm-pad) calc(var(--nm-tabbar-h) + 18px);
max-width: 560px;
margin: 0 auto;
}
/* ---------------------------------------------------------------- topbar -- */
.nm-topbar {
display: flex; align-items: center; justify-content: space-between;
padding-top: 14px; margin-bottom: 2px;
}
.nm-topbar .nm-crest { width: 30px; height: 30px; }
.nm-topbar-actions { display: flex; align-items: center; gap: 16px; }
.nm-topbar-actions button {
background: none; border: 0; color: var(--nm-sub); cursor: pointer;
position: relative; padding: 6px; margin: -6px; /* 44px effective target */
}
.nm-topbar-actions .nm-unread {
position: absolute; top: 4px; right: 4px; width: 7px; height: 7px;
border-radius: 50%; background: var(--nm-dot-coral);
border: 1.5px solid var(--nm-bg);
}
/* ------------------------------------------------- greetings + mastheads -- */
.nm-greet-sub { font-size: 12.5px; color: var(--nm-sub); font-weight: 500; margin-top: 10px; }
.nm-greet {
font-family: var(--nm-serif); font-weight: 400;
font-size: 30px; line-height: 1.08; color: var(--nm-ink);
margin: 2px 0 14px;
}
/* dual-tone: the second word goes gold italic. Greetings, mastheads, guest
names only — never on data labels or table headers. */
.nm-greet em, .nm-duo em { font-style: italic; color: var(--nm-gold); }
.nm-duo {
font-family: var(--nm-serif); font-weight: 400;
font-size: 31px; line-height: 1.05; color: var(--nm-ink); margin: 4px 0 2px;
}
.nm-kick {
font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--nm-gold); font-weight: 700;
}
.nm-page-title {
font-family: var(--nm-serif); font-weight: 400;
font-size: 29px; color: var(--nm-ink); margin: 10px 0 2px;
}
.nm-page-sub { font-size: 12.5px; color: var(--nm-sub); margin-bottom: 14px; }
.nm-section-label {
font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--nm-sub); margin: 16px 4px 9px;
}
/* ------------------------------------------------------------ photo hero -- */
.nm-hero {
border-radius: var(--nm-r-hero); position: relative; overflow: hidden;
min-height: 210px; box-shadow: var(--nm-shadow-hero); color: #F0E9DC;
background: linear-gradient(145deg, #241E16, #14100B 70%); /* no-photo fallback */
}
.nm-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nm-hero-shade {
position: absolute; inset: 0;
background: linear-gradient(185deg, rgba(18,13,7,0) 22%,
rgba(14,10,5,0.55) 58%, rgba(14,10,5,0.92) 88%);
}
.nm-hero-content { position: absolute; left: 20px; right: 20px; bottom: 17px; }
.nm-hero .nm-kick { color: #EBCB84; }
.nm-hero h3 {
font-family: var(--nm-serif); font-weight: 400;
font-size: 25px; color: #F0E9DC; margin: 5px 0 1px;
}
.nm-hero-meta { font-size: 12.5px; color: rgba(240, 233, 220, 0.78); }
.nm-hero-aside {
position: absolute; right: 0; bottom: 2px; text-align: right;
font-size: 10.5px; color: rgba(240, 233, 220, 0.65);
}
.nm-hero-aside b { display: block; font-size: 21px; color: #F0E9DC; font-weight: 600; }
/* --------------------------------------------------------------- buttons -- */
.nm-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
border: 0; cursor: pointer; border-radius: var(--nm-r-pill);
font-family: var(--nm-sans); font-size: 13px; font-weight: 700;
padding: 11px 19px; min-height: 40px;
}
.nm-btn--gold { background: var(--nm-gold-bright); color: var(--nm-on-gold); }
.nm-btn--dark { background: var(--nm-espresso); color: #F0E9DC; }
[data-mode="dark"] .nm-btn--dark { background: #EFE9DE; color: #17130E; }
.nm-btn--quiet { background: rgba(33, 28, 21, 0.06); color: var(--nm-text); }
[data-mode="dark"] .nm-btn--quiet { background: rgba(239, 233, 222, 0.08); }
.nm-btn:active { transform: scale(0.98); }
/* ----------------------------------------------------------------- cards -- */
.nm-card {
background: var(--nm-surface); border-radius: var(--nm-r-card);
padding: 13px 15px; box-shadow: var(--nm-shadow-card);
display: flex; align-items: center; gap: 13px; margin-bottom: 9px;
min-height: 56px;
}
a.nm-card, button.nm-card { width: 100%; text-align: left; border: 0; cursor: pointer; font: inherit; color: inherit; }
.nm-card h4 { font-size: 14px; font-weight: 600; color: var(--nm-ink); letter-spacing: -0.01em; }
.nm-card p { font-size: 12px; color: var(--nm-sub); margin-top: 2px; }
.nm-card .nm-chev { margin-left: auto; color: var(--nm-faint); font-size: 20px; flex: 0 0 auto; }
.nm-card--static { align-items: flex-start; } /* notes, paragraphs */
/* icon chip inside a card: svg */
.nm-ic {
width: 36px; height: 36px; border-radius: var(--nm-r-ic); flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
}
.nm-ic--gold { background: var(--nm-gold-soft); color: var(--nm-gold); }
.nm-ic--sage { background: var(--nm-sage-soft); color: var(--nm-sage); }
.nm-ic--coral { background: var(--nm-coral-soft); color: var(--nm-coral); }
.nm-ic--teal { background: var(--nm-teal-soft); color: var(--nm-teal); }
.nm-ic--plum { background: var(--nm-plum-soft); color: var(--nm-plum); }
.nm-ic--amber { background: var(--nm-amber-soft); color: var(--nm-amber); }
.nm-ic--ruby { background: var(--nm-ruby-soft); color: var(--nm-ruby); }
.nm-ic--slate { background: var(--nm-slate-soft); color: var(--nm-slate); }
/* ----------------------------------------------------- pills, chips, dots -- */
.nm-pill {
font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; padding: 4px 9px; border-radius: var(--nm-r-pill);
margin-left: auto; flex: 0 0 auto;
}
.nm-chip {
display: inline-block; font-size: 10px; font-weight: 700;
letter-spacing: 0.05em; text-transform: uppercase;
padding: 5px 11px; border-radius: var(--nm-r-pill);
}
.nm-pill--gold, .nm-chip--gold { background: var(--nm-gold-soft); color: var(--nm-gold); }
.nm-pill--sage, .nm-chip--sage { background: var(--nm-sage-soft); color: var(--nm-sage); }
.nm-pill--coral, .nm-chip--coral { background: var(--nm-coral-soft); color: var(--nm-coral); }
.nm-pill--teal, .nm-chip--teal { background: var(--nm-teal-soft); color: var(--nm-teal); }
.nm-pill--plum, .nm-chip--plum { background: var(--nm-plum-soft); color: var(--nm-plum); }
.nm-pill--amber, .nm-chip--amber { background: var(--nm-amber-soft); color: var(--nm-amber); }
.nm-pill--ruby, .nm-chip--ruby { background: var(--nm-ruby-soft); color: var(--nm-ruby); }
.nm-pill--slate, .nm-chip--slate { background: var(--nm-slate-soft); color: var(--nm-slate); }
.nm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nm-chips--center { justify-content: center; }
.nm-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.nm-dot--gold { background: var(--nm-dot-gold); } .nm-dot--sage { background: var(--nm-dot-sage); }
.nm-dot--coral { background: var(--nm-dot-coral); } .nm-dot--teal { background: var(--nm-dot-teal); }
.nm-dot--plum { background: var(--nm-dot-plum); } .nm-dot--amber { background: var(--nm-dot-amber); }
.nm-dot--ruby { background: var(--nm-dot-ruby); } .nm-dot--slate { background: var(--nm-dot-slate); }
/* ------------------------------------------------------------ mini stats -- */
.nm-mini-row { display: flex; gap: 9px; margin-top: 3px; }
.nm-mini { flex: 1; background: var(--nm-surface-2); border-radius: 15px; padding: 10px 12px; }
.nm-mini b {
font-family: var(--nm-serif); font-weight: 400; font-size: 21px;
color: var(--nm-ink); display: block; font-variant-numeric: tabular-nums;
}
.nm-mini span { font-size: 10.5px; color: var(--nm-sub); font-weight: 500; }
/* ------------------------------------------------------------- stat cards -- */
.nm-statcard {
background: var(--nm-surface); border-radius: var(--nm-r-card);
padding: 14px 17px 12px; margin-bottom: 9px; box-shadow: var(--nm-shadow-card);
}
.nm-statcard-row { display: flex; align-items: baseline; justify-content: space-between; }
.nm-statcard b.nm-n {
font-family: var(--nm-serif); font-weight: 400; font-size: 31px;
color: var(--nm-ink); font-variant-numeric: tabular-nums;
}
.nm-delta {
font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--nm-r-pill);
background: var(--nm-sage-soft); color: var(--nm-sage);
}
.nm-delta--down { background: var(--nm-coral-soft); color: var(--nm-coral); }
.nm-statcard-label { font-size: 11.5px; color: var(--nm-sub); font-weight: 500; }
.nm-bars { display: flex; gap: 5px; align-items: flex-end; height: 30px; margin-top: 9px; }
.nm-bars i { flex: 1; background: rgba(216, 179, 90, 0.22); border-radius: 3px 3px 0 0; }
.nm-bars i.hi { background: var(--nm-dot-gold); }
.nm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.nm-know { background: var(--nm-surface); border-radius: 17px; padding: 11px 14px; box-shadow: var(--nm-shadow-card); }
.nm-know b {
font-family: var(--nm-serif); font-weight: 400; font-size: 21px;
color: var(--nm-ink); display: block; font-variant-numeric: tabular-nums;
}
.nm-know span { font-size: 10px; color: var(--nm-sub); font-weight: 500; }
/* -------------------------------------------------------------- segmented -- */
.nm-seg {
display: flex; background: rgba(33, 28, 21, 0.06);
border-radius: var(--nm-r-pill); padding: 3px; margin-bottom: 14px;
}
[data-mode="dark"] .nm-seg { background: rgba(239, 233, 222, 0.08); }
.nm-seg button {
flex: 1; text-align: center; font-size: 12px; font-weight: 600; border: 0;
padding: 7px 0; border-radius: var(--nm-r-pill); color: var(--nm-sub);
background: none; cursor: pointer; font-family: var(--nm-sans);
}
.nm-seg button[aria-selected="true"] { background: var(--nm-surface); color: var(--nm-ink); box-shadow: var(--nm-shadow-card); }
[data-mode="dark"] .nm-seg button[aria-selected="true"] { background: #EFE9DE; color: #17130E; }
/* -------------------------------------------------------- progress + goal -- */
.nm-progress { height: 6px; border-radius: var(--nm-r-pill); background: rgba(33,28,21,0.08); overflow: hidden; }
[data-mode="dark"] .nm-progress { background: rgba(239, 233, 222, 0.1); }
.nm-progress i { display: block; height: 100%; border-radius: var(--nm-r-pill); background: var(--nm-dot-gold); }
.nm-progress--bad i { background: var(--nm-dot-coral); }
.nm-focus {
display: flex; align-items: center; gap: 10px; background: var(--nm-gold-soft);
border-radius: 15px; padding: 10px 14px; font-size: 12px; color: var(--nm-text);
margin-bottom: 9px;
}
.nm-focus .k { font-size: 9.5px; letter-spacing: 0.14em; font-weight: 800; color: var(--nm-gold); flex: 0 0 auto; }
/* --------------------------------------------------------- profile pieces -- */
.nm-avatar {
width: 78px; height: 78px; border-radius: 50%; margin: 12px auto 8px;
background: linear-gradient(150deg, #2A2119, #171209); color: #D8B35A;
display: flex; align-items: center; justify-content: center;
font-family: var(--nm-serif); font-size: 27px; position: relative;
box-shadow: 0 12px 26px -12px rgba(30, 22, 10, 0.5);
}
.nm-avatar .nm-crest-badge {
position: absolute; bottom: -3px; right: -3px; width: 26px; height: 26px;
background: var(--nm-bg); border-radius: 50%; padding: 2px;
}
.nm-pname { text-align: center; font-family: var(--nm-serif); font-weight: 400; font-size: 26px; color: var(--nm-ink); }
.nm-pname em { font-style: italic; color: var(--nm-gold); }
.nm-pmeta { text-align: center; font-size: 12px; color: var(--nm-sub); margin: 5px 0 10px; }
.nm-actions { display: flex; gap: 9px; margin-bottom: 13px; }
.nm-actions > * {
flex: 1; text-align: center; background: var(--nm-surface); border: 0; cursor: pointer;
border-radius: 15px; padding: 10px 0 9px; box-shadow: var(--nm-shadow-card);
font-size: 10.5px; font-weight: 600; color: var(--nm-text); font-family: var(--nm-sans);
}
.nm-actions svg { display: block; margin: 0 auto 3px; color: var(--nm-gold); }
/* -------------------------------------------------------------- tab bar -- */
.nm-tabbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
display: flex; justify-content: space-around; align-items: center;
padding: 11px 10px calc(10px + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, 0.92); border-top: 1px solid var(--nm-line);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
[data-mode="dark"] .nm-tabbar { background: rgba(26, 21, 17, 0.95); }
.nm-tab {
display: flex; flex-direction: column; align-items: center; gap: 3px;
font-size: 9.5px; font-weight: 600; color: var(--nm-sub);
min-width: 44px; padding: 2px 6px;
}
.nm-tab svg { width: 21px; height: 21px; }
.nm-tab[aria-current] { color: var(--nm-gold); }
/* icons: inline SVG, stroke currentColor, stroke-width 1.6, round caps */
.nm-icn { width: 21px; height: 21px; stroke-width: 1.6; fill: none;
stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
/* ------------------------------------------------------- desktop >=900px -- */
@media (min-width: 900px) {
.nm-page { max-width: 1080px; padding: 0 32px 48px calc(var(--nm-rail-w) + 32px); }
.nm-tabbar {
left: 0; right: auto; top: 0; bottom: 0; width: var(--nm-rail-w);
flex-direction: column; justify-content: flex-start; gap: 4px;
padding: 24px 14px; border-top: 0; border-right: 1px solid var(--nm-line);
}
.nm-tabbar::before { /* crest sits at the top of the rail */
content: ""; width: 44px; height: 44px; margin: 0 auto 18px;
background: var(--nm-crest-url) center / contain no-repeat;
}
.nm-tab {
flex-direction: row; gap: 12px; width: 100%; font-size: 13px;
padding: 11px 14px; border-radius: 13px;
}
.nm-tab[aria-current] { background: var(--nm-gold-soft); }
.nm-topbar .nm-crest { display: none; } /* crest lives in the rail */
.nm-grid-2 { grid-template-columns: repeat(4, 1fr); }
.nm-mini-row { max-width: 560px; }
.nm-hero { min-height: 260px; }
}
/* --------------------------------------------------------------- motion -- */
.nm-card, .nm-btn, .nm-tab, .nm-seg button { transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease; }
a.nm-card:active, button.nm-card:active { transform: scale(0.985); }
@media (prefers-reduced-motion: reduce) {
.nm *, .nm *::before, .nm *::after { transition: none !important; animation: none !important; }
}
/* ============================================================== motion -- */
/* Doctrine: one orchestrated entrance per screen, then quiet. Motion only
ever touches transform + opacity (GPU-composited, no layout, no jank).
Stagger is set server-side via --i in a style attr — zero JS required.
The reduced-motion block at the top of this section wins over everything. */
@media (prefers-reduced-motion: reduce) {
.nm-rise, .nm-bars i, .nm-progress i, .nm-unread, .nm-hero--breathe .nm-hero-photo,
.nm-skeleton { animation: none !important; }
}
/* Entrance: content rises 10px and fades in, cards cascade 45ms apart.
Usage: — number top to bottom. */
@keyframes nm-rise-kf { from { opacity: 0; transform: translateY(10px); } }
.nm-rise {
animation: nm-rise-kf 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: calc(var(--i, 0) * 45ms);
}
/* Chart bars grow up from the baseline once, after the card has landed. */
@keyframes nm-grow-kf { from { transform: scaleY(0); } }
.nm-bars i {
transform-origin: bottom;
animation: nm-grow-kf 0.5s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.nm-bars i:nth-child(2) { animation-delay: 0.22s; } .nm-bars i:nth-child(3) { animation-delay: 0.26s; }
.nm-bars i:nth-child(4) { animation-delay: 0.30s; } .nm-bars i:nth-child(5) { animation-delay: 0.34s; }
.nm-bars i:nth-child(6) { animation-delay: 0.38s; } .nm-bars i:nth-child(7) { animation-delay: 0.42s; }
.nm-bars i:nth-child(8) { animation-delay: 0.46s; }
/* Progress fills sweep in once from the left. */
@keyframes nm-fill-kf { from { transform: scaleX(0); } }
.nm-progress i { transform-origin: left; animation: nm-fill-kf 0.6s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
/* Unread dot pops once when it appears — a single acknowledgment, no pulsing. */
@keyframes nm-pop-kf { from { transform: scale(0); } 60% { transform: scale(1.3); } }
.nm-unread { animation: nm-pop-kf 0.3s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
/* Optional hero breathe: 1.00 -> 1.045 over 16s, alternating. Opt-in via
.nm-hero--breathe on the hero. Compositor-only; skip on data-heavy screens. */
@keyframes nm-breathe-kf { to { transform: scale(1.045); } }
.nm-hero--breathe .nm-hero-photo { animation: nm-breathe-kf 16s ease-in-out alternate infinite; }
/* Desktop hover lift (pointer devices only — never on touch). */
@media (hover: hover) {
a.nm-card:hover, button.nm-card:hover { transform: translateY(-1px); }
.nm-btn:hover { filter: brightness(1.04); }
}
/* Skeletons while data loads: soft opacity pulse, no gradient sweep. */
@keyframes nm-skel-kf { 50% { opacity: 0.4; } }
.nm-skeleton {
border-radius: 10px; min-height: 14px;
background: rgba(33, 28, 21, 0.08);
animation: nm-skel-kf 1.6s ease-in-out infinite;
}
[data-mode="dark"] .nm-skeleton { background: rgba(239, 233, 222, 0.09); }
/* ============================================================================
NM-APP-V2 — component batch 2 (added 07/23/26 for the app migration).
Forms, dense lists, tables, modals/sheets, flash + toast, search,
pagination, empty states, photo avatars, back links. Same token
vocabulary as batch 1 — no new colors, both modes, reduced-motion honored.
============================================================================ */
/* ----------------------------------------------------------------- forms -- */
.nm-field { margin-bottom: 14px; }
.nm-label {
display: block; font-size: 12px; font-weight: 600; color: var(--nm-ink);
margin-bottom: 6px; letter-spacing: -0.01em;
}
.nm-label .nm-req { color: var(--nm-coral); margin-left: 2px; }
.nm-input, .nm-textarea, .nm-select {
width: 100%; font-family: var(--nm-sans); font-size: 15px; color: var(--nm-ink);
background: var(--nm-surface); border: 1px solid var(--nm-line);
border-radius: 13px; padding: 12px 14px; min-height: 46px; line-height: 1.4;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
-webkit-appearance: none; appearance: none;
}
[data-mode="dark"] .nm-input,
[data-mode="dark"] .nm-textarea,
[data-mode="dark"] .nm-select { background: var(--nm-surface-2); }
.nm-input::placeholder, .nm-textarea::placeholder { color: var(--nm-faint); }
.nm-input:focus, .nm-textarea:focus, .nm-select:focus {
outline: none; border-color: var(--nm-gold); box-shadow: 0 0 0 3px var(--nm-gold-soft);
}
.nm-textarea { min-height: 92px; resize: vertical; }
.nm-select {
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A9184' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 13px center;
}
.nm-help { font-size: 12px; color: var(--nm-sub); margin-top: 6px; }
.nm-field--error .nm-input,
.nm-field--error .nm-textarea,
.nm-field--error .nm-select { border-color: var(--nm-coral); }
.nm-field--error .nm-help { color: var(--nm-coral); }
/* checkbox + radio rows (44px target, gold accent) */
.nm-check, .nm-radio {
display: flex; align-items: center; gap: 11px; min-height: 44px;
cursor: pointer; font-size: 14px; color: var(--nm-text);
}
.nm-check input, .nm-radio input {
width: 20px; height: 20px; accent-color: var(--nm-gold); flex: 0 0 auto; cursor: pointer;
}
/* leading-icon input (search) */
.nm-search { position: relative; margin-bottom: 12px; }
.nm-search svg {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
color: var(--nm-sub); width: 18px; height: 18px; pointer-events: none;
}
.nm-search .nm-input { padding-left: 42px; border-radius: var(--nm-r-pill); }
/* auth card (login / register) — cream card, crest, gold button; no autofocus */
.nm-authwrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.nm-authcard {
width: 100%; max-width: 380px; background: var(--nm-surface);
border-radius: 22px; box-shadow: var(--nm-shadow-float); padding: 30px 24px;
}
.nm-authcard .nm-crest { width: 40px; height: 40px; margin: 0 auto 14px; }
.nm-authcard h1 {
text-align: center; font-family: var(--nm-serif); font-weight: 400;
font-size: 26px; color: var(--nm-ink); margin-bottom: 20px;
}
.nm-authcard .nm-btn--gold { width: 100%; margin-top: 4px; }
/* ------------------------------------------------------------- list rows -- */
/* dense lists (guest roster, reservations) — lighter than a full nm-card */
.nm-list {
background: var(--nm-surface); border-radius: var(--nm-r-card);
box-shadow: var(--nm-shadow-card); overflow: hidden; margin-bottom: 12px;
}
.nm-list-row {
display: flex; align-items: center; gap: 12px; padding: 12px 15px;
min-height: 54px; border-top: 1px solid var(--nm-line);
}
.nm-list-row:first-child { border-top: 0; }
a.nm-list-row, button.nm-list-row {
width: 100%; text-align: left; background: none; cursor: pointer;
font: inherit; color: inherit; border-left: 0; border-right: 0; border-bottom: 0;
border-top: 1px solid var(--nm-line);
}
a.nm-list-row:first-child, button.nm-list-row:first-child { border-top: 0; }
.nm-list-row h4 { font-size: 14px; font-weight: 600; color: var(--nm-ink); letter-spacing: -0.01em; }
.nm-list-row p { font-size: 12px; color: var(--nm-sub); margin-top: 1px; }
.nm-list-row .nm-chev { margin-left: auto; color: var(--nm-faint); font-size: 20px; flex: 0 0 auto; }
.nm-list-row .nm-rmeta {
margin-left: auto; text-align: right; font-size: 12px; color: var(--nm-sub);
font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
/* ----------------------------------------------------------------- table -- */
/* true tabular data (insights, ledgers) — scrolls horizontally in its own box */
.nm-table-wrap {
overflow-x: auto; -webkit-overflow-scrolling: touch;
background: var(--nm-surface); border-radius: var(--nm-r-card);
box-shadow: var(--nm-shadow-card); margin-bottom: 12px;
}
.nm-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.nm-table th {
font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
color: var(--nm-sub); text-align: left; padding: 12px 14px; white-space: nowrap;
}
.nm-table td {
font-size: 13px; color: var(--nm-text); padding: 11px 14px;
border-top: 1px solid var(--nm-line); white-space: nowrap;
}
.nm-table td.nm-num, .nm-table th.nm-num { text-align: right; }
@media (hover: hover) { .nm-table tbody tr:hover { background: var(--nm-gold-soft); } }
/* --------------------------------------------------------- photo avatars -- */
.nm-avatar--photo { background: none; }
.nm-avatar--photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.nm-avatar--sm { width: 40px; height: 40px; font-size: 15px; margin: 0; box-shadow: none; flex: 0 0 auto; }
/* ------------------------------------------------------- modal / sheet -- */
/* native