@font-face { font-family: "Inter"; src: url("fonts/inter-vf.woff2") format("woff2-variations"), url("fonts/inter-vf.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("fonts/fraunces-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("fonts/fraunces-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } :root { --bg: #fdf4ee; --bg-soft: #f3e6e7; --card: #ffffff; --ink: #355070; --muted: #6d597a; --border: #eae0e6; --accent: #e56b6f; --accent-ink: #ffffff; --accent-soft: #f9dadb; --shadow-sm: 0 1px 2px rgba(33, 28, 21, 0.06), 0 1px 1px rgba(33, 28, 21, 0.04); --shadow-md: 0 8px 24px rgba(33, 28, 21, 0.10), 0 2px 6px rgba(33, 28, 21, 0.06); --shadow-lg: 0 20px 48px rgba(33, 28, 21, 0.18), 0 6px 16px rgba(33, 28, 21, 0.10); --radius-sm: 0.875rem; --radius-md: 1.25rem; --radius-lg: 1.75rem; --font-display: "Fraunces", Georgia, serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); color-scheme: light; /* * Every dimension in this file is in rem, so this one number scales the whole UI. * Settings writes it to the element; 1 is the design baseline, tuned for a * 1920x1080 panel. Larger values trade events-per-day for legibility at distance. */ --ui-scale: 1; } html { font-size: calc(16px * var(--ui-scale)); } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; user-select: none; -webkit-font-smoothing: antialiased; } body { display: flex; flex-direction: column; background: radial-gradient(1200px 480px at 100% -10%, var(--accent-soft) 0%, transparent 60%), var(--bg); } .i { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; } /* ---------- Top bar ---------- */ .topbar { display: flex; justify-content: space-between; align-items: flex-end; padding: 1.125rem 1.5rem 0.75rem; flex-shrink: 0; } .topbar-greeting { font-size: 0.9375rem; font-weight: 600; color: var(--accent); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 2px; } .topbar-date { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.01em; } .topbar-clock { font-family: var(--font-display); font-size: 2.125rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--ink); opacity: 0.85; text-align: right; } /* Family color key: always visible (not tucked inside Calendar's own member filter), so anyone reading the wall from across the room can decode a chip's color without having to go find the legend first. */ .topbar-legend { display: flex; flex-wrap: wrap; gap: 0.1875rem 0.625rem; margin-top: 0.4375rem; max-width: 26rem; } .legend-chip { display: inline-flex; align-items: center; gap: 0.3125rem; font-size: 0.75rem; font-weight: 650; color: var(--muted); } .legend-dot { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; flex-shrink: 0; } /* Sync status: a quiet heartbeat under the clock. The wall polls for changes made from someone's phone every 15s already (see pollStateVersion) — this just makes that fact visible, so a stale-looking screen reads as "known offline" instead of "is this broken?" */ .topbar-sync { display: flex; align-items: center; justify-content: flex-end; gap: 0.375rem; margin-top: 0.1875rem; font-size: 0.75rem; font-weight: 650; color: var(--muted); } .sync-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: #7ba888; flex-shrink: 0; transition: background 0.3s; } .topbar-sync.sync-stale { color: var(--accent); } .topbar-sync.sync-stale .sync-dot { background: var(--accent); } .topbar-weather { display: flex; align-items: center; gap: 0.5rem; margin: 0 auto 0 1.5rem; border: 1px solid var(--border); background: var(--card); color: var(--ink); font-family: inherit; font-size: 1.0625rem; font-weight: 650; padding: 0.5625rem 1rem; border-radius: 999px; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform 0.15s var(--ease); } .topbar-weather:active { transform: scale(0.96); } .topbar-icon-btn { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-left: 0.75rem; border: 1px solid var(--border); background: var(--card); color: var(--ink); border-radius: 50%; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform 0.15s var(--ease); } .topbar-icon-btn:active { transform: scale(0.94); } .topbar-icon-btn .i { width: 1.25rem; height: 1.25rem; } .topbar-weather:empty { display: none; } .topbar-weather .i { font-size: 1.375rem; color: var(--accent); } /* ---------- Main view ---------- */ #view { flex: 1; overflow-y: auto; /* Bottom gutter clears the floating tab bar; it scales with everything else, so keep it just big enough or it steals rows from the calendar at large text sizes. */ padding: 0.25rem 1.75rem 6.25rem; scrollbar-width: none; } #view::-webkit-scrollbar { display: none; } .view-enter { animation: viewEnter 0.38s var(--ease); } @keyframes viewEnter { from { opacity: 0; transform: translateY(0.625rem) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---------- Tab bar ---------- */ .tabbar { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 0.375rem; box-shadow: var(--shadow-lg); z-index: 20; } .tabbar-pill { position: absolute; top: 0.375rem; bottom: 0.375rem; left: 0.375rem; width: calc(100% / 6 - 0.1875rem); background: var(--accent); border-radius: 999px; transition: transform 0.42s var(--ease), opacity 0.2s var(--ease); z-index: 0; } .tab-btn { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.5rem; background: none; border: none; font-size: 1.25rem; padding: 0.875rem 1.375rem; border-radius: 999px; color: var(--muted); cursor: pointer; transition: color 0.3s var(--ease); font-family: inherit; } /* * Labels stay visible rather than revealing only on the active tab. Everyone in the house * uses this screen, not just whoever built it, and unlabelled icons are a guessing game * from across a room. Seven labelled tabs still fit comfortably at 1920 wide. */ .tab-btn span { font-size: 0.875rem; font-weight: 700; white-space: nowrap; } .tab-btn.active { color: var(--accent-ink); } .tab-btn:active { transform: scale(0.94); } /* ---------- Calendar ---------- */ .cal-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 2px 0.75rem; } .cal-header h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; } .cal-nav-btn { display: flex; align-items: center; justify-content: center; font-size: 1.125rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform 0.15s var(--ease), background 0.2s; } .cal-nav-btn:active { transform: scale(0.9); background: var(--bg-soft); } /* * The month fills the screen rather than scrolling. A wall calendar that hides the last * week below the fold defeats the point of being a wall calendar. */ .cal-view { display: flex; flex-direction: column; height: 100%; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); /* One auto row for the day-name header, then an even share for each week. */ grid-template-rows: auto repeat(var(--cal-rows, 5), minmax(0, 1fr)); gap: 0.4375rem; flex: 1; min-height: 0; } .cal-dow { text-align: center; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-bottom: 0.5rem; } .cal-day { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.4375rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.1875rem; overflow: hidden; transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s; } .cal-day:active { transform: scale(0.96); } .cal-day:not(.empty):hover { box-shadow: var(--shadow-sm); border-color: var(--accent); } .cal-day.empty { background: transparent; border-color: transparent; cursor: default; } /* * A full 2rem circle on every day cost more vertical space than an event chip, on the one * screen whose job is showing events. Ordinary days are now just a number; only today * gets the filled pill, which is the only day that needs finding at a glance anyway. */ .cal-day-num { font-size: 1.0625rem; font-weight: 700; line-height: 1.15; min-width: 1.5rem; padding: 0.0625rem 0.25rem; flex-shrink: 0; align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; } .cal-day.today { position: relative; border-width: 2px; border-color: var(--accent); background: var(--accent-soft); } .cal-day.today .cal-day-num { background: var(--accent); color: var(--accent-ink); } /* A small flag beats a bigger tint for finding "today" at a glance from across the room — the tint alone reads about the same as an empty cell once every day this month has an event chip or two sitting on it. */ .cal-day-today-flag { position: absolute; top: -1px; right: -1px; background: var(--accent); color: var(--accent-ink); font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.1875rem 0.4375rem; border-radius: 0 var(--radius-sm) 0 0.625rem; } .cal-event-chip { font-size: 0.875rem; font-weight: 700; line-height: 1.2; border-radius: 999px; padding: 0.1875rem 0.5625rem; color: #fff; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; box-shadow: var(--shadow-sm); } .cal-more { font-size: 0.75rem; font-weight: 700; color: var(--muted); padding-left: 0.375rem; flex-shrink: 0; } .hidden-chip { display: none; } /* ---------- Calendar: member filter ---------- */ .cal-filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-bottom: 0.75rem; } /* The calendar's own member filter, as opposed to the same .cal-filter-row/chip markup reused for modal pickers (member/category fields) — those want to wrap in a modal; this one is competing with the calendar grid for vertical space, so it stays to one scrollable line instead, and its chips run a little smaller. */ .cal-filter-row-scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: none; } .cal-filter-row-scroll::-webkit-scrollbar { display: none; } .cal-filter-row-scroll .cal-filter-chip { flex-shrink: 0; padding: 0.375rem 0.75rem; font-size: 0.875rem; } .cal-filter-chip { display: inline-flex; align-items: center; gap: 0.4375rem; font-family: inherit; font-size: 0.9375rem; font-weight: 650; color: var(--ink); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 0.4375rem 0.875rem; cursor: pointer; transition: transform 0.15s var(--ease), box-shadow 0.2s; } .cal-filter-chip:active { transform: scale(0.96); } .cal-filter-chip.active { box-shadow: var(--shadow-sm); } .cal-filter-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; flex-shrink: 0; } /* ---------- Calendar: mode switch, week and day ---------- */ .cal-modes { display: flex; gap: 0.25rem; /* Solid fallback first: color-mix() needs Safari 16.2 / Chrome 111. The wall display is often an older tablet, where the unsupported declaration would otherwise be dropped and leave this control with no track behind it at all. */ background: var(--bg-soft); background: color-mix(in srgb, var(--border) 55%, transparent); border-radius: 999px; padding: 0.25rem; margin-left: auto; margin-right: 1rem; } .cal-mode { border: none; background: none; font-family: inherit; font-size: 1rem; font-weight: 650; color: var(--muted); padding: 0.5rem 1.125rem; border-radius: 999px; cursor: pointer; transition: background 0.2s, color 0.2s; } .cal-mode.active { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); } .week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4375rem; flex: 1; min-height: 0; } .week-col { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; flex-direction: column; min-height: 0; cursor: pointer; } .week-col.today { border-color: var(--accent); background: var(--accent-soft); } .week-col-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0.625rem 0.75rem 0.5rem; border-bottom: 1px solid var(--border); flex: none; } .week-dow { font-size: 0.8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .week-num { font-size: 1.25rem; font-weight: 700; } .week-col.today .week-num { color: var(--accent); } .week-col-body { overflow-y: auto; scrollbar-width: none; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.375rem; } .week-col-body::-webkit-scrollbar { display: none; } .week-event { border-left: 0.25rem solid var(--border); padding: 0.25rem 0.5rem; background: var(--bg-soft); border-radius: 0.375rem; cursor: pointer; } .week-event-time { font-size: 0.75rem; font-weight: 700; color: var(--muted); } .week-event-title { font-size: 0.9375rem; font-weight: 650; line-height: 1.25; } .week-event-who { font-size: 0.75rem; color: var(--muted); } .week-empty { color: var(--border); text-align: center; padding-top: 0.5rem; } .day-view { overflow-y: auto; scrollbar-width: none; flex: 1; min-height: 0; } .day-view::-webkit-scrollbar { display: none; } .day-row { display: flex; align-items: flex-start; gap: 1rem; padding: 1.125rem 0.25rem; border-bottom: 1px solid var(--border); cursor: pointer; } .day-row:last-child { border-bottom: none; } .day-time { width: 11rem; flex: none; font-size: 1.0625rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .day-stripe { width: 0.3125rem; align-self: stretch; border-radius: 0.1875rem; flex: none; } .day-title { font-size: 1.375rem; font-weight: 650; line-height: 1.2; } .day-notes { margin-top: 0.25rem; } /* ---------- Cards / lists ---------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.375rem 1.125rem; box-shadow: var(--shadow-sm); margin-bottom: 0.75rem; } .list-row { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 2px; border-bottom: 1px solid var(--border); } .list-row:last-child { border-bottom: none; } .dot { width: 0.8125rem; height: 0.8125rem; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px var(--bg-soft); } .avatar { width: 2.375rem; height: 2.375rem; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.08); box-shadow: var(--shadow-sm); } .avatar.sm { width: 1.375rem; height: 1.375rem; font-size: 0.6875rem; } .grow { flex: 1; min-width: 0; } .row-title { font-size: 1rem; font-weight: 600; } .muted { color: var(--muted); font-size: 0.8125rem; font-weight: 500; } button.primary { background: var(--accent); color: var(--accent-ink); border: none; border-radius: 0.75rem; padding: 0.9375rem 1.375rem; font-size: 1rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: transform 0.15s var(--ease), filter 0.2s; box-shadow: var(--shadow-sm); } button.primary:active { transform: scale(0.97); filter: brightness(0.95); } button.icon-btn { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: none; border: none; font-size: 1.125rem; border-radius: 0.625rem; cursor: pointer; color: var(--muted); transition: background 0.2s, color 0.2s, transform 0.15s var(--ease); font-family: inherit; } button.icon-btn:active { transform: scale(0.9); background: var(--bg-soft); color: var(--accent); } label.field-label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 2px 0.375rem; } .swatch-picker { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 1rem; } .swatch-opt { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0.1875rem solid transparent; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .swatch-opt.selected { border-color: var(--ink); } .field-row-inline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } input[type="text"], input[type="date"], input[type="time"], select, textarea { width: 100%; padding: 0.8125rem 0.875rem; font-size: 1rem; font-family: inherit; color: var(--ink); background: var(--bg-soft); border: 1.5px solid transparent; border-radius: var(--radius-sm); margin-bottom: 0.875rem; transition: border-color 0.2s, background 0.2s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background: var(--card); } .checkbox { width: 1.875rem; height: 1.875rem; border-radius: 0.5625rem; border: 2px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: transparent; transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s; } .checkbox .i { width: 1rem; height: 1rem; } .checkbox:active { transform: scale(0.88); } .checkbox.checked { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); animation: pop 0.32s var(--ease); } @keyframes pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } } .done-text { text-decoration: line-through; color: var(--muted); } /* ---------- Crop (landscape, required before any photo upload completes) ---------- */ .crop-overlay { position: fixed; inset: 0; z-index: 80; background: #000; display: flex; flex-direction: column; color: #fff; animation: fadeIn 0.2s var(--ease); } .crop-header { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.5rem 2rem; } .crop-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; text-align: center; } .crop-cancel, .crop-use { border: none; background: none; font-family: inherit; font-size: 1.0625rem; color: #fff; padding: 0.5rem; cursor: pointer; display: flex; align-items: center; gap: 0.375rem; } .crop-cancel { justify-self: start; opacity: 0.8; } .crop-use { justify-self: end; font-weight: 650; color: var(--accent); background: rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 0.625rem 1.5rem; } .crop-use:active { transform: scale(0.97); } /* The viewport's exact pixel size is computed in JS (see openCropModal), not CSS — see the equivalent note in the mobile app's components/crop.js for why. */ .crop-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; } .crop-viewport { position: relative; overflow: hidden; background: #111; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .crop-image { position: absolute; top: 0; left: 0; touch-action: none; user-select: none; cursor: grab; } .crop-image:active { cursor: grabbing; } .crop-controls { flex: none; display: flex; align-items: center; gap: 1rem; max-width: 34rem; margin: 0 auto; width: 100%; padding: 1.5rem 2rem 2.5rem; } .crop-zoom-icon { color: rgba(255, 255, 255, 0.6); flex: none; } .crop-zoom-icon-sm { font-size: 1rem; } .crop-zoom-icon-lg { font-size: 1.625rem; } .crop-zoom { flex: 1; accent-color: var(--accent); height: 2rem; } /* ---------- Photos ---------- */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr)); gap: 0.75rem; padding-top: 1rem; } .photo-thumb { aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-soft); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform 0.2s var(--ease); } .photo-thumb:active { transform: scale(0.95); } .photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .lightbox { position: fixed; inset: 0; background: rgba(15, 12, 8, 0.92); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 50; animation: fadeIn 0.25s var(--ease); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .lightbox img { max-width: 92%; max-height: 92%; border-radius: 0.875rem; box-shadow: var(--shadow-lg); animation: viewEnter 0.3s var(--ease); } .lightbox-close { position: absolute; top: 1.5rem; right: 1.625rem; width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: rgba(255,255,255,0.12); border: none; cursor: pointer; } .lightbox-close .i { width: 1.25rem; height: 1.25rem; } /* ---------- Small-screen warning ---------- */ /* * z-index sits above the ambient photo screen (90) so it stays reachable no matter what * the wall was doing when this screen turned out to be too small for it. */ .small-screen-warning { position: fixed; top: 0; left: 0; right: 0; z-index: 95; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: var(--accent); color: var(--accent-ink); font-size: 0.875rem; font-weight: 600; } .small-screen-warning[hidden] { display: none; } .small-screen-actions { display: flex; gap: 0.5rem; flex-shrink: 0; } .small-screen-actions button { border: none; border-radius: 0.5rem; padding: 0.5rem 0.875rem; font-family: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; } .small-screen-actions .primary { background: var(--accent-ink); color: var(--accent); } .small-screen-actions #smallScreenDismiss { background: transparent; color: var(--accent-ink); text-decoration: underline; } /* ---------- Weather: full breakdown overlay ---------- */ /* * z-index sits above modals/keyboard but below the ambient screen (90), so an idle * timeout left with this open still reclaims the screen rather than getting stuck. */ .weather-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(15, 12, 20, 0.6); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 2.5rem; } .weather-overlay.weather-overlay-visible { display: flex; animation: fadeIn 0.2s var(--ease); } .weather-overlay-close { position: fixed; top: 2rem; right: 2.25rem; width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, 0.14); border: none; cursor: pointer; z-index: 1; } .weather-overlay-close .i { width: 1.25rem; height: 1.25rem; } .weather-overlay-inner { background: var(--card); border-radius: var(--radius-lg); padding: 2rem 2.25rem 1.5rem; max-width: 56.25rem; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: viewEnter 0.25s var(--ease); } .weather-overlay-days { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); color: var(--ink); } .w-day-head { display: flex; align-items: center; gap: 0.5rem; } .w-day-icon { font-size: 1.75rem; } .w-day-label { font-weight: 650; font-size: 1.0625rem; } .w-day-hilo { margin-left: auto; font-size: 1.0625rem; opacity: 0.7; font-variant-numeric: tabular-nums; } .w-buckets { display: flex; gap: 0.75rem; margin-top: 0.625rem; } .w-bucket { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; flex: 1; } .w-bucket-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; } .w-bucket-icon { font-size: 1.25rem; margin: 0.125rem 0; } .w-bucket-temp { font-size: 1.125rem; font-weight: 650; font-variant-numeric: tabular-nums; } .weather-overlay-section { margin-top: 1.5rem; } .weather-overlay-section h4 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; margin: 0 0 0.875rem; } .wh-strip { display: flex; gap: 0.25rem; overflow-x: auto; padding-bottom: 0.25rem; } .wh-hour { flex: none; width: 4.75rem; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem 0.25rem; border-radius: var(--radius-sm); background: var(--bg-soft); } .wh-time { font-size: 0.8125rem; font-weight: 650; color: var(--muted); } .wh-icon { font-size: 1.375rem; color: var(--ink); } .wh-temp { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; } .wd-list { display: flex; flex-direction: column; } .wd-row { display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--border); } .wd-row:last-child { border-bottom: none; } .wd-label { width: 6rem; flex-shrink: 0; font-weight: 650; } .wd-icon { font-size: 1.25rem; color: var(--ink); flex-shrink: 0; } .wd-condition { flex: 1; color: var(--muted); font-size: 0.9375rem; } .wd-precip { width: 3rem; flex-shrink: 0; text-align: right; font-size: 0.8125rem; color: var(--muted); } .wd-hilo { width: 5.5rem; flex-shrink: 0; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; } .weather-overlay-updated { margin-top: 1.5rem; font-size: 0.8125rem; color: var(--muted); text-align: center; } .weather-overlay-empty { display: flex; flex-direction: column; align-items: center; gap: 0.875rem; padding: 3rem; color: var(--muted); } .weather-overlay-empty .i { font-size: 2.75rem; } /* ---------- Whiteboard ---------- */ /* A real full-screen surface (unlike the centered weather-overlay card) — the drawing itself is the content, not a document sitting inside a frame. */ .whiteboard-overlay { position: fixed; inset: 0; z-index: 80; background: #fff; display: none; flex-direction: column; } .whiteboard-overlay.whiteboard-visible { display: flex; animation: fadeIn 0.2s var(--ease); } .whiteboard-canvas-wrap { flex: 1; position: relative; min-height: 0; touch-action: none; } #whiteboardCanvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; } .whiteboard-toolbar { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem; background: var(--card); border-top: 1px solid var(--border); flex-wrap: wrap; } .whiteboard-swatches, .whiteboard-sizes { display: flex; gap: 0.625rem; } .whiteboard-color { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; flex: none; } .whiteboard-color.selected { border-color: var(--ink); } .whiteboard-size { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; } .whiteboard-size.selected { background: var(--accent-soft); border-color: var(--accent); } .whiteboard-size-dot { border-radius: 50%; background: var(--ink); } .whiteboard-eraser { font-family: inherit; font-size: 0.9375rem; font-weight: 650; padding: 0.5625rem 1.125rem; border: 1px solid var(--border); background: var(--bg-soft); color: var(--ink); border-radius: 999px; cursor: pointer; } .whiteboard-eraser.selected { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } /* ---------- Modal ---------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(20, 16, 10, 0.45); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; z-index: 40; animation: fadeIn 0.2s var(--ease); } .modal { background: var(--card); width: 100%; max-width: 30rem; border-radius: 1.75rem 1.75rem 0 0; padding: 0.875rem 1.625rem 1.75rem; max-height: 82vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: sheetUp 0.38s var(--ease); } @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .modal-handle { width: 2.5rem; height: 0.3125rem; border-radius: 999px; background: var(--border); margin: 0 auto 1.125rem; } .modal h3 { font-family: var(--font-display); margin: 0 0 1.125rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; } .modal-actions { display: flex; gap: 0.625rem; margin-top: 0.25rem; } .modal-actions .primary { flex: 1; } /* ---------- FAB ---------- */ .fab { position: fixed; bottom: 6.625rem; right: 1.75rem; width: 3.75rem; height: 3.75rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); border: none; box-shadow: var(--shadow-lg); cursor: pointer; z-index: 10; transition: transform 0.2s var(--ease); } .fab .i { width: 1.625rem; height: 1.625rem; } .fab:active { transform: scale(0.9) rotate(90deg); } /* ---------- Lists (groceries) ---------- */ /* * Lists get a rail down the side rather than a row of small pills. On a 21.5" wall the * pills were unreadable and wasted the width; full-width rows give each list a proper * touch target and leave the rest of the screen for the items themselves. */ .grocery-layout { display: grid; grid-template-columns: minmax(15rem, 20%) 1fr; gap: 1.5rem; height: 100%; padding-top: 0.75rem; } .list-rail { display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; scrollbar-width: none; } .list-rail::-webkit-scrollbar { display: none; } .grocery-panel { overflow-y: auto; scrollbar-width: none; min-width: 0; } .grocery-panel::-webkit-scrollbar { display: none; } .list-tab { display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left; border: 1px solid var(--border); background: var(--card); color: var(--ink); font-family: inherit; font-size: 1.125rem; font-weight: 650; padding: 0.9375rem 1.125rem; border-radius: var(--radius-md); cursor: pointer; box-shadow: var(--shadow-sm); flex: none; transition: transform 0.15s var(--ease), background 0.2s, color 0.2s, border-color 0.2s; } .list-tab:active { transform: scale(0.97); } .list-tab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .list-tab-emoji { font-size: 1.625rem; line-height: 1; flex: none; } .list-tab-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .list-tab-count { background: var(--bg-soft); color: var(--ink); border-radius: 999px; padding: 0.125rem 0.625rem; font-size: 0.9375rem; font-weight: 700; flex: none; } .list-tab.active .list-tab-count { background: rgba(255, 255, 255, 0.28); color: var(--accent-ink); } /* A wall display has the width for two columns; one column wastes most of the screen. */ .grocery-columns { column-count: 2; column-gap: 1.25rem; } .grocery-group { break-inside: avoid; margin-bottom: 1.125rem; } .grocery-cat { font-size: 0.8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin: 0 0.25rem 0.375rem; } /* Only a real category group header is renameable — the "Got it"/"Due today" headers reuse this same class for its typography but aren't tappable. */ .grocery-cat[data-category] { cursor: pointer; } /* ---------- Meal plan ---------- */ .meal-day-card { padding: 0.875rem 1.125rem; } .meal-day-card.today { border-color: var(--accent); background: var(--accent-soft); } .meal-day-head { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.25rem 2px 0.5rem; } .meal-day-name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; } .meal-empty { padding: 0.375rem 2px 0.75rem; } .meal-empty-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 2px 0.75rem; color: var(--muted); font-size: 0.875rem; font-weight: 550; } .meal-empty-row .i { width: 1.125rem; height: 1.125rem; opacity: 0.55; flex-shrink: 0; } .meal-type-tag { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 0.3125rem 0.625rem; flex-shrink: 0; } /* ---------- Ambient / idle dashboard ---------- */ .ambient { position: fixed; inset: 0; z-index: 90; background: linear-gradient(160deg, #355070, #22334a); overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 1s var(--ease); } .ambient.ambient-visible { opacity: 1; pointer-events: auto; } /* * Each photo is drawn twice: a blurred, dimmed copy cropped to fill the screen, and the * real photo scaled to fit inside it. New uploads are cropped to the screen's own 16:9, * so the sharp copy fills edge-to-edge with no blur showing at all — this pairing exists * for anything that isn't exactly 16:9 (older photos already in the library, mainly), * where cropping-to-fill alone would cut off part of the image and letterboxing alone * would leave bare bars. Together, whatever the source ratio, there's no dead space. */ .ambient-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; } .ambient-layer.ambient-photo-visible { opacity: 1; } .ambient-photo-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(38px) saturate(1.2) brightness(0.5); /* Overscan so the blur doesn't bleed transparent edges into frame */ transform: scale(1.15); } .ambient-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* Settings > Photo display > Fill screen */ .ambient.fill-photos .ambient-photo { object-fit: cover; } .ambient.fill-photos .ambient-photo-blur { display: none; } /* * Home: the landing tab, and where tapping the photo frame lands you. An asymmetric * widget grid (iOS StandBy is the reference: cards sized by importance, one hero number * or line each) — weather is the tall card since an icon + temperature reads at a glance; * events and tasks sit beside it; "just added" runs wide along the bottom. */ .home-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: auto auto; gap: 1.25rem; margin-top: 0.5rem; } .home-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.5rem 1.75rem; color: var(--ink); } .home-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .home-card-head h3 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; margin: 0; } .home-card-weather { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; cursor: pointer; transition: background 0.15s var(--ease); } .home-card-weather:active { background: var(--bg-soft); } .home-card-events { grid-column: 2; grid-row: 1; } .home-card-tasks { grid-column: 3; grid-row: 1; } .home-card-added { grid-column: 2 / 4; grid-row: 2; } .home-day-toggle { padding: 0.1875rem; margin: 0; } .home-day-toggle .cal-mode { font-size: 0.875rem; padding: 0.4375rem 0.875rem; } .ja-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.3125rem 0; font-size: 0.9375rem; font-weight: 550; } .ja-emoji { font-size: 1.0625rem; line-height: 1; flex-shrink: 0; } .ja-time { font-size: 0.75rem; color: var(--muted); font-weight: 600; flex-shrink: 0; } .widget-label { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.65; margin-bottom: 0.5rem; } .widget-empty { font-size: 1.0625rem; font-weight: 600; opacity: 0.75; } .widget-more { margin-top: 0.625rem; font-size: 0.8125rem; font-weight: 650; opacity: 0.7; } /* ---- Weather widget: icon + temperature is the hero, buckets are the detail ---- */ .w-hero { display: flex; align-items: center; gap: 0.875rem; } .w-hero-icon { font-size: 3.25rem; } .w-hero-temp { font-family: var(--font-display); font-size: 3rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } .w-hero-sep { opacity: 0.5; margin: 0 0.125rem; font-weight: 400; } .w-hero-condition { margin-top: 0.375rem; font-size: 1.125rem; font-weight: 600; opacity: 0.85; } /* Home's weather card is roomier than the overlay's side-by-side pair, so its buckets get a divider and slightly larger type — scoped here rather than redefining the base .w-bucket* classes a second time, which would let source order silently decide which copy (and which hardcoded color) wins in each context. */ .home-card-weather .w-buckets { margin-top: 1.125rem; padding-top: 1.125rem; border-top: 1px solid var(--border); } .home-card-weather .w-bucket-icon { font-size: 1.375rem; } .home-card-weather .w-bucket-temp { font-size: 1.125rem; } /* ---- Events widget: time + title of the next thing is the hero ---- */ .ev-hero-time { font-size: 0.9375rem; font-weight: 700; opacity: 0.7; font-variant-numeric: tabular-nums; } .ev-hero-title { margin-top: 0.1875rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.15; } .ev-hero-who { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.4375rem; font-size: 0.9375rem; font-weight: 550; opacity: 0.85; } /* ---- Tasks widget: the count is the hero ---- */ .tk-hero-row { display: flex; align-items: baseline; gap: 0.5rem; } .tk-hero-count { font-family: var(--font-display); font-size: 2.75rem; font-weight: 600; line-height: 1; } .tk-hero-unit { font-size: 1.0625rem; font-weight: 600; opacity: 0.8; } .tk-hero-next { margin-top: 0.375rem; font-size: 1rem; font-weight: 550; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- On-screen keyboard ---------- */ :root { --osk-height: 18.875rem; } .modal-backdrop { transition: padding-bottom 0.3s var(--ease); } body.osk-open .modal-backdrop { padding-bottom: var(--osk-height); } .osk { position: fixed; left: 0; right: 0; bottom: 0; height: var(--osk-height); background: var(--card); border-top: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 0.625rem 0.5rem; display: flex; flex-direction: column; justify-content: center; gap: 0.375rem; z-index: 60; transform: translateY(100%); transition: transform 0.3s var(--ease); } .osk.osk-visible { transform: translateY(0); } .osk-row { display: flex; gap: 0.375rem; } .osk-key { flex: 1; height: 3.5rem; border-radius: 0.625rem; border: 1px solid var(--border); background: var(--bg-soft); color: var(--ink); font-family: inherit; font-size: 1.125rem; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.1s var(--ease), background 0.15s; } .osk-key:active { transform: scale(0.94); background: var(--accent-soft); } .osk-key.osk-active { background: var(--accent); color: var(--accent-ink); } .osk-icon svg { width: 1.25rem; height: 1.25rem; } .osk-wide { flex: 1.6; } .osk-space { flex: 5; } .osk-done { flex: 1.8; background: var(--accent); color: var(--accent-ink); font-weight: 700; } /* ---------- Display settings ---------- */ .settings-card { margin-top: 1rem; padding: 0.5rem 1.5rem 1.5rem; max-width: 56rem; } .settings-block { padding: 1.25rem 0; border-bottom: 1px solid var(--border); } .settings-block:last-child { border-bottom: none; } .settings-label { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; } .settings-hint { margin-top: 0.25rem; margin-bottom: 0.875rem; } .opt-row { display: flex; flex-wrap: wrap; gap: 0.625rem; } .opt { border: 1.5px solid var(--border); background: var(--card); color: var(--ink); font-family: inherit; font-size: 1rem; font-weight: 600; padding: 0.875rem 1.375rem; border-radius: 999px; cursor: pointer; transition: transform 0.15s var(--ease), background 0.2s, border-color 0.2s, color 0.2s; } .opt:active { transform: scale(0.95); } .opt-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); } /* ---------- Empty state ---------- */ .empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.875rem; text-align: center; color: var(--muted); padding: 5.625rem 1.25rem 2.5rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; } .empty-state .i { width: 2.75rem; height: 2.75rem; color: var(--border); }