/* GIFT Accelerando design tokens — copied verbatim from tokens.css v0.1 */ :root { --gift-paper: #F4F0E7; --gift-paper-2: #FBF8F1; --gift-ink: #16332B; --gift-ink-soft: #52635B; --gift-ink-mute: #8A968F; --gift-teal: #17A98A; --gift-teal-bright: #39D0B4; --gift-teal-deep: #0E6E5A; --gift-brass: #C39A46; --gift-line: #E6DFD1; --gift-danger: #C2543D; /* semantic — light default */ --bg: var(--gift-paper); --surface: #FFFFFF; --surface-2: var(--gift-paper-2); --text: var(--gift-ink); --text-soft: var(--gift-ink-soft); --text-mute: var(--gift-ink-mute); --accent: var(--gift-teal); --accent-b: var(--gift-teal-bright); --accent-deep: var(--gift-teal-deep); --on-accent: #FFFFFF; --tint: #E4F4EF; --brass: var(--gift-brass); --line: var(--gift-line); --danger: var(--gift-danger); --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --fs-h1: 22px; --fs-h2: 18px; --fs-body: 15px; --fs-small: 13px; --fs-micro: 11px; --lh-body: 1.55; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; --dur-fast: 160ms; --ease-out: cubic-bezier(.22,1,.36,1); --nav-h: 64px; --header-h: 52px; --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px); } /* dark override — applied because */ [data-theme="dark"] { --bg: #0E1F1A; --surface: #16302A; --surface-2: #12271F; --text: #EDE7DA; --text-soft: #A9B7AF; --text-mute: #6E7F76; --accent: var(--gift-teal-bright); --accent-b: var(--gift-teal-bright); --accent-deep: #7FE6CF; --on-accent: #052019; --tint: #163A31; --brass: #D8B65E; --line: #274038; --danger: #E0795F; } /* reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); background: var(--bg); height: 100%; display: flex; flex-direction: column; overflow: hidden; -webkit-font-smoothing: antialiased; } button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; } img { display: block; } /* header */ .app-header { display: flex; align-items: center; justify-content: space-between; height: calc(var(--header-h) + var(--safe-top)); padding: var(--safe-top) var(--sp-4) 0; background: var(--surface); border-bottom: 1px solid var(--line); flex-shrink: 0; z-index: 10; } .app-brand { display: flex; align-items: center; gap: var(--sp-2); } .brand-mark { width: 28px; height: 28px; } .brand-name { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.3px; color: var(--text); } .demo-pill { font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--brass); background: color-mix(in srgb, var(--brass) 14%, transparent); border: 1px solid color-mix(in srgb, var(--brass) 30%, transparent); padding: 2px 8px; border-radius: var(--r-pill); } /* main scrollable area */ .app-main { flex: 1; overflow: hidden; position: relative; } /* views */ .view { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: none; } .view.active { display: block; } .view-inner { padding: var(--sp-4) var(--sp-4) var(--sp-6); } /* bottom nav */ .app-nav { display: flex; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: var(--safe-bottom); flex-shrink: 0; z-index: 10; } .nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--nav-h); font-size: var(--fs-micro); font-weight: 500; color: var(--text-mute); transition: color var(--dur-fast) var(--ease-out); padding: 0; min-height: 44px; } .nav-btn.active { color: var(--accent); } .nav-btn:hover:not(.active) { color: var(--text-soft); } .nav-icon { width: 22px; height: 22px; } /* section headings */ .section-title { font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-mute); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); } .deck-section + .deck-section { margin-top: var(--sp-6); } /* badge */ .badge { font-size: var(--fs-micro); font-weight: 700; background: var(--accent); color: var(--on-accent); border-radius: var(--r-pill); padding: 1px 7px; letter-spacing: 0; text-transform: none; } /* status chips */ .chip { display: inline-block; font-size: var(--fs-micro); font-weight: 600; border-radius: var(--r-pill); padding: 2px 8px; text-transform: uppercase; letter-spacing: 0.4px; } .chip--feedback_ready { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-deep); } .chip--needs_permission { background: color-mix(in srgb, var(--brass) 16%, transparent); color: var(--brass); } .chip--complete { background: color-mix(in srgb, var(--text-mute) 12%, transparent); color: var(--text-mute); } .chip--in_progress { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); } .chip--pending { background: color-mix(in srgb, var(--text-soft) 10%, transparent); color: var(--text-soft); } /* needs-you cards */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); } .card--needs-you { border-left: 3px solid var(--accent); } .card-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; } .card-project { font-size: var(--fs-micro); color: var(--text-mute); font-weight: 500; } .card-tokens { font-size: var(--fs-micro); color: var(--text-mute); margin-left: auto; } .card-snippet { font-size: var(--fs-small); color: var(--text-soft); line-height: 1.45; } .card-suggestions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; } .suggestion-btn { font-size: var(--fs-small); font-weight: 500; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--text-soft); background: var(--surface-2); transition: border-color var(--dur-fast), color var(--dur-fast); min-height: 36px; } .suggestion-btn:hover { border-color: var(--accent); color: var(--accent); } /* task list */ .task-list { display: flex; flex-direction: column; gap: var(--sp-2); } .task-row { display: flex; align-items: center; gap: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); min-height: 52px; } .task-rank { font-size: var(--fs-micro); font-weight: 700; color: var(--text-mute); width: 16px; text-align: center; flex-shrink: 0; } .task-body { flex: 1; min-width: 0; } .task-id { font-size: var(--fs-micro); color: var(--text-mute); font-weight: 600; display: block; margin-bottom: 1px; } .task-title { font-size: var(--fs-small); color: var(--text); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .task-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; } /* ROI bar */ .roi-bar { display: inline-flex; align-items: center; background: var(--line); border-radius: var(--r-pill); width: 48px; height: 4px; overflow: hidden; } .roi-fill { height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width var(--dur-fast); } .roi-num { font-size: var(--fs-micro); color: var(--accent); font-weight: 700; margin-left: 4px; } /* observe view */ .observe-section + .observe-section { margin-top: var(--sp-6); } .week-summary { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); } .week-stat { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-3); text-align: center; } .week-stat-val { display: block; font-size: var(--fs-h2); font-weight: 700; color: var(--accent); letter-spacing: -0.5px; } .week-stat-label { display: block; font-size: var(--fs-micro); color: var(--text-mute); margin-top: 2px; } /* day chart */ .day-chart { display: flex; align-items: flex-end; gap: var(--sp-2); height: 72px; margin-bottom: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-3) var(--sp-1); } .day-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; } .day-bar { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; opacity: 0.8; min-height: 4px; } .day-label { font-size: var(--fs-micro); color: var(--text-mute); text-align: center; } /* KPI grid */ .kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); } .kpi-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-3); display: flex; flex-direction: column; gap: 2px; } .kpi-value { font-size: var(--fs-h2); font-weight: 700; color: var(--text); letter-spacing: -0.4px; } .kpi-label { font-size: var(--fs-small); color: var(--text-soft); font-weight: 500; } .kpi-note { font-size: var(--fs-micro); color: var(--text-mute); } /* portfolio */ .proj-list { display: flex; flex-direction: column; gap: var(--sp-3); } .proj-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); } .proj-head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); } .proj-name-wrap { flex: 1; min-width: 0; } .proj-name { display: block; font-size: var(--fs-body); font-weight: 600; color: var(--text); } .proj-desc { display: block; font-size: var(--fs-small); color: var(--text-mute); margin-top: 2px; line-height: 1.4; } .proj-roi { font-size: var(--fs-h2); font-weight: 800; color: var(--accent); letter-spacing: -0.5px; flex-shrink: 0; } .proj-progress {} .progress-bar { height: 4px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; margin-bottom: 6px; } .progress-fill { height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width var(--dur-fast); } .progress-label { font-size: var(--fs-micro); color: var(--text-mute); } /* empty state */ .empty-state { font-size: var(--fs-small); color: var(--text-mute); text-align: center; padding: var(--sp-6) 0; } .portfolio-section { /* no extra margin needed */ }