/* Ottilie design tokens Three palettes (data-palette on ): sage-ottilie (default), warm-cream, deep-sage. Density switches paddings (data-density). */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..800;1,6..72,300..800&family=DM+Sans:wght@400;500;600;700&display=swap'); :root { --font-display: 'Newsreader', ui-serif, Georgia, serif; --font-ui: 'DM Sans', ui-sans-serif, system-ui, sans-serif; --shadow-card: 0 1px 2px rgba(38, 28, 20, 0.04), 0 8px 20px rgba(38, 28, 20, 0.06); --shadow-nav: 0 -1px 20px rgba(38, 28, 20, 0.08); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; /* fallback palette – sage ottilie (matches the wordmark) */ --bg: #f2ede0; --bg-elev: #fbf9f3; --card: #ffffff; --card-edge: #e4dfd0; --ink: #22281d; --ink-2: #4d5647; --ink-3: #8a8f7d; --brand: #6e8a66; /* logo sage */ --brand-ink: #3f5637; --brand-tint: #dae2d1; --accent: #b8894f; /* warm honey/tea */ --accent-tint: #ebdbc0; --warn: #c48a2e; --warn-tint: #f0dcb2; --danger: #a94a3a; --danger-tint: #ecc9bf; --success: #6e8a66; --success-tint: #dae2d1; --hairline: rgba(34, 40, 29, 0.08); } /* Default & 'sage-ottilie' — anchored on the logo greens */ html[data-palette="sage-ottilie"] { --bg: #f2ede0; --bg-elev: #fbf9f3; --card: #ffffff; --card-edge: #e4dfd0; --ink: #22281d; --ink-2: #4d5647; --ink-3: #8a8f7d; --brand: #6e8a66; --brand-ink: #3f5637; --brand-tint: #dae2d1; --accent: #b8894f; --accent-tint: #ebdbc0; --warn: #c48a2e; --warn-tint: #f0dcb2; --danger: #a94a3a; --danger-tint: #ecc9bf; --success: #6e8a66; --success-tint: #dae2d1; --hairline: rgba(34, 40, 29, 0.08); } /* Warm cream — cream-forward, sage as accent, terracotta warmth */ html[data-palette="warm-cream"] { --bg: #efe6d3; --bg-elev: #fbf7ec; --card: #ffffff; --card-edge: #e6dcc4; --ink: #2a2419; --ink-2: #5a5140; --ink-3: #928675; --brand: #6e8a66; /* still the logo sage */ --brand-ink: #3f5637; --brand-tint: #dae2d1; --accent: #c26c46; /* soft terracotta */ --accent-tint: #f2d3c2; --warn: #c68326; --warn-tint: #f1d9a8; --danger: #a94a3a; --danger-tint: #ecc9bf; --success: #6e8a66; --success-tint: #dae2d1; --hairline: rgba(42, 36, 25, 0.09); } /* Deep sage — richer & moodier, darker bg, sage still primary */ html[data-palette="deep-sage"] { --bg: #e6e2d1; --bg-elev: #f4efdf; --card: #fbf9f3; --card-edge: #d4cfbc; --ink: #1c2318; --ink-2: #3f4838; --ink-3: #757b6a; --brand: #567a4d; /* deeper sage */ --brand-ink: #2f4728; --brand-tint: #cdd8c1; --accent: #a67238; /* deeper honey */ --accent-tint: #e6cea2; --warn: #b57420; --warn-tint: #ebd09a; --danger: #973f2f; --danger-tint: #e5bfb3; --success: #567a4d; --success-tint: #cdd8c1; --hairline: rgba(28, 35, 24, 0.1); } /* Screen base */ .cuppa-screen { background: var(--bg); color: var(--ink); font-family: var(--font-ui); height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } .cuppa-screen::-webkit-scrollbar { display: none; } /* Type */ .eyebrow { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .display { font-family: var(--font-display); font-weight: 400; font-optical-sizing: auto; letter-spacing: -0.01em; color: var(--ink); line-height: 1.05; } .display-italic { font-style: italic; font-weight: 300; } h1.display { font-size: 32px; } h2.display { font-size: 24px; } h3.display { font-size: 20px; } .muted { color: var(--ink-2); } .dim { color: var(--ink-3); } .card { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 18px; border: 1px solid var(--hairline); } .card-tint { background: var(--bg-elev); border-radius: var(--radius-lg); padding: 18px; border: 1px solid var(--hairline); } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--accent-tint); color: var(--brand-ink); } .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; } /* Tab bar */ .tabbar { position: absolute; bottom: 0; left: 0; right: 0; height: 82px; background: color-mix(in oklab, var(--bg-elev) 82%, transparent); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-top: 1px solid var(--hairline); display: flex; padding: 8px 8px 26px; z-index: 30; } .tabbar-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: transparent; border: none; color: var(--ink-3); cursor: pointer; font-family: var(--font-ui); font-size: 10.5px; font-weight: 500; padding: 4px; } .tabbar-btn.active { color: var(--brand); } .tabbar-btn svg { transition: transform 0.2s ease; } .tabbar-btn:active svg { transform: scale(0.9); } /* Nav header (in-app) */ .nav-header { padding: 60px 20px 8px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; } .nav-header .greet { font-family: var(--font-display); font-size: 15px; color: var(--ink-2); font-style: italic; font-weight: 300; } .nav-header .title { font-family: var(--font-display); font-size: 30px; line-height: 1; letter-spacing: -0.01em; } .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 500; font-size: 17px; overflow: hidden; } .avatar-lg { width: 64px; height: 64px; font-size: 24px; } .avatar-sm { width: 30px; height: 30px; font-size: 12px; } /* Sparkline */ .sparkline { display: block; } .sparkline path.stroke { fill: none; stroke: var(--brand); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .sparkline path.fill { fill: var(--brand); opacity: 0.09; } .sparkline circle.head { fill: var(--brand); } /* Metric card */ .metric { background: var(--card); border-radius: var(--radius-lg); padding: 16px; border: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 8px; } .metric-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; } .metric-label { font-size: 12px; color: var(--ink-3); font-weight: 500; letter-spacing: 0.02em; } .metric-value { font-family: var(--font-display); font-size: 28px; line-height: 1; font-weight: 400; color: var(--ink); } .metric-value .unit { font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--ink-3); margin-left: 3px; } .metric-delta { font-size: 11px; font-weight: 600; color: var(--ink-3); } .metric-delta.up { color: var(--success); } .metric-delta.down { color: var(--warn); } .metric-delta.bad { color: var(--danger); } /* Alert row */ .alert { display: flex; gap: 12px; padding: 14px; background: var(--card); border-radius: var(--radius-md); border: 1px solid var(--hairline); align-items: flex-start; } .alert.warning { border-left: 3px solid var(--warn); } .alert.critical { border-left: 3px solid var(--danger); background: var(--danger-tint); border-color: color-mix(in oklab, var(--danger) 40%, transparent); } .alert.info { border-left: 3px solid var(--accent); } /* Buttons */ .btn { font-family: var(--font-ui); border: none; border-radius: 999px; padding: 12px 20px; font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; justify-content: center; } .btn-primary { background: var(--brand); color: white; } .btn-primary:hover { filter: brightness(1.05); } .btn-secondary { background: var(--card); color: var(--ink); border: 1px solid var(--hairline); } .btn-ghost { background: transparent; color: var(--brand); } .btn-danger { background: var(--danger); color: white; } /* Segmented */ .seg { display: inline-flex; padding: 4px; background: var(--card); border-radius: 999px; border: 1px solid var(--hairline); gap: 2px; } .seg button { background: transparent; border: none; padding: 6px 12px; border-radius: 999px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--ink-3); cursor: pointer; } .seg button.active { background: var(--brand); color: white; } /* Transcript excerpt */ .transcript { font-family: var(--font-display); font-size: 16px; line-height: 1.5; font-style: italic; color: var(--ink); font-weight: 300; } .transcript .m::before { content: '"'; opacity: 0.4; margin-right: 2px; } .transcript .m::after { content: '"'; opacity: 0.4; margin-left: 2px; } .transcript .who { font-family: var(--font-ui); font-style: normal; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase; display: block; margin-top: 6px; font-weight: 600; } /* Gauge */ .gauge-value { font-family: var(--font-display); font-size: 42px; line-height: 1; color: var(--ink); } .gauge-label { font-size: 12px; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; margin-top: 4px; } /* Waveform */ .waveform rect { fill: var(--brand); } .waveform rect.dim { fill: var(--brand); opacity: 0.25; } /* Divider */ .divider { height: 1px; background: var(--hairline); margin: 12px 0; } /* List row */ .row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); } .row:last-child { border-bottom: none; } /* Bottom-sheet drawer accent */ .section-caption { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 14px; color: var(--ink-2); margin-top: 2px; } /* Tea steam decorative — subtle top-of-screen */ .tea-header { position: relative; } /* Progress bar */ .bar { height: 6px; background: var(--hairline); border-radius: 999px; overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--brand); border-radius: 999px; } /* Utility */ .stack { display: flex; flex-direction: column; } .stack-2 > * + * { margin-top: 8px; } .stack-3 > * + * { margin-top: 12px; } .stack-4 > * + * { margin-top: 16px; } .stack-5 > * + * { margin-top: 20px; } .row-flex { display: flex; align-items: center; gap: 10px; } .between { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .chip { padding: 6px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--hairline); font-size: 12px; font-weight: 500; color: var(--ink-2); } .chip.active { background: var(--brand); color: white; border-color: transparent; } .badge { padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .badge.warn { background: var(--warn-tint); color: color-mix(in oklab, var(--warn) 70%, black); } .badge.danger { background: var(--danger-tint); color: var(--danger); } .badge.good { background: var(--success-tint); color: color-mix(in oklab, var(--success) 60%, black); } .badge.info { background: var(--accent-tint); color: color-mix(in oklab, var(--accent) 60%, black); } /* iOS device wrapper adjustments */ .device-wrap { position: relative; width: 402px; height: 874px; } .device-wrap .screen-inner { height: 100%; padding-bottom: 92px; /* leave room for tab bar */ } /* Fade-in for screen transitions */ @keyframes screenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .cuppa-screen > * { animation: screenIn 0.3s ease-out; } /* Escalation pulse */ @keyframes pulse-red { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--danger) 40%, transparent); } 50% { box-shadow: 0 0 0 10px color-mix(in oklab, var(--danger) 0%, transparent); } } .pulse-danger { animation: pulse-red 2s ease-out infinite; } /* Digest letter styling */ .letter { background: linear-gradient(180deg, var(--bg-elev) 0%, var(--card) 100%); border-radius: var(--radius-xl); padding: 24px 22px; border: 1px solid var(--hairline); } .letter .from { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 14px; color: var(--ink-2); } .letter .greeting { font-family: var(--font-display); font-size: 26px; line-height: 1.15; color: var(--ink); margin: 12px 0 16px; letter-spacing: -0.01em; } .letter .body { font-family: var(--font-display); font-size: 15px; line-height: 1.55; color: var(--ink); font-weight: 300; } .letter .signoff { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--ink-2); margin-top: 18px; } /* onboarding tea illustration */ .tea-cup { width: 96px; height: 96px; margin: 0 auto; }