/*
* NannyCam AI — Design System
* "Warm Modernist" aesthetic: Scandinavian nursery × premium wellness app
*
* Usage:
* Then add class="day-mode" to for light theme (auto-detected by JS)
*/
/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');
/* ── CSS Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* ── Design Tokens (Dark — default) ── */
:root {
/* Surfaces */
--ds-bg: #141210;
--ds-bg-subtle: #1A1816;
--ds-surface: #1E1C18;
--ds-surface-hover: #262420;
--ds-elevated: #282520;
--ds-overlay: rgba(10, 8, 6, 0.7);
/* Borders */
--ds-border: rgba(255,255,255,0.06);
--ds-border-bold: rgba(255,255,255,0.12);
/* Text */
--ds-text: #F0ECE4;
--ds-text-2: #A09888;
--ds-text-3: #685E50;
/* Brand */
--ds-amber: #D4A23E;
--ds-amber-dim: #9E7A2E;
--ds-amber-glow: rgba(212, 162, 62, 0.15);
/* Semantic */
--ds-sleep: #A08BE8;
--ds-sleep-bg: rgba(160, 139, 232, 0.12);
--ds-cry: #E87A6A;
--ds-cry-bg: rgba(232, 122, 106, 0.12);
--ds-interact: #5FB88E;
--ds-interact-bg: rgba(95, 184, 142, 0.12);
--ds-success: #5CA66F;
--ds-success-bg: rgba(92, 166, 111, 0.10);
--ds-warning: #D4A03E;
--ds-warning-bg: rgba(212, 160, 62, 0.10);
--ds-danger: #D46A5A;
--ds-danger-bg: rgba(212, 106, 90, 0.10);
/* Typography */
--ds-font: 'Plus Jakarta Sans', -apple-system, 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
--ds-font-mono: 'SF Mono', 'Menlo', 'Consolas', monospace;
/* Spacing (8px grid) */
--ds-space-1: 4px;
--ds-space-2: 8px;
--ds-space-3: 12px;
--ds-space-4: 16px;
--ds-space-5: 20px;
--ds-space-6: 24px;
--ds-space-8: 32px;
--ds-space-10: 40px;
--ds-space-12: 48px;
/* Radius */
--ds-radius-sm: 8px;
--ds-radius: 14px;
--ds-radius-lg: 20px;
--ds-radius-xl: 28px;
--ds-radius-full: 999px;
/* Shadows */
--ds-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
--ds-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.15);
--ds-shadow-lg: 0 4px 16px rgba(0,0,0,0.25), 0 16px 48px rgba(0,0,0,0.2);
--ds-shadow-glow: 0 0 40px var(--ds-amber-glow);
/* Transitions */
--ds-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ds-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ds-duration: 200ms;
--ds-duration-lg: 400ms;
/* Z-index */
--ds-z-sticky: 100;
--ds-z-modal: 200;
--ds-z-toast: 300;
}
/* ── Light Theme ── */
:root.day-mode {
--ds-bg: #FAF8F5;
--ds-bg-subtle: #F4F1EC;
--ds-surface: #FFFFFF;
--ds-surface-hover: #F8F5F0;
--ds-elevated: #FFFFFF;
--ds-overlay: rgba(250, 248, 245, 0.8);
--ds-border: rgba(0,0,0,0.06);
--ds-border-bold: rgba(0,0,0,0.12);
--ds-text: #1A1714;
--ds-text-2: #6B6560;
--ds-text-3: #A09890;
--ds-amber: #B8892A;
--ds-amber-dim: #9E7520;
--ds-amber-glow: rgba(184, 137, 42, 0.10);
--ds-sleep: #7C5EC8;
--ds-sleep-bg: rgba(124, 94, 200, 0.08);
--ds-cry: #D05A4A;
--ds-cry-bg: rgba(208, 90, 74, 0.08);
--ds-interact: #3D9068;
--ds-interact-bg: rgba(61, 144, 104, 0.08);
--ds-success: #3D8A50;
--ds-success-bg: rgba(61, 138, 80, 0.06);
--ds-warning: #B8892A;
--ds-warning-bg: rgba(184, 137, 42, 0.06);
--ds-danger: #C0503E;
--ds-danger-bg: rgba(192, 80, 62, 0.06);
--ds-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--ds-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 24px rgba(0,0,0,0.06);
--ds-shadow-lg: 0 4px 12px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.08);
--ds-shadow-glow: 0 0 40px var(--ds-amber-glow);
}
/* ── Base ── */
body {
font-family: var(--ds-font);
background: var(--ds-bg);
color: var(--ds-text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
min-height: 100dvh;
}
::selection {
background: var(--ds-amber);
color: #fff;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* ── Typography ── */
.ds-heading-xl {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.5px;
}
.ds-heading-lg {
font-size: clamp(1.25rem, 3vw, 1.75rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.3px;
}
.ds-heading-md {
font-size: 1.1rem;
font-weight: 700;
line-height: 1.3;
}
.ds-heading-sm {
font-size: 0.875rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.01em;
}
.ds-body {
font-size: 0.9375rem;
line-height: 1.6;
}
.ds-caption {
font-size: 0.8125rem;
color: var(--ds-text-2);
line-height: 1.5;
}
.ds-overline {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ds-text-3);
}
.ds-data {
font-variant-numeric: tabular-nums;
font-weight: 700;
}
/* ── Layout ── */
.ds-page {
max-width: 480px;
margin: 0 auto;
padding: 0 var(--ds-space-4);
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: calc(var(--ds-space-12) + env(safe-area-inset-bottom, 0px));
}
.ds-page-wide {
max-width: 800px;
margin: 0 auto;
padding: 0 var(--ds-space-6);
padding-bottom: var(--ds-space-12);
}
/* ── Sticky Nav ── */
.ds-nav {
position: sticky;
top: 0;
z-index: var(--ds-z-sticky);
background: var(--ds-overlay);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
display: flex;
align-items: center;
gap: var(--ds-space-3);
padding: 0 var(--ds-space-5);
height: 52px;
border-bottom: 1px solid var(--ds-border);
}
.ds-nav-back {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-left: -8px;
border-radius: var(--ds-radius-sm);
color: var(--ds-amber);
transition: background var(--ds-duration) var(--ds-ease);
}
.ds-nav-back:hover {
background: var(--ds-amber-glow);
}
.ds-nav-back svg {
width: 20px;
height: 20px;
}
.ds-nav-title {
font-size: 1.0625rem;
font-weight: 700;
color: var(--ds-text);
}
/* ── Card ── */
.ds-card {
background: var(--ds-surface);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-lg);
padding: var(--ds-space-5);
box-shadow: var(--ds-shadow);
transition: transform var(--ds-duration) var(--ds-ease),
box-shadow var(--ds-duration) var(--ds-ease);
}
.ds-card-interactive {
cursor: pointer;
}
.ds-card-interactive:hover {
transform: translateY(-2px);
box-shadow: var(--ds-shadow-lg);
}
.ds-card-interactive:active {
transform: translateY(0);
box-shadow: var(--ds-shadow);
}
/* Card with left accent stripe */
.ds-card-accent {
border-left: 3px solid var(--_accent, var(--ds-amber));
border-radius: var(--ds-radius-sm) var(--ds-radius-lg) var(--ds-radius-lg) var(--ds-radius-sm);
}
.ds-card-accent.sleep { --_accent: var(--ds-sleep); background: var(--ds-sleep-bg); }
.ds-card-accent.cry { --_accent: var(--ds-cry); background: var(--ds-cry-bg); }
.ds-card-accent.interact { --_accent: var(--ds-interact); background: var(--ds-interact-bg); }
.ds-card-accent.success { --_accent: var(--ds-success); background: var(--ds-success-bg); }
.ds-card-accent.warning { --_accent: var(--ds-warning); background: var(--ds-warning-bg); }
.ds-card-accent.danger { --_accent: var(--ds-danger); background: var(--ds-danger-bg); }
/* ── Buttons ── */
.ds-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ds-space-2);
padding: var(--ds-space-3) var(--ds-space-5);
font-family: var(--ds-font);
font-size: 0.875rem;
font-weight: 600;
line-height: 1;
border: none;
border-radius: var(--ds-radius);
cursor: pointer;
transition: all var(--ds-duration) var(--ds-ease);
-webkit-tap-highlight-color: transparent;
}
.ds-btn-primary {
background: var(--ds-amber);
color: #fff;
box-shadow: 0 2px 8px rgba(212, 162, 62, 0.25);
}
.ds-btn-primary:hover {
filter: brightness(1.1);
box-shadow: 0 4px 16px rgba(212, 162, 62, 0.35);
}
.ds-btn-primary:active {
transform: scale(0.97);
}
.ds-btn:disabled,
.ds-btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
filter: none;
box-shadow: none;
transform: none;
}
.ds-btn-secondary {
background: var(--ds-surface);
color: var(--ds-text);
border: 1.5px solid var(--ds-border-bold);
}
.ds-btn-secondary:hover {
background: var(--ds-surface-hover);
border-color: var(--ds-amber);
}
.ds-btn-ghost {
background: transparent;
color: var(--ds-text-2);
}
.ds-btn-ghost:hover {
background: var(--ds-amber-glow);
color: var(--ds-amber);
}
.ds-btn-sm {
padding: var(--ds-space-2) var(--ds-space-3);
font-size: 0.8125rem;
border-radius: var(--ds-radius-sm);
}
/* ── Pill / Chip ── */
.ds-pill {
display: inline-flex;
align-items: center;
gap: var(--ds-space-1);
padding: 4px 12px;
font-size: 0.75rem;
font-weight: 600;
border-radius: var(--ds-radius-full);
background: var(--ds-surface);
border: 1px solid var(--ds-border);
color: var(--ds-text-2);
}
.ds-pill.active {
background: var(--ds-amber);
border-color: var(--ds-amber);
color: #fff;
}
.ds-pill.sleep { background: var(--ds-sleep-bg); color: var(--ds-sleep); border-color: transparent; }
.ds-pill.cry { background: var(--ds-cry-bg); color: var(--ds-cry); border-color: transparent; }
.ds-pill.interact { background: var(--ds-interact-bg); color: var(--ds-interact); border-color: transparent; }
.ds-pill.success { background: var(--ds-success-bg); color: var(--ds-success); border-color: transparent; }
.ds-pill.danger { background: var(--ds-danger-bg); color: var(--ds-danger); border-color: transparent; }
/* ── Input ── */
.ds-input {
width: 100%;
padding: var(--ds-space-3) var(--ds-space-4);
font-family: var(--ds-font);
font-size: 1rem;
color: var(--ds-text);
background: var(--ds-bg-subtle);
border: 1.5px solid var(--ds-border);
border-radius: var(--ds-radius);
outline: none;
transition: border-color var(--ds-duration) var(--ds-ease),
box-shadow var(--ds-duration) var(--ds-ease);
}
.ds-input:focus {
border-color: var(--ds-amber);
box-shadow: 0 0 0 3px var(--ds-amber-glow);
}
.ds-input::placeholder {
color: var(--ds-text-3);
}
/* ── Progress Bar ── */
.ds-progress {
height: 8px;
background: var(--ds-bg-subtle);
border-radius: var(--ds-radius-full);
overflow: hidden;
}
.ds-progress-fill {
height: 100%;
border-radius: var(--ds-radius-full);
transition: width var(--ds-duration-lg) var(--ds-ease);
background: var(--ds-amber);
}
/* ── Status Indicator ── */
.ds-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.ds-status-dot.live {
background: var(--ds-success);
box-shadow: 0 0 8px var(--ds-success);
animation: ds-pulse 2s ease-in-out infinite;
}
@keyframes ds-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* ── Divider ── */
.ds-divider {
height: 1px;
background: var(--ds-border);
margin: var(--ds-space-5) 0;
}
/* ── Section Label ── */
.ds-section-label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-text-3);
padding: var(--ds-space-4) 0 var(--ds-space-2);
}
/* ── Icon Container ── */
.ds-icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--ds-radius);
font-size: 1.4rem;
flex-shrink: 0;
}
.ds-icon-wrap.sleep { background: var(--ds-sleep-bg); }
.ds-icon-wrap.cry { background: var(--ds-cry-bg); }
.ds-icon-wrap.interact { background: var(--ds-interact-bg); }
.ds-icon-wrap.amber { background: var(--ds-amber-glow); }
/* ── Animations ── */
.ds-fade-up {
opacity: 0;
transform: translateY(16px);
animation: ds-fade-up 0.5s var(--ds-ease) forwards;
}
@keyframes ds-fade-up {
to { opacity: 1; transform: translateY(0); }
}
/* Stagger children */
.ds-stagger > * {
opacity: 0;
transform: translateY(12px);
animation: ds-fade-up 0.4s var(--ds-ease) forwards;
}
.ds-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.ds-stagger > *:nth-child(2) { animation-delay: 0.10s; }
.ds-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.ds-stagger > *:nth-child(4) { animation-delay: 0.20s; }
.ds-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.ds-stagger > *:nth-child(6) { animation-delay: 0.30s; }
.ds-stagger > *:nth-child(7) { animation-delay: 0.35s; }
.ds-stagger > *:nth-child(8) { animation-delay: 0.40s; }
.ds-stagger > *:nth-child(9) { animation-delay: 0.45s; }
.ds-stagger > *:nth-child(10) { animation-delay: 0.50s; }
/* Subtle float for hero elements */
@keyframes ds-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* ── Grain Texture (applied via ::after on containers) ── */
.ds-grain::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.025;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 256px 256px;
}
:root.day-mode .ds-grain::after {
opacity: 0.02;
}
/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ds-border-bold); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ds-text-3); }
/* ── Utility ── */
.ds-text-amber { color: var(--ds-amber); }
.ds-text-sleep { color: var(--ds-sleep); }
.ds-text-cry { color: var(--ds-cry); }
.ds-text-interact { color: var(--ds-interact); }
.ds-text-success { color: var(--ds-success); }
.ds-text-danger { color: var(--ds-danger); }
.ds-text-muted { color: var(--ds-text-3); }
.ds-text-secondary { color: var(--ds-text-2); }
.ds-flex { display: flex; }
.ds-flex-col { display: flex; flex-direction: column; }
.ds-items-center { align-items: center; }
.ds-justify-between { justify-content: space-between; }
.ds-gap-1 { gap: var(--ds-space-1); }
.ds-gap-2 { gap: var(--ds-space-2); }
.ds-gap-3 { gap: var(--ds-space-3); }
.ds-gap-4 { gap: var(--ds-space-4); }
/* ── Day/Night Auto-Detection Script (inline in pages) ──
── */
/* ── Print ── */
@media print {
body { background: #fff; color: #000; }
.ds-nav { display: none; }
.ds-card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
.ds-grain::after { display: none; }
@page { margin: 1.5cm; }
}