/* ========================================================================== Life tracker — design mock Look-only. No data, no storage. Everything themeable lives in :root below. ========================================================================== */ :root { /* --- Colour ---------------------------------------------------------- Mostly monochrome. ONE accent, used in only three places on the page. */ --bg: #F6F5F3; /* very light warm grey — the page behind the cards */ --card: #FFFFFF; /* cards are the only white on the page */ --ink: #17171A; /* near-black. Never pure #000 — it looks harsh */ --ink-muted: #8A8A93; /* subtext, units, meta */ --hairline: #ECEBE8; /* 1px dividers and light borders */ --sunken: #F4F3F0; /* inset fields / icon tiles — slightly darker than card */ --accent: #2F6B4F; /* muted forest green */ --accent-soft: #E9F0EC; /* barely-there accent tint for the "done" row */ /* --- Radius ---------------------------------------------------------- */ --r-card: 20px; --r-tile: 12px; --r-pill: 999px; /* anything this big is a perfect pill */ /* --- Spacing scale (4px steps) --------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; /* --- Depth & type ---------------------------------------------------- Two shadow layers: a tight one for "contact", a wide soft one for lift. Both very low opacity — this is what makes a card float instead of looking like a box with a border. */ --shadow: 0 1px 2px rgba(16, 16, 20, 0.04), 0 8px 24px rgba(16, 16, 20, 0.06); --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* --- Dark theme ------------------------------------------------------- To switch: uncomment this block AND add data-theme="dark" to . Nothing else in the file needs to change. [data-theme="dark"] { --bg: #111113; --card: #191A1D; --ink: #F2F2F0; --ink-muted: #8E8E96; --hairline: #26272B; --sunken: #202124; --accent: #5E9E7C; --accent-soft: #1D2A23; --shadow: none; } */ /* ========================================================================== Base ========================================================================== */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; } /* Mobile-first single column. On desktop it just centres — no extra layout. */ .wrap { max-width: 420px; margin: 0 auto; padding: var(--s-6) var(--s-4) 64px; } /* Give every direct child of the page the same rhythm. Consistent gaps do more for "calm" than any individual style choice. */ .wrap > * + * { margin-top: var(--s-4); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ========================================================================== Card — the one repeating container ========================================================================== */ .card { background: var(--card); border-radius: var(--r-card); padding: var(--s-5); box-shadow: var(--shadow); } /* Small medium-weight label that sits above a card's content. */ .card__label { margin: 0; font-size: 13px; font-weight: 500; color: var(--ink-muted); letter-spacing: 0.01em; } .card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); } /* ========================================================================== Page header (not a card) ========================================================================== */ .page-head { padding: var(--s-1) var(--s-1) var(--s-2); } .page-head__date { margin: 0; font-size: 13px; font-weight: 500; color: var(--ink-muted); } .page-head__title { margin: var(--s-1) 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; } /* ========================================================================== Streak — the single loudest thing on the page ========================================================================== */ .streak__figure { display: flex; align-items: baseline; gap: var(--s-2); margin: var(--s-1) 0 var(--s-2); } /* Big, heavy, and tightly tracked. Large type needs NEGATIVE letter-spacing or the gaps between characters start to look like holes. */ .streak__number { font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -0.035em; } .streak__unit { font-size: 15px; font-weight: 500; color: var(--ink-muted); } .streak__note { margin: 0 0 var(--s-5); font-size: 13px; color: var(--ink-muted); } /* ========================================================================== Chip — rounded pill, coloured dot, short label ========================================================================== */ .chip { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px var(--s-3); border-radius: var(--r-pill); background: var(--sunken); font-size: 12px; font-weight: 500; color: var(--ink); white-space: nowrap; } .chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); /* accent use #1 */ } /* ========================================================================== Buttons — always fully-rounded pills, always a comfortable tap target ========================================================================== */ .btn-row { display: flex; gap: var(--s-2); } .btn { flex: 1; min-height: 44px; /* 44px is the smallest comfortable tap size */ padding: 0 var(--s-5); border: 1px solid transparent; border-radius: var(--r-pill); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; } /* Solid, near-black. The primary action. */ .btn--solid { background: var(--ink); color: #fff; } /* Light + outlined. Same size, quieter voice. */ .btn--ghost { background: transparent; border-color: var(--hairline); color: var(--ink); } /* Doesn't stretch — used next to an input. */ .btn--tight { flex: 0 0 auto; } /* ========================================================================== Segmented control (Today / Tomorrow) — static in this mock ========================================================================== */ .segmented { display: inline-flex; gap: var(--s-1); padding: var(--s-1); border-radius: var(--r-pill); background: var(--sunken); } /* These are real