/* ============================================ WITHINGS IA TEMPLATE KIT — BASE STYLES ============================================ This file is the single source of truth for design tokens, fonts, and base layout. Engineers maintain this file — do NOT modify. Supports TWO template types: - Dark theme (mobile app webviews) → default - Light theme (partner landing pages) → add class="theme-light" to ============================================ */ /* ============================================ FONTS — Full Aeonik family ============================================ */ @font-face { font-family: 'Aeonik'; src: url('https://static.withings.com/content/fonts/Aeonik/aeonik-light-webfont.woff2') format('woff2'), url('https://static.withings.com/content/fonts/Aeonik/aeonik-light-webfont.woff') format('woff'); font-weight: 300; font-style: normal; font-display: block; size-adjust: 100%; } @font-face { font-family: 'Aeonik'; src: url('https://static.withings.com/content/fonts/Aeonik/aeonik-regular-webfont.woff2') format('woff2'), url('https://static.withings.com/content/fonts/Aeonik/aeonik-regular-webfont.woff') format('woff'); font-weight: 400; font-style: normal; font-display: block; size-adjust: 100%; } @font-face { font-family: 'Aeonik'; src: url('https://static.withings.com/content/fonts/Aeonik/aeonik-medium-webfont.woff2') format('woff2'), url('https://static.withings.com/content/fonts/Aeonik/aeonik-medium-webfont.woff') format('woff'); font-weight: 500; font-style: normal; font-display: block; size-adjust: 100%; } @font-face { font-family: 'Aeonik'; src: url('https://static.withings.com/content/fonts/Aeonik/aeonik-bold-webfont.woff2') format('woff2'), url('https://static.withings.com/content/fonts/Aeonik/aeonik-bold-webfont.woff') format('woff'); font-weight: 700; font-style: normal; font-display: block; size-adjust: 100%; } @font-face { font-family: 'Aeonik'; src: url('https://static.withings.com/content/fonts/Aeonik/aeonik-black-webfont.woff2') format('woff2'), url('https://static.withings.com/content/fonts/Aeonik/aeonik-black-webfont.woff') format('woff'); font-weight: 800; font-style: normal; font-display: block; size-adjust: 100%; } /* ============================================ DESIGN TOKENS — Dark Theme (default) ============================================ */ :root { /* Backgrounds */ --bg-page: #0F0F0F; --bg-card: #2D2B28; --bg-card-inner: rgba(255,255,255,0.05); --bg-green-zone: #173E18; --bg-blue-zone: #394B96; /* Accents */ --accent-green: #6DAF6D; --accent-blue: #7F9BFF; --accent-yellow: #E7BC2C; /* Brand */ --brand-primary: #5168CC; --brand-primary-hover: #4158B3; --gradient-start: #8372C2; --gradient-end: #E46287; --gradient-cardio: linear-gradient(90deg, var(--gradient-start) 5.72%, var(--gradient-end) 95.31%); /* Text */ --text-primary: #FFFFFF; --text-secondary: #DDD9D5; --text-muted: #A49F9B; --text-dim50: rgba(255,255,255,0.5); --text-dim75: rgba(255,255,255,0.75); /* Borders */ --border-divider: rgba(255,255,255,0.12); /* Radius */ --radius-card: 24px; --radius-inner: 20px; --radius-pill: 100px; /* Icon backgrounds */ --icon-bg: #53504C; --yellow-bg: #433506; } /* ============================================ DESIGN TOKENS — Light Theme Add class="theme-light" to to activate ============================================ */ .theme-light { --bg-page: #F7F5F3; --bg-card: #FFFFFF; --bg-card-inner: rgba(0,0,0,0.03); --text-primary: #0F0F0F; --text-secondary: #45413E; --text-muted: #7A7672; --text-dim50: rgba(0,0,0,0.5); --text-dim75: rgba(0,0,0,0.75); --border-divider: rgba(0,0,0,0.08); --icon-bg: rgba(81,104,204,0.10); } /* ============================================ RESET & GLOBAL ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg-page); min-height: 100vh; overflow-x: hidden; height: -webkit-fill-available; } body { font-family: 'Aeonik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-page); color: var(--text-primary); min-height: 100vh; min-height: -webkit-fill-available; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; line-height: 120%; } /* ============================================ DARK THEME — App container & cards (only applies without .theme-light) ============================================ */ html:not(.theme-light) body { background: linear-gradient(180deg, rgba(23,62,24,0.4) 0%, rgba(23,62,24,0) 24%), var(--bg-page); } .app { max-width: 402px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); } .card { background: var(--bg-card); border-radius: var(--radius-card); padding: 16px; } .icon { display: inline-block; vertical-align: middle; fill: currentColor; flex-shrink: 0; } /* ============================================ SHARED ANIMATIONS ============================================ */ /* Scroll entrance (dark theme) */ .fade-up { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } .fade-up.visible { opacity: 1; transform: none; } /* Fade in up (light theme) */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ SHARED COMPONENTS — NavBar ============================================ */ .c-nav-bar { display: flex; align-items: center; padding: 8px 16px; gap: 12px; } .c-nav-bar__back { background: none; border: none; color: var(--text-primary); cursor: pointer; padding: 4px; display: flex; align-items: center; } .c-nav-bar__title-group { display: flex; align-items: center; gap: 8px; } .c-nav-bar__logo { width: 24px; height: 24px; } .c-nav-bar__title { font-size: 17px; font-weight: 500; } /* ============================================ SHARED COMPONENTS — Chart Cards ============================================ */ .c-chart-card { margin: 0 16px; display: flex; flex-direction: column; gap: 12px; } .c-chart-card__title { font-size: 16px; font-weight: 500; color: var(--text-primary); } .c-chart-card__canvas-wrap { position: relative; height: 180px; } /* Loading indicator */ .c-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; gap: 16px; } .c-loader__spinner { width: 40px; height: 40px; border: 3px solid rgba(255,255,255,0.08); border-top-color: #6DAF6D; border-radius: 50%; animation: loader-spin 0.8s linear infinite; } .c-loader__text { font-size: 14px; color: rgba(228,224,218,0.5); } @keyframes loader-spin { to { transform: rotate(360deg); } } /* ============================================ DEMO MODE BANNER ============================================ */ .c-demo-banner { display: flex; align-items: center; gap: 8px; padding: 8px 16px; margin: 0 16px; background: rgba(231, 188, 44, 0.12); border: 1px solid rgba(231, 188, 44, 0.25); border-radius: 12px; font-size: 13px; font-weight: 500; color: #E7BC2C; transition: opacity 0.3s, transform 0.3s; } .c-demo-banner--dismissed { opacity: 0; transform: translateY(-8px); pointer-events: none; } .c-demo-banner__text { flex: 1; } .c-demo-banner__close { background: none; border: none; color: #E7BC2C; font-size: 18px; cursor: pointer; padding: 0 4px; opacity: 0.6; line-height: 1; } .c-demo-banner__close:hover { opacity: 1; } /* Light theme variant */ .theme-light .c-demo-banner { background: rgba(81, 104, 204, 0.08); border-color: rgba(81, 104, 204, 0.2); color: var(--brand-primary); } .theme-light .c-demo-banner__close { color: var(--brand-primary); }